//press space bar to change color palatte

​

let song;

let canvas;

​

​

let time = 0;

let picPos = 0;

let toggle = true;

​

var tileCountX = 5;

var tileCountY = 10;

​

var colorsLeft = [];

var colorsRight = [];

var colors = [];

​

var interpolateShortest = true;

​

function preload() {

  song = loadSound('assets/littlewing.mp3');

  canvas = loadImage('images/spotify canvas.png');

}

​

function setup() {

  createCanvas(540, 720);

  colorMode(HSB);

  noStroke();

  shakeColors();

}

​

function draw() {

​

  tileCountX = int(map(mouseX, 0, width, 4, 100));

  tileCountY = int(map(mouseY, 0, height, 2, 10));

  var tileWidth = width / tileCountX;

  var tileHeight = height / tileCountY;

  var interCol;

  colors = [];

​

  for (var gridY = 0; gridY < tileCountY; gridY++) {

    var col1 = colorsLeft[gridY];

    var col2 = colorsRight[gridY];

​

    for (var gridX = 0; gridX < tileCountX; gridX++) {

      var amount = map(gridX, 0, tileCountX - 1, 0, 1);

​

      if (interpolateShortest) {

        colorMode(RGB);

        interCol = lerpColor(col1, col2, amount);

        colorMode(HSB);

      } else {

        interCol = lerpColor(col1, col2, amount);

      }

​

      fill(interCol);

​

      var posX = tileWidth * gridX;

      var posY = tileHeight * gridY;

      rect(posX, posY, tileWidth, tileHeight);

​

      colors.push(interCol);

    }

  }

​

  var ang1 = TWO_PI * noise(0.003 * frameCount + 10);

  var ang2 = TWO_PI * noise(0.003 * frameCount + 20);

  var ang3 = TWO_PI * noise(0.003 * frameCount + 30);

  var rx = 500 * noise(0.003 * frameCount + 40);

  var tx = 200 * noise(0.003 * frameCount + 50);

  var size1 = 30 * noise(0.003 * frameCount + 70);

  var size2 = 40 * noise(0.003 * frameCount + 80);

​

  translate(width / 2, height / 2);

  for (var i = 0; i < 8; i++) {

    push();

    rotate(ang1 + TWO_PI * i / 5);

    translate(tx, 0);

    circle(0, 0, size1);

    for (var j = 0; j < 6; j++) {

      push();

      rotate(ang2 + TWO_PI * j / 15);

      translate(rx, 1);

      rotate(ang3);

      circle(rx, 0, size2);

      pop();

    }

    translate()

    pop();

  }

  image(canvas, -280, -340);

}

​

function shakeColors() {

  for (var i = 0; i < tileCountY; i++) {

    colorsLeft[i] = color(random(0, 100), random(100, 200), 100);

    colorsRight[i] = color(random(0, 300), 200, random(0, 300));

  }

}

​

function keyPressed() {

  shakeColors();

}

​

function mousePressed() {

​

  song.play();

}

​

class MRect {

  constructor(iw, ixp, ih, iyp, id, it) {

    this.w = iw;

    this.xpos = ixp;

    this.h = ih;

    this.ypos = iyp;

    this.d = id;

    this.t = it;

  }

​

  move(posX, posY, damping) {

    let dif = this.ypos - posY;

    if (abs(dif) > 1) {

      this.ypos -= dif / damping;

    }

    dif = this.xpos - posX;

    if (abs(dif) > 1) {

      this.xpos -= dif / damping;

    }

  }

  display() {

    for (let i = 0; i < this.t; i++) {

      rect(

        this.xpos + i * (this.d + this.w),

        this.ypos,

        this.w,

        height * this.h

      );

    }

  }

}