SuperHappy Block Party

Photo Mar 31 7 18 53 PM e1333354158736 579x775 SuperHappy Block Party this mortal coil superhappy.be superhappy block party jquery javascript html5 canvas

I went to SuperHappy Block Party on Saturday. If you don’t know what it is check out the link:

www.superhappy.be

It’s a gathering of hackers and artists — people who enjoy doing technical or creative work coming together for 12 hours to meet people, work on projects, or just hang out and party. I think Super Happy Block Party grows out of the hacker culture/ethic that sprang up around Silicon Valley, and it’s a good reminder to me that this is why I’d want to be here. I tend to hack code on my own — so it was a good excuse to spent the afternoon teaching myself some new things about old tricks, more about that later.

It rained like hell that Saturday morning, but I was committed to going. I got into Palo Alto around 2 pm after it stopped raining. The sun peeked through the clouds for a bit. High Street was entirely closed off to car traffic making it a small pedestrian’s paradise. After grabbing a name badge and a chicken sandwich from the Chicken Champion truck, I went around and checked out the place. In the High Street parking garage there were all sorts of booths for artists and tech companies. On the third floor of the garage there was a “VC office hours” thing where you could pitch or talk to a Venture Capitalist if that’s your thing. Next door was Talenthouse and the Silent Disco. I didn’t really stick around to figure out what the disco was all about, but I assume everyone walking around with headphones had something to do with it. I ended up meeting plenty of folks I knew — co-workers, folks that used to work at my company, and a fellow Drawing Meats buddy, whom I knew was coming. I also got to meet plenty of interesting people. One of them was the guy who worked on Word Lens. Another dude was showing off Bastion running in native code through the Chrome browser. A met a third guy who ran a startup company out of Canada.

I ended up hanging out in the building at the end of High Street and worked on my Mac. My pet project? I purchased myself a new web domain for This Mortal Coil and I wanted to build a website for it. I want something more than a WordPress site and there’s plenty of new web technology out there to learn. I’ve been looking at HTML5′s <canvas> tag. I’d like to make WordPress plugins that’ll enhance the site’s interactivity. I also want to make my own comic page plugin to display the graphic novel. I have plenty of other ideas too. I spent my time at SuperHappy learning more about HTML5, Javascript, jQuery, and a host of new tech, and also getting distracted from doing that about every 10 minutes, but that’s SuperHappy for you. I learned enough to setup an IDE, found a decent way to debug Javascript code, and managed to write a bit of code for a simple project.

I can’t say it’s anything amazing. A lot of my time was spent reading and bashing my head against broken code and trying to figure out what I was doing wrong or what libraries I needed to include to get the page to work. Things got pretty exciting when I learned that you could do gestures and touch callbacks and practically make iOS apps without having to through Objective-C or the App Store. Here’s a sample of the work I did get done. As a bonus, if you have an iPhone, you can add these to your home screen and play them without a web browser bar taking on the screen.

HTML5 Play. This uses the HTML5 canvas. I drew a red ball. It’s not much, but you can use this with your iPhone. Just touch the red ball and you can move it around the screen by dragging your finger.

HTML5 Image Manip. You can also use this with your iPhone/iPad. It’s basically the same as HTMl5 Play, but I loaded an image and you can drag it around. I know you can do rotating and scaling but after a lot of head-bashing I couldn’t figure it out. This was meant to be a prototype for handling high resolution artwork in a gallery display. It obviously needs a lot more work.

The’re small steps, but I’m pretty excited for the possibility of what I can do in building an interactive website. I’ll be talking more about this and This Mortal Coil in the coming weeks, so stay tuned.

More L-System Images

Some more L-System images. A little background on L-Systems, if you care. Basically, L-Systems are a means to procedurally generate trees. It can be used to generate various fractal or repeating imagery, but mostly I’m interested in using it to generate trees and plants.

The idea is simple, you have a string made up of symbols (called a “sentence”) and the sentence tell a plotter how to draw something. Imagine the plotter like this: you’re holding a pen on a sheet of paper and someone is giving you basic drawing instructions. “Draw forward 10 inches. Turn 90 degrees left. Then, draw forward 10 inches. And so on. A sentence to a plotter could look like this:

FF[+F]FF[-F]F

