p5.jsでカラフルなバブルが上昇するアニメーション

カラフルな泡が上昇する壁紙

コード

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<style>
    html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
</style>
  <meta charset="utf-8" />
</head>

<body>
  <script>
      var NUM_OF_BUBBLES = 40; // 生成するバブルの数
var MIN_SIZE = 4; // バブルの最小半径
var MAX_SIZE = 20; // バブルの最大半径
var bubbles = []; // 生成したバブルを格納する配列
var colors = [ // バブルの色（4色）
  [255, 0, 255], // ピンク
  [255, 255, 0], // 黄色
  [0, 255, 255], // 青色
  [144, 255, 59] // 緑色
];

function setup() {
//createCanvas(640, 480);
createCanvas(640, 480);
background(0);

  // バブルを生成
  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); // x座標の位置はランダムにする
    this.y = height; // バブルの初期位置はキャンバスの一番下とする
    this.r = random(MIN_SIZE, MAX_SIZE); // バブルの半径
    this.c = colors[floor(random(colors.length))]; // バブルの色
    this.speedY = random(-2, -1); // 上昇する速度
    this.lightX = random([-1, 1]); // バブルに描画する光のx座標の位置
    this.lightY = random([-1, 1]); // バブルに描画する光のy座標の位置
  }

  // バブルを上昇させる
  move() {
    this.x += random(-1, 1); // バブルが微妙に左右に揺れるようにしている
    this.y += this.speedY; // バブルを上昇させる

    // バブルがキャンバスから見えなくなったら、
    // 位置をキャンバスの一番下に戻す。
    // 色や大きさなども変更する。
    if (this.isOffScreen()) {
      this.x = random(width);
      this.y = height;
      this.r = random(MIN_SIZE, MAX_SIZE);
      this.c = colors[floor(random(colors.length))];
      this.speedY = random(-2, -1);
      this.lightX = random([-1, 1]);
      this.lightY = random([-1, 1]);
    }
  }

  // バブルを描画
  show() {
    // バブルの枠線の色を設定
    stroke(this.c[0], this.c[1], this.c[2]);

    // バブルの色を設定
    fill(this.c[0], this.c[1], this.c[2], floor(random(10, 50)));

    // バブルを描画
    ellipse(this.x, this.y, this.r * 2);

    // バブルに当たる光の色を設定
    fill(255)

    // バブルに当たる光を描画
    let offsetX = this.lightX * this.r / 2;
    let offsetY = this.lightY * this.r / 2;
    ellipse(this.x + offsetX, this.y + offsetY, this.r * 0.2);
  }

  // バブルが一番上まで到達したかどうか判定
  isOffScreen() {
    return this.y < 0;
  }
}
  </script>
</body>

</html>

アレンジ

「ブラー」を利用してバブルの輪郭に光をつける。

  drawingContext.shadowBlur = 30;
  drawingContext.shadowColor = color(255, 255, 255);

p5.jsでカラフルなバブルが上昇するアニメーション

カラフルな泡が上昇する壁紙

コード

アレンジ

引用元

コメント