Abstractorio

by alexb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.9/p5.js"></script>

CSS

canvas {
  border: 1px solid #C0C0C0;
}

JavaScript

var conduits = [];

var conduitStart;

function setup() {
  createCanvas(640, 640);
}

function draw() {
  background(240);
  conduits.forEach(function(conduit) {
    stroke(0, 0, 0, 255);
    line(conduit.start.x, conduit.start.y,
         conduit.finish.x, conduit.finish.y);
    stroke(0, 64, 0, 192);
    fill(0, 128, 0, 64);
    ellipse(conduit.start.x, conduit.start.y, 10, 10);
    stroke(64, 0, 0, 192);
    fill(128, 0, 0, 64);
    ellipse(conduit.finish.x, conduit.finish.y, 10, 10);
  });
}

function mousePressed() {
  if (!conduitStart) {
    conduitStart = createVector(mouseX, mouseY);
  }
  else {
    conduits.push({
      start: conduitStart,
      finish: createVector(mouseX, mouseY),
    });
    conduitStart = undefined;
  }
}