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

Name: Pixelated Kaleidoscope - Generative

Video Tutorial: https://youtu.be/OqYJNQbr_X4

​

Connect with Patt: @pattvira

https://www.pattvira.com/

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

*/

​

let cols; let rows; let size = 5;

let grid = []; 

let x, y, dx, dy;

let margin = 5;

​

let colorPallete = ["#abcd5e", "#14976b", "#2b67af", "#62b6de", "#f589a3", "#ef562f", "#fc8405", "#f9d531"]; 

​

function setup() {

  createCanvas(400, 400);

  cols = width/size;

  rows = height/size;

  x = floor(random(cols/2 - margin, cols/2 + margin)); 

  y = floor(random(rows/2 - margin, rows/2 + margin)); 

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

    grid[i] = [];

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

      grid[i][j] = color(0, 0, 100);

    }

  }

}

​

function draw() {

  background(220);

  dx = random([-1, 1]);

  dy = random([-2, -1, 1, 2]);

  if (x + dx < 0 || x + dx > cols - 1) {

    dx = 0

  }

  if (y + dy < 0 || y + dy > rows - 1) {

    dy = 0;

  }

​

  x += dx;

  y += dy;

​

  let pixel1 = createVector(x, y);

  let pixel2 = createVector(cols - 1 - x, y);

  let pixel3 = createVector(x, rows - 1 - y);

  let pixel4 = createVector(cols - 1 - x, rows - 1 -y);

  let c = random(colorPallete);

  grid[pixel1.x][pixel1.y] = c;

  grid[pixel2.x][pixel2.y] = c;

  grid[pixel3.x][pixel3.y] = c;

  grid[pixel4.x][pixel4.y] = c;

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

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

      fill(grid[i][j]);

      rect(i*size, j*size, size, size);

    }

  }

}