‘F’ tells the plotter to draw a line forward (for some arbitrary length, let’s say 10 units. ‘+’ Tells the plotter to turn right by 90 degrees. The ‘-’ tells the plotter to turn 90 degrees left. The square brackets tell the plotter that this is a new “branch” of a tree. So in this example, the plotter would start at the origin and then move foward 20 units (“FF”) and then encounter a new branch (“[+F]“). The plotter knows then to make a new branch with the open square bracket (‘[‘), turn 90 degrees (‘+’), and draw 10 units. It encounters the closing square bracket and goes back to the main trunk (“FF”) and continues to plot from there.

L-System Alphabet

How do you generate the strings for the plotter?

First specify an alphabet, which is what symbols you’ll include when you make new strings and what each symbol will mean to your plotter. In our case:

‘F’ – draw forward 10 units

‘+’ – turn 90 degrees right (+90 degrees)

‘-’ – turn 90 degrees left (-90 degrees)

‘f’ – move forward 10 units — don’t draw anything.

The alphabet is arbitrary. You can add more symbols and have new meanings for them as well, but this is simple enough to get started with.

Building L-System Sentences with Productions

From the alphabet you make “productions” or statements that describe how certain alphabetical characters expand into sentence parts. An example:

F -> F+F-F

Here’s the break down of what that means: to the left of the arrow you have the “predecessor” symbol in this case ‘F’. The arrow (“->”) means “expands into” and the stuff on the right hand side is the “successor” and that is the sentence that the predecessor becomes. If the sentence builder encounters the letter ‘F’ it will expand that into “F+F-F”.

To kick of generating an L-System structure you give it a root. So you might start with ‘F’. You also tell the L-System builder how many times to iterate through the string it’s building for the plotter.

The builder starts with ‘F.’

The first iteration through it’ll expand F into “F+F-F”

A second iteration would make that “(F+F-F)+(F+F-F)-(F+F-F)” — I’ve put each expansion into parentheses so you can visualize it easier, but the builder will not add ‘(‘ or ‘)’.

You can imagine what a third iteration through would do… it gets complex for anyone’s brain to fathom. At least my brain. icon razz More L System Images

This string  is fed to a parser or directly into a renderer which will plot out a line following the instructions of each character in the final sentence.

Makes sense? icon smile More L System Images Probably not, since I’m describing this off the top of my head. If you want more information and a detailed breakdown of what I outlined above, you can download the free PDF of The Algorithmic Beauty of Plants. It’s a fun little coding project to put together. Certainly everything I’ve done here in 2D also works in 3D.Идея за подаръкикониикониПравославни икони

SDL and L-Systems

I’ve been coding again with some of my free time. I feel like there are dormant parts of my brain re-engaging with this craft and it feels good to actually hack something from scratch and get it to work in an afternoon. My weapons of choice: Simple DirectMedia Layer (SDL), XCode 3.2, and C++.

My only goal is to understand more about how to structure and build a simple game engine. No OpenGL, shaders, concurrency, etc. I’m trying to keep it simple for the time being. I’m trying to keep it as portable too — that is, I’m not putting a lot of specific Mac OS X code into it and I’m trying to keep SDL down in the dungeon. I might or might not be doing a good job at it, but I’m also hacking this thing together for the sheer fun of it. icon smile SDL and L Systems To show you the images above, wouldn’t do the actual code justice; they’re just static images that show Koch curves made using a simple “turtle pen” algorithm, which is the foundation of an L-System. It’s hardly perfect, but these screenshots were the best of the best of what I could output when I was done this afternoon. Some of the other ones look messed up probably due to floating point errors when calculating the pen’s rotation angle. I’ll get it next time.

For this L-System demo I ended up writing Bresenham’s line algorithm. Yeah, yeah, silly I know, especially since there’s supposedly an SDL package that contains line drawing. I think I had tried to get it to work with XCode but it barfed on me. If you got it to work, my hats off to you. I also realize I could use OpenGL to do line/polygon rendering, but like I said, I’m trying to keep it simple.

I’ve been building a whole slew of other little features: logging, math functionality, the ability to take screenshots, and the list goes on and on. It’ll be nice to have a little toolbox like this as time goes on.

 

 

How Evangelion Inspired Me To 3D Model Again

A friend of mine hadn’t ever seen Neon Genesis Evangelion. I knew that Khara Studios and Hideaki Anno were redoing the 26-episode TV series as a tetralogy of movies. The first movie came out in 2007 and honestly, I just didn’t really care. Evangelion might be the landmark anime that no other anime’s ever even approached in terms of depth and scope, but it was old-hat. I was done with it nearly a decade ago when I decided Shinji was just a whiny little bitch and the anti-hero shtick was boring. Still, there’s things I love about Eva — some of the individual episodes had interesting takes on the monster-of-the-week with Angels coming at Nerv in the form of viruses, angry whales, three dimensional shadows, mirror-moving identical twins, and ambiguously gay classmates who leave the ambiguous part at the door before descending Terminal Dogma to meet Lilith.

We decided to watch the new movies hoping that would serve as a good digest for Evangelion. Suddenly, I found myself getting excited for Eva again. When I was a teenager I was inspired by the Christian-laden mythology and the psychobabble. After watching Evangelion 1.11 I’m more impressed with how they rebuilt the movie’s imagery. After watching so much anime it hadn’t really hit me just how far toon-shaded rendering had come. I could easily tell that vehicles, buildings were redone as full-on 3D models but they were well integrated with the hand-drawn characters. What solidified that mind-blowing-away-ness was watching The Rebuild of Evangelion featurette. It went through how they reconstructed Tokyo-3′s buildings as 3D models and the layers of effects they put over it to achieve the images in the film.

And I thought, “I’m an engineer. I’m an artist. I can do that.”

Just to give you an idea of what’s inspiring me, here’s some screencaps from Evangelion. First up is Tokyo-3. Those skyscrapers are 3D and the houses in front are painted:

evangelion tokyo3 2 300x197 How Evangelion Inspired Me To 3D Model Again

Below is one of Tokyo-3′s buildings as it’s rising out of the Geofront. The staircase for the overhead walkway, the rail guard, and trees are painted. The building is created in 3D and toon-shaded. You can see this scene in Rebuild of Evangelion as they go through the different processes of making this scene. It starts out with some crude drawings of a tree with the 3D elements behind it and then gets refined and various filters and effects are used to create the sunset scene.

evangelion tokyo3 300x197 How Evangelion Inspired Me To 3D Model Again

I’m not sure how much CG is in this shot (I think the Angel in the upper right is CG but most of this shot looks painted), but it is quite an epic view of Tokyo-3:

evangelion tokyo3 3 300x197 How Evangelion Inspired Me To 3D Model Again

As an artist, I’ve shied away from doing 3D and mixing it with my hand drawn work. I have this mental block that says, “It’s cool, but it’s cheating.” I’ve seen plenty of brilliant artists on DeviantArt who have the skills to create amazing art without having to resort to it. I vowed to myself unconsciously that I would never cheat, but now that I’ve seen the Rebuild of Evangelion it’s removed that block from my mind. It’s not cheating to me anymore. I decided I wanted to make cinematic, cel-shaded looking artwork and with that I started exploring my old friend, Blender.

Blender has gone through a great deal of changes since I last used it back in January of 2008. For instance the entire UI has changed. I had long forgotten everything I knew about modeling and rendering with Blender so it wasn’t an issue. I downloaded the latest stable build and got to work learning the ins-and-outs of this new beast.

Without further ado, this is the final rendering at 1920×1080:

superhawke cityscape toon 300x168 How Evangelion Inspired Me To 3D Model Again

I did this as a request for a Deviant Art member. It wasn’t enough for me to just draw his character. I didn’t want another free floating character without a backdrop. I wanted a cinematic look. I wanted a detailed background, toon-rendered, and bigger than life. I drew his character from the position of a camera looking down at her and to reinforce that perspective I decided to create a city to match. I deliberated on how I would approach this for a few days and then decided to go into Blender and just start modeling rudimentary block buildings and came out with this:

oldcity prototype 300x168 How Evangelion Inspired Me To 3D Model Again

I superimposed my finished version of the girl, her name is Superhawke, over top of the first rendering and it served as a crude prototype. From there I built a better city and pulled the camera back to make it appear that she was higher up and floating in the sky above 50 story skyscrapers. The buildings are still fairly low-poly. I used some of Evangelion’s rebuild of Tokyo-3 as a benchmark for various details. I put simple air-conditioning units and water towers on the rooftops to give them more life. I placed some crude trees which were there to show scale and color so I could paint over them in Photoshop later.

This is the final version of that city as it was rendered:

cityscape final 300x168 How Evangelion Inspired Me To 3D Model Again

While I was constructing this city I had begun doing various rendering tests to get down the toon shading.  The first test I did was just to use Blender’s edge rendering with the toon shaded materials. What happens is that some of the lines don’t show up and if you render it to small the lines are thick. I’d have to go into Photoshop and up the levels until the lines were dark enough and I didn’t want to do that since the color would be ruined. The thick lines, bleck. Do not want. I wanted the right colors and sharp, thin lines where I expected them to be. To get thin lines what you need to do is to render out at least 200% larger than your final resolution (which is 1920×1080 for me). In Photoshop I could then resize the image and get my crisp lines. Still, some of the thinner lines don’t show up. I decided the best way would be if I could separate out the line rendering and shading so I could manipulate the lines to darken them and composite everything together.

Well, Blender has a means of doing that when it finishes the rendering, it’s called (wait for it) the compositor. You can basically add nodes and string them together to manipulate the rendered images and layer them together. You can try and combine nodes to create all sorts of effects. To do this you need different render layers. So, one layer had my AC Units with the shadeless materials so I could get the the black lines on a white background. The only rendering options I set on this layer was to do edges. The edge rendering was set to 100. The second layer was my toon shaded version and it had all of the default rendering options checked. To get darker lines I used the RGB curve on the line render layer and increased the levels until the lines showed up and then Blender composites the toon-shaded layer to it using an Overlay mix node.

Here is a line shading test with shadows:

line shading test 300x168 How Evangelion Inspired Me To 3D Model Again

Here’s the blender compositor node setup I used:

blender composite notes toonshading 300x206 How Evangelion Inspired Me To 3D Model Again

click to enlarge

This is the final rendering with both the toon render layer and the lines:

toontest 300x168 How Evangelion Inspired Me To 3D Model Again

So far so good. I figured out a decent way of doing the rendering. Here’s the problem: with my city scene doing the compositing in Blender is going to be a pain in the ass. Basically it means duplicating the geometry and there’s already a lot of geometry for the city. This is what my blender file looks like from the camera’s POV:

blender workspace view 300x236 How Evangelion Inspired Me To 3D Model Again

Doubling that geo to do both layers would tax my machine. I attempted it anyway and it only caused Blender to up and crash during the rendering phase after all that trouble. So it was back to the alternative way: render out the individual scenes for line rendering and the toon shading and composite them in Photoshop. Here’s a grayscale version of the buildings with the lines as composited in Photoshop:

city grayscale 1920x1080 ps composite 300x168 How Evangelion Inspired Me To 3D Model Again

Once I had all of this going there were a few other tests I wanted to try. I wanted to see if I could reflect the sky in some of the buildings but building a skybox, while that was easy, didn’t provide good results. It’s something I still need to explore. I thought of environment maps, but I’m still shaky on how they work in Blender. I even played with ambient occlusion and got this rendering:

oldcity withAO 300x168 How Evangelion Inspired Me To 3D Model Again

I thought of compositing that with my final image, but the AO just doesn’t fit. I wanted cel-shaded coloring and it would make it look too shaded.

One more note, I also tried a version of Blender 2.5 with Freestyle integrated. Freestyle is a Google Summer of Code project to do toon rendering. I thought it would be a boon and solve all my problems. Certainly there are scripts in there that do an amazing job. I found one with the right line thickness and decent enough shading, but alas, it didn’t work out. Everytime I tried to render my city at 200% the resolution it would crash Blender. I tried the parametric line rendering but it didn’t work either. Of course this version of Blender 2.5 is an experimental one, so it’ll be a bit before it’s working well. I thought of going back to an older version of Blender with Freestyle as well, but honestly, it’s a different UI, and I’m not interested in learning it. So this approach was the best way and something I intend to explore further.

As for my friend…we watched Evangelion 1.11 and 2.22 and it left him brimming with questions and no resolution so I picked up the Evangelion TV series and we rewatched that. All I can say is, he’s seen it all now except for End of Evangelion which we’ll watch sooner or later. Those last two episodes of the TV show…painful, utterly painful to watch for me nowadays. Of course, Eva’s probably not best marathoned straight through. Back when I was in high school we did that to a friend. When he watched the last episode he turned to us and said, “I’m never watching anime again.”

My Goals from 1995

I’ve been doing some spring cleaning and de-cluttering my house. I’ve got a ton of crap to get rid of that I’m sure someone else would be able to use. As I was going through my old stuff I found C++ Programming 101. It was the first book I got on the language back in 1995 (give or take) after I realized that learning QuickBASIC or Pascal wasn’t going to cut it if you wanted to really code games. I was pretty studious because I wanted to program games like Wolfenstein or Commander Keen and idolized the genius of the people that did, which I guess means I idolized John Carmack back in the day even though I didn’t know it. Now it’s 2010. I’m in the games industry. I guess it paid off.

While I was pulling all my scraps of paper out of that book, I came across a list of goals I had jotted down for myself. Things I wanted to accomplish to further my programming education. Here’s the list:

1. Study C++ Programming 101 Book and understand [it] all.
2. Do good in math and science classes at school (review information on subjects too)
3. Take a college course on C++ or C programming (Chester County College) — if I can get in one. or take in high school next year
4. Study Game Programming Books (2D, 3D, animation, etc)
5. More on Computer Graphics
6. Study Assembly or machine language

I did take a college course but in Pascal one summer. I remember spending summers learning 3D programming at home. I remember how to get mode 13h which is the 320x240x256 VGA mode that Wolf3D used. I also remembered that for the longest time I couldn’t do that because I only had an EGA monitor and begged my folks for a better computer.

I still keep goals for myself. Projects I want to accomplish and yes, I do actually accomplish them. Hopefully in a few weeks I can relate the thing I’m doing now.