Processing.jsを使ったアニメーション

Processing.jsを使ったアニメーションは、シンプルかつパワフルな方法でブラウザ上で動くビジュアルやインタラクティブな作品を作ることができます。以下にいくつかのサンプルコードを紹介します。

1. シンプルなバウンシングボール

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>バウンシングボール</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        let x = 50;
        let y = 50;
        let xspeed = 5;
        let yspeed = 2;

        function setup() {
            createCanvas(800, 600);
        }

        function draw() {
            background(200);
            ellipse(x, y, 50, 50);
            x += xspeed;
            y += yspeed;

            if (x > width || x < 0) {
                xspeed = -xspeed;
            }
            if (y > height || y < 0) {
                yspeed = -yspeed;
            }
        }
    </script>
</body>
</html>

2. シンプルなパーティクルシステム

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>パーティクルシステム</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        let particles = [];

        function setup() {
            createCanvas(800, 600);
        }

        function draw() {
            background(0);
            let p = new Particle(mouseX, mouseY);
            particles.push(p);
            for (let i = particles.length - 1; i >= 0; i--) {
                particles[i].update();
                particles[i].show();
                if (particles[i].finished()) {
                    particles.splice(i, 1);
                }
            }
        }

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = random(-1, 1);
                this.vy = random(-5, -1);
                this.alpha = 255;
            }

            finished() {
                return this.alpha < 0;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.alpha -= 5;
            }

            show() {
                noStroke();
                fill(255, this.alpha);
                ellipse(this.x, this.y, 16);
            }
        }
    </script>
</body>
</html>

3. 簡単なLシステムフラクタル

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Lシステムフラクタル</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script>
        let axiom = "F";
        let sentence = axiom;
        let len = 100;

        let rules = [];
        rules[0] = {
            a: "F",
            b: "FF+[+F-F-F]-[-F+F+F]"
        };

        function generate() {
            let nextSentence = "";
            for (let i = 0; i < sentence.length; i++) {
                let current = sentence.charAt(i);
                let found = false;
                for (let j = 0; j < rules.length; j++) {
                    if (current === rules[j].a) {
                        found = true;
                        nextSentence += rules[j].b;
                        break;
                    }
                }
                if (!found) {
                    nextSentence += current;
                }
            }
            sentence = nextSentence;
            len *= 0.5;
            turtle();
        }

        function turtle() {
            background(51);
            resetMatrix();
            translate(width / 2, height);
            stroke(255, 100);
            for (let i = 0; i < sentence.length; i++) {
                let current = sentence.charAt(i);

                if (current === "F") {
                    line(0, 0, 0, -len);
                    translate(0, -len);
                } else if (current === "+") {
                    rotate(PI / 6);
                } else if (current === "-") {
                    rotate(-PI / 6);
                } else if (current === "[") {
                    push();
                } else if (current === "]") {
                    pop();
                }
            }
        }

        function setup() {
            createCanvas(800, 600);
            background(51);
            turtle();
            let button = createButton("generate");
            button.mousePressed(generate);
        }
    </script>
</body>
</html>