Dimension Door

const SKETCH_TITLE = "Dimension Door"

​

let buff0, buff1;

let palette;

​

function setup() {

  frameRate(60);

  createCanvas(windowWidth, windowHeight, WEBGL);

  buff0 = createFramebuffer(width, height);

  buff1 = createFramebuffer(width, height);

  imageMode(CENTER);

  colorMode(HSB);

  rectMode(CENTER);

  noStroke();

  start_y = height * 0.1;

  end_y = height * 0.9;

  start_x = width/4.0;

  end_x = 3.0*start_x;

  n_x = 36;

  n_y = n_x*height/width;

  x_increment = (end_x - start_x)/n_x;

  y_increment = (end_y - start_y)/n_y;

  palette = [color('#D81159'), color('#8F2D56'), color('#218380'), color('#FBB13C'), color('#73D2DE')];

  describe("Dimension Door - a swirling psychedelic vortex of multicoloured squares twists aggressively back and forth, seemingly descending into the black background.");

}

​

function draw() {

  [buff0, buff1] = [buff1, buff0];

  let t = frameCount/14;

  buff1.begin();

  clear();

  push();

  rotate(0.25*wobbly(2.3*t, createVector(0, 0)));

  scale(0.85 + 0.1*wobbly(1.7*t, createVector(0, 0)));

  image(buff0, 0, 0);

  pop();

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

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

      let p = createVector(i*x_increment, j*y_increment);

      let c = palette[j % palette.length];

      c.setAlpha((j)/n_y);

      fill(c);

      square(1.45*start_x*wobbly(t, p), start_y*4.2*wobbly(t+9999,p), 2 + width/100*(1+i*j%3));

    }

  }

  buff1.end();

  background(5);

  image(buff1, 0, 0);

}

​

function wobbly(t, p){

  return sin(t/11.0 + p.x*2.3 - sin(t/4.2 - p.y * 32.4) + sin(t/23.14 + 13.2*sin(t/51.2)));

}

​

function windowResized(){

  setup();

}