Step 5. First look at the code

The editor shows the JavaScript code, which is also shown below.

If you have never seen JavaScript (or any program) before, here is what you are looking at:

1. The program is a set of instructions for the computer to "execute".
2. This is real JavaScript code. You can write in here anything that can be written in JavaScript.
3. Instructions end with ";". This is important.
4. You can insert blank lines, spaces and tabs in order to change the program layout and normally it does not matter. The program will still work the same.
5. You can insert "comments". These begin with "//" and continue to the end of line. These are notes to the human reader and are ignored by the computer.

There is a lot to learn about JavaScript but you do not need to learn it all before trying some programming.

  
const objectsize    = 200;      // size of object   

const anglechange   = 0.01;     // how much the rotate angle changes each step 

var angle = 0;                  // rotate angle starts at 0  


function setup()        // "setup" is called once at start of run 
{
  createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight(),  WEBGL );
}

function draw()         // "draw" is called every timestep during run 
{
    background("lightblue");    // background color 
    fill("navy");               // paint box with this color 
           
    rotateX(angle);             // set each dimension rotation angle to "angle"
    rotateY(angle);
    rotateZ(angle);
  
    box(objectsize);            // draw a cube of this size 
  
    angle = angle + anglechange ;       // change angle each step to get rotate movement
}