color run

const a = [280 / 360, 0.95, 0.7];

const b = [1 / 360, 0.3, 0.3];

const c = [0.5, 0.0, 0.0];

const d = [0.0, 0.0, 0.0];

let av, bv, cv, dv;

​

function setup() {

  createCanvas(600, 600);

  frameRate(30);

  colorMode(HSB, 1.0, 1.0, 1.0, 1.0);

​

  av = createVector(...a);

  bv = createVector(...b);

  cv = createVector(...c);

  dv = createVector(...d);

}

​

function getColor(t) {

  const vCos = (v) => createVector(cos(v.x), cos(v.y), cos(v.z));

​

  // from https://www.iquilezles.org/www/articles/palettes/palettes.htm

  // a + b*cos(TAU * (c * t + d))

  const colorVector = p5.Vector.add(av,

    p5.Vector.mult(bv,

      vCos(p5.Vector.mult(

        p5.Vector.add(dv,

          p5.Vector.mult(cv, t)), TAU))));

  return color(colorVector.x, colorVector.y, colorVector.z);

}

​

let avCopy, bvCopy, cvCopy, dvCopy;

​

function pushV() {

  avCopy = av.copy();

  bvCopy = bv.copy();

  cvCopy = cv.copy();

  dvCopy = dv.copy();

}

​

function popV() {

  av = avCopy;

  bv = bvCopy;

  cv = cvCopy;

  dv = dvCopy;

}

​

function draw() {

  background(0, 0, 0.5);

  strokeWeight(1);

  const a = radians(frameCount);

​

  pushV();

  let g = createGraphics(width, height);

  bv.x = (sin(-a)+1)*30/360;

  bv.y = (sin(-a)+1)/4;

  bv.z = (cos(a)+1)/2;

  cv.y = (sin(-a)+1) * 0.75;

  cv.z = 60;

​

  dv.x = a / 4;

  dv.y = -a / 7;

  dv.z = a / 7.5;

​

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

    const ip = i / height;

    const y = i;

    const c = getColor(ip);

    c.setAlpha(1);

    g.stroke(c);

    g.line(0, y, width, y);

  }

  image(g, 0, 0);

  popV();

​

​

  push();

  translate(width / 2, height / 2);

  blendMode(OVERLAY);

  const w = width / 1.618;

  const h = height / 1.618;

  noStroke();

  fill(0, 0, 0.8, 1);

  ellipse(0, 0, w, h);

  fill(0, 0, 0, 1);

  ellipse(0, 0, w, h);

  pop();

}