Palette

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

【 p5.js/Processing 】Ellipses and Cracked lines.

f:id:ritocopalette:20211201152844p:plainf:id:ritocopalette:20211201152847p:plain



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 両方ともあるので、ぜひ。