【 Processing / p5.js 】Cracked lines

code( p5.js )

function setup() {
    createCanvas(700, 700);
    noLoop();
    noFill();
}

function draw() {
    // background color
    background(random(200, 250), random(200, 250), random(200, 250));
    // motif position
    let dr_steps = random(95, 100);
    for (let y = 0; y < height; y += dr_steps) {
        for (let x = 0; x < width; x += dr_steps) {
            push();
            translate(x, y);
            pattern001();
            pattern002();
            pop();
        }
    }
}
// motif drawing01
function pattern001() {
    let a = 0.0;
    let step = 1.2;
    let ranA = random(20);
    let inc = TWO_PI / ranA;

    beginShape();
    for (a = 0; a <= TWO_PI; a += step) {
        let vr = map(noise(2232), 0, 1, width / 2, width);
        stroke(random(220, 250), random(210, 250), random(240, 250));
        blendMode(BURN);
        vertex(vr / 220.5 * sin(a), 2.5 * cos(a));
        rotate(PI / random(2));
    }
    endShape(CLOSE);
    a = a + inc;
    blendMode(BLEND);
}
// motif drawing02
function pattern002() {
    let b = 0.0;
    let ranA = random(110);
    let ranB = random(width / 10);
    let inc = TWO_PI / ranA;

    scale(random(0.25, 0.3));
    blendMode(BURN);
    for (let i = 0; i < width / 2; i++) {
        rect(i * 0.2, tan(b), tan(b) * ranB, 3);
        rotate(PI / 120);
        b = b + inc;
    }
    blendMode(BLEND);
}

code( Processing )

void setup() {
    size(700, 700);
    noLoop();
    noFill();
}
void draw() {
    // background color
    background(random(200, 250), random(200, 250), random(200, 250));
    
    // motif position
  float  dr_steps = random(95, 100);
    for (int y = 0; y < height; y += dr_steps) {
        for (int x = 0; x < width; x += dr_steps) {
            push();
            translate(x, y);
            pattern001();
            pattern002();
            pop();
        }
    }
}
// motif01
void pattern001() {
    float val1 = 0.0;
    float step = 1.2;
    float ranA = random(20);
    float inc = TWO_PI / ranA;
    
// motif01 drawing
    beginShape();
    for ( val1 = 0; val1 <= TWO_PI; val1 += step) {
        float vr = map(noise(2232), 0, 1, width / 2, width);
        stroke(random(220, 250), random(210, 250), random(240, 250));
        blendMode(MULTIPLY);
        vertex(vr / 220.5 * sin(val1), 2.5 * cos(val1));
        rotate(PI / random(2));
    }
    endShape(CLOSE);
    val1 = val1 + inc;
    blendMode(BLEND);
}
// motif02
void pattern002() {
    float b = 0.0;
    float ranA = random(110);
    float ranB = random(width / 10);
    float inc = TWO_PI / ranA;
    
   // motif02 drawing
    scale(random(0.05, 0.1));
    blendMode(MULTIPLY);
    for (int i = 0; i < width / 2; i++) {
        rect(i * 0.2, tan(b), tan(b) * ranB, 3);
        rotate(PI / 120);
        b = b + inc;
    }
    blendMode(BLEND);
}

openProcessing

openprocessing.org

License

memo / comment

p5.jsのblendMode(BURN)を、ProcessingではblendMode(MULTIPLY)に変更して、見え方の再現を近づけています。
（もっといい方法があればご教示いただけると幸いです！）