Gradation_031

const w = 800;

const h = 800;

const palette = ["#0477BF", "#AEB9BF", "#BF1120", "#0D0D0D"];

let rectSize = 400;

let lineWidth = 20;

​

function setup() {

  createCanvas(w, h);

  background(palette[0]);

  rectMode(CENTER);

  frameRate(30);

}

​

function draw() {

  translate(w / 2, h / 2);

​

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

    drawClip(

      sin(frameCount / 100) * ((rectSize / 2) * i - rectSize),

      cos(frameCount / 100) * ((rectSize / 2) * i - rectSize)

    );

  }

​

  // noLoop();

}

​

function drawClip(x, y) {

  push();

  translate(x, y);

  drawingContext.save();

  strokeWeight(0);

  ellipse(0, 0, rectSize / 2);

  drawingContext.clip();

  drawEllipse(0, 0);

  drawingContext.restore();

  pop();

}

​

function drawEllipse(x, y) {

  for (let i = rectSize; i > 0; i -= lineWidth) {

    let n = map(abs(i - frameCount), 0, rectSize, 0, palette.length);

    let f = n % 1;

    let j = int(n);

    let c = lerpColor(

      color(palette[j % palette.length]),

      color(palette[(j + 1) % palette.length]),

      f

    );

    push();

    fill(c);

    x = x + sin(frameCount / 10) * 2;

    y = 0;

    translate(x, y);

    ellipse(0, 0, i);

    pop();

  }

}

​