p5.js – マトリックスレイン公開

マトリックスのあれ、いったん完成ということにして、自作ツールの方に公開しました。
https://www.fukakuutsukushikiasia.com/%e8%87%aa%e4%bd%9c%e3%83%84%e3%83%bc%e3%83%ab

前回からの変更点は以下の通りです。
・先頭の文字を白に
・文字を半角カナ、数字、小文字のアルファベットをランダムで表示

ソースはこちら

'use strict';

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

function setup() {
  createCanvas(windowWidth * 0.9, windowHeight * 0.9);
  background(0);
  noStroke();
  textAlign(LEFT);
  frameRate(13);
  init();

  const kana = "ヲァィゥェォャュョッアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン";
  const alphabet = "abcdefghijklmnopqrstuvwxyz"; //"ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const number = "012345679";
  chars = (kana + alphabet + number).split("");
}

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;
  posYPre;
  char;
  charSize;
  speed = parseInt(random(1, 5));

  constructor(x, size) {
    this.posX = x;
    this.charSize = size;
    this.posY = 0;
    this.posYPre = -1 * size;
  }

  draw() {
    if(frameIdx % this.speed !== 0) {
      return;
    }
    if(this.posY >= height + this.charSize) {
      this.posY = 0;
    }
    // 半透明の黒い四角で文字を徐々に消す
    fill(0, 0, 0, 20);
    const adjustment = 0; //this.charSize / 2; 文字をCENTERにしたときは左にずらす
    rect(this.posX - adjustment, 0, this.charSize, height);

    /* 文字を描画 */
    textSize(this.charSize);

    // 前回の文字色をlimeで上書き
    fill('lime');
    text(this.char, this.posX, this.posYPre);
    // 先頭の文字は白
    this.char = chars[parseInt(random(0, chars.length - 1))];
    fill('white');
    text(this.char, this.posX, this.posY);

    this.posYPre = this.posY;
    this.posY += this.charSize;
  }
}

コメントを残す

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