Grad Line #genuary25 #genuary #genuary2525

/*

  Grad Line #genuary25 #genuary #genuary2525

  One line that may or may not intersect itself

  https://openprocessing.org/sketch/2521656

  #generativeart #creativecoding #p5js

*/

​

let S;

let pal;

​

function setup() {

  createCanvas(windowWidth, windowWidth * 0.6);

  S = windowHeight;

  describe("overlapping gradient rectangles forming a line");

  frameRate(60);

  noiseSeed(~~random(123456789));

  pal = random(palettes);

  background(32);

  noStroke();

  loop();

}

​

function draw() {

  const yLine = noise(PI) * height;

  for (let x = width*0.1; x < width*0.9; x+=width/20) {   

    const s = random(0.075, 0.15) * S;

    const y = yLine + (noise(x/123)-0.5) * height/4;

    const d = 0.25;

    const w = random(1-d, 1+d) * s;

    const h = random(1-d, 1+d) * s;

    const p = [...pal];

    shuffle(p, true)

    gradRect(x-w/2, y-h/2, w, h, p)

  }

  noLoop();

  drawMsg("Grad Line - by rectangles (epi) #genuary2525");

}

​

function gradRect(x, y, w, h, pal) {

  const ctx = drawingContext

  const gradient = ctx.createLinearGradient(x, y, x+w, y+h);

  const n = pal.length-1;

  for (let i = 0; i <= n; i++) {

    gradient.addColorStop(i/n, pal[i]);

  }

  ctx.fillStyle = gradient;

  rect(x, y, w, h);

  // ellipse(x, y, w, h)

}

​

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 mouseClicked() {

  if (mouseButton != RIGHT) setup();

}