let cubeVariant = 0;

let numberOfCubesVariants = 4

​

/* glitch variables */

const black = '#090909';

const blue = '#0000c0';

const blueDark = '#00214c';

const green = '#00c000';

const grey = '#1d1d1d';

const greyDark = '#131313';

const pink = '#c000c0';

const purple = '#32006a';

const red = '#c00000';

const silver = 'silver';

const teal = '#00c0c0';

const white = 'white';

const yellow = '#c0c000';

const topList = [silver, yellow, teal, green, pink, red, blue];

const midList = [blue, greyDark, pink, greyDark, teal, greyDark, silver];

const bottomList = [

  blueDark,

  white,

  purple,

  greyDark,

  [black, greyDark, grey],

  black,

];

​

/* grid variables */

const gridMargin = 50;

const numColumns = 10;

const numRows = 10;

let wordRotate = 0;

​

/* word variables */

let font;

const fontSize = 48;

const circleWidth = 120; // Width of the shape

const hello = ' hello * hello * hello * ';

const goodbye = ' goodbye * goodbye * goodbye * ';

const numbEchos = 10;

const wordEchoes = new Array(numbEchos).fill(null);

let word = goodbye;

let wordXPos, wordYPos; // Starting position of shape

// Speed of the shape

let wordXSpeed = 2.5; // Speed of the shape

let wordYSpeed = 2.5; // Speed of the shape

// Left or Right

let wordXDir = 1; // Left or Right

let wordYDir = 1; // Top to Bottom

​

/* global variables */

const GLITCH_SECONDS = 2.5;

const speeds = [0, 0.015, 0.2, 0.6];

let sketchSpeed = speeds[1];

let angle = 2.50;

​

function preload() {

  font = loadFont('./BebasNeue-Regular.ttf')

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  textFont(font);

  textSize(fontSize);

  textAlign(CENTER, CENTER);

  wordXPos = windowWidth / 2;

  wordYPos = windowHeight / 2;

  addEcho(wordXPos, wordYPos)

}

​

function drawCube() {

  push()

​

  let round = frameCount % 100;

  let inc = TWO_PI / round;

  let height = map(sin(angle), -1, 1, 0, 100);

​

  translate(0, 0, 75)

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  noFill()

  stroke("white")

  strokeWeight(1.5)

​

  switch (cubeVariant) {

​

    case 0:

      // pulse cube

      box(height);

      break;

​

    case 1:

      // centerd multi cube

      rotateX(frameCount * 0.01);

      box(100);

      rotateY(frameCount * 0.01);

      box(100);

      rotateZ(frameCount * 0.01);

      box(100);

      break;

​

    case 2:

      // x made of cubes

      // center

      box(100);

​

      // up

      translate(0, -100)

      box(100);

      translate(0, 100)

​

      // down

      translate(0, 100)

      box(100);

      translate(0, -100)

​

      // left

      translate(-100, 0)

      box(100);

      translate(100, 0)

​

      // right

      translate(100, 0)

      box(100);

      translate(-100, 0)

      break;

    case 3:

      // center

      box(height);

​

      // up

      translate(0, -100)

      box(height);

      translate(0, 100)

​

      // down

      translate(0, 100)

      box(height);

      translate(0, -100)

      break;

    default:

      break;

  }

​

  pop()

}

​

function drawGrid(offset = 0) {

  push()

​

  for (let col = 0; col < numColumns; col++) {

    for (let row = 0; row < numRows; row++) {

      const sizeX = ((width - 2 * gridMargin) / numColumns)

      const sizeY = ((height - 2 * gridMargin) / numRows)

      const x = (gridMargin + col * sizeX) + offset;

      const y = (gridMargin + row * sizeY) + offset;

      const mapX = map(x, 0, width, -width / 2, width / 2)

      const mapY = map(y, 0, height, -height / 2, height / 2)

​

      noFill()

      stroke('white')

      strokeWeight(2)

      rect(mapX, mapY, sizeX, sizeY)

    }

  }

​

  pop()

}

​

const renderBars = ({

  barWidth,

  list,

  paddingX = 0,

  startY,

  endY

}) => {

  list.forEach((color, index) => {

    const startX = barWidth * index;

​

    if (Array.isArray(color)) {

      renderBars({

        barWidth: barWidth / color.length,

        list: color,

        paddingX: startX,

        startY,

        endY,

      });

    } else {

      fill(color);

      rect(startX + paddingX, startY, barWidth, endY - startY);

    }

  });

};

