p5.js – マトリックスレイン習作02

マトリックスレイン習作01に修正を加えました。
・文字を半角に
・横幅いっぱいに文字を表示
・各列の文字のサイズと落ちるスピードをランダムに変更
・クリックで再描画

ソースはこちら

'use strict';

let cols = [];
const MIN_FRAME = 1;
const MAX_FRAME = 10;
let frameIdx = MIN_FRAME;

function setup() {
  createCanvas(300, 300);
  background(0);
  noStroke();
  textAlign(LEFT);
  frameRate(15);
  init();
}

function init() {
  noLoop();
  cols = [];
  let x = 0;
  while( x < width ) {
    const size = parseInt(random(5, 25));
    cols.push(new Colmun(x, size));
    x += size;
  }
  background(0);
  loop();
}

function mouseClicked() {
  init();
}

function draw() {
  if( ++frameIdx > MAX_FRAME ) {
    frameIdx = MIN_FRAME;
  }

  cols.forEach(col => {
    col.draw();
  });
}

class Colmun {
  posX;
  posY = 0;
  charSize = 15;
  chars = ['ナ', 'マ', 'ス', 'テ'];
  charIdx = 0;
  speed = parseInt(random(1, 5));

  constructor(x, size) {
    this.posX = x;
    this.charSize = size;
  }

  draw() {
    if(frameIdx % this.speed !== 0) {
      return;
    }
    if(this.posY >= height + this.charSize) {
      this.posY = 0;
    }
    // 半透明の黒い四角で文字のフェードアウトを実現
    fill(0, 0, 0, 50);
    rect(this.posX, 0, this.charSize, height);
    // 文字を描画
    fill('lime');
    textSize(this.charSize);
    text(this.chars[this.charIdx], this.posX, this.posY);
    this.posY += this.charSize;
    if(++this.charIdx >= this.chars.length) {
      this.charIdx = 0;
    }
  }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です