<\/a><\/p>\n

Justin Windle<\/a> is a very talented creative developer and I’ve been following his work for years, check his website<\/a> if you’re not convinced.<\/p>\n

he started an enterprise called stuvio<\/a> ; the goal is to allow generative artists to exhibit and sell prints of their works. he gathered a selection of creative coders \/ generative artists and I was part of the list (an honor).<\/p>\n

the Stuvio website might take some time to be released yet I started working on a couple of pieces. one of which is called “citadels”, when I got good enough results, I posted some screenshots on twitter<\/a> and got very enthusiastic feedbacks (thanks to all!).<\/p>\n

some people were curious as to\u00a0how it was done and tweets only allow for replies like this:<\/p>\n

canvas + PRNG distribution + a series of Scale2x\/3X + some down\/upscaled redraws w != blendmodes (>glows) + a gradient map.<\/p><\/blockquote>\n

which is a bit dry :)<\/p>\n

so I’ll try to get more into details in this post.
\nhere\u00a0are\u00a0two more variations:
\n
\n<\/p>\n

a word about the “creative process”, I don’t really know when or why or how I got this idea. the sure thing is that I watched -approximately- every science fiction movie released after 1902\u00a0and after all, who wouldn’t want to create generative a retro futuristic city skyline?<\/p>\n

graphically it’s easier to isolate at least 2 major inspirations:
\nNicolas De Sta\u00ebl and his abstract minimal compositions, I liked the clumsiness of the paint patches, the limited set of colors.
\n
\nsource<\/a><\/p>\n

and Olly Moss’\u00a0mesmerizing Star Wars trilogy posters<\/a>
\n
\nI liked the mix of vector shapes, something that looked like handmade textures & the flat colors.<\/p>\n

the city is essentially\u00a0a series\u00a0of rectangles with a\u00a0fixed width and variable height. I used a cosine function to soften the heights on both sides.\u00a0if you’re interested in distribution functions I’d recommend Petri Leskinen’s blog<\/a>, he provides\u00a0great explanations about distribution.
\nI obtained something like this:
\n<\/p>\n

then I drew some “bridges” : at random heights, if a “pixel” is empty, I check if the pixels on both sides are filled, if so, we have e bridge. this gives us the red dots:
\n<\/p>\n

building on the previous, there are longer bridges: if a pixel is empty and has a filled pixel on its left, loop while it finds a filled pixel on its right. the pink lines below.
\n<\/p>\n

this was a good start,\u00a0note that it uses a PRNG: Pseudo Random Number Generator instead of Math.random() ; this allows us to reproduce seemingly random series and it is very helpful to test differents settings or\u00a0algorithms.\u00a0if you’re interested I use a\u00a0Mersenne Twister<\/a>, it works fine :)<\/p>\n

I said I used a fixed width and variable heights, this was for a good reason called layers<\/em>.
\nI use differents ranges of widths and composite them using\u00a0opacity and blend\u00a0modes. here’s a series of layers building up the skyline.<\/p>\n

 <\/p>\n

<\/a> <\/a> <\/a><\/p>\n

you see that after the third iteration, we get a\u00a0complex object with lots of details at various scales\u00a0and\u00a0a feeling\u00a0of depth.\u00a0now if you go too far, it will also stop working, for instance after the sixth iteration, it\u00a0represents only the clusterfuck it became.<\/p>\n

<\/a>good start, but I mentioned the clumsiness of De Sta\u00ebl, I wanted to make it less blocky so I unleashed the power of\u00a0Scale2D, Scale3D<\/a>\u00a0and VOILA !<\/p>\n

\/!\\ update \/!\\<\/strong>\u00a0here’s the\u00a0GIST of\u00a0JS version of\u00a0the scaleX<\/a>.<\/p>\n

<\/p>\n

 <\/p>\n

<\/a><\/p>\n

I won’t go into the details of the algorithm, it’s quite simple and extends on morphological operators. the important bit is that it gave a good looking result and\u00a0created more accidents in the structure of the buildings. I added a foreground and blending between different layers (alternating lighter\/darker)<\/p>\n

<\/a><\/p>\n

still a bit too flat so I added a gradient to reinforce the horizon and\u00a0some particles in the air.<\/p>\n

<\/a> <\/a><\/p>\n

and\u00a0this is\u00a0the result, I\u00a0was happy with what happened to the particles (it was an accident), also the “glowing” effect\u00a0works well and\u00a0this was intentional :)<\/p>\n

the last step was to colorize the citadel, I used one of the oldest tricks in the book: palette mapping. use the greyscale value of each pixel to sample a\u00a0gradient of\u00a00xFF values. this might give funny (and not necessarily ugly) results if\u00a0the gradient’s colors are not sorted. for instance, the image below uses the first line of the smaller picture on top as a gradient.<\/p>\n

<\/p>\n

as if\u00a0Klimt and\u00a0Hundertwasser had\u00a0painted together ^^<\/p>\n

in addition I ‘ve\u00a0used some patterns to draw windows here and there, also added a representation of the citadel’s “DNA”, the seed used to initialize the PRNG (it’s the little diamond at the bottom of the final pictures).<\/p>\n

and that was it!
\nenjoy.<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Justin Windle is a very talented creative developer and I’ve been following his work for years, check his website if you’re not convinced. he started an enterprise called stuvio ; the goal is to allow generative artists to exhibit and sell prints of their works. he gathered a selection of creative coders \/ generative artists … [Read more…]<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":492,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sharing_disabled":false,"spay_email":"","jetpack_publicize_message":""},"categories":[3],"tags":[],"jetpack_featured_media_url":"http:\/\/barradeau.com\/blog\/wp-content\/uploads\/2015\/06\/blackcurrant.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/s4oXhx-citadels","_links":{"self":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/486"}],"collection":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=486"}],"version-history":[{"count":18,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":574,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/486\/revisions\/574"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/492"}],"wp:attachment":[{"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/barradeau.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}