donotturnoff

This is a project I made in late 2017 to experiment with 3D animations using the JavaScript canvas. All the experience I'd had before with 3D graphics was making a little cube of points appear, so this was quite a step up from that. Doing this eventually ended up with me making JThree.

The core idea is a 2-dimensional array which contains a height at each index. At each render cycle, I use a matrix to calculate the rotation of the landscape, and a slight variation on perspective to calculate the position of each point relative to the camera. The colour is determined based on the main colour, the height and the proximity to the camera. For each point, two triangles are drawn, all of which interweave to produce a full landscape without any gaps.

There are four options when creating a new landscape. The size is simply the amount of grid squares along each side (40 runs smoothly for me on a mid-range desktop, at 50 it becomes a little jerky, at 90 it's very jerky and the limit of useability is about 200). The steepness is simply a multiplier for the height at each point when rendering. The trees are very unrealistic - essentially another layer drawn on at random points in a darker colour. I tried various ways of doing this decided that I'd come back to it later, when I'm older and wiser. And finally, texture can be added using the canvas pixel manipulation routines, which I have employed to change the value of each pixel's colour randomly by a small amount. Note that adding texture is quite an intensive operation, so you might want to disable it for smoother running.

Screenshots

Bird's-eye view