Procedural City, Part 11: Demonstration Video

  By Shamus   May 2, 2009   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.

2020202013There are now 93 comments. Almost a hundred!


1 2

  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. […] This is the work of Shamus Young, from Twenty Sided. In just 50 ours, the dude made a procedural city filled with street lights, cars and… oh yeah, buildings. Lots and lots of buildings. And he’s going to release the source code! I can’t wait to get my hands on it, only to realize I’m way over my head. […]

  37. Matt says:

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

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

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

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

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

  42. Agaib says:

    Step 1: Make Procedurally Generated City

    Step 2:??????

    Step 3: Profit!

    Good Luck.

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

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

  44. Cadeonehalf says:

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

  45. 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 ;)

  46. 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!

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

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

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

  50. 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!

  51. 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!

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

  53. Alan De Smet says:

    That’s pretty cool, Shamus.

  54. Fon says:

    Yep, not much to add but: Amazing!

  55. Bear says:

    Me likey! Me Wanty Screen Saver!

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

  56. 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…

  57. 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!

  58. 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! :)

  59. 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!

  60. andy says:

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

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

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

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

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

1 2

2 Trackbacks

  1. By Procedural City « Indigo Static on May 2, 2009 at 2:48 pm

    […] This is the work of Shamus Young, from Twenty Sided. In just 50 ours, the dude made a procedural city filled with street lights, cars and… oh yeah, buildings. Lots and lots of buildings. And he’s going to release the source code! I can’t wait to get my hands on it, only to realize I’m way over my head. […]

  2. By Procedural Content Generation: Pixel City on May 15, 2009 at 9:42 pm

    […] Tests Procedural City, Part 9: Speeding Things Up Procedural City, Part 10: More Performance Procedural City, Part 11: Demonstration Video Procedural City, Part 12: Finishing Touches Procedural City, Part 13: “Release” of Program and […]

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

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!