Entasis

/**

 * color pallet

 */

// let curl = "https://coolors.co/555233-df921d-878937-cfc52A-dc2a41";

// let curl = "https://coolors.co/dd7373-3b3561-ead94c-d1d1d1-51a3a3";

let curl = "https://coolors.co/efc7c2-ffe5d4-bfd3c1-68a691-694f5d";

​

let bgColor;

let seed, noiseArg;

let bg, fb, ef, win;

let fbbg;

let cx1, cy1, per1;

let cx2, cy2, per2;

let cx3, cy3, per3;

​

function setup() {

  createCanvas(600, 600);

  // colorMode(HSB, 360, 100, 100, 100);

  angleMode(DEGREES);

  background(255);

  // noLoop();

  // frameRate(1);

​

  pal = createPallete(curl);

  let cid = int(random(pal.length));

  bgColor = pal[cid];

  pal.splice(cid, 1);

  pal = shuffle(pal);

​

  seed = random(1e+4);

  noiseArg = random(1e+4);

​

  bg = genBackground(pal[0], pal[1]);

  // bg = genBackground(color(300), color(150));

  // bg = genBackground(color(100), color(10));

  cx1 = [];  cy1 = [];  per1 = [];

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

    cx1[i] = 300;  cy1[i] = map(i, 0, 5, 0, 600);

    per1[i] = map(abs(cy1[i]-300), 0, 300, 1.0, 0.0);

  }

  cx2 = [];  cy2 = [];  per2 = [];

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

    cx2[i] = 120;  cy2[i] = map(i, 0, 3, 0, 600);

    per2[i] = map(abs(cy2[i]-300), 0, 300, 0.8, 0.0);

  }

  cx3 = [];  cy3 = [];  per3 = [];

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

    cx3[i] = 480;  cy3[i] = map(i, 0, 3, 0, 600);

    per3[i] = map(abs(cy3[i]-300), 0, 300, 0.6, 0.0);

  }

  ef = genEffect();

  win = genWindow();

  fbbg = genBackground(pal[1], pal[2]);

  // fbbg = genBackground(color(255), color(150));

  // fbbg = genBackground(color(100), color(10));

  fb = createGraphics(width, height);

  fb.copy(fbbg, 0, 0, width, height, 0, 0, width, height);

  fb = genFramebuffer(fb);

}

​

function update() {

  fb = genFramebuffer(fb);

}

​

function draw() {

  // pal = shuffle(pal);

  // fbbg = genBackground(pal[1], pal[2]);

  // randomSeed(seed);

  background(30);

​

  image(bg, 0, 0);

  image(fb, 0, 0);

  image(ef, 0, 0);

  image(win, 0, 0);

  update();

}

​

function genFramebuffer(pg){

  pg = createGraphics(width, height);

  pg.copy(fbbg, 0, 0, width, height, 0, 0, width, height);

  pg.angleMode(DEGREES);

  // shadow(pg, true);

  pg.blendMode(DIFFERENCE);

  // let buff = createGraphics(width, height);

  pg.stroke(0);  pg.strokeWeight(3);  pg.fill(255);

  for (let i = 0; i < cx1.length; i++) {

    drawObjectVert(pg, cx1[i], cy1[i], sin(frameCount+per1[i]*90)*per1[i]);

    // drawObjectHorz(pg, cy[i], cx[i], sin(frameCount+per[i]*90)*per[i]);

  }

  for (let i = 0; i < cx2.length; i++) {

    drawObjectVert(pg, cx2[i], cy2[i], sin(frameCount*1.2+per2[i]*90)*per2[i]);

    // drawObjectHorz(pg, cy[i], cx[i], sin(frameCount+per[i]*90)*per[i]);

  }

  for (let i = 0; i < cx3.length; i++) {

    drawObjectVert(pg, cx3[i], cy3[i], sin(frameCount*1.4+per3[i]*90)*per3[i]);

    // drawObjectHorz(pg, cy[i], cx[i], sin(frameCount+per[i]*90)*per[i]);

  }

  for (let i = 0; i < cx1.length; i++) {

    cx1[i] = cx1[i];

    cy1[i] = (cy1[i] + 1) % 600;

    per1[i] = map(abs(cy1[i]-300), 0, 300, 1.0, 0.0);

  }

  for (let i = 0; i < cx2.length; i++) {

    cx2[i] = cx2[i];

    cy2[i] = (cy2[i] + 1.2) % 600;

    per2[i] = map(abs(cy2[i]-300), 0, 300, 0.8, 0.0);

  }

  for (let i = 0; i < cx3.length; i++) {

    cx3[i] = cx3[i];

    cy3[i] = (cy3[i] + 1.4) % 600;

    per3[i] = map(abs(cy3[i]-300), 0, 300, 0.6, 0.0);

  }

  // pg.image(buff, 0, 0);

  return pg;

}

​

