Many moons ago I used to be pretty proficient at 3D programming.  Not really for work but more side projects, fun, to learn.  I wouldn’t say I’m artistic, hell, I can barely draw a stick-man.  I do know what looks good though thematically, a side effect of 25 years of UI and software design I suppose.

I haven’t kept up with things though, which is part of why it’s always difficult for me to understand people who say “I’m bored”.  There are simply so many things to learn, to spend time tinkering with and have fun playing with that I never have enough time.  I suppose I’m used to the old days, the pre-internet era where you had to learn everything the hard way, going over endless books, chatting on BBSes, finding examples in magazines and so on that I find it extremely easy to find side projects to play with on the internet and relatively quick and easy to become proficient at those new toys and techniques.  Not saying I’m an expert in everything I mess around with but I usually get enough knowledge to have fun and feel like I learned something quickly.

Anyway, back on topic… In one of my numerous daily meetings I found out that there are a number of projects that plan on using the three.js system for 3D rendering.  While listening to the presenter discuss their techniques I loaded up the information on three.js and saw they have a ton of pretty cool demos as well as a very cool example page that shows off the myriad of features the engine supports.  I was impressed.  How is all of this possible inside a browser window?  When did that happen?  I always found web pages rather .. bland.. when compared to the demo/intro scene of yester-year.  This ability to render 3d objects and effects in a browser window seemed like fun.  I hate the logo you see at the top of the screen and wanted to try and replicate it but animated, using this three.js system.

Well, after experimenting and reviewing their examples I had a bunch of things working and was excited to play more but hit a roadblock.  Well not a roadblock stopping me from work but something that I’d fight with every step.  Javascript.  Javascript is the back end language you use to leverage your three.js content.  You might say “well Will, you write java code every day, you have been for more than 15 years, why would you consider Javascript a roadblock, surely you can apply some of your daily practice and be proficient at javascript instantly”.  Well sir, you’d be wrong.  I suppose after 25 years of professional development and countless years learning in grade school I’ve been ruined by structured programming languages.  Javascript is the wild wild west, the rules are so loose that you can chop your feet off and not even know it until you start running.  I found it very difficult to organize my ideas into logical pieces then have them communicate with the code effectively.  I’m very sure it’s an experience thing but I like having organized ideas that are totally encapsulated.  Where the concepts do not contaminate each other except for what you wish to expose.. With Javascript you can do anything anywhere, making the code, in my opinion, messy.  If I try and code up nice tightly composed ideas I find with my idea of keeping the ideas separate and easy to use.

I can work around javascript, its just a matter of relaxing the years abuse of writing small cohesive pieces of code and being more relaxed with my designs.  Sadly though the WordPress CMS backend I’m using for this website it’s exceedingly difficult to embed javascript elements without re-writing much of the theme you’re using.  I wanted to change the logo above to make it animated but realize that I’d have to rewrite the theme I’m using to accommodate for doing that and I’m lazy so I’ll just post my example to a supplemental web page instead you can visit here:

http://www.pixelsystems.net/proto/logo.php

It’s not really a 1-to-1 translation of the graphic logo animated but just me learning how to load 3D fonts, implement tweening, how to programatically fill a cat-mull spline polygon and so on.

What is impressive, after all my complaining is the cost of entry to start learning and having fun with javascript and three.js.  The cost of entry is nothing, beyond the time required to read and experiment.  I was always impressed what you got for free with Java (free language, free IDE, tons of source code), with Javascript it’s even easier, there are tons of good editors out there for writing code, many of which interface with libraries like three.js and offer code completion, running right out of the IDE and other niceties that we take for granted now.  It’s very easy to write code, save it and run it instantly.  You can debug it instantly in your browser so very quick access to the data structures, their contents, console logging and so on, with nothing else to install and set up.

I’ll likely add this stuff to the endless parade of “play more with when I have free time” items on my plate.