ango-Intersections

Boba Dance Party: It’s Lit

via GIPHY

  • Each time the sketch refreshes, a new set of 12 line segments are introduced.
  • In each frame, the end point coordinates of the lines change randomly by a small amount.
  • In each frame, new black boba balls are drawn at the current intersections of the overlapping lines
 //reference: Paul Bourke (http://paulbourke.net/geometry/pointlineplane/) 
"use strict"
//Anna Gusman
//Intersections
 
var myLines = [];
 
 
function setup() {
  createCanvas(700, 700);
 
  for (var i = 0; i < 12; i++) {
    //create 12 bb line objects
    myLines[i] = {
      //define line object perameters
      x1: random(0, width),
      y1: random(0, height),
      x2: random(0, width),
      y2: random(0, height),
      display() {
        stroke(0);
        line(this.x1, this.y1, this.x2, this.y2);
      },
      move() {
        this.x1 = this.x1 + random(-1, 1);
        this.y1 = this.y1 + random(-1, 1);
        this.x2 = this.x2 + random(-1, 1);
        this.y2 = this.y2 + random(-1, 1);
      }
    }
  }
  println(myLines);
}
 
function drawEllipseIfLinesIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
  var denom  = (y4-y3) * (x2-x1) - (x4-x3) * (y2-y1);
  var numera = (x4-x3) * (y1-y3) - (y4-y3) * (x1-x3);
  var numerb = (x2-x1) * (y1-y3) - (y2-y1) * (x1-x3);
 
  /* Are the line coincident? */
  if (numera == 0 && numerb == 0 && denom == 0) {
    return true;
  }
 
  /* Is the intersection along the segments */
  var ua = numera / denom;
  var ub = numerb / denom;
  if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
    return false;
  }
  var x = x1 + ua * (x2 - x1);
  var y = y1 + ua * (y2 - y1);
  fill(0);
  ellipse(x, y, 50, 50);
  return true;
}
 
function findIntersections() {
  for (var i = 0; i < myLines.length; i++) {
    for (var j = 0; j < myLines.length; j++) {
      var x1 = myLines[i].x1
      var y1 = myLines[i].y1
      var x2 = myLines[i].x2
      var y2 = myLines[i].y2
      var x3 = myLines[j].x1
      var y3 = myLines[j].y1
      var x4 = myLines[j].x2
      var y4 = myLines[j].y2
      drawEllipseIfLinesIntersect(x1, y1, x2, y2, x3, y3, x4, y4);
    }
  }
}
 
function draw() {
  background('tomato'); //<-- that's amazing
  for (var i = 0; i < 12; i++) {
    myLines[i].move();
    myLines[i].display();
  }
  findIntersections();
}