Procedural City, Part 11: Demonstration Video

By Shamus Posted Saturday May 2, 2009

Filed under: Programming, Projects 93 comments

Here are the key points of the project, distilled into a short video.


Link (YouTube)

Seeing the thing in motion really is more exciting than screenshots.

I know in the video I claimed it was released as source and a screensaver , but that step has been delayed and I’m to lazy to re-cut the video.

Soon.

Note that the stuttering apparent in the video is not from the program itself. It was running at 200-300fps with no slowdowns when I made this video. The stuttering either happened during video capture or during the encoding process, which I was obliged to do twice. (Cheapo Windows Movie Maker doesn’t support multiple audio tracks, so to get the typing sound and the music in there together I had to encode the entire movie with just the typing, then re-import that movie and add the music. There were probably better ways to have solved this, but all of them would have taken longer and I’d already spent more time on this than I’d intended.

The story of the cool cam is one many engineers (and by extension, programmers) need to take to heart, that marketing does not always deserve the scorn we give it, and that a little polish in presentation can go a long way to covering up the lack of polish in everything else. I applied that lesson to great effect here. The animated camera does a great job of showing off the cool stuff and hiding the rough edges.

 


From The Archives:
 

93 thoughts on “Procedural City, Part 11: Demonstration Video

  1. Jattenalle says:

    Very nice Shamus

    One thing that struck me though, the car lights.. I think they would have looked better as billboards always facing the camera.
    That way they wouldn’t be reduced to thin lines when viewed at an angle.
    Something to consider if you ever go back to this :)

    But for 50-odd hours, not bad at all

  2. gebiv says:

    When do we get to blow it up?

  3. Kdansky says:

    Looks awesome! I love procedurally generated content.

  4. Fenix says:

    Nice… That is all.

  5. Mike says:

    I’m looking for antennae (some blinking) and water towers on top of the buildings. Looks good.

  6. Ermel says:

    Awesome! I want my screensaver! Pretty please!

    One tiny thing that might be worth fixing before release: the car taillights are way too bright. Looks like everyone is riding their brakes.

    But that’s really all I can think of to bitch about (very very gently, mind you). Outstanding work!

  7. Steve says:

    Very impressive! I’ve found this series really interesting – might have to play around with procedural content myself…

  8. Wow, looks awesome! :)
    Congratulations.

  9. Matt` says:

    Would creating a Godzilla mode, where the buildings crumble before you as you move the camera, come under the category of “more effort than it’s worth”?

    I’m hoping it’s not, but expecting that it is ;)

  10. Henebry says:

    This is brilliant. You show how much can be done by one guy, working alone. Makes me wonder if you could add a simple physics engine and create a basic game that involved flying through the city without hitting anything.

  11. Julian says:

    I love the “related videos” for your video. Specially how they’re completely UNrelated.

  12. Lupis42 says:

    This is highly awesome, and watching the video has me thinking about the Arthur C. Clark saying. You know, “Any sufficiently advanced tech is indistinguishable from magic”?

    I know, because you’ve documented it, that this is the result of many hours of thought, effort, testing, revision, and general hard work, informed by acquired knowledge and ability, but when you show the video without the project documentation, and the creative process is sped up like that, it looks like wizardry.

    I take my metaphorical hat of to you.

  13. gorbashin says:

    A towering triumph. Nicely done!

  14. Burton Choinski says:

    I would so tottaly love this as a screen saver for my mac at work.

    Would be even cooler if it could span my two monitors instead of different scenes on each one. :}

  15. Carra says:

    Looks very good indeed, I might use it as a screensaver. Only a few minor remarks:
    -> The lights look a bit weird at ground level.
    -> The cars also look a bit weird. Not sure what it is: their constant speeds instead of accelerating? The fact that it’s only lights?

  16. Dustin says:

    “…I'm to lazy to re-cut the video.”

    Grammar-man, to the rescue!

    “…I'm too lazy to re-cut the video.”

    Up, up and away!

  17. Dustin says:

    Also, good job Shamus, looks incredible, better than I had hoped for.

    Question: what programming language is the source code in? As Burton Choinski mentioned above in the comments, I’d love to use this screensaver on my Mac. Sadly, a windows .scr file would do me no good to this end, but the source code may (depending on the language you coded in). I’d be willing to invest some time to port it to a Mac screensaver file if possible, it really is stunning work.

  18. SatansBestBuddy says:

    Why do you have a full movie called Behind Green Lights as related content?

    Fan of 1940’s classics, are we?

    Anyway, excellent job, and if I used screensavers I’d totally use that one.

    Also, it’s pretty fun to watch the fly bys and try to guess, “which building is most likely to be home to a supervillian?”

    My money’s on NanoNet, those guys are never doing anything good with nano…

  19. Mari says:

    Wow! I want it. I want it now. I’ve grown bored as heck with most of my screen savers but it’s such a pain to get new ones because they’re so often a distribution source for malware and I get sick of sifting through. I think I’ll trust you, though, which means I’ll be downloading a copy as soon as you get it ready to distribute.

  20. Rob says:

    Shamus,

    I mainly lurk here, have for years but had to comment to this great great series. Very educational. I look forward to studying the code. And I think the city turned out great.

    Do you think that putting blinking aircraft warning lights on the taller skyscrapers would add to this project? I think it would add some visual detail at the top to balance some of the action going on below with the cars.

    Thanks again for doing this. I hope you’ll take on other projects like this in the future.

    Rob

  21. Octal says:

    Now that looks amazingly cool. Nice job!

  22. Neil Polenske says:

    Alright, I’m looking at it right now as I type. Hey! Whar’d all that extra crap ya put in ya didn’t talk about come from? Ya holding out on us man? I mean seriously, how incon—

    ….oooooooh….

    …preeeeettttyyy…

  23. Inwards says:

    Note that the stuttering apparent in the video is not from the program itself. It was running at 200-300fps with no slowdowns when I made this video. The stuttering either happened during video capture or during the encoding process, which I was obliged to do twice.

    This stuttering is likely because the framerate is way too high. You’re only going to get 30fps in a YouTube video, and MS Moviemaker is going to throttle your video at 60fps, anyways. Dunno how easy it would be to implement, but adding a vsync 60fps cap would probably do worlds to increase the smoothness.

  24. Muttley says:

    Sir, you win teh Intertubes.

  25. Sempiternity says:

    Looks very good! Congrats.

  26. Viktor says:

    Carra:The cars also look a bit weird. Not sure what it is: their constant speeds instead of accelerating? The fact that it's only lights?

    It could be the street crossings. That’s at least what I noticed, the lines of cars just sort of moved through each other. Probably waaay too much work to change,though(I wouldn’t even know where to begin).

    Also, Shamus: Preettty.

  27. Jamfalcon says:

    Very nice.

  28. OhMyStrogg says:

    You should turn that got into a ‘Procedural Syndicate’ ^^

  29. Cybron says:

    Very nice. When did you add the names on the buildings? I assume you’re just mix-n-matching various corporate type words?

  30. Gothmog says:

    Well done, Shamus! Looks fantastic! I’m eagerly awaiting a screensaver…

  31. milw770 says:

    Shamus,
    I’m also a lurker. I know nothing about programming, but enjoy reading these articles of yours as exercises in problem solving. Seeing the finished product makes the whole thing really jump to life.
    I vote yes for screen saver.
    While taking laziness into account, a followup project with Godzilla wrecking the place? Yes please!

  32. Sheer_FALACY says:

    That looks quite impressive.

  33. karrde says:

    Quick question: does anyone know if it would be easy to port this project to an OpenGL screensaver for a Linux machine? (and would that make it easier or harder to do a Mac port?)

    There’s this awesome screensaver-wrapper program known as XScreenSaver which will take almost any graphics-generating program and run it as a screensaver. But I’ve never tinkered with the setup, so I don’t know.

  34. DaveJ says:

    I want that as my screen saver, it is simply nice to look at.

  35. vdgmprgrmr says:

    Beautiful, Shamus. Purely beautiful.

    I also noticed you took my advice on adding company billboards and names. Was this planned or did the idea come from me?

  36. Matt says:

    Please, please release this a screensaver. It looks quite lovely, and I’ve been looking for a good screensaver for a while.

  37. Strangeite says:

    I love it. Looks really good and I think you accomplished your goals, since you originally allotted 50 hours (We’ve always been at war with Eurasia).

    I still don’t like the street lights though. You really think you shouldn’t see the actual light, just what it shines upon.

  38. Kell says:

    Enough with the feature requests! Shamus has sunk 50 hours into this, and it looks great!
    What we need now is for other hobbyist coders to grab the source code when Shamus releases it, and take Pixel City in their own directions. We can follow these coders, and harass them into implementing our every feature wish, no matter how complex or arbitrary. Let Shamus be :P

  39. Steve says:

    I’m going to agree with some of the above comments that the “cars” look really fake, all the same speed, always moving, never stopping, never turning. Everything else looks so nice, and it seems like there must be some way to procedurally generate some more realistic traffic patterns.

  40. TehShrike says:

    Very sweet. Made my geeky heart flutter with joy…

    The only thing that I noticed was the car headlights all moving at the same speed. For some reason seeing the lights all progressing at the same rate as the cars on the streets parallel to them seemed odd to my brain.

  41. Agaib says:

    Step 1: Make Procedurally Generated City

    Step 2:??????

    Step 3: Profit!

    Good Luck.

  42. Cuthalion says:

    Those who read the previous entries should remember that Shamus actually did do more realistic traffic patterns. But they weren’t coming out right, so rather than spend a ton more time over-simulating, he reverted to fake traffic.

    I think it looks awesome. Even the cars.

    1. Shamus says:

      Re: Traffic patterns.

      The cars actually DO move at varying speeds, and if a faster one comes up behind a slower one it will stop, pause, drive, stop, pause, drive, crating that bump-n-go effect.

      But you have to watch them for a bit to see it happen.

      Traffic lights were on “The List” of features ot one point, but were cut due to time constraints.

  43. Cadeonehalf says:

    Dang Shamus that is an impressive engine.
    A job beautifully done!

  44. Jabor says:

    Traffic lights were on “The List” of features ot one point, but were cut due to time constraints.

    Looks like I now know what I’m going to do as soon as I get my hands on the source code, then ;)

  45. Phoenix says:

    Sir, you are awesome! :)

    And as somebody who is graduating in urban planning in 4 weeks and has a soft spot for urban 3D modeling, I can tell you that some people would kill to be able to do the kind of magic you just created in 50 hours of work … ;)

    If there is any possibility, I would really appreciate if you could turn this into a screen saver. Maybe with some options to lower the level of detail, because otherwise I’m not sure my poor Thinkpad will be able to display it properly…

    Again, awesome work!

  46. Greg says:

    Frankly, it looks much better than most of the cities I’ve seen in games. I can think of several giant mecha games that would have been vastly improved by this level of detail.

  47. Cuthalion says:

    Does nobody read the blog posts themselves?

    He’s promised before to turn it into a screensaver.

    The video itself said it was released as a screensaver.

    The blog post says the screensaver will be coming soon.

  48. Wow. I haven’t commented in a while, but I have been following fairly closely. I too would like to know the secrets behind the office tower names. It certainly lends some extra realism to the scene. Also, Shamus, during some of the earlier shots where the city can be seen to be drawn, it appears as though the aircraft warning lights (for want of a better name) are drawn before the buildings are. My assumption is that by the time everything is drawn all elements have been calculated and that the lights are simply drawn first.

    At any rate, you deserve all the commendations heaped upon you here, as much for revealing your process as for actually doing it. And, for the record, I would like to pass on my congrats for your ever-widening impact on the electronic world.

    Richard

  49. Thirith says:

    Not much to add here, other than: congrats! It looks beautiful. Yes, there are a couple of small things that can be improved (mainly street lights IMO), but it’s already quite a stunner. I hope you enjoyed doing it!

  50. Nazgul says:

    Awesome! The video really brought it all to life. I was worried the music would drive me straight to the mute button as it so often does but even that was a good choice. Outstanding!

  51. Wow, this video really does pull it all together. Amazing work, Shamus!

  52. Alan De Smet says:

    That’s pretty cool, Shamus.

  53. Fon says:

    Yep, not much to add but: Amazing!

  54. Bear says:

    Me likey! Me Wanty Screen Saver!

    Also, hoping for a Procedural City Phase II with more more more!

  55. xbolt says:

    This has been a great series. I’ve always loved procedural content, and here I got to watch one being built from the ground up! Awesome stuff.

    Say, any chance you could provide a link to the music? I found similar tracks, but they didn’t sound exactly the same as this one…

  56. mark says:

    Thats a hell of a product demonstration! I especially love the music in the video. It all looks good and I eagerly await your realease of the final exe or scr. :)

    Your mention of ‘Cool Cam’ begs the question; How cool is the cam in your procedural city? Smart cameras are hard to code, hence 99% of N64 and PS1 games having SHITE cameras!

    NOTE: I arrived in time for this to be comment #5, but I imagine now that I’ve actually watched the video and typed this, its number one hundred and something…

    ~IrishMark

    EDIT: 59. Yeah, close enough. <3 U SMAHUS!

    1. Shamus says:

      Mark: All of the moving camera shots in the video were from the “cool cam”.

  57. Zaxares says:

    Totally random comment, but seeing that night-time cityscape and listening to that music made me want to go play Deux Ex again. I have no idea why.

    Great work though, Shamus! Very impressive! :)

  58. andy says:

    Hey shamus, brilliant work. Looking forward to checking out the source code.

    I give the project a mark of AA – Absolutely Amazing.

    It is sooo cool to see someone think of something neat, “I wonder if I can make good looking city scape using simple tricks and procedural generated content”, then think, “hey, why don’t I blog the whole process so other people can watch”.

    Of course, it helps that you are an awesome writer.

    One last thing…
    thank you! thank you! thank you!

  59. andy says:

    Just showed the (non-techie) missus. She was equally impressed!

  60. Belzi.ET says:

    Wow, this is great.
    It’s amazing what a few effects can make our eyes believe it’s real =)

    There just came one question to my mind.
    You have this moving cam (and if you release it as screensaver, this will surely be part of it). What happens with the cars if your watching the city for a 180° turn of the cam?
    At the beginning, the red and white car-lights are positioned as we are used to it (drivin on the right side of the street). But if the cam turns 180°, will the red lights drive towards the camera on the left side?

    Otherwise I just can /bow before your work.

    1. Shamus says:

      Belzi.ET: Cars look at where they are relative to the camera when deciding what color to be. In development (non-screensaver) mode you can aim the camera straight down and see them flip colors as they go by.

  61. Mephane says:

    This is fantastic. It’s true, it’s even better in motion. And it somehow reminds me of how SimCopter could look if they had made it nowadays…

    Oh, and the music is a perfect choice, I love it.

  62. Burton Choinski says:

    Can the stuff be rendered on the fly? Such that if you travel forward you plot out and render buildings before they come into view (and chuck the ones behind after a certain point for memory saving), and this have the “endless city” screen saver? The PoV could have a random walk travel path (straight travel, banks, climbs, dives) and you would always have city.

  63. froogger says:

    Looks fantastic! I feel like a uncle at someones graduation. “I’m so proud, I was there when he was born you know. Not there, there, but anyway, he’s a fine cluster of code now, ready for the world.”

  64. Zaghadka says:

    What’s it for? What was that “life” procedural thing we all had running on our computers for?

    It’s pretty and fun to watch.

  65. Anoria says:

    Hello. I’m not a particularly regular reader here, so I haven’t been following this project as you’ve been narrating it, but I found the video and your most recent posts about tweaking and I’m very impressed.
    I’m not sure if this is a level that you can or want to address with the techniques at hand, but the one thing that stuck out at me during the preview wasn’t the streetlights, it was the traffic patterns. On the rare occasions that the camera is at an angle where two perpendicular streets of cars are visible, they flow through each other at intersections and that inconsistency really drew my eye.
    Otherwise, it’s beautiful, and if I ever get to spend the time I’d like to spend on learning how graphics work, I’ll be coming back and reading everything about this several more times.

  66. Anoria says:

    Aw crap, you already addressed that way up in the beginning of the comments. Sorry. (And of course I notice this about five minutes past the end of the edit window.)

  67. Gandaug says:

    Very nice. I never use screensavers, but this thing has just changed my mind. Can’t wait for you to release it.

  68. Blake says:

    Thanks for this series Shamuns, I’ve quite enjoyed it.
    Look forward to grabbing the source when you release it :)

  69. Rick says:

    I can’t think of anything to say other than that this looks beautiful. Absolutely beautiful.

  70. Anon says:

    Gorgeous.

    You should integrate it with your terrain engine so the city isn’t perfectly flat :-D. (I jest, I know that’s a ton of work)

  71. ClearWater says:

    I like the video but the stuttering gets on my nerves. *shivers*
    I can’t wait for the screen saver/source code. You probably mentioned what language it was written in but I’m too lazy to check… *kicks myself* No I’m not. Hold on a sec. Those Previous in Project links really help.

    Ok, I’m back. I still can’t find it. I’m guessing based on a vague memory that it is something to do with C. Do you need a special compiler/package or will the freely downloadable stuff work? (I used to use djgpp or something like that. No idea if that will still run on XP/Vista.)

  72. stringycustard says:

    I looked at the screenshots in the previous parts. And I thought, “wow, it’s looking good.” Then I saw the video and it was like going from story board to feature film. Really incredible how it looks in motion. Thanks for doing this, Shamus, it’s so cool seeing the development of this kind of thing. Always wanted to know just how to start with procedural-based programming.

    Gives me urges to jump into some C++ pronto.

  73. Visi says:

    Might be better just with half the amount of cars. But it looks awesome, can’t wait for the screensaver~

  74. R4byde says:

    I know I’m at the tail end of the bandwagon here, but that was F^%@#n AWESOME! Screensaver please, now.

  75. Leonardo Herrera says:

    43,000 polygons? Just yesterday I was seeing some footage of an soon-to-be-released PS3 game (UFC) and they were saying that each fighter is about 30,000 polygons.

  76. Michael Schmahl says:

    It’s a little late posting this, considering how almost-done you are, but have you looked into simulating your traffic using one-dimensional cellular automata? It should be pretty cheap, computationally. Basically, the idea is that the road is a line of pixels, which are either 1 (car) or 0 (no car). On each pass-through, look for the pattern “10”. Wherever “10” is encountered, change it to “01” with a probability depending on the neighboring pixels:

    0100: Cruising, probability 90%
    0101: Braking, probability 20%
    1100: Accelerating, probability 50%
    1101: Congested, probability 10%

    (The probabilities can be adjusted to taste.) With good technique, you could probably get this to run each pass in under 1000ns.

  77. Aveiro City says:

    Hi! Congratulations.. it’s fantastic!
    It would be more interesting if it had some way to implement an control panel of administration (backoffice) .. like the SimCity game.. in 3D..
    This project could also be very interesting if it had applicability in SIG/GIS .. Esri Arcmap Applications or Autodesk Map 3D.. with an easy way to implementation and optimization different modes of roads, buildings, land (water and green!!), light and “many” others factors :)
    Greetings from Portugal!

  78. Jason Porath says:

    Pretty slick. I’ve had to come up with auto-city generators before, in both Maya and Houdini. Your setup is about as good as anything I came up with, and it sounds like you did it a bit faster. Kudos!

  79. Martin says:

    This is just wonderful work, Shamus! I found your article linked from FlowingData. I have long wanted to do exactly what you did, but time has made me forget more and more of my 3D gfx courses. Now, I hope I can just take a look at your code and perhaps add something cool to it!

  80. dbmuse says:

    very cool…. now i’m going to have to read/view all your older stuff.

  81. dbmuse says:

    I would like to see a segment where one building in the city became the focus point and all the other buildings turned to wire frames…. then the camera view can zoom through the wire framed building and make some sort of circle around the one building. or just a city block of buildings… maybe only the fronts appear solid while everything else is wire or invisible. wire is best to hold the 3d perspective. my opinion is buildings are difficult to show up close… hence most shots… and reality of this vantage point is from afar and from above. Saddly things in the middle are blocked from view.
    more pudding please

  82. ulgortronic says:

    as there are enough comments on the final look already, I would like to thank you for the detailed documentation. You dont just mention why you chose a solution, but document the approach to finding/testing them – great! I think this helps me (as a half-experienced programmer) much more than too much detail of how exactly something works: It gives me a good idea of where to look, and how to find my own solutions!
    great job!

  83. tyler says:

    This is amazing

  84. Jamie Thomas Durbin says:

    Dude, you are one of the people I now acknowledge as proc-gen masters. I bow to your expertise, and would love to see the code, optimised as it has been… :D

    Also, what *is* the music for that video?

  85. Michael says:

    This technique could make a hell of a difference in things like flight simulator programs, some of the manually built cities in them are just awful, this looks way better and is procedurally driven? any flightsim developer worth their nuts should be begging you for this code. Also, if you can incorporate finer detail near the street level, this technique could make the whole “expansive environment” thing they go for in MMOs much more seamless.

  86. Kapten-N says:

    Awesome!

    Are those company names generated or do you have a list of names to pick from?
    You know what? You should sell advertisement space in the generated cities.
    “10 bucks to have your company name and logo in the randomly pulled list of company names to place on buildings!”
    It’s cheap enough to be a worthwhile investment even for small companies and it could turn out to be a lot of money for you.
    Then all you’d have to do is have the screensaver occationally check an Internet server for an updated list of company names.

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply to Carra Cancel reply

Your email address will not be published.