T w e n t y S i d e d
You’ve most likely witnessed the thing in action already, but I thought I’d go over the final steps.
Building Logos
 |
| Prefix | Business | Suffix |
|---|---|---|
i Green Mega Super Omni e Hyper Global Vital Next Pacific Metro Unity G- Trans Infinity Superior Monolith Best Atlantic First Union National |
Biotic Info Data Solar Aerospace Motors Nano Online Circuits Energy Med Robotic Exports Security Systems Financial Industrial Media Materials Foods Networks Shipping Tools Medical Publishing Enterprises Audio Health Bank Imports Apparel Petroleum Studios |
Corp Inc. Co World .Com USA Ltd. Net Tech Labs Mfg. UK Unlimited One |
The names themselves are generated by combining elements from the three lists to the right. The first column is for descriptive self-aggrandizing that companies like to give themselves. The second is generally the name of a good or service that a boring conventional company might use in its own name. And the third column is for for the dry descriptive that generally follow the name of a business. Pixel City generates business names by taking a random entry from the center column and pairing it with either a prefix or a suffix, but never both. So you might end up with “Vital Imports” or “Imports Tech”, but never “Vital Imports Tech”. Using all three works in some cases, but looks ungainly in others. It also gets hard to make sure it all fits on the texture. A bad roll could bring the three longest entries together and make something verbose like, “Monolith Enterprises Unlimited”. Which doesn’t sound nice and won’t fit on the texture. (The system I’m using to draw characters is pretty primitive and doesn’t have the ability to predict how long something is going to be before it gets drawn.)
Obviously not all names make perfect sense. (iPetroleum? Really? Are you drilling for oil on the internet?) But most names are plausible enough and have a respectable level of variety. It can make 1,221 unique names right now, and every once in a while I think of another entry to make it even more diverse. Note that some prefixes have spaces after them and some don’t, so you’ll end up with “iMedia” in one case but “Pacific Media” in another.
Streetlights
I’m still not happy with how the street-level lighting came out. If this was a Game Developer Magazine Postmortem, then we’d be explaining how this feature put us a year over budget. I spent more than a few hours writing different systems, tweaking them for a few more hours, and then deleting them to try something else. The problem here is that my initial idea of simple dots for lights didn’t look anywhere nearly as good as I’d hoped, and I lost a lot of time searching for another solution. In the end I came back to my original idea and just decided to live with it. Many people looked at the screenshots and suggested the lights be bigger / smaller / higher / lower/ closer together / further apart, but these problems are just emergent results of the underlying problem that light simply doesn’t behave the way the program depicts, and the break in fidelity attracts the eye and draws attention to the weakest part of the scene. Changing the lights by making them (say) higher would simply change the problem being reported by your eyes. “Oh, now it’s too small… Now it looks too bright… Now they look too far apart… Now they look too far off the ground… etc.”
It will be interesting to see what other solutions people come up with once the source is released. Perhaps someone will find the silver bullet solution that eluded me.
Roof lights and radio towers
 |
