p5.js – ランダム関数(random)とパーリンノイズ(noise)の比較

ランダム(random)関数とパーリンノイズ(noise)の比較です。

カラーモードはHSBで、どちらも S=90, B=90 固定です。

Hの値をランダムに変えてます。Hの値を算出するにあたり、XY軸の値をnoise関数に指定したいと考えてました。参考になりそうなものは無いかと調べていたらズバリなサイトがありました。

https://infosmith.biz/blog/it/p5js-noise

 

以下ソースです。

冗長なのが恥ずかしいのですが、晒します。

main.html

<html lang="ja">
<head>
    <script src="../../../../lib/p5.js"></script>
    <script src="./main.js"></script>
</head>
<body>
    <p>ランダム(random)関数</p>
    <div id="canvas1"></div>
    <br/>
    <p>パーリンノイズ(noise)関数</p>
    <div id="canvas2"></div>
</body>
</html>

main.js

'use strict';

const CANVAS_SIZE = 300;
const FRAME_RATE = 2;
const RECT_SIZE = 5;
const NOISE_STEP = 0.02;
const NOISE_MODERATOR = 500;

const randomRectColor = function(p) {
  p.setup = function() {
    p.createCanvas(CANVAS_SIZE, CANVAS_SIZE);
    p.colorMode(p.HSB);
    p.noStroke();
    p.frameRate(FRAME_RATE);
  };

  p.draw = function() {
    p.background(0);
    for (let x = 0; x < p.height; x += RECT_SIZE) {
      for (let y = 0; y < p.width; y += RECT_SIZE) {
        p.fill(p.random(0, 360), 90, 90);
        p.rect(x, y, RECT_SIZE, RECT_SIZE);
      }
    }
  };
};

const noiseRectColor = function(p) {
  let zoff = 0.0;

  p.setup = function() {
    p.createCanvas(CANVAS_SIZE, CANVAS_SIZE);
    p.colorMode(p.HSB);
    p.noStroke();
    p.frameRate(FRAME_RATE);
  };

  p.draw = function() {
    p.background(0);
    for (let x = 0; x < p.width; x += RECT_SIZE) {
      for (let y = 0; y < p.height; y += RECT_SIZE) {
        // noise関数に各セルのXとYを固定し、Zで色を変化させる
        // Hueは0~360だが、noise(0~1)に360を掛けても赤がでない
        let h = p.noise(x/NOISE_MODERATOR, y/NOISE_MODERATOR, zoff) * 450;
        p.fill(h, 90, 90);
        p.rect(x, y, RECT_SIZE, RECT_SIZE);
      }
    }
    zoff += NOISE_STEP;
  };
};

new p5(randomRectColor, "canvas1");
new p5(noiseRectColor, "canvas2");

コメントを残す

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