Palette

ritocoのクリエイティブコーディング記録

【 Processing / p5.js 】Blurred ellipse.

f:id:ritocopalette:20211201161258p:plainf:id:ritocopalette:20211201161307p:plain



code( Processing )

void setup() {
    size(700, 700);
    noLoop();
    noFill();
}
// motif position
void draw() {
    background(255);
    for (float y = 0; y < height; y += 120) {
        for (float x = 0; x < width; x += 120) {
            push();
            translate(x, y);
            myCircle();
            pop();
        }
    }
}
// motif drawing
void myCircle() {
    for (float i = 0; i < 2; i++) {
        int pal = color(random(200,25),random(250),random(250));
        float val1 = width / 2;
        blendMode(HARD_LIGHT);
        stroke(pal);
        strokeWeight(15);

        beginShape();
        for (float a = 0; a <= TWO_PI; a += 0.05) {
            float xoff = map(cos(a), -1, 1, cos(a), 2);
            float yoff = map(sin(a), -1, 1, cos(a), 2);
            float vr = map(noise(xoff, yoff), 0, random(10, 20), val1 / 2, val1);
            vertex(vr / 2 * cos(a), vr / 2 * sin(a));
        }
        endShape(CLOSE);
    }
    blendMode(BLEND);
}



code( p5.js )

function setup() {
    createCanvas(700, 700);
    noLoop();
    noFill();
}
// motif position
function draw() {
    background(250);
    for (let y = 0; y < height; y += 120) {
        for (let x = 0; x < width; x += 120) {
            push();
            translate(x, y);
            myCircle();
            pop();
        }
    }
}
// motif drawing
function myCircle() {
    for (let i = 0; i < 2; i++) {
        let pal = color(random(200,250),random(250),random(250));
        let val1 = width / 2;

        stroke(pal);
        strokeWeight(15);
        blendMode(BURN);
        beginShape();

        for (let a = 0; a <= TWO_PI; a += 0.05) {
            let xoff = map(cos(a), -1, 1, cos(a), 2);
            let yoff = map(sin(a), -1, 1, cos(a), 2);
            let vr = map(noise(xoff, yoff), 0, random(10, 20), val1 / 2, val1);
            vertex(vr / 2 * cos(a), vr / 2 * sin(a));
        }
        endShape(CLOSE);
    }
    blendMode(BLEND);
}




openProcessing

準備中

License

クリエイティブ・コモンズ・ライセンス


memo / comment

画像はp5.jsで実行したものを使っています。Processing verだと、見え方が変わる場合があります。