| Image lightened in Paint Shop in order to make the towers more visible against the sky. |
The radio towers are a simple 4-triangle spike with a lattice texture applied. A blinky light is added to the tip. I have a blinkentower on almost every tall building, and I still get complaints from people to the effect of “you should have some towers on the tops of those buildings”. I think they’re just too hard to make out in the low-res screenshots and YouTube video. Spotting a few black lines against an almost-black background amidst a sea of compression artifacts is no easy task, but I think that when viewed full-screen they’ll look good enough.
Screensaver Behavior
When invoked, the program generates a city (unlike in the demo video, this is done behind a loading screen) and then the camera flies around it for a few minutes. There are a few keys that change the program behavior. There is a key to toggle wireframe, another to cycle through the special effects, from bloom to the “glass city” effect shown earlier. F1 shows the full list of keys. Pressing any other key just exits the program, as screensavers do. After a couple of minutes the scene fades out and another city is generated. Rinse, repeat.
Tomorrow: The source and the Windows Screensaver will be released.
Could Have Been Great
Here are four games that could have been much better with just a little more work.
Final Fantasy X
A game about the ghost of an underwater football player who travels through time to save the world from a tick that controls kaiju satan. Really.
Why The Christmas Shopping Season is Worse Every Year
Everyone hates Black Friday sales. Even retailers! So why does it exist?
The Mistakes DOOM Didn't Make
How did this game avoid all the usual stupidity that ruins remakes of classic titles?
PC Hardware is Toast
This is why shopping for graphics cards is so stupid and miserable.
Another way to generate plausible corporate names: two or three random initials. You may also want to put a colored block or bullet(█■â—â—¦”¢*)–not necessarily the same color as the corporate name– before or after the name (from a distance, it can look like a suggestion of a logo). Also, you can sometimes italicize.
On the video, some scenes had a “blue” look, others an “orange one, etc. Are you applying a random color filter to the whole scene?
Henebry: Yes.
Not to make you want to reconsider the street lights, but when you look down on them, you won’t see the light, you’ll see the top of the “can” and the projected light below it.
To make a street light, you would probably want to have a “light source” on the road and then floating above that, the “can” which would move based on where the camera moved…I think it would be harder, but maybe not. Also, random lights would be out (they are never all on).
Staying with the lights and adding onto someone else’s comments about the car lights… The headlights shouldn’t be all the same shade (it gives it a “false” look). I’d have a color variation of a few points on each one from “the normal”. For the brake lights, I’d drop their brightness by 15% to 25% (variable) and a slight variation on color.
I’m not sure how hard this would be to do (probably pretty hard, I don’t think each is unique as is), but it would add a touch of realism to the whole thing.
For what you have though, and the time you put into it, I’m amazed with it all. Thanks for showing the internals of what goes into something like this.
–Kev.
Needs more zombies.
I got sucked into Dwarf Fortress for a bit, and came back and saw how gorgeous this was going.
Wow!
All I can think of is how (relatively) easy this would be to turn into some really good time-sucking games.
1) Super jumps + wall clinging + bad guys to beat up = one of the best superhero games ever. Throw in webslinging and you’ve got the spiderman game every one’s always wanted.
2) Even without the bad guy beating, that’d be bloody fun.
3) WinAmp visualization to make the generation + camera related to the music somehow. I don’t know. It’d be cool, though.
4) Some one else (didn’t grab the name) suggested just flying around trying to not hit buildings. Set a small variance in Z-level allowed (above traffic, below roofs of most buildings) and add a constant speed allowed and a timer (for longest run) and bam, there’s hours of entertaining yourself.
It’s almost a shame you’re finished with the project, because when I look at this I see a stockpile of ammunition for the awesome war and no guns. :(
I agree with Derek K. More zombies definitely a necessity.
With zombies would be a faint but obvious glowing green fog at street level.
Maybe in version 2.0?
–Kev.
Very nice.
Oh, and “Monolith Enterprises Unlimited” actually sounds pretty good.
eEnergy is my favorite.
Congratulations on creating such a successful and well done toy! It is refreshing to see something so entertaining to so many people that does not need to “do” anything but be intriguing, amazing, and eye candy.
I like ePetroleum. “Just attach our patented nozzle fitting to your computer, and you can stream gasoline directly from the Internet to your car’s gas tank! And we’re working on a mobile version that’ll work from your phone!”
Awesome job, Shamus, just incredibly cool. Thanks.
The final bits really make this whole scene work (see what I did there? I used the word “scene” which is that whole group of guys who do procedural code in < 40k etc, whoa, I think I just pointed out my own pun, maybe I can do other fun grammatical tricks and point them out, too, while preteneding to be an intellectual). Sorry, I think my mind is thinning out at the end of the day.
Anyway, looking forward to the screensaver (although it does mean I’ll have to install Windows). Maybe somebody friendly can port it over to X-11 or something and OSX.
The light bloom effect is spot on with the extra lights at the top of some buildings. In fact everything looks really good. I don’t have an issue with the streetlights at all – this was meant to be a simple representation and you went overboard with awesomeness, I end up looking at the buildings far more than streetlevel anyway.
You should show this to city planners and say “See 50 hours and looks great. You guys could learn something”.
iPetroleum makes perfect sense to me. But then, my entire professional coding experience was writing an interface between radio telemetry pump-off controllers for oil wells and a computer owned by the service production company (a technical way of saying that the pumpjacks could send information to the guys who get paid to check and maintain them). I’ve often thought in the years since that it would be much more viable today to use a web interface rather than a stand-alone program. The tragic flaw of my software was that it was hideously ugly. It relayed information flawlessly but it wasn’t just a boring DOS proggy, it was an UGLY one. Maybe someday I’ll start up iPetroleum to correct my mistakes and take the oil and gas industry in an exciting direction.
I can’t wait to dive into this code and play around. This is the type of project i would have loved to have done if I was not so lazy.
Looks awesome Shamus, but you should put some towers with lights on top of some of the taller buildings.
j/k :)
“Mega Nano”
Yes, what size is that?
“Omni Robotic”
Sounds evil.
“Online.Com” (think that’d look better with a lower case C), “Networks Net”
orly?
Looks good. One change: The company name should be a random color that is not the same as the building lighting, should have a larger range of colors to choose, and from a bolder palette. Monolith Enterprises Unlimited would not choose a pastel yellow for their logo. They would clearly choose blood red.
I agree about the street lights, they don’t LIGHT anything, that’s the problem :) of course, if you made them light circles on the street you’d have to actually draw some cars too, but maybe just light the street really darkly (with the sodium light colour) and pretend that the headlight glare blocks the actual cars from being seen.
Shamus,
Loved the video and can’t wait for the screen saver.
Now, about the zombies. Clearly, they’re spawning from Monolith Enterprises Unlimited. They’re turning down the lights on the radio towers, which is why people can’t see them. Then planes will crash, zombies eat the brains of the victims. Any survivors are hired by MEU HR to become more zombies.
Clearly, you’ve put a lot of time into the backstory of this screensaver.
You have the funniest readers. Also-the word monolith in the first column should be monolithic I think. I’m using the screen shot as a desktop background. It’s been fun “doing” this with you.
Thanks for the screen credit.
stringycustard: I thought the pun was going to be with the word “bits”. To each his own, I suppose.
I’m assuming that once Shamus releases the source code, people are going to take a run at their own modifications. Does anyone have any good suggestions where we (the community) can view the new source and screenshots? It would be nice to have a centralized location for everyone to check.
that’s awesome! I did something like that for a daytime city gfx test a little while ago but i had a set of prefab building models to start from. Doing a nighttime cityscape has always been on my project wishlist, it’s great to read about your progress with this.
i think your biggest problem is the background. You’ve got great midground buildings but beyond the downtown “clusters” you want to see kind of a flat ‘sea of dots’ — you could probably do a flat plane or basin and just put some more procedural texture on it like the windows.
some random ref from google images:
Los Angeles
Mexico City”
Mexico City
Sea of dots across the bay from Oakland
Also, a tiny bit of depth cueing would help, maybe a smidgen of fake dof blur or desaturation or blending to a constant hue or something. And most of the skylight is going to be “bounced” from the city lights, so make sure the skybox matches the color temperature of your lights.
Anyways, great work. Looking forward for the downloadable demo. Five stars.
ngthagg:
Yeah, I was thinking the same thing. Some sort of blog or community webpage. What about MODDB? Isn’t that meant for projects like this?
Shamus:
Love the random name generator. Made one of those myself for warhammer goblins. Semi-random names are always teh funnay.
The streetlights are not perfect, granted, but you seemed to make the best of it. First thing to be addressed by others when they get their grubby mits on the source.
everyone else:
I’m putting my vote in early for some sort of blue thunder helicopter crash game. Thwoppa thwoppa thwoppa.
Here are some fun company names your program can draw up:
iPetroleum (the newest iPod. It can hold a million songs and drill for oil)
Global Solar (it’s in the Earth AND in the Sun!)
Bank One (I think there’s a city in Thailand called Bankwan)
First Foods
Vital Financial (it rhymes. That’s how you know they’re serious)
Apparel Labs (Fashion industry: serious science)
eEnergy (is it pronounced eenergy?)
Mega Tools
Super Security, because it sounds ridiculous.
And my favourite of the bunch, NetworksNet.
I thought of two more things…
(a) Tease your fans with a treasure-hunt experience: every once in a while, a random building name is either “Twenty Sided” or something involving “Shamus” or “Young”. But rarely — less than 1/100th of the times the procedure runs.
(b) Can WordPress handle using this as a theme background? It would be quite cool to have a modification of the “Chaotic Evil” color scheme using for the sidebars a random cityscape instead of a plain black background.
I don’t know much about code, but you could add some random surnames to the prefix list; Brooks&Smith Aerospace or McScurvy Foods, for instance.
Furthermore, love the work, would love zombies!
Shiny!
Can’t wait to have it running on my own computer…the Youtube video was cool, but that was the same city as everyone else saw, which loses some of the magic of procedurally generated content. So, coolness to come tomorrow :o)
@Flying Dutchman, there is a company Smith Aerospace. Not so sure about Brooks& but…
@Shamus: name generator
That is awesome. It can always use more words, but its great even now.
The businesses list could use a legal business reference. iLawyer, LawCorp, eLegal. (say that last one out loud, trust me its hilarious)
Oh, and you can’t forget LLC for the suffixes, goes with the legal thing.
Of course, how many non legal businesses use an LLC?Looks like plenty, even a good number of tech companies. Looks like it could be a good addition.@18-Rick
Looks to me like the colors are already random. Bolder? I think the point is for the eye to take in the entire city, not any single element We do not want the logos to attract attention. Yes this is a deviation from reality, but its an acceptable one I think.
@22-ngthagg
I Shamus really should put up an official page for such. ModDB sounds good. I am way excited for all the great uses this can have!
@23-joel davis
From those pictures it looks to me like a web of (road) lines with bright dots strung along them, stretching to the horizon. That could be a cool concept to implement procedurally.
@26-David V.S. – thought (a)
Yes! Finding a TwentySidedCorp building would just be fun! It would place a great sort of signature, as it were, on the project. I recommend lower than 1 of 100 though, as there is way more than 100 buildings in any one city, and it would get old after a while seeing dozens in the same city. 1/1000 might be better. Would really make it rare and exciting to find.
@27-Flying Dutchman
Pulling from a list of last names to generate a RandomDude&RandomGuy prefix is another good addition idea.
Also, you could go further. T, M & S Industries is also rather a common thing in the real world (partnerships are by definition more than one person, they don’t have to be just 2 people. They can be 3, 4, 12, or 26). It is simpler to pull from just the alphabet. Though this would add a layer of difficulty in stopping certain combination’s. PM&S Studios Anyone? :D
For streetlights, the way I would do it is this:
Make a big streetmap texture.
Cover it with black, then lighten circles where streetlights would be.
Make a cone or cube with a pinched top, whose bottom is on one lightened portion of the streetmap texture, and whose top is where the streetlight would be, and which is a light blue color, and which is very transparent, but easily noticeable.
eFoods? Me wantee.
Actually, I think I might have the idea for the better streetlights we need.
Take your simple system as it is now. Look at it, what do you see? Rows of streetlights, lined up like
: : : : : : : : : : : : : :
Its too uniform!
Offset the lights, at least in Raleigh we never have streetlights on both sides at the same time (though in a big city this may be different, but for the sake of this it may help let the eyes glaze over it). They alternate, looking like
, ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘ , ‘
They look like that in ASCII at least :P
Also, as mentioned earlier, a random (low ammount) of them should be out.
Also, some slight color variation would help. Both incandescent (yellow) and newer (blue/white) bulbs can be found in streetlights. Slight variations within a Yellow/White/Blue set, and variations in brightness also happen, due to the bulbs themselves, the reflectors, and the cleanliness of the glass/plastic it shines through.
Oh man, iMed is possible. It would be so funny to see one called iMeds though!
Just thought I’d say hi and that I think this city you’ve made is absolutely gorgeous. Both visually and conceptually. It’s stunning.
Also, I arrived at this site a few weeks ago via The Escapist and got hooked on your procedural city posts. I just finished reading the DMotR and started wandering around the rest of the site and found your Wavatars post. I remember reading that ages ago and this whole time I’ve been reading Procedural City and DMotR I hadn’t realised I was on the same site that had intrigued me so much so long ago.
I’m yet to find a post that doesn’t grab my attention and force me to read it. On top of your programming and graphics skills you’re also a top notch writer. You’re a very talented man, Shamus.
Thank you for the “must read” site.
No Mac screensaver? :(
This makes me sad.
Looks like this project has found it’s way on to Hacker News. Congratulations!
I must say, I’ve loved seeing how this project evolved, and I’m looking forward to getting the source code and seeing how it works.
I’m very much enjoying this series also.
I’m amused by the huge ultra-modern building which would doubtless house the head office of Green Tools. Who would have thought there’d be such a demand for such a specific product? Mind you, one could wear some Green Apparel while using a green tool to dig up some Green Foods, I suppose.
Take a look at this pic (linked to on Hacker news):
New York at night
Pretty much all those buildings in the front look like they’ve come out of Shamus’s project…so much so that I was wondering if someone had combined a screenshot with a photo.
The main issue I had with the demo video was that the whole generated city is “downtown”. Even in this photo of Manhattan there’s a clear difference between the close buildings (right downtown, all lit up to a large extent) and the further ones (fewer lights on, mainly — like that high tower in the upper right).
Another thing for someone else to tweak out. ;)
My favourite from that list is iRobotics (for hopefully obvious reasons) :)
And yeah, streetlights should have caps over them. They should be invisible from directly overhead apart from the pool of light they generate on the street.
Hey Shamus, have you ever watched CSI or CSI New York?
I noticed that in their panning night scenes (little clips of the city) that the streets are actually brighter than the buildings.
Perhaps that’s why it looks funny? Light in windows are directed inwards. Any light we see outside is incidental. Light on the streets are directed down as well, but that means it reflects up. Add in cars and streets are often brighter than buildings, even fully lit.
I didn’t notice the lights at first, but now it’s been pointed out I think staggering them would look better/more realistic.
The thing that caught my eye in the video was that the cars look like they’re made up of head/taillights only, so when they travel across the screen they just look like floating rectangles.
Ooh! A feature suggestion if it’s not already in there: function key to toggle frame rate display – current/min/max, reset with each new city. That way you can easily get feedback on how it runs on other systems that aren’t quite so monstrous as yours.
Enjoyed following the series, can’t wait for the release.
How about, as light from the streets, using just a weak glow? No specific lights, but just a glow from below.
How do I spawn Boomer and Tank?
Thanks in advance for releasing the source to this. I’m really looking forward to checking it out.
I think it’s great that you’re willing to release the source and let people (like me) learn how you did all of this in your code… It does not go unappreciated…
I think the reason your street lights don’t look natural is because streetlights actually aren’t visible from the air. The light is directed downward, the only light you should be seeing from them is from whatever is underneath them reflecting light back upwards. Go back to your “bright street” idea from earlier, but instead of making it evenly illuminated, make it only lit up in splotches underneath the streetlights and in front of car headlights.
Just for reference, the concept you refer to as “Manhattan Units” is known more generally in mathematics as “taxicab distance”, and the geometry that method of distance describes is “taxicab space”. It’s also sometimes known as “Manhattan distance”, for the obvious reason. I think the reason “Manhattan units” didn’t find you what you were looking for is that it’s not the unit of measurement that matters””two things can be one meter apart in any geometry. It’s the distance between two points itself that changes.
The reason that the lights look wrong is very simple they aren’t lighting anything.
(also in cities there is a lot of storefront lights but we can ignore that)
The light is directed downward, the only light you should be seeing from them is from whatever is underneath them reflecting light back upwards. Go back to your “bright street” idea from earlier, but instead of making it evenly illuminated, make it only lit up in splotches underneath the streetlights and in front of car headlights.