p5.jsでキラキラした星を降らせる

スポンサーリンク

p5.jsでキラキラした星を降らせる。
ファミコンのオープニング画面でよく見る、宇宙っぽいやつ。

全画面で表示

スポンサーリンク

プログラム

var NUM_OF_BUBBLES = 100;
var MIN_SIZE = 2;
var MAX_SIZE = 2;
var bubbles = [];

function setup() {
  createCanvas(640, 480);
  for (let i = 0; i < NUM_OF_BUBBLES; i++) {
    bubbles.push(new Bubble());
  }
}

function draw() {
  background(0);
  for (let b of bubbles) {
    b.move();
    b.show();
  }
}

class Bubble {
  constructor() {
    this.x = random(width);
    this.y = random(0,height);
    this.r = random(MIN_SIZE, MAX_SIZE);
    this.speedY = random(-1, -1);
  }

  move() {
    this.y -= this.speedY;

    if (this.isOffScreen()) {
      this.x = random(width);
      this.y = 0;
      this.r = random(MIN_SIZE, MAX_SIZE);
    }
  }

  show() {
    ellipse(this.x, this.y, this.r * 2);
    fill(random(0,255),random(0,255),random(0,255))
  }

  isOffScreen() {
    return this.y > 480;
  }
}
p5.js
スポンサーリンク

コメント

タイトルとURLをコピーしました