SynthCity - An Infinite Procedural Cyberpunk City

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!

jeff-beene.com/synthcity

“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.

Future Plans

  • 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!

19 Likes

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

1 Like

v1.0.4

  • Added master volume control (plus/minus keys)
  • Added min/max altitude for car
  • Added chime sound for autopilot engage/disengage

Source code on GitHub!

github.com/jeffbeene/synthcity

5 Likes

freakin awesome work man. A+++

2 Likes

masterpiece!!! respect, sir.

1 Like

look smart.
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 :rofl:

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.

1 Like

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!

1 Like

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!

It’s funny to play with.