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");

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);
}

p5.js – 多角形/回転/拡大・縮小/透明度

以下ソースです。スクリプト内にコメントを追加しているので、それが解説になっています。

main.html

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.min.js"></script>
    <script src="./main.js"></script>
</head>
<body>
</body>
</html>

main.js

'use strict';

let corner = 3;             // 図形の角数
let stepCorner = 1;         // 角数の増減数
let radius = 0;             // 図形の半径
let stepSize = 3;           // 図形の拡大・縮小サイズ
let maxSize;                // 図形の最大サイズ(半径)
let hue = 0;                // カラーモードHSBのHue
const stepHue = 20;         // Hueの増加角度
let rotate = 0;             // 図形を何度傾けるか
const stepRotate = 3;       // 図形の回転角度

function setup() {
    const canvasSize = 300;
    createCanvas(canvasSize, canvasSize);
    // カラーモードをHSBにする
    colorMode(HSB);
    // 図形を表示領域の2倍の大きさまで描画する
    maxSize = width;
}

function draw() {
    background(0);
    setFillColor();
    drawPolygon();

    // 回転の角度 : 360度を超えたら0度にする
    rotate += stepRotate;
    if(rotate >= 360 ) {
        rotate = 0;
    }

    // 半径の増減
    radius += stepSize;
    if (radius > maxSize || radius < 0) {
        // 図形が最大値もしくは最小値になったら、拡大・縮小を反転させる
        stepSize *= -1;

        // 図形の拡大・縮小切り替わりのタイミングで色を変更する
        hue += stepHue;
        // HSBのHueは0~360度を繰り返す
        if (hue >= 360) { hue = 0; }

        // 図形の角を増減させる
        corner += stepCorner;
        // 図形は3角形~8角形を行ったり来たりする
        if( corner <= 3 || corner >= 8 ) {
            stepCorner *= -1;
        }
    }
}

function setFillColor() {
    // 透明度は半径に反比例:大きくなると薄くなる
    const alpha = map(radius, 0, maxSize, 1, 0);
    fill(hue, 100, 100, alpha);
}


function drawPolygon() {
    // 座標軸を一時保存
    push();
    // 初期状態だと(x=0, y=0)が左上なので中央に移動する
    translate(width/2, height/2);
    // 多角形の描画
    beginShape();
    for (let i = 0; i < corner; i++) {
        // 角度にrotateをプラスして回転させる
        let angle = map(i, 0, corner, 0, 360) + rotate;
        // 中心からの半径と角度でXY座標を求める
        let x = sin(radians(angle)) * radius;
        let y = cos(radians(angle)) * radius;
        // beginShape~endShapeの間にポイントすると線をつなげてくれる
        vertex(x, y);
    }
    endShape(CLOSE);
    // push で保存していた座標軸を元に戻す
    pop();
}

JavaScript埋め込みテスト

クリックすると線を描きます

以下のように直接HTMLを記述しています。完全に個人的なメモです。

<iframe src="/dannoura/ap01/blog/2021/01/14-001/main.html" frameborder="0" style="border:0; width: 350px; height: 350px;">
</iframe>

Node.js+Express.js – 画像やJavaScriptなど静的ファイルにアクセスする方法

初めてExpress.jsで作成したこのアプリで、Expressのejsファイルからjsなど静的ファイルへのアクセス方法ではまったので、備忘録として記録しておきます。

以下のような構成を元に説明します。

sampleprj
├index.js
│
├─public
│  └─js
│  └samplejs.js
│
└─views
  └view1.ejs

publicフォルダを静的ファイルのフォルダとして設定

/* index.js */
const express = require("express");
const app = express();

const PORT = 8081;
const server = app.listen(PORT, function(){
  console.log(`Server listening on port ${PORT}...`);
});

app.set('view engine', 'ejs');
app.use(express.static('public')); // ここでpublicフォルダを指定
app.get("/view1", function(req, res, next) {
    res.render("view1", {});
});

ejsファイルからjsファイルを読み込む

<!-- view1.ejs -->
<head>
  <script src="/js/samplejs.js"></script>
</head>

public フォルダ内に、例えば sampleimg.jpg という画像ファイルが格納されている場合、ブラウザで以下のURLにアクセスすると、その画像ファイルが表示されます。

http://xxx.xxx.xxx.xxx:8081/sampleimg.jpg