let p0x1, p0y1, p1x1, p1y1, p2x1, p2y1, p3x1, p3y1;

let p0x2, p0y2, p1x2, p1y2, p2x2, p2y2, p3x2, p3y2;

let t = 0;

let rectAlpha = 250; // Initial alpha value

let movingCurve = 1; // 0 represents the first curve, and 1 represents the second curve

​

function setup() {

  createCanvas(540, 540);

  initializeCurves();

  frameRate(60);

}

​

function initializeCurves() {

  p0x1 = 60;

  p0y1 = 140;

  p1x1 = 200;

  p1y1 = 180;

  p2x1 = 170;

  p2y1 = 450;

  p3x1 = 250;

  p3y1 = 440;

​

  p0x2 = 470;

  p0y2 = 80;

  p1x2 = 360;

  p1y2 = 150;

  p2x2 = 290;

  p2y2 = 280;

  p3x2 = 260;

  p3y2 = 400;

}

​

function draw() {

  background(0);

//   noFill();

  fill(0,100);

  stroke(255,200);

​

  let xOffset = 0;

  let yOffset = 0;

​

  // Animate the control points or endpoints of the first bezier curve

  let newP0x1 = 60 + cos(t) * 50;

  let newP0y1 = 140 + sin(t) * 50;

  let newP1x1 = 200 + cos(t) * 50;

  let newP1y1 = 180 + sin(t) * 50;

  let newP2x1 = 270 - cos(t) * 50;

  let newP2y1 = 450 - sin(t) * 100;

​

  // Animate the control points or endpoints of the second bezier curve

  let newP0x2 = 470 + cos(t) * 10;

  let newP0y2 = 80 + sin(t) * 50;

  let newP1x2 = 360 + cos(t) * 50;

  let newP1y2 = 150 + sin(t) * 50;

  let newP2x2 = 290 - cos(t) * 50;

  let newP2y2 = 280 - sin(t) * 100;

  // Draw rectangles to represent the Bezier curves with variable alpha

  drawRotatedBezierRect(newP0x1, newP0y1, newP1x1, newP1y1, newP2x1, newP2y1, p3x1, p3y1, t, xOffset, yOffset, rectAlpha);

  drawRotatedBezierRect(newP0x2, newP0y2, newP1x2, newP1y2, newP2x2, newP2y2, p3x2, p3y2, t, xOffset, yOffset, rectAlpha);

​

  // Animate the alpha value

  if (rectAlpha > 0) {

    rectAlpha -= 5;

  } else {

    rectAlpha = 255;

  }

​

  t += 0.05;

}

​

function drawRotatedBezierRect(x0, y0, x1, y1, x2, y2, x3, y3, rotation, xOffset, yOffset, alpha) {

  // Divide the curve into smaller segments

  let segments = 100;

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

    let t0 = i / segments;

    let t1 = (i + 1) / segments;

    let px0 = bezierPoint(x0, x1, x2, x3, t0);

    let py0 = bezierPoint(y0, y1, y2, y3, t0);

    let px1 = bezierPoint(x0, x1, x2, x3, t1);

    let py1 = bezierPoint(y0, y1, y2, y3, t1);

    let scaleFactor = 0.3;

​

    push();

    translate(px0 + xOffset, py0 + yOffset);

    scale(scaleFactor);

    fill(0, alpha); // Set the fill color with variable alpha

    rect(0, 0, 100, 10);

    pop();

  }

}

​

function keyPressed() {

  if (key === "s") {

    if (this._renderer.elt.svg !== undefined) {

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

}

​

let isShowGrid = false;

​