let pts;

let LINE_DIST = 100;

const NUM_PTS = 50;

let gfx;

const DRAW_PTS = true;

const FRAME_LEN = 500;

let windowScale;

let c;

let borderOff;

const BORDER_SPEED = 5;

const BORDER_OFF = 0.1;

​

let vaporwave = [

  (220, 220, 220),

  "#ff71ce",

  "#01cdfe",

  "#05ffa1",

  "#b967ff",

  "#fffb96",

];

​

let WIPE = 100;

let WIPE_Y;

let WIPE_COL1, WIPE_COL2;

​

function setup() {

  // c = createCanvas(500, 500);

  c = createCanvas(1000, 1000);

  // createCanvas(2000, 2000);

  gfx = createGraphics(width, height);

​

  borderOff = width * BORDER_OFF;

​

  windowScale = width / 1000;

  LINE_DIST *= windowScale;

​

  gfx.drawingContext.lineWidth = 80;

  gfx.drawingContext.lineCap = "round";

​

  pts = [];

  for (let _ = 0; _ < NUM_PTS; _++) {

    let _c = color(random(vaporwave));

    // _c.setAlpha(10);

​

    pts.push({

      x: random(width - 1),

      y: random(height - 1),

      vx: random(-3, 3),

      vy: random(-3, 3),

      col: _c,

      border: false,

    });

  }

​

  pts.push({

    x: borderOff,

    y: borderOff,

    vx: BORDER_SPEED,

    vy: 0,

    col: color(220),

    border: true,

  });

  stroke(220);

  strokeWeight(1.5 * windowScale);

​

  gfx.stroke(color(220, 220, 220, 80));

  gfx.strokeWeight(0.5 * windowScale);

  gfx.background(20);

​

  WIPE_Y = -1;

}

​

function handleWipe() {

  if (frameCount % WIPE == 0 && WIPE_Y < 0) {

    WIPE_Y = 0;

    WIPE_COL1 = color(random(vaporwave));

    WIPE_COL2 = color(random(vaporwave));

  }

​

  if (WIPE_Y >= 0) {

    gradientLineCTX(

      drawingContext,

      0,

      WIPE_Y,

      width,

      WIPE_Y,

      WIPE_COL1,

      WIPE_COL2

    );

    gradientLineCTX(

      gfx.drawingContext,

      0,

      WIPE_Y,

      width,

      WIPE_Y,

      WIPE_COL1,

      WIPE_COL2

    );

    WIPE_Y += BORDER_SPEED;

​

    if (WIPE_Y > height) WIPE_Y = -1;

  }

}

​

function draw() {

  // fill(color(20,20,20,60));

  // noStroke();

  // rect(borderOff-1, borderOff-1, width-2*borderOff, height-2*borderOff);

  background(color(20, 20, 20, 60));

​

  for (let p of pts) {

    // point(p.x, p.y);

    let nextx = p.x + p.vx;

    let nexty = p.y + p.vy;

​

    let valid = true;

​

    if (p.border) {

      if (p.vx > 0 && nextx > width - borderOff) {

        p.vx = 0;

        p.vy = BORDER_SPEED;

        valid = false;

      } else if (p.vx < 0 && nextx < borderOff) {

        p.vx = 0;

        p.vy = -BORDER_SPEED;

        valid = false;

      } else if (p.vy > 0 && nexty > height - borderOff) {

        p.vx = -BORDER_SPEED;

        p.vy = 0;

        valid = false;

      } else if (p.vy < 0 && nexty < borderOff) {

        p.vx = BORDER_SPEED;

        p.vy = 0;

        valid = false;

      }

    } else {

      if (nextx < 0 || nextx > width - 1) {

        p.vx *= -1;

        valid = false;

      }

      if (nexty < 0 || nexty > height - 1) {

        p.vy *= -1;

        valid = false;

      }

    }

    if (valid) {

      p.x = nextx;

      p.y = nexty;

    }

​

    // if (DRAW_PTS) gfx.point(p.x, p.y);

    if (DRAW_PTS) {

      stroke(p.col);

      point(p.x, p.y);

    }

​

    for (let p2 of pts) {

      if (p != p2) {

        let d = dist(p.x, p.y, p2.x, p2.y);

        if (d < LINE_DIST) {

          // line(p.x, p.y, p2.x, p2.y);

​

          // gfx.line(p.x, p.y, p2.x, p2.y);

          // gradientLine(p.x, p.y, p2.x, p2.y, color(220), color(220,0,220), 0.5);

          gradientLineCTX(drawingContext, p.x, p.y, p2.x, p2.y, p.col, p2.col);

          gradientLineCTX(

            gfx.drawingContext,

            p.x,

            p.y,

            p2.x,

            p2.y,

            p.col,

            p2.col

          );

        }

​

        if (WIPE_Y >= 0) {

          d = dist(p.x, p.y, p.x, WIPE_Y);

          if (d < LINE_DIST) {

            let wipeCol = WIPE_COL1;

            if (p.x > width / 2) wipeCol = WIPE_COL2;

            gradientLineCTX(

              drawingContext,

              p.x,

              p.y,

              p.x,

              WIPE_Y,

              p.col,

              wipeCol

            );

            gradientLineCTX(

              gfx.drawingContext,

              p.x,

              p.y,

              p.x,

              WIPE_Y,

              p.col,

              wipeCol

            );

          }

        }

      }

    }

  }

  handleWipe();

​

  // gfx.background(color(20,20,20,50));

  // image(gfx, 0, 0);

​

  //   if (frameCount > FRAME_LEN) {

  //     noLoop();

  //     console.log("done");

  //     clear();

​

  //     image(gfx, 0, 0);

​

  //     fill(20);

  //     beginShape();

  //     vertex(0,0);

  //     vertex(width,0);

  //     vertex(width,height);

  //     vertex(0,height);

  //     beginContour();

​

  //     let h3 = height/6;

​

  //     // sq

  //     // vertex(h3,h3);

  //     // vertex(h3,height-h3)

  //     // vertex(width-h3,height-h3);

  //     // vertex(width-h3,h3);

​

  //     // tri

  //     vertex(width/2,h3);

  //     vertex(h3,height-h3);

  //     vertex(width-h3,height-h3);

  //     endContour();

​

  //     // beginContour();

  //     // vertex(20,20);

  //     // vertex(80,20);

  //     // vertex(80,80);

  //     // vertex(20,80);

  //     // endContour();

​

  //     endShape();

​

  //   }

}

​

function keyPressed() {

  if (key === "s") saveGif("tris.gif", 10);

  if (key === "d") {

    noLoop();

    clear();

    image(gfx, 0, 0);

  }

}

​

// too slow

function gradientLine(x1, y1, x2, y2, c1, c2, sz) {

  const d = dist(x1, y1, x2, y2);

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

    const step = map(i, 0, d, 0, 1);

    const x = lerp(x1, x2, step);

    const y = lerp(y1, y2, step);

    const c = lerpColor(c1, c2, step);

    gfx.fill(c);

    gfx.ellipse(x, y, sz, sz);

  }

}

​

function gradientLineCTX(ctx, x1, y1, x2, y2, c1, c2) {

  const gradient = ctx.createLinearGradient(x1, y1, x2, y2);

  gradient.addColorStop(0, c1);

  gradient.addColorStop(1, c2);

  ctx.strokeStyle = gradient;

​

  ctx.beginPath();

  ctx.moveTo(x1, y1);

  ctx.lineTo(x2, y2);

  ctx.stroke();

}

​