SynthCity - An Interactive Audiovisual Experience
After working on this off and on for over a year, I think it’s finally ready to share. Sit back, relax and enjoy!
“SynthCity” is an interactive audiovisual experience that I started working on last year as a passion project. It’s a culmination of all my favorite things - web development, game development, procedural generation, sound design, cyberpunk and more…
Zen out while autopilot takes you through the city, take the wheel and fly, or explore the endless world in “freeroam” mode - all while enjoying a curated synthwave playlist.
Left to my own devices I probably would have continued working on this for years without ever showing anyone, but at the urging of a few friends I decided to wrap it up… for now.
- Upload source to Github!
- Mobile support
- More graphics settings
- Interactive cockpit
- VR support
- More assets!!!
Questions? Comments? Feedback?
I’d love to hear your feedback, issues you encountered, feature requests, etc. And I’m more than happy to answer any questions about how I made it!
That’s so cool.I mean ,you not only have great technical skills, but also have a good taste.the city and UI are so beautiful
i look forward for more ,especially the VR support
- Added master volume control (plus/minus keys)
- Added min/max altitude for car
- Added chime sound for autopilot engage/disengage
Source code on GitHub!
freakin awesome work man. A+++
masterpiece!!! respect, sir.
I don’t have the option to change the settings without having to reload the page.
Is it not possible to steer in drive mode? - I always drive into a building.
Yes, currently you have to refresh the page to change settings. And you can disable “autopilot” by pressing space, but it’s very easy to crash. I’ll make the car bounce off of buildings instead of crashing/restarting in the next update!
This is amazing. It looks gorgeous on my external monitor. Come to think of it, if I had a spare monitor I’d probably leave this up on autopilot as I worked.
One of the reasons I’ve been drawn into 3D development is the ability to create immersive worlds like this one. The only complaint I have is that I was planning to create an immersive synthwave experience as my first big Three.js project, and this is exactly that
Regardless, I will definitely use this as a benchmark when building my own project. This is asking you to do extra work, but it would also be interesting to hear the bullet points of how you approached this project, beyond the source code itself.
Thank you! I’m working on some exciting new updates to polish it up and add more detail, but I’ll definitely consider doing a more in-depth writeup after that on Medium or something. There are some great core concepts I’ve learned over the years that I think would help others create procedural worlds more effectively/quickly. In the meantime you can keep track of updates by starring the repo on Github!
Awesome - I missed the Github link earlier. Starred, and will definitely be poking around to see how everything works.
Damn, super pretty and thanks for sharing!