// See: https://p5js.org/reference/

//

// By Jon Froehlich

// http://makeabilitylab.io

​

let grid;

​

function setup() {

  createCanvas(800, 500);

  grid = new Grid();

  grid.isCheckboardOn = false; // switch to true to get a red/black checkboard

  grid.isCenterPtOn = false;

}

​

function draw() {

  background(20);

  grid.draw();

  fill(200, 0, 0); // red

  stroke(255);

  ellipse(100, 100, 50);

  fill(0, 200, 0); // green

  ellipse(150, 150, 50, 100);

  fill(0, 0, 200); // blue

  strokeWeight(5);

  stroke(190, 190, 90); // purple

  rect(300, 100, 50, 300);

  strokeWeight(1);

  stroke(255); // white

  fill(128, 0, 128, 50); // purple with ~80% translucency

  triangle(100, 180, 158, 260, 386, 175);

  fill("#FFA50055"); // orange (using hex codes)

  push();

  translate(350, 250);

  scale(3);

  quad(38, 31, 86, 20, 69, 63, 30, 76);

  pop();

  fill("#ffff0055"); // yellow (using hex codes)

  arc(550, 50, 80, 80, 0, PI + QUARTER_PI, PIE);

  push();

  noStroke();

  fill("#FF0099CC"); // yellow (using hex codes)

  textSize(40);

  textStyle(BOLD);

  text("The Makeability Lab", 400, 250);

  pop();

}

​

​