// Ong Kian Peng

// learning goals: coordinate system, sequencing, describing steps

​

// Name of instruction designer:

// Name of instruction interpretor:

​

// 1. define the grid

// 2. choose a shape function

// 3. plot it on the grid, change color if needed

// 4. repeat

// 5. take a screen shot

​

let showGrid = true;

let Num_grid = 10; // set number of horizontal and vertical grids 

​

function setup() {

  createCanvas(800, 800);

  textFont("Inconsolata");

  textSize(10);

}

​

​

function draw() {

  background(color("#ffffff")); //change the colour of the background here

​

  if (showGrid) {    //press any key to hide grid, make sure to click on canvas first

    grid(Num_grid, Num_grid, width / Num_grid); 

  }

​

  // @ add your own code below 

  // you can delete everything till line 45, these are just examples

​

  fill( 0); //change colour of shapes

  stroke(0);  //stroke change the color of lines

  // the size of each grid is 80px

  noFill(); // we don't want circle to be filled, so adding noFill() before circle takes the fill away

  stroke(255,0,0) // We want to change the color of the line for circle, so adding stroke before circle does that for us

  // each grid unit is 80px by 80px

  line(400, 0, 400, 800);

  circle(400,400,320);

  circle(400,680,80);

  circle(400,120,80);

  triangle(80,640,120,560,160,640)

  triangle(80,560,120,480,160,560)

  triangle(80,480,120,400,160,480)

  square(640,80,80)

  square(640,160,80)

  square(640,240,80)

​

  stroke(0,0,255); 

  // this line is blue because a stroke function was added before it

​

}

​

​

function keyPressed() {

  showGrid = !showGrid;

}

​

function grid(numX, numY, gridSize) {

  noFill(); // set grid without fill

​

  for (let i = 0; i < numX; i++) {

    for (let j = 0; j < numY; j++) {

      stroke(0); // stroke color of grid lines

​

      rect(i * gridSize, j * gridSize, gridSize, gridSize);

      text(

        "x:" + i * gridSize + ", " + "y:" + j * gridSize,

        i * gridSize + 10,

        j * gridSize + 10

      );

​

      push();

      // line(i * gridSize, j * gridSize, i * gridSize + 10, j * gridSize + 10);

      pop();

    }

  }

}

​