> show canvas only <


/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://p5js.sketchpad.cc/sp/pad/view/ro.$V3VWYDTmRb/rev.13
 * 
 * authors: 
 *   GoToLoop

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



/**
 * Conglomerate of Points (v2.0.2)
 * Janosch & GoToLoop (2016-Feb-01)
 *
 * forum.Processing.org/two/discussion/14709/simple-p3-sketch-to-p5-js
 * studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk
 *
 * p5js.ProcessingTogether.com/sp/pad/export/ro.CYuAGs4xyhzhKu
 * CodePen.io/anon/pen/ZQjQmK?editors=0010#0
 */

"use strict";

const EASE = .07, QTY = 10, DIAM = 10, FAR = 0xFF, NEAR = 20, AWAY = 150;
const points = Array(QTY).fill(), tPoints = Array(QTY).fill();

function setup() {
  createCanvas(1000, 650);
  smooth().frameRate(60);
  strokeWeight(.5).colorMode(RGB, FAR).ellipseMode(CENTER);

  for (let i = 0; i < QTY; ++i) {
    points[i]  = createVector(random(width), random(height));
    tPoints[i] = createVector(random(width), random(height));
  }
}

function draw() {
  background(243, 239, 232);

  for (let i = 0; i < QTY; ++i) {
    const xdist = tPoints[i].x - points[i].x;
    const ydist = tPoints[i].y - points[i].y;

    const x = points[i].x += EASE * .5 * xdist;
    const y = points[i].y += EASE * .5 * ydist;

    for (let j = i + 1; j < QTY; ++j) {
      const dst = dist(x, y, points[j].x, points[j].y);

      if (dst < FAR) {
        stroke(205, 106, 104, FAR - dst);
        line(x, y, points[j].x, points[j].y);
      }
    }

    const distance = .5 * (xdist*xdist + ydist*ydist);

    noStroke();
    fill(205, 106, 104, 200 - distance*EASE);     
    circle(x, y, DIAM);

    if (distance <= NEAR) {
      points[i].set(tPoints[i]);

      tPoints[i].x = mouseX + random(-AWAY, AWAY);
      tPoints[i].y = mouseY + random(-AWAY, AWAY);
    }
  }
}