​

1. Distribute shapes across width and height of the canvas

​

*/

​

let radius = 40;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textAlign(CENTER);

  frameRate(3);

  rectMode(CENTER);

​

}

​

function draw() {

  background(0);

  noStroke();

  for (let i = 0; i < width; i += radius) {

    for (let j = 0; j < height; j += radius) {

      let generate = round(random(0.3), 2);

      if (generate < 0.3 && generate > 0.2) {

        fill(255, 0, 0);

        circle(i + radius / 2, j + radius / 2, radius);

      } else if(generate < 0.2 && generate > 0.1){

        fill(0, 0, 255);

        rect(i + radius / 2, j + radius / 2, radius);

      } else {

        fill(0, 255, 0);

        triangle(i + radius / 2, j, i + radius, j + radius, i, j + radius)

      }

    }

  }

}

​

// If the mouse is pressed,

// toggle full-screen mode.

function mousePressed() {

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​