Exploring Graphics & Math with Three.JS

Programming ,Random Musings
June 28, 2015

Hey fellow developers!

I mentioned in a video blog that I shared last week that I was starting a graphics course at Stanford, and week one is finished! I’ve rediscovered my love of graphics programming, and my love of school (no joke!) and have taken to Three.JS again with a new desire to learn all the things – in particular, crazy weird art shapes that I can adapt into ridiculously strange VR environments with WebVR.

Art is in the eye of the viewer, and I'm digging math right about now.

Art is subjective

If you’ve never built an application without knowing what exactly it was you were building, I recommend giving it a try. My original goal was simply to generate a shape based on a math formula, and I slowly started adding things to my program until I realized I was building the beginning of a really trippy graphic generation website.

Back in high school, during the first computer science class I ever took, we had one quarter of the year dedicated to creating scenes with a Java graphics library. I loved being able to tell the computer instructions to produce graphics, and this has started to resurface in my desire to build for virtual reality. Right now, it’s just a bunch of different colored lines based on two different equations, but the app is growing little by little and I don’t know where it’s going to go.

// Generate spiral geometry given segment length 
// & number of segments
var spiral = function(segLength, size)
 {
   var geometry = new THREE.Geometry();
   for(var t = 0; t < parseInt(size); t+= parseFloat(segLength))
   {
     var _x = Math.pow(t, .5) * Math.cos(t);
     var _y = Math.pow(t, .5) * Math.sin(t);
     geometry.vertices.push(new THREE.Vector3(_x, _y, 10));
   }
   return geometry;
 };

It turns out Three.JS is a pretty substantial library for creating different shapes through the ‘Geometry’ function. Although there’s a significant amount of focus on photorealistic rendering for virtual reality, I’m increasingly more excited about non-realistic rendering to remove the physical aspect of environments that we can experience in VR. In particular with this application, I’m also interested in playing with user experience considerations for hybrid web applications, i.e. apps that seamlessly work between VR and non-VR, or something that can be built in 2D easily and then viewed in VR. Ideally, I think that everything would be perfect to do in a virtual environment, but I think the toolsets we have still lack some of this.

The full site as it currently stands - the top menu serves as a tool bar for the canvas below. An intermediate step will be to render the canvas in VR mode, with a goal of including tool bar support in VR mode as well.

The full site as it currently stands – the top menu serves as a tool bar for the canvas below. An intermediate step will be to render the canvas in VR mode, with a goal of including tool bar support in VR mode as well.

Right now, I’m limiting everything to what can be drawn with a line. Although parts of the generated images appear to be 3D, this is actually half true and half illusion: the diamond shape in the center is actually rendered with specific X, Y, and Z coordinates, but the spiral is entirely on one Z-plane. The fun thing about using formulas to determine and manipulate the shapes being drawn means that these can be twisted and poked to get different results, and graphing into 3D space is simply a matter of changing the additional variable in a formula.

I’m not entirely sure where this is going (other than planning the VR support), but it’s been a blast playing with it as a way to learn more about Three.JS and becoming more familiar with general graphics programming. The code is available on GitHub, and at some point I’ll make the site itself available for those interested, probably once it’s got a little more functionality. I have a few ideas up my sleeve for some things to add, and I’ll update accordingly as I go along.

Happy Developing!

 

Related Posts

Leave a Reply