// https://fonts.google.com/specimen/Krona+One

// check the Sketch Files and the additional file

// KronaOne-Regular.ttf

//

// see the following WEBGL type example.

// https://editor.p5js.org/sojamo/sketches/mvEZEFfB6

​

// for more details about how to handle fonts and text,

// do check the reference under Typography

// https://p5js.org/reference/

​

let font;

let sound;

let soundLoaded = false;

​

function preload() {

  font = loadFont("FugazOne-Regular.ttf");

  sound = loadSound("shutter.wav");

}

​

function soundLoadedCallback() {

  soundLoaded = true;

}

​

function setup() {

  createCanvas(1080, 1080);

​

  textFont(font);

}

​

var i = 0;

let x1 = 200;

let x2 = 450;

​

function draw() {

  frameRate(60);

  background(0,0,133);

​

  push();

  fill(132,250,212);

  textSize(16);

  textAlign(LEFT, TOP);

  text("JOSEPH MULLER\nBROCKMAN", 210*2, 20*2);

  pop();

​

  push();

  fill(132,250,212);

  textSize(200);

  translate(0, 200);

  push();

  fill(194,252,212);

  text("KA", x1, height / 1.5);

  x1 = x1 + 1.5;

  pop();

  text("CHA", x2, height / 1.5);

  x2 = x2 - 1.5;

  if (x2 < x1 + 100) {

    sound.play()

    x1 = 200;

    x2 = 450;

    background(132,250,212);

    frameRate(1);

  }

  pop();

​

  push();

  fill(0,0,113);

  textSize(18);

  text("Camera shutter sound...", 210*2, 480);

  pop();

​

  if (soundLoaded && !sound.isPlaying()) {

    sound.play();

    sound.setVolume(0.8);

  }

​

}

​

function mousePressed() {

  sound.play()

}