processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.51k stars 3.29k forks source link

added paletteLerp #6960

Closed RandomGamingDev closed 1 month ago

RandomGamingDev commented 5 months ago

Resolves #6959

Changes:

Add a function called paletteLerp() for lerping/interpolating between a list/palette of colors.

Screenshots of the change:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  const palette = [color("red"), color("yellow"), color("green")];
  const lerp_color = paletteLerp(palette, (millis() / 2000) % 1);
  background(lerp_color);
}

PR Checklist

RandomGamingDev commented 1 month ago

Here's what the new version requested using color stops uses:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(lerpPalette([
    ["white", 0],
    ["red", 0.05],
    ["green", 0.25],
    ["blue", 1]
  ], millis() / 10000 % 1));
}