Connections

/******************

Code by Vamoss

Original code link:

https://openprocessing.org/sketch/2107128

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

var colors = ["#FFC30F", "#581845", "#900C3F", "#C70039", "#FF5733", "#1AC7C4"];

var points = [];

function setup() {

  createCanvas(windowWidth, windowHeight);

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

    points.push({

      in: createVector(random(width), random(height)),

      out: createVector(random(width), random(height)),

      dirIn: createVector(random(-5, 5), random(-5, 5)),

      dirOut: createVector(random(-5, 5), random(-5, 5))

    });

  }

  strokeWeight(8);

}

​

function draw() {

  background(0);

  for(let i = 0; i < points.length; i++){

    const p = points[i];

    p.in.x += p.dirIn.x;

    p.in.y += p.dirIn.y;

    p.out.x += p.dirOut.x;

    p.out.y += p.dirOut.y;

    if(p.in.x < 0 || p.in.x > width)

      p.dirIn.x *= -1;

    if(p.in.y < 0 || p.in.y > height)

      p.dirIn.y *= -1;

    if(p.out.x < 0 || p.out.x > width)

      p.dirOut.x *= -1;

    if(p.out.y < 0 || p.out.y > height)

      p.dirOut.y *= -1;

    dnaConnection(p.in.x, p.in.y,

                 p.out.x, p.out.y);

  }

}

​

function dnaConnection(x1, y1, x2, y2){

  const parts = 100;

  for(let i = 0; i < colors.length; i++){

    let prevX = x1;

    let prevY = y1;

    for(let pct=1/parts; pct <= 1; pct += 1/parts) {

      const lerpX = lerp(x1, x2, pct);

      const lerpY = lerp(y1, y2, pct);

      const amp = sin(pct * PI) * 100;

      const x = lerpX + cos(lerpY/100 + i) * amp;

      const y = lerpY + sin(lerpX/100 + i) * amp;

      stroke(colors[i]);

      line(prevX, prevY, x, y);

      prevX = x;

      prevY = y;

    }

  }

}