function drawObjectVert(pg, cx, cy, sc){

  let dy = 50*sc;

  let dx = 150*sc;

  let mx = 30;

  pg.beginShape();

  pg.vertex(cx, cy);

  for (let i = 180; i < 270-10; i++) { pg.vertex(cos(i)*dx+cx-mx, sin(i)*dy+cy); }

  pg.bezierVertex(cos(270+10)*dx+cx-mx, sin(270+10)*dy+cy, cx-10, cy-dy*2, cx-10, cy-dy*4);

  pg.vertex(cx-10, 0);

  pg.vertex(cx, 0);

  pg.vertex(cx, cy);

  for (let i = 180; i > 90+10; i--) { pg.vertex(cos(i)*dx+cx-mx, sin(i)*dy+cy); }

  pg.bezierVertex(cos( 90-10)*dx+cx-mx, sin( 90-10)*dy+cy, cx-10, cy+dy*2, cx-10, cy+dy*4);

  pg.vertex(cx-10, 600);

  pg.vertex(cx, 600);

  pg.vertex(cx, cy);

  for (let i = 180; i < 270-10; i++) { pg.vertex(cos(180-i)*dx+cx+mx, sin(180-i)*dy+cy); }

  pg.bezierVertex(cos(180-(270+10))*dx+cx+mx, sin(180-(270+10))*dy+cy, cx+10, cy-dy*2, cx+10, cy-dy*4);

  pg.vertex(cx+10, 0);

  pg.vertex(cx, 0);

  pg.vertex(cx, cy);

  for (let i = 180; i > 90+10; i--) { pg.vertex(cos(180-i)*dx+cx+mx, sin(180-i)*dy+cy); }

  pg.bezierVertex(cos(180-( 90-10))*dx+cx+mx, sin(180-( 90-10))*dy+cy, cx+10, cy+dy*2, cx+10, cy+dy*4);

  pg.vertex(cx+10, 600);

  pg.vertex(cx, 600);

  pg.endShape(CLOSE);

}

​

function drawObjectHorz(pg, cx, cy, sc){

  let dx = 50*sc;

  let dy = 150*sc;

  let my = sin(10)*150;

  pg.beginShape();

  pg.vertex(cx, cy);

  for (let i = 90; i < 170; i++) { pg.vertex(cos(i)*dx+cx, sin(i)*dy+cy+my); }

  pg.bezierVertex(cos(190)*dx+cx, sin(190)*dy+cy+my, cx-dx*2, cy+10, cx-dx*4, cy+10);

  pg.vertex(  0, cy+10);

  pg.vertex(  0, cy);

  pg.vertex(cx, cy);

  for (let i = 90; i > 10; i--) { pg.vertex(cos(i)*dx+cx, sin(i)*dy+cy+my); }

  pg.bezierVertex(cos(-10)*dx+cx, sin(-10)*dy+cy+my, cx+dx*2, cy+10, cx+dx*4, cy+10);

  pg.vertex(600, cy+10);

  pg.vertex(600, cy);

  pg.vertex(cx, cy);

  for (let i = 90; i < 170; i++) { pg.vertex(cos(-i)*dx+cx, sin(-i)*dy+cy-my); }

  pg.bezierVertex(cos(-190)*dx+cx, sin(-190)*dy+cy-my, cx-dx*2, cy-10, cx-dx*4, cy-10);

  pg.vertex(  0, cy-10);

  pg.vertex(  0, cy);

  pg.vertex(cx, cy);

  for (let i = 90; i > 10; i--) { pg.vertex(cos(-i)*dx+cx, sin(-i)*dy+cy-my); }

  pg.bezierVertex(cos(10)*dx+cx, sin(10)*dy+cy-my, cx+dx*2, cy-10, cx+dx*4, cy-10);

  pg.vertex(600, cy-10);

  pg.vertex(600, cy);

  pg.endShape(CLOSE);

}

​

function easeInQuart(t) { return 1 + (--t) * t * t * t * t; }

function easeInOutQuart(t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; }

function easeInElastic(t) { return (0.01 - 0.01 / t) * Math.sin(60 * t) + 1; }

​

function shadow(pg, bShadow) {

  if (bShadow) {

    pg.drawingContext.shadowOffsetX = 5;

    pg.drawingContext.shadowOffsetY = 5;

    pg.drawingContext.shadowBlur = 10;

    pg.drawingContext.shadowColor = color(30);

    // pg.drawingContext.shadowColor = color(200);

    // pg.drawingContext.shadowColor = color(pal[0]);

    // drawingContext.shadowColor = bgColor;

  } else {

    pg.drawingContext.shadowOffsetX = 0;

    pg.drawingContext.shadowOffsetY = 0;

    pg.drawingContext.shadowBlur = 0;

  }

}

​

function keyPressed() {

  if (keyCode == ENTER) {

    save('screenshot.png');

  }

}

​

function genBackground(c1, c2) {

  pg = createGraphics(width, height);

  let res = 180;

  let d = width / res + 1;

  pg.rectMode(CENTER);

  let col;

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

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

      let ns = map(noise(i*1e-1), 0, 1, -res/20, res/20);

      col = lerpColor(c1, c2, map(j + ns, 0, res - 1, 0, 1));

      pg.stroke(col);  pg.fill(col);

      pg.rect(map(i, 0, res - 1, 0, width), map(j, 0, res - 1, 0, height), d, d);

    }

  }

  pg.rectMode(CORNER);

  return pg;

}

​

function genEffect() {

  pg = createGraphics(width, height);

​

  // glitch

  pg.strokeWeight(1);

  for (let i = 0; i < width / 4; i++) {

    pg.stroke(red(bgColor), green(bgColor), blue(bgColor), random(30));

    let px = random(width);

    let py = random(height);

    pg.line(px, py, px, py + 200);

  }

​

  // noise

  pg.strokeWeight(1);

  for (let i = 0; i < width * height / 20; i++) {

    pg.stroke(red(bgColor), green(bgColor), blue(bgColor), random(100));

    let px = random(width);

    let py = random(height);

    pg.point(px, py);

  }

  return pg;

}

​

function genWindow() {

  pg = createGraphics(width, height);

  let w = width / 30;

  pg.noStroke();  pg.fill(255);

  pg.rect(0, 0, width, w);

  pg.rect(0, height - w, width, w);

  pg.rect(0, 0, w, height);

  pg.rect(width - w, 0, w, height);

  return pg;

}

​

function createPallete(_url) {

  let slash_index = _url.lastIndexOf('/');

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split('-');

  for (let i = 0; i < arr.length; i++) {

    arr[i] = color('#' + arr[i]);

  }

  return arr;

}