// 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 = false;

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

  square(0, 0, 0); // 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(200,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

  noFill();

  square(240, 160, 300); 

  square(400, 350, 300);

  square(570, 180, 130);

  square(170, 20, 130);

  square(310, 20, 50);

  square(170, 640, 130);

  square(310, 640, 50);

  square(670, 655, 30);

  stroke(0,0,0); 

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

  line(0, 0, 0, 0); 

​

}

​

​

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

    }

  }

}

​