// 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

let b=0;

​

function setup() {

  createCanvas(500, 800);

  textFont("Inconsolata");

  angleMode(DEGREES);

  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

​

  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

  noStroke ();

  fill (0,0,255);

  push();

  let inc=1.0;

  rectMode(CENTER);

  translate(width/2,height/2);

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

  square (0, 200, sin(b)*i+100);

  circle (0, -250, sin(b)*i+200);

  b=inc+b;

  }

  pop();

  stroke(0,0,255); 

  triangle(225, 300, 250, 250, 275, 300);

  circle (100,50,20); circle (50,100,20); circle (50,50,20); circle(400,40,20); circle (450,20,20)

  circle (60,170,20); circle (400,120,20); circle (450,200,20)

  strokeWeight(1);

 line(250, 300, 250,600);  // 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+7; 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();

    }

  }

}

​