//

// This example uses a class called grid.js, which I wrote explicitly to 

// help students understand how p5js orients it's canvas

//

// 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(10);

  grid.draw();

  drawOwl(50, 100, color(255,0,0), color(155));

​

}

​

function drawOwl(x, y, fillColor, strokeColor){

  // draw owl code from the Getting Started with p5js book

  // https://learning.oreilly.com/library/view/make-getting-started/9781457186769/ch09.html#functions

  push();

  translate(x, y);

  stroke(strokeColor);

  strokeWeight(70);

  line(0, -35, 0, -65); // Body

  noStroke();

  fill(255);

  ellipse(-17.5, -65, 35, 35); // Left eye dome

  ellipse(17.5, -65, 35, 35);  // Right eye dome

  arc(0, -65, 70, 70, 0, PI);  // Chin

  fill(fillColor);

  ellipse(-14, -65, 8, 8); // Left eye

  ellipse(14, -65, 8, 8);  // Right eye

  quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak

  pop(); 

}

​

​