Gradient Line #WCChallenge 250207

/*

  Gradient Line #WCCChallenge "From 0 to 1" 🪜 250207

  https://openprocessing.org/sketch/2536247

  #generativeart #creativecoding #p5js

​

  Dear Raph and creative coding community,

​

  animated version of #genuary25 "One line that may or may not intersect itself" 

  https://openprocessing.org/sketch/2521656

  -drawing a line from 0 to 1, 

  -choosing palette from 0 to 1,

  -using clrs from palette from 0 to 1,

  -lerping colors via gradient (from 0 to 1 internally i think as well)

​

  Join the Birb's Nest Discord for friendly creative coding community

  and future challenges and contributions: https://discord.gg/S8c7qcjw2b

  WCCC-Contributions: https://openprocessing.org/curation/78544

*/

​

let S, BG

let pal, palF;

​

function setup() {

  createCanvas(windowWidth, min(windowHeight, windowWidth * 0.5));

  frameRate(30);

  S = windowHeight;

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

  randomSeed(~~random(hour()+minute()+second()));

  noiseSeed(random(1234567));

  palF = random(); // 0..1

  BG = random(palettes[~~(palF * palettes.length)])

  noStroke();

  loop();

}

​

function draw() {

  background(BG); // 8);

  pal = [...palettes[~~(palF * palettes.length)]];

  const yLine = (noise(PI)/2+0.25) * height;

  let fd = 1 / ((noise(0)/2+0.25) * 0.1 * S); 

  for (let f = 0, i = 0; f < 1; f += fd, i++) {

    const s = (noise(f/123)/2+0.25) * 0.2 * S;

    const x = map(f, 0, 1, 0.1, 0.9) * width;

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

    const d = 0.25;

    const w = (noise(x/23, y/32, frameCount/80)+0.25) * 1.75*s;

    const h = (noise(y/23, x/32, frameCount/96)+0.25) * 1.75*s;

    // grad fraction, every 2nd switch direction

    let grF = fract(frameCount/100 % 100 + s); // fract(frameCount / 100);

    if (i % 2 == 1) grF = 1- grF;

    pal.push(pal.shift()); // shift colors for each box / gradient

    gradRect(x-w/2, y-h/2, w, h, pal, grF);

  }

  // noLoop();

}

​

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

  const ctx = drawingContext;

​

  // Create a Gradient

  const grOffX = w/(pal.length-1);

  const grOffY = h/(pal.length-1);

  const fp = frAnim * pal.length;

  const fc = fract(fp);

  const grd = ctx.createLinearGradient(

    x - grOffX*fc, 

    y - grOffY*fc,  

    x + w + grOffX*(1-fc), 

    y + h + grOffY*(1-fc), 

  );

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

    const clr = color(pal[(i+~~fp)%pal.length]);

    clr.setAlpha(160);

    grd.addColorStop(i/(pal.length-0), clr);

  }

​

  // Draw a filled Rectangle

  ctx.fillStyle = grd;

  ctx.fillRect(x, y, w, h);

}

​

function mouseClicked() {

  if (mouseButton != RIGHT) setup();

}