An attempt at recreating the intro to MKBHD’s awesome videos, using Processing.

mkbhd-intro.pde

// An attempt at recreating the intro to MKBHD’s awesome videos.
// MKBHD’s videos can be seen here: https://www.youtube.com/marquesbrownlee
// A GIF of the result can be seen here: https://i.imgur.com/EAfI0uJ.gif
//
// Code by @marcedwards from @bjango.

float n1 = 0;
float n2 = 0;
float ease = 0;

void setup() {
  size(640, 360, P2D);
  frameRate(30);
  smooth(8);
  strokeWeight(1);
}

void draw() {
  background(#cc423d);

  ease = easeInOutQuint(easeTriangle(timeCycle(120)));
  
  pushMatrix();
  translate(0 - ease * 320, 0 - ease * 180);
  scale(1 + ease, 1 + ease);

  for (int i = 16; i < 360; i += 41) {
    for (int j = 0; j < 8; j++) {
      stroke(255, 255, 255, 80);
      line(noise(5 + i + j + n1) * 1600 - 400,
           i,
           noise(5 + i + j + n1 + 0.03) * 1600 - 400,
           i);

      stroke(255, 255, 255, 200);
      line(noise(i + j + n2) * 1280 - 320,
           i,
           noise(i + j + n2 + 0.04) * 1280 - 320,
           i);
    }
  }

  popMatrix();

  n1 = n1 + 0.003;
  n2 = n2 + 0.004;

  //render(360);
}

float timeCycle(int totalframes, int offset) {
  return float((frameCount + offset) % totalframes) / float(totalframes);
}

float timeCycle(int totalframes) {
  return timeCycle(totalframes, 0);
}

float easeTriangle(float t) {
  return t<0.5 ? t*2 : 2-(t*2);
}

float easeInOutQuint(float t) {
  return t<0.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t;
}

void render(int frames, String foldername) {
  saveFrame(foldername+"/frame####.png");
  if (frameCount==frames) {
    exit();
  }
}

void render(int frames) {
  render(frames, "render");
}