【 p5.js/Processing 】Ellipses and Cracked lines.
code( p5.js )
function setup() { createCanvas(700, 700); noLoop(); noFill(); } function draw() { // background color background(random(220, 250), random(220, 250), random(200, 250)); strokeWeight(.9); // 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 drawing function pattern001() { let a = 0.0; let ranA = random(110); let ranB = random(width / 10); let inc = TWO_PI / ranA; //size scale(random(0.09, 0.3)); // shape beginShape(); stroke(random(190, 250), random(200, 250), random(210, 250)); vertex(220.5 * sin(a), 2.5 * cos(a)); rotate(PI / random(2)); endShape(CLOSE); blendMode(BURN); for (let i = 0; i < width / 2; i++) { rect(i * 0.2, tan(a), tan(a) * ranB, 3); rotate(PI / ranA); a = a + inc; } blendMode(BLEND); } // motif drawing function pattern002() { let ranA = random(40); //size scale(random(3.5)); // shape for (let i = 0; i < height / 10; i++) { let col1 = color(random(10, 220), random(100, 255), random(100, 255)); stroke(col1); strokeWeight(.4); arc(ranA, ranA, 2 * i, 2 * i, random(TWO_PI), random(TWO_PI)); noFill(); } }
code( Processing )
void setup() { size(700, 700); //noLoop(); noFill(); frameRate(1); } void draw() { // background color background(random(220, 250), random(220, 250), random(200, 250)); strokeWeight(.9); // 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(); } } } // motif drawing void pattern001() { float a = 0.0; float ranA = random(110); float ranB = random(width / 10); float inc = TWO_PI / ranA; //size scale(random(0.09, 0.3)); // shape beginShape(); stroke(random(190, 250), random(200, 250), random(210, 250)); vertex(220.5 * sin(a), 2.5 * cos(a)); rotate(PI / random(2)); endShape(CLOSE); blendMode(BURN); for (float i = 0; i < width / 2; i++) { rect(i * 0.2, tan(a), tan(a) * ranB, 3); rotate(PI / ranA); a = a + inc; } blendMode(BLEND); } // motif drawing void pattern002() { float ranA = random(40); //size scale(random(3.5)); // shape for (int i = 0; i < height/10; i++) { int col1 = color(random(10, 220), random(100, 255), random(100, 255)); stroke(col1); strokeWeight(.4); arc(ranA, ranA, 2*i, 2*i, random(TWO_PI), random(TWO_PI)); noFill(); } }
openProcessing
後日追記
License
memo / comment
一番最初に投稿したCracked linesも使ってみました。 個人的にできる範囲でいくつかアレンジをしたもののピンとこなかったので、こちらで昇華。 Processing / p5.js 両方ともあるので、ぜひ。