​

function drawGlitch() {

  const topStartY = 0;

  const midStartY = height * 0.7;

  const bottomStartY = height * 0.8;

  const top = {

    list: topList,

    barWidth: width / topList.length,

    startY: topStartY,

    endY: midStartY,

  };

  const mid = {

    list: midList,

    barWidth: width / midList.length,

    startY: midStartY,

    endY: bottomStartY,

  };

  const bottom = {

    list: bottomList,

    barWidth: width / bottomList.length,

    startY: bottomStartY,

    endY: height,

  };

​

  push()

​

  noStroke();

  translate(-width / 2, -height / 2)

  renderBars(top);

  renderBars(mid);

  renderBars(bottom);

​

  const randomInt = random(50);

​

  pop()

}

​

function drawGradient() {

  push()

​

  const translatedX = -width / 2;

  const translatedY = -height / 2;

  const zIndex = map(sin(angle), -1, 1, -50, 100);

​

  translate(0, 0, zIndex)

​

  for (let i = translatedY; i <= translatedY + height; i++) {

    const red = sin(angle + 0) * 127 + 128;

    const green = sin(angle + 2) * 127 + 128;

    const blue = sin(angle + 4) * 127 + 128;

    const start = color(red, green, blue);

    const end = color(255, 255, 255);

    const inter = map(i, translatedY, translatedY + height, 0, 1);

    const c = lerpColor(start, end, inter);

    stroke(c);

    line(translatedX, i, translatedX + width, i);

  }

​

  pop()

}

​

function addEcho(x, y) {

  if (wordEchoes.length === numbEchos) wordEchoes.shift();

​

  const pos = {

    x,

    y,

  };

​

  wordEchoes.push(pos);

}

​

function updateWordPos() {

  // Update the position of the shape

  wordXPos = wordXPos + wordXSpeed * wordXDir;

  wordYPos = wordYPos + wordYSpeed * wordYDir;

​

  addEcho(wordXPos, wordYPos)

​

  // Test to see if the shape exceeds the boundaries of the screen

  // If it does, reverse its direction by multiplying by -1

  if (wordXPos > width - circleWidth || wordXPos < circleWidth) {

    wordXDir *= -1;

  }

  if (wordYPos > height - circleWidth || wordYPos < circleWidth) {

    wordYDir *= -1;

  }

​

  wordRotate--

}

​

function drawWord() {

  push()

​

  // const tint = map(sin(angle), -1, 1, 0, 1);

  // const tintedColor = color(`rgba(255, 255, 255, ${tint})`)

​

  wordEchoes.forEach((echo, idx) => {

    if (!echo) return;

​

    const step = idx + 10;

    const opacity = map(idx, 0, numbEchos - 1, 0, 0.25)

    const tintedColor = idx === numbEchos - 1 ? 'white' : color(`rgba(255, 255, 255, ${opacity})`)

​

    fill(tintedColor)

​

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

      const degs = map(i, 0, word.length - 1, -180, 180);

      const rads = radians(degs + wordRotate);

      const char = word[i];

​

      push();

​

      translate(-width / 2, -height / 2)

      translate(echo.x, echo.y)

      rotateZ(rads);

      text(char, 0, -100);

      pop();

    }

  })

​

  updateWordPos()

​

  pop()

}

​

function updateSketch() {

  cubeVariant = random([0, 1, 2, 3])

  word = word === hello ? goodbye : hello;

}

​

function updateSpeed() {

  const currentIndex = speeds.findIndex(speed => speed === sketchSpeed);

​

  sketchSpeed = speeds[currentIndex + 1] || speeds[0]

}

​

function draw() {

  const paused = sketchSpeed === 0;

​

  // 60 = default framerate

  if (!paused && frameCount % (60 * GLITCH_SECONDS) === 1) {

    drawGlitch()

    updateSketch()

  } else {

    background('white')

    drawGradient()

    drawGrid()

    drawWord()

    drawCube()

  }

​

  if (!paused) {

    angle += sketchSpeed;

  }

}

​

function mouseClicked() {

  updateSpeed()

}