let changeColor = false

​

// initalize colors of the shapes

let circleColor 

let squareColor 

let triangleColor

let rectColor

let ellipseColor

​

​

function setup() {

  createCanvas(600, 600);

  frameRate(2) // slow the cycling of the art down 

}

​

​

function draw() {

  // setting the background blue 

  background('#0995A6');

  // initalize colorChange to True whenn the mouse is clicked

  colorChange = mouseClicked()

  if (colorChange){ // when mouse clicked, change the backgound to black 

    background('black')

  }

​

  // sets up the grid pattern of the canvas 50 x 50 

  for (let rowY = 0; rowY < height; rowY += 50){

    for (let rowX = 0; rowX < width; rowX += 50){

      drawShape(rowX, rowY)

    }

  } 

}

​

​

// return True when the mouse is clicked 

function mouseClicked(){

  return mouseIsPressed

  }

​

​

//draws shape onto the canvas given the parametes type: int x and int y of the specific square gride 

function drawShape(x, y){

  noStroke() 

  // calls getRandomShape() and returns a type: string shape 

  shape = getRandomShape() 

  // random numbers used to shift the x and y coordinates of the SHAPE 

  randNum1 = Math.floor(Math.random() * 80 + 1)

  randNum2 = Math.floor(Math.random() * 70 + 1)

  randNum3 = Math.floor(Math.random() * 70 + 1)

  randNum4 = Math.floor(Math.random() * 80 + 1)

  // random numbers used to shift the shape CENTER 

  randCent1 = Math.floor(Math.random() * 40 + 1)

  randCent2 = Math.floor(Math.random() * 30 + 1)

  // default colors of the shapes 

  circleColor = 'rgb(255,165,0)'

  squareColor = 'rgb(5,185,5)'

  triangleColor = 'rgb(219,10,213)'

  rectColor = '#147118'

  ellipseColor = 'rgb(180,119,5)'

  // calls mouseClicked() if the mouse is clicked 

  colorChange = mouseClicked()

  if (colorChange){

    circleColor = '#FFFFFF'

    rectColor = '#FFFFFF'

    circleColor = '#FFFFFF'

    squareColor = '#FFFFFF'

    triangleColor = '#FFFFFF'

    rectColor = '#FFFFFF'

    ellipseColor = '#FFFFFF'    

  }

​

  // lots of if statements to determine which random shape was selected 

  // probably could change to case-switch in the future 

  if (shape == 'circle'){

    fill(circleColor)

    circle(x + randCent1, y + randCent1, randNum3)

  }

  if (shape == 'square'){

    fill(squareColor)

    square(x + randCent1 - int(randNum1/2), y + randCent1 - (randNum1/2), randNum1)

  }

    if (shape == 'triangle'){

    fill(triangleColor)

    triangle(x + randCent1 - randNum1, y + randCent1 + randNum1, x + randCent2 - randNum2, y + randNum2, x + randNum3, y + randNum3)    

  }

  if (shape == 'ellipse'){

    fill(ellipseColor)

    ellipse(x + randCent1, y + randCent1, randNum1, randNum2)

  }

  if (shape == 'rect'){

    fill(rectColor)

    rect(x + randCent1 - int(randNum3/2), y + randCent1 - (randNum4/2), randNum3, randNum4)

  } 

}

​

​

// get a random based off the length of the shape array 

// returns type: string of the specific shape function 

function getRandomShape() {

  const shapes = ['circle', 'triangle', 'square', 'ellipse', 'rect'];

  let randShape = shapes[Math.floor(Math.random() * shapes.length)]

  // console.log(randShape)

  return randShape

​

​

​

}