let pts;

let LINE_DIST = 100;

const NUM_PTS = 100;

let gfx;

const DRAW_PTS = true;

const FRAME_LEN = 500;

let windowScale;

let c;

​

let vaporwave = [

  (220, 220, 220),

  "#ff71ce",

  "#01cdfe",

  "#05ffa1",

  "#b967ff",

  "#fffb96",

];

​

function setup() {

  c = createCanvas(1000, 1000);

  // createCanvas(2000, 2000);

  gfx = createGraphics(width, height);

  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,

    });

  }

  stroke(220);

  strokeWeight(0.5*windowScale);

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

  gfx.strokeWeight(0.5*windowScale);

  gfx.background(20);

}

​

function draw() {

  background(20);

​

  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 (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);

    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);

        }

      }

    }

  }

  // 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);

}

​

// 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();

}