Submodule 16.2: Basics of p5.js

rect()

The rect() function takes the same 4 arguments with the ellipse. Thus we have rect (x,y,w,h). 

Let's see an example of a code that uses the rect() function to create a simulation of a 3d shape:

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color  
  background('orange');
   for (dim = 400; dim>10; dim = dim-10 ) {
    rectMode(CENTER);
    rect(width/2,height/2,dim,dim);
  }
  
}

Result of the above code:

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex826.js
3. Open the file ex812.html in your editor and save it as ex826.html
4. In the ex826.html file, update the link to ex826.js  from ex816.js
5. Go to the index.html file and create, under Module 8, a link to the ex826.html  file with the title "Primitives Shapes - rect".

Modify the ex826.jsfile in order to create a cube using rects and lines.. You can see here an example.

Answer:

function setup() {
  // create canvas
  createCanvas(800,500);
}
function draw () {
  // set background color
  background('orange');
  noFill();
  // create the cube
  rect(300,200,100,100);
  rect(350,250,100,100);
  line (400,200,450,250);
  line (300,200,350,250);
  line (400,300,450,350);
  line (300,300,350,350);
}

Do a Git commit with the message "Primitives Shapes - rect".

• See more about the rect() function