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

マトリックスのオープニングみたいなもの(マトリックレインというらしい)を作ってみようと思います。まずは落ちていく文字から。
徐々にバージョンアップしていく予定です。

ソースはこちら

'use strict';

let posY = 0; // 文字の位置
let posX;
let fontSize = 15; // フォントサイズ/移動距離
let strings = ['ナ', 'マ', 'ス', 'テ'];
let stringIdx = 0;

function setup() {
  createCanvas(300, 300);
  background(0);
  noStroke();
  textSize(fontSize);
  textAlign(CENTER);
  frameRate(10);
  posX = width / 2;
}

function draw() {
  fill(0, 50);
  rect(0, 0, width, height);

  if(posY >= height + fontSize) {
    posY = 0;
  }
  fill('lime');
  text(strings[stringIdx], posX, posY);
  posY += fontSize;
  if(++stringIdx >= strings.length) {
    stringIdx = 0;
  }
}

コメントを残す

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