----- Coding Tutorial by Patt Vira ----- 

Name: Interactive Grid with Bouncing Ball

Video Tutorial: https://youtu.be/pQ6ykH2rtcc?si=JGNQlpatAxQGK3iz

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

​

let cols; let rows; 

let size = 10;

let length = []; 

let scl = 0.08;

​

let x = 100; let y = 100;

let dx = 2; let dy = 3;

​

function setup() {

  createCanvas(400, 400);

  cols = width/size;

  rows = height/size;

}

​

function draw() {

  background(255);

​

  x = x + dx;

  y = y + dy;

  if (x > width || x < 0){

    dx = dx * -1;

  }

  if (y > height || y < 0){

    dy = dy * -1;

  }

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

    length[i] = [];

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

      length[i][j] = (dist(x, y, size/2 + i*size, size/2 + j*size))*scl;

      // rect(i*spacing, j*spacing, spacing, spacing);

      stroke(0);

      line(size/2+i*size-length[i][j], size/2+j*size-length[i][j], size/2+i*size+length[i][j], size/2+j*size+length[i][j])

    }

  }

  // fill(255, 210, 0);

  // ellipse(x, y, 25, 25);

}