Shift

// By Roni Kaufman

// https://ronikaufman.github.io

​

// typeface: FT-88 by Oriane Charvieux & Mandy Elbé (https://u270d.eesab.fr/projets/ft-88/)

​

const N_WAIT = 50;

const N_ANIM = 25;

const N_FRAMES = 2*(N_WAIT+N_ANIM);

​

let palette = ["#00a000", "#00c000", "#00e000"];

​

let myFont;

let pointCouples = [], nPoints;

let s = 4;

​

function preload() {

  myFont = loadFont("FT88-Bold.ttf");

}

​

function setup() {

  createCanvas(500, 500);

  noStroke();

  let txt = ["abcdefg", "hijklmn", "opqrstu", "vwxyz"];

  let points1 = textToPoints(txt);

  let points2 = textToPoints(txt.map(s => s.toUpperCase()));

  let animType = ~~random(3);

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

    let nPoints1 = points1[i].length;

    let nPoints2 = points2[i].length;

    if (nPoints1 < nPoints2) {

      for (let j = 0; j < nPoints2-nPoints1; j++) {

        points1[i].push(random(points1[i]));

      }

    } else {

      for (let j = 0; j < nPoints1-nPoints2; j++) {

        points2[i].push(random(points2[i]));

      }

    }

    for (let p1 of points1[i]) {

      let idx, minDist = Infinity;

      for (let j = 0; j < points2[i].length; j++) {

        let p2 = points2[i][j];

        let d = distSquared(p1, p2);

        if (d < minDist) {

          idx = j;

          minDist = d;

          if (d == 0) break;

        } 

      }

      let p2 = points2[i].splice(idx, 1)[0];

      let animVal = (p1.y + p2.y)/10;

      if (animType == 1) animVal = width*height-mag((p1.x+p2.x)/2-width/2, (p1.y+p2.y)/2-height/2)/3;

      else if (animType == 2) animVal = N_ANIM*(TAU-(atan2((p1.y+p2.y)/2-height/2, (p1.x+p2.x)/2-width/2)+PI));

      pointCouples.push({p1: p1, p2: p2, animVal: animVal+random(-1, 1)*s});

    }

  }

  nPoints = pointCouples.length;

}

​

function draw() {

  background(20);

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

    let t = timeFunc(pointCouples[i].animVal);

    let p1 = pointCouples[i].p1, p2 = pointCouples[i].p2;

    let x = lerp(p1.x, p2.x, t);

    let y = lerp(p1.y, p2.y, t);

    fill(p1.col);

    square(x+s, y+s, s);

  }

  fill(240);

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

    let t = timeFunc(pointCouples[i].animVal);

    let p1 = pointCouples[i].p1, p2 = pointCouples[i].p2;

    let x = lerp(p1.x, p2.x, t);

    let y = lerp(p1.y, p2.y, t);

    square(x, y, s);

  }

}

​

function textToPoints(txt) {

  let points = [];

  let pixSize = s*2;

  let txtSize = pixSize*10;

  let w = pixSize*7;

  let h = pixSize*10;

  let m = 0;

  for (let l of txt) {

    if (l.length > m) m = l.length;

  }

  let n = txt.length;

  let y0 = height/2-n*h/2;

  let colors = [...Array(m)].map((e) => Array(n));

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

    let l = txt[j];

    let x0 = width/2-m*w/2;

    let chars = l.split("");

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

      let neighborColors = [];

      if (i > 0) neighborColors.push(colors[i-1][j]);

      if (j > 0) neighborColors.push(colors[i][j-1]);

      let col;

      do {

        col = random(palette);

      } while (neighborColors.indexOf(col) != -1)

      colors[i][j] = col;

      let ch = chars[i];

      let grph = makeLetterBuffer(ch, txtSize, w, h);

      let letterPoints = [];

      for (let x = 0; x < w; x += s) {

        for (let y = 0; y < h; y += s) {

          let index = 4*(round(y+s/2)*w + round(x+s/2));

          let val = grph.pixels[index];

          if (val < 20) {

            letterPoints.push({x: x0+x, y: y0+y, col: col});

          }

        }

      }

      points.push(letterPoints);

      grph.remove();

      grph = undefined;

      x0 += w;

    }

    y0 += h;

  }

  return points;

}

function makeLetterBuffer(ch, size, w, h) {

  let grph = createGraphics(w, h);

  grph.pixelDensity(1);

  grph.textFont(myFont, size);

  grph.textAlign(LEFT, TOP);

  grph.background(255);

  grph.noStroke();

  grph.fill(0);

  grph.text(ch, 0, 0);

  grph.loadPixels();

  return grph;

}

function distSquared(p1, p2) {

    return mag(p1.x-p2.x, p1.y-p2.y);

}

​

function timeFunc(animVal) {

  let x = (frameCount+animVal)%N_FRAMES;

  if (x < N_WAIT) return 0;

  if (x < N_WAIT+N_ANIM) return easeOutBack((x-N_WAIT)/N_ANIM);

  if (x < 2*N_WAIT+N_ANIM) return 1;

  return 1-easeOutBack((x-2*N_WAIT-N_ANIM)/N_ANIM);

}

​

// from easings.net

function easeOutBack(x) {

  const c1 = 1.70158;

  const c3 = c1 + 1;

​

  return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);

}

​

function keyPressed() {

  if (key === 's') {

    frameCount = 1;

    saveGif("out.gif", N_FRAMES, {delay: 0, units: "frames"});

  }

}