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

コメントを残す

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