p5.js – ハエのように動き回る図形

図形のカラーモードはHSBで、X軸が色相、Y軸が明るさになっています。

単なるランダムでXY軸を決めると飛び飛びになってしまうため、パーリンノイズを使っています。


以下ソースです。説明はコメントに記載してあります。

'use strict';

let xoff = 0.0;

function setup() {
    const canvasSize = 300;
    createCanvas(canvasSize, canvasSize);
    background(200);
    colorMode(HSB, 360, 100, 100);
}

function draw() {
  // x, y座標を算出
  const x = noise(xoff) * width * 1.2 - (width * 0.1);
  const y = noise(xoff+5) * height * 1.2 - (height * 0.1);
  xoff += 0.01;

  // X軸 : Hue = 0~360度
  let h = map(x, 0, width, 0, 360);
  // Y軸 : Brightness = 15~100 (0だと真っ黒なので少し明るくする)
  let b = map(y, 0, height, 15, 100);
  
  // 塗りつぶす色
  fill(h, 100, b);

  // 図形描画
  ellipse(x, y, 30, 30);
}

コメントを残す

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