//

// Pierre Rossel - HEAD-Genève

//

// 2019-09-20

//

​

var sLetters = "ALONE";

var letters = [];

var myFont;

​

function preload() {

  myFont = loadFont('Rex-Bold-1.ttf');

}

​

function setup() {

​

  createCanvas(450, 450);

​

  VideoRecorder.addButton();

​

  // Reduce size of preview

  let scalePreview = 1;

  let cnv = document.getElementById('defaultCanvas0');

  cnv.style.width = round(width * scalePreview) + "px";

  cnv.style.height = round(height * scalePreview) + "px";

​

  frameRate(30);

​

  // Create letters

  let x = 40,

    y = 150;

  sLetters.split('').forEach(chr => {

    letters.push(new Letter(chr, x, y));

    x += 80;

  });

​

  background(255);

  strokeWeight(4);

​

  textSize(120);

  textFont(myFont);

  //text(sLetters, 40, 200);

​

}

​

​

function draw() {

​

  if ((frameCount % 60) == 0) {

​

    // find one not falling

    let candidates = letters.filter(letter => !letter.falling);

    let letter = candidates[floor(random(candidates.length - 1))];

​

    // make it fall

    if (letter) {

      letter.fall();

​

      letters.splice(letters.indexOf(letter), 1);

      letters.push(letter);

    }

  }

​

  // Draw letters

  fill(255);

  stroke(0);

  letters.forEach((letter) => {

    letter.draw()

  });

​

  // Fade out

  if (0) {

    fill(255, 20);

    noStroke();

    rect(0, 0, width, height);

  }

}

​

​

class Letter {

​

  constructor(chr, x, y) {

    this.chr = chr;

    this.x = x;

    this.y = y;

    this.dx = random(-3, 3);

    this.dy = 0;

    this.falling = false;

  }

​

  draw() {

​

    if (this.falling) {

      this.x += this.dx;

      this.dy += 0.1;

      this.y += this.dy;

​

      // Bounce

      if (this.y > height) {

        this.dy *= -0.8;

        this.y = height;

      }

    }

​

    text(this.chr, this.x, this.y);

  }

​

  fall() {

    this.falling = true;

  }

​

}