Noise Grid #genuary2529

/*

  noise grid #genuary29 #genuary #genuary2529

  Grid-based graphic design.

  https://openprocessing.org/sketch/2525762

  #generativeart #creativecoding #p5js

*/

​

const SZE = 20;

let pal;

let svg;

​

function setup() {

  createCanvas(~~(windowWidth/SZE)*SZE, ~~(windowHeight/SZE)*SZE);

  describe("overlapping colored noise fields of circles with varying offset and diameter in grid")

  frameRate(60);

  noFill();

  strokeWeight(2);

  pal = palettes[frameCount%palettes.length];

}

​

function draw() {

  background(212);

  svg = `<svg height="${width}" width="${height}" xmlns="http://www.w3.org/2000/svg">\n`;

  for (let i = 0; i < pal.length; i++) {

    stroke(pal[i]);

    svg += `<g fill="none" stroke="${pal[i]}" stroke-width="1">\n`

    drawNoiseGrid(12.34 + i * 123.4);

    svg += `</g>\n`

  }

  svg += `</svg>`;

  drawMsg("noise grid (epi) #genuary2529")

}

​

function drawNoiseGrid(seed) {

  for (let y = 0; y < height; y += SZE) {

    for (let x = 0; x < width; x += SZE) {

      const dx = SZE * noise(seed, seed + x/123, frameCount/123);

      const dy = SZE * noise(seed + y/231, seed, frameCount/123);

      const dia = SZE * noise(seed + x/23, seed + y/32, frameCount/66);

      circle(x + dx, y + dy, dia * 1.5);

      svg += `<circle r="${nf(dia/2, 0, 2)}" cx="${nf(x + dx,0,2)}" cy="${nf(y + dy,0,2)}" />\n`

    }   

  }

}

​

function drawMsg(msg) {

  push();

  blendMode(BLEND);

  fill("black")

  noStroke();

  textAlign(LEFT, TOP)

  text(msg, 1, 1)

  fill("white")

  noStroke();

  textAlign(LEFT, TOP)

  text(msg, 0, 0)

​

  pop();

}

​

function keyPressed() {

  if (key === "s") {

    save(svg.split("\n"), "epi_noise_grid_circles.svg.txt");

  }

}

​

function mousePressed() {

  if (mouseButton != RIGHT) setup();

}