​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100); // HSB 모드 설정

  noStroke();

}

​

function draw() {

  background(220);

  // 시간에 따른 색상 이동을 위해 0.05초마다 색상이 한 칸씩 이동하는 shift 계산

  let shift = floor((millis() / 50) % sections);

​

  // 위쪽과 아래쪽 색상 변화 비율 계산 (10초 동안 서서히 변환 후 반복)

  let transitionFactor = (sin(TWO_PI * (millis() / 10000)) + 1) / 2;

​

  // Left quad vertices 

  let xl1 = 0, yl1 = 0;

  let xl2 = 0, yl2 = height;

  let xl3 = width * 0.25, yl3 = height * 0.75;

  let xl4 = width * 0.25, yl4 = height * 0.25;

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

    let t1 = i / sections;

    let t2 = (i + 1) / sections;

    let xTopLeft = lerp(xl1, xl4, t1);

    let yTopLeft = lerp(yl1, yl4, t1);

    let xBottomLeft = lerp(xl2, xl3, t1);

    let yBottomLeft = lerp(yl2, yl3, t1);

    let xTopRight = lerp(xl1, xl4, t2);

    let yTopRight = lerp(yl1, yl4, t2);

    let xBottomRight = lerp(xl2, xl3, t2);

    let yBottomRight = lerp(yl2, yl3, t2);

​

    let hue = map((i + shift) % sections, 0, sections, 180, 90);

    fill(hue, 80, 100);

    quad(xTopLeft, yTopLeft, xBottomLeft, yBottomLeft, xBottomRight, yBottomRight, xTopRight, yTopRight);

  }

  // Right quad vertices (왼쪽과 대칭적인 색상 및 이동 적용)

  let xr1 = width * 0.75, yr1 = height * 0.25;

  let xr2 = width * 0.75, yr2 = height * 0.75;

  let xr3 = width, yr3 = height;

  let xr4 = width, yr4 = 0;

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

    let t1 = i / sections;

    let t2 = (i + 1) / sections;

    let xTopLeft = lerp(xr1, xr4, t1);

    let yTopLeft = lerp(yr1, yr4, t1);

    let xBottomLeft = lerp(xr2, xr3, t1);

    let yBottomLeft = lerp(yr2, yr3, t1);

    let xTopRight = lerp(xr1, xr4, t2);

    let yTopRight = lerp(yr1, yr4, t2);

    let xBottomRight = lerp(xr2, xr3, t2);

    let yBottomRight = lerp(yr2, yr3, t2);

​

    let hue = map((sections - 1 - i + shift) % sections, 0, sections, 180, 90);

    fill(hue, 80, 100);

    quad(xTopLeft, yTopLeft, xBottomLeft, yBottomLeft, xBottomRight, yBottomRight, xTopRight, yTopRight);

  }

  // Top quad vertices (색상 속성이 10초 동안 서서히 변경됨)

  let xt1 = 0, yt1 = 0;

  let xt2 = width * 0.25, yt2 = height * 0.25;

  let xt3 = width * 0.75, yt3 = height * 0.25;

  let xt4 = width, yt4 = 0;

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

    let t1 = i / sections;

    let t2 = (i + 1) / sections;

    let xLeft = lerp(xt1, xt2, t1);

    let yLeft = lerp(yt1, yt2, t1);

    let xRight = lerp(xt4, xt3, t1);

    let yRight = lerp(yt4, yt3, t1);

    let xLeftNext = lerp(xt1, xt2, t2);

    let yLeftNext = lerp(yt1, yt2, t2);

    let xRightNext = lerp(xt4, xt3, t2);

    let yRightNext = lerp(yt4, yt3, t2);

​

    let hue = map((i + shift) % sections, 0, sections, 180, 90);

    let saturationTop = lerp(80, 40, transitionFactor);

    let brightnessTop = lerp(70, 100, transitionFactor);

    fill(hue, saturationTop, brightnessTop);

    quad(xLeft, yLeft, xLeftNext, yLeftNext, xRightNext, yRightNext, xRight, yRight);

  }

  // Bottom quad vertices (색상 속성이 10초 동안 서서히 변경됨)

  let xb1 = width * 0.25, yb1 = height * 0.75;

  let xb2 = 0, yb2 = height;

  let xb3 = width, yb3 = height;

  let xb4 = width * 0.75, yb4 = height * 0.75;

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

    let t1 = i / sections;

    let t2 = (i + 1) / sections;

    let xLeft = lerp(xb2, xb1, t1);

    let yLeft = lerp(yb2, yb1, t1);

    let xRight = lerp(xb3, xb4, t1);

    let yRight = lerp(yb3, yb4, t1);

    let xLeftNext = lerp(xb2, xb1, t2);

    let yLeftNext = lerp(yb2, yb1, t2);

    let xRightNext = lerp(xb3, xb4, t2);

    let yRightNext = lerp(yb3, yb4, t2);

​

    let hue = map((i + shift) % sections, 0, sections, 180, 90);

    let saturationBottom = lerp(40, 80, transitionFactor);

    let brightnessBottom = lerp(100, 70, transitionFactor);

    fill(hue, saturationBottom, brightnessBottom);

    quad(xLeft, yLeft, xLeftNext, yLeftNext, xRightNext, yRightNext, xRight, yRight);

  }

  // Middle rectangle

  fill(0); // 정중앙에 고정된 색상

  rect(width * 0.25, height * 0.25, width / 2, height / 2);

}