Toying Around with HTML5 Canvas & JavaScript

It's finals week right now and though I should be studying, but I decided to play around a bit and see if I could make some sort of pseudo-3D renderer.  Originally I was going to work on it in C/C++ and SDL, but I should try something different and check out this newfangled HTML5 & JavaScript stuff.  I'm not the biggest fan of JavaScript, in fact, every single time I've ever had to do something in the language I've found it to be quite a painful experience.  But I have to admit, with HTML5's Canvas tag, you can do cool things like this:

The "3D plane," wasn't too hard to setup, and it's pretty bad 3D as it is.  Using some of the basic slope mathematics, and rotation matrices I was able to achive this effect. HTML5 canvas gradients also were used to create the illustion of depth.

I'll be taking Computer Graphics next semseter; I'm really looking forward to it.  If you want to check out the code for this, I put it in my toybox repo.

© 16BPP.net – Made using & love.
Back to Top of Page
This site uses cookies.