//1. create a grid of shapes that change color based on where the mouse is

//2. also change size based on where the mouse is

//3. using an old sketch as inspiration that's linked below:

//https://editor.p5js.org/Alexis_Sanders/sketches/QVo_Bmtc9

​

let size, randomNum, rotateAngle;

// let randomCol1, randomCol2;

​

// let col1 = ['red','orange','yellow','lime','cyan','purple','magenta'];

​

// let col2 = ['red','orange','yellow','lime','cyan','purple','magenta'];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // noLoop();

  noStroke();

  smooth();

  randomNum = random(1);

  size = min(width / 10, height / 10);

  rectMode(CENTER);

}

​

function draw() {

  background(0);

  // console.log(randomNum);

  for (let y = size; y < height - size; y += size) {

    for (let x = size; x < width - size * 0.8; x += size) {

      //widh-size*2 keeps the grid solely in the middle of the screen and adds padding to the right side of the screen

      let rad = dist(x, y, mouseX, mouseY);

​

      fill(rad, x / 2, y / 2);

      // randomCol1 = floor(random(col1.length));

      // randomCol2 = floor(random(col2.length));

      // console.log(randomCol1);

      // fill(col1[randomCol1], col2[randomCol2]);

      square(x, y, size, rad);

      // noLoop();

    }

  }

  // console.log(col1[randomCol1], randomCol2);

}

​

//tried to create a function where ther grid would rotate once you pressed the space bar but it doesn't seem to be working

function keyPressed() {

  push();

  if (keyCode == "32") { //will do something when spacebar is clicked

  console.log('works');

    let speed = mouseX/200;

    rotateAngle = 0.9*rotateAngle + 0.05*speed;

    rotate(rotateAngle);

    pop(); 

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  size = min(width / 10, height / 10);

}

​