見出し画像

p5.jsでclassを

先日のnoteに書きましたが、田所淳さんの『Processing クリエイティブ・コーディング入門−コードが生み出す創造表現』でProcessingを勉強中です。

この前Processingで作ったものをp5.jsで作れるかどうか、挑戦してみました。

p5.jsで初めてclassを使いましたが、できました。変数使うときに「let」を多用しているけど、なんか違う気がしている。けど、わからない。

let NUM = 500;
let pos;
let vel;
let movers = new Array(NUM);
let diameter;
let c;

function setup() {
    createCanvas(800, 600, P2D);
    colorMode(HSB, 360, 100, 100, 100);
    blendMode(BLEND);

    for (let i = 0; i < NUM; i++) {
        movers[i] = new Mover();
    }
}
function draw() {
    background(200, 100, 100, 100);

    for (let i = 0; i < NUM; i++) {
        movers[i].drawellipse();
    }
}

class Mover {

    constructor() {
        noStroke();
        this.pos = createVector(random(width), random(height));
        this.vel = createVector(random(-4, 4), random(-4, 4));
        this.diameter = random(8, 32);
        this.c = color(random(360), 100, 100, random(100));
    }

    drawellipse() {
        fill(this.c);
        ellipse(this.pos.x, this.pos.y, this.diameter, this.diameter);
        this.pos.add(this.vel);

        if (this.pos.x < 0 || this.pos.x > width) {
            this.vel.x = this.vel.x * -1;
        }

        if (this.pos.y < 0 || this.pos.y > height) {
            this.vel.y = this.vel.y * -1;
        }
    }
}

やっぱりProcessing(Java?)とp5.js(JavaScript)は同じようで全然違いますね。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

スキ、ありがとうございますー!
1

yusakuhamajima

自分に向けてnoteを書いています。いろんなことを忘れてしまわないために。 音楽とか。Processing, TidalCycles, Sonic Piとか。

創作タイム22時

創作したいと思って。なんか作っていると気分が楽になりますよね。 ツールは主に、TidalCycles, Processing, P5.js, Sonic Piなどなど。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。