I’ve been a little caught up in learning Blender the last couple of weeks, and I found myself missing messing with three.js code. Blender is still a little out of my comfort zone, and I’m still woodshedding my way through some pretty basic basics. Not nearly at the level where I can get “creative” or “artistic” with what I know so far – heck, I just know meshes and lighting, I can’t even add a colour to stuff, much less make it dance. So, given that I feel like making things dance, this week, I’ll stick to primitives.
So when this thing popped into my head, I thought, yeah, next time I get a few free moments at the computer, I’m not gonna go back to the dry technical learning – I’m gonna do some art. Some “code art”.
So first, I bounced my idea off of my 8-year-old daughter, also known as my “art director”. We were walking to get some cookies and some coffee while older sister was having a piano lesson. The conversation went kind of like this:
“Picture a donut, floating in space.”
“What kind of donut? A glazed donut?”
“Sure. Like Homer Simpson’s Super Donut. Now, picture a cherry floating above the centre of the donut. Then, picture the cherry going up and down through the donut’s hole. Got that? Okay, now start the donut spinning so that it’s turned the right way for the cherry to go through, just as the cherry goes through. Then it keeps spinning, and when it’s spun around again, the cherry can, and does, go through the hole again.”
“Is is a marachino cherry? Red or Green?”
“Well, that’s a good question. How about if we had two cherries? One of each colour? Each taking turns going through the hole, just when the donut is turned the right way for the cherry to go through?”
And that night, after the girls had gone to bed, I flipped to my trusty text editor, opened my first “eye candy file” for this site, and started to madly hack away at it to turn it into a donut and some cherries.
An hour later, the old model was gone and I had 59 lines of code that, well, do that funky thing above with the donut and the cherries. That’s all that is. That’s 3.5K of code. You don’t get much into a browser for 3.5K these days – but you can get that. There’s no models – just primitives that fire up when the code hits the browser. There’s no pre-rendered images – everything you see there is being rendered, live, right now, by your computer. Without any plugins – that’s just working with the OpenGL2.0 in your device. Oh, plus your browser’s gotta load the three.js library, which is 421K. That’s how the code I wrote talks to the OpenGL2.0 in your device. All terribly compact – and terribly cross platform. It’s so cross-platform – it almost makes me giddy.
So, there’s my artistic distraction, from my quest to learn Blender. Once I’m better at Blender, I’ll be able to use actual models, rather than just primitives. But for now, I’m much better at code than I am at Blender, so to satisfy my foolish artistic urge – I’ll be happy with a primitive donut.