Rotating Cube Using JavaScript

Hello, today I'm going to be teaching you how to make a rotating cube using JavaScript. There are many editable features, including line color, background, line caps, line width, speed and much more. I'm also going to try to explain everything as well. I learnt all this from Mt. Ford Studios and I highly recommend you check him out!!

If you would like to see the cube in action click here and press run.

Supplies

you will need:

- A text editor of any kind

- The Developer tools for your Browser (Every browser has one, just search up how to access it)

Step 1: Open Your Text Editor

The first thing you need to do is open your text editor. For this project I'm just going to be using Notepad. Before we start writing the code, we need to save the document, save it as an .html file. I called mine RotatingCube.html but you can call it whatever you like. Also make sure that the file is encoded in UTF-8.

Step 2: Start Writing

Now we can start coding. The first thing we need to do is to write a basic html layout. What this is basically saying so far is that the language the html is using is English, it is using UCF-8 character encoding, it will contain "viewport" content, and that the title is "Rotating Cube".

Step 3: Constants

Now we will write the constants we need to make the rotating cube. Many of these values can be changed, so if you want, you can experiment with each line and see the end product. The COLOR_BG variable defines the color of the background, the COLOR_CUBE variable defines the color of the cube, and the SPEED variables defines the rotations per second (rps) on each axis. I set the background color to black, the cubes color to white, an x-axis speed of 0.05 rps, a y-axis speed of 0.15 rps and a z-axis speed of 0.10 rps

Step 4: Canvas and Context

after writing the Constants we will set up the canvas and context. This will be used to create the graphics.

Step 5: Dimensions of the Graphics

Now we need to set the dimensions of the graph. By setting the canvas height to document.documentElement.clientHeight; and the canvas width to document.documentElement.clientWidth;, we are making the graphics the same size as the browser it is run in.

Step 6: Colors and Lines

In the colors and lines sections we will be be using ctx.fillStyle to color the background, ctx.strokeStyle to color the lines of the cube, ctx.lineWidth to set the width of the lines of the cube and ctx.linecap to set the line cap.

Step 7: Quick Lesson on Line Caps

For line caps there are three different types you can use. These are butt, round and square. A good example of this can be seen by running the code listed below. This was made by Mozilla web docs, who have an extensive library on html.

Step 8: Cube Parameters

The parameters will dictate where the cube is located, its size, and its vertices. var cx and var cy are both calculated by divided the width and height of the background by 2. This makes sure that the cube is centered. Var size gives us the radius of a circles that's in a face.

Step 9: Animation Loop

the animation loop is divided into 8 sections; Calculating Time difference, background, rotation along the x-axis, rotation along the y-axis, rotation along the z-axis, edges and calling the next frame.

var timeDelta, timeLast = 0 is the gap between each frame made. It is set to 0 so it looks life a fluid movement. requestAnimationFrame(loop) is used to perform the animation.

Calculating the time difference will load the next frame.

ctx.fillRect(0, 0, w, h) fills the canvas with our background

Step 10: Fixing the Margin

If we were to run the code, there would be a tiny margin around the canvas, just a few pixel in length and width. I highlighted the margins in yellow. This new code will set the margins to 0.

Step 11: Finished

Congrats! You finished the cube. If you want, you can experiment with the values and make it look even better. I'm not sure how yet, but I might try and add colored faces to the cube.

The finished code is linked below