let slider; // slider to control letter frequency

​

function setup() {

  createCanvas(600, 600);

  slider = createSlider(0, 50, 10); // create slider with range from 0 to 50 and default value of 10

  slider.position(10, height + 10); // position slider below canvas

}

​

function draw() {

  background(220);

  // generate new letters based on slider value

  for (let i = 0; i < slider.value(); i++) {

    letters.push(new Letter(random(width), -20, random(65, 91))); // add new letter with random position and uppercase letter code

  }

  // draw and update all letters

  for (let letter of letters) {

    letter.draw();

    letter.update();

  }

}

​

class Letter {

  constructor(x, y, code) {

    this.x = x;

    this.y = y;

    this.code = code;

    this.speed = random(1, 5);

  }

  draw() {

    text(String.fromCharCode(this.code), this.x, this.y); // draw letter at current position

  }

  update() {

    this.y += this.speed; // move letter down based on speed

    if (this.y > height) {

      // remove letter from array when it goes off screen

      let index = letters.indexOf(this);

      letters.splice(index, 1);

    }

  }

}