An interactive 3D modeling program written in JavaScript.
As I was creating this website, I had no idea what to feature on the homepage. I did know I wanted someting interactive, something I could code myself. I ended up with the idea of a dot mesh: an interactive graphic design of a wave pattern comprised of many small points. As I brainstormed how to implement this idea, it slowly became clear that the best solution would be to write a 3D modeling program. Not anything hugely robust, but something that could project 3D coordinates onto a 2D plane. At first my hopes were low that JavaScript could handle such a calculation-heavy project, but after a bit of testing and research, it seemed like the idea would work. Once the 3D engine was finally built (and little shifting dots had imprinted themselves on the back of my eyelids) all that was left was to plug in some coordinates.
The program uses DOM elements to visually represent the 3D model of a collection of points (a.k.a. shapes) on a three dimensional Cartesian plane. The program projects (with perspective) these 3D points onto a 2D viewing frame which is what you see. The idea has evolved a bit from just an interactive mesh, and now takes the form of morphing shapes that I have predesigned. You can also distort these shapes by hovering your cursor near points. Enter interactive mode (by pressing [i]) to rotate, morph, and select specific shapes. Check it all out with the buttons below.
P.S. This 3D modeling project also sparked the development of another project: a versatile JavaScript web animations library. With all the moving parts of this project, I needed a robust method to maintain all of its animations. There are plenty well established and comprehensive animation libraries already out there, but the idea for this project was to use only pure JavaScript. In adhering this standard, I have been piecing together my own small animations library which has helped bring this project to life. Once this library is more fleshed out, perhaps it will earn its own page. You can check out the documentation below.
JavaScript3DModeling