Category: 01-Intersections

shuann-Intersections

GIF:

 

var lineNum = 12;//change this number to get more lines 
var lineSets = [];
 
function setup() {
  createCanvas(720, 480);
  lineGenerator();
}
 
function draw() {
  background(255);
 
  for (var j = 0; j < lineNum; j++){
    var x1 = lineSets[j][0];
    var y1 = lineSets[j][1];
    var x2 = lineSets[j][2];
    var y2 = lineSets[j][3];
    line(x1, y1, x2, y2);
    for (var s = 0; s < lineNum; s++){
      var x3 = lineSets[s][0];
      var y3 = lineSets[s][1];
      var x4 = lineSets[s][2];
      var y4 = lineSets[s][3];
      if (intersect(x1, y1, x2, y2, x3, y3, x4, y4) != false){
        var cCenter = intersect(x1, y1, x2, y2, x3, y3, x4, y4);
        fill("pink");
        ellipse(round(cCenter[0]), round(cCenter[1]), 10);
      }
    }
  }
 
  text("Number of Lines:" + lineNum, 10 ,20);
  text("* Up/Down Key to Increase/Decrease *", 10 ,35);
}
 
function mousePressed() {
  lineGenerator();
}
 
function keyPressed() {
  if (keyCode === UP_ARROW) {
    lineNum += 1;
    lineGenerator();
  } else if (keyCode === DOWN_ARROW) {
    lineNum -= 1;
    lineGenerator();
  }
}
 
function lineGenerator(){
  lineSets = [];
  for (var i = 0; i < lineNum; i++){
    var x1 = round(random(0,width+1));
    var y1 = round(random(0,height+1));
    var x2 = round(random(0,width+1));
    var y2 = round(random(0,height+1));
    lineSets[i] = [x1, y1, x2, y2]
  }
}
 
// taken and modified from http://paulbourke.net/geometry/pointlineplane/javascript.txt
// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
// Determine the intersection point of two line segments
// Return FALSE if the lines don't intersect
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
 
  // Check if none of the lines are of length 0
	if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
		return false
	}
 
	var denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
  // Lines are parallel
	if (denominator === 0) {
		return false
	}
 
	var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
	var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
 
  // is the intersection along the segments
	if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
		return false
	}
 
  // Return a object with the x and y coordinates of the intersection
	var x = x1 + ua * (x2 - x1)
	var y = y1 + ua * (y2 - y1)
 
	return [x, y]
}

chewie-Intersections

// Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;
var lines = [];
var intersections = [];
var lineLength = 300;
var circWidth = 30;
var numLines = 12;
var numIntersections = 0;
 
function setup() {
  createCanvas(720, 480);
  boolDoRefresh = true;
}
 
function draw() {
  if (boolDoRefresh) {
    background(255);
    lines = [];
    intersections = [];
    numIntersections = 0;
    for (var i = 0; i < numLines; i++) {
      lines.push(new Line());
      for (var j = 0; j < i; j++) {
        intersects(lines[i], lines[j]);
      }
    }
    for (i = 0; i < numLines; i++) {
      lines[i].display();
    }
    for (i = 0; i < numIntersections; i++) {
      fill(100,75,125,50);
      intersections[i].display();
    }
    boolDoRefresh = false;
  }
}
 
function mousePressed() {
  boolDoRefresh = true;
}
 
function Line() {
  this.x1 = int(random(width));
  this.y1 = int(random(height));
  this.angle = int(random(360));
  this.radians = 0;
  this.display = function() {
    stroke("black");
    line(this.x1, this.y1, this.x2, this.y2);
  };
  this.updateRad = function() {
    this.radians = radians(this.angle);
  };
  this.angle = modAngle(this.angle);
  this.updateRad();
  this.x2 = this.x1 + lineLength * cos(this.radians);
  this.y2 = this.y1 + lineLength * sin(this.radians);
}
 
 
function Intersection(x, y) {
  this.x = x;
  this.y = y;
  this.display = function() {
    ellipse(this.x, this.y, circWidth, circWidth);
  }
}
 
function linePointAngle(line1, px, py) {
  var lx = line1.x1;
  var ly = line1.y1;
  //this first angle is between universal and two points
  var angle = degrees(atan((py-ly)/(px-lx)));
  if (px<lx) angle+=180;
  //angle -= line1.angle;
  angle = modAngle(angle);
  //then find the difference of the line angle and this
  //angle to get the relative angle of the point to the line
  return angle;
}
 
function modAngle(angle) {
  while(angle<0) angle += 360;
  while(angle>=360) angle -=360;
  return angle;
}
 
function splits(line1, line2) {
  var angle1 = linePointAngle(line1, line2.x1, line2.y1);
  var angle2 = linePointAngle(line1, line2.x2, line2.y2);
  if (angle1>angle2) {
		var temp = angle1;
    angle1 = angle2;
    angle2 = temp; //ang1<=ang2
  }
  if (angle2-angle1>=180) {
    return(line1.angle<=angle1 || line1.angle>=angle2);
  }
  return(line1.angle<=angle2 && line1.angle>=angle1);
}
 
function intersects(line1, line2) {
  var res = splits(line1,line2) && splits(line2,line1);
  if (res) intersection(line1, line2);
  return res;
}
 
function intersection(line1, line2) {
  var x1 = line1.x1;
  var x2 = line2.x1;
  var y1 = line1.y1;
  var y2 = line2.y1;
  var m1 = (line1.y2-y1)/(line1.x2-x1);
  var m2 = (line2.y2-y2)/(line2.x2-x2);
  var X = ((x1*m1)-y1-(x2*m2)+y2)/(m1-m2);
  var Y = m1*(X-x1)+y1;
  var res = new Intersection(X, Y);
  intersections.push(res);
  numIntersections += 1;
	return;
}

ocannoli-Intersections

Interactive Intersections:

Intersections Gif:

 function setup() {
  createCanvas(400, 400);
}
var boolDoRefresh;
 
function setup() {
  createCanvas(400, 400);
  boolDoRefresh = true;
}
 
class Line {
  constructor(x1, y1, x2, y2){
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
 }
	drawLine(){
    line(this.x1,this.y1,this.x2,this.y2);
  }  	
}
 
function draw() {
  if (boolDoRefresh) {
    background(51);
    stroke(220);
    allLines=[];
    intersectionCircles=[];
    for (var k = 0; k &lt; 12; k++) {
      var a = random(400);
      var b = random(400);
      var c = random(400);
      var d = random(400);
      var nLine= new Line(a,b,c,d);
      allLines.push(nLine);
      allLines[k].drawLine();
    }
    for(var i=0; i&lt;allLines.length-1; i++){
      for(var j=1; j&lt;allLines.length-2;j++){
      if(allLines[i]!=allLines[j])
      {
        var intersect= intersects(allLines[i].x1,allLines[i].y1,allLines[i].x2,allLines[i].y2,allLines[j].x1,allLines[j].y1,allLines[j].x2,allLines[j].y2);
      	if (intersect!==false){
          stroke(240,220,40); 
          fill(240,220,40);
          ellipse(intersect.x,intersect.y,10,10);
        }
           }
      }
    }
  }
  boolDoRefresh = false
}
//formula from Paul Bourke
function intersects(x1, y1, x2, y2, x3, y3, x4, y4) {
  if ((x1 === x2 &amp;&amp; y1 === y2) || (x3 === x4 &amp;&amp; y3 === y4)) {
		return false;
  }
  denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
	if (denominator === 0) {
		return false;
	}
  let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
	let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;
  if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) {
		return false
	}
  let x = x1 + ua * (x2 - x1)
	let y = y1 + ua * (y2 - y1)
 
	return {x, y}
}
 
function mousePressed() {
  boolDoRefresh = true;
}

 

paukparl-Intersections

 sketch:

 

gif:

 

var NUM_LINES = 12;
var LINE_LENGTH = 300;
var ELLIPSE_SIZE = 20;
var justClicked = true;
var lines;
 
function setup() {
  createCanvas(720, 480);
  strokeWeight(2);
  fill('rgba(30,30,40, 0.9)');
}
 
function draw() {
  if (justClicked) {
 
    // array refreshed upon click
    lines = [];
 
    // redraw upon click
    background(100, 100, 110);
    for (var i=0; i&lt;NUM_LINES; i++) { drawRandLine(); } } justClicked = false; } // draw a random line function drawRandLine() { var randRotation = random(PI); var pointL = createVector( -LINE_LENGTH/2 * cos(randRotation), -LINE_LENGTH/2 * sin(randRotation) ); var pointR = createVector( LINE_LENGTH/2 * cos(randRotation), LINE_LENGTH/2 * sin(randRotation) ); if (randRotation &gt; PI/2) {
    var pointTemp = pointL.copy();
    pointL = pointR;
    pointR = pointTemp;
  }
 
  var randTransX = random(width);
  var randTransY = random(height);
  pointL.add(randTransX, randTransY);
  pointR.add(randTransX, randTransY);
 
  stroke(255);
  line(pointL.x, pointL.y, pointR.x, pointR.y);
 
  var newLine = [pointL, pointR];
  checkIntersect(newLine);
  append(lines, newLine);
}
 
 
// check for intersections between new line and existing ones
function checkIntersect( lineB ) { 
 
  // go through lines already drawn on canvas
  for (var i=0; i&lt;lines.length; i++) {
    var lineA = lines[i];
 
    // conduct Bourke intersection calculation
    var intersect = bourkeIntersect(
      lineA[0].x, lineA[0].y,
      lineA[1].x, lineA[1].y,
      lineB[0].x, lineB[0].y,
      lineB[1].x, lineB[1].y
    );
 
    if (intersect) {
      print("INTERSECTED!\n");
      noStroke();
      ellipse(intersect.x, intersect.y, ELLIPSE_SIZE);
    }
  }
}
 
 
// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
// JS version by Leo Bottaro
function bourkeIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
  var denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
 
  // if lines are parallel
	if (denominator === 0) {
		return false;
	}
 
  var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
  var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;
 
  // is the intersection along the segments
  if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) {
		return false;
	}
 
  // if intersect
  return createVector(x1 + ua * (x2 - x1), y1 + ua * (y2 - y1));
}
 
function mousePressed() {
  justClicked = true;
}

lass-Intersections


var refresh;
var numLines = 12; 
var lineLength = 300; 
 
function setup() {
  createCanvas(720, 480);
  fill(255, 255, 255, 150); 
  stroke(255, 255, 255); 
  refresh = true;
}
 
function draw() {
  if (refresh) {
    background(200, 240, 240); 
    var lines = []; 
    for(var i = 0; i < numLines; i++) {
      var x = Math.random() * width; 
      var y = Math.random() * height; 
      var theta = Math.random() * Math.PI; 
      lines.push([x, y, theta]); 
      strokeWeight(2); 
      line(x, y, x + lineLength * Math.cos(theta), y + lineLength * Math.sin(theta)); 
      for(var j = 0; j < lines.length; j++) {
        var tan1 = Math.tan(theta)
        var sin2 = Math.sin(lines[j][2]); 
        var cos2 = Math.cos(lines[j][2]); 
        var dx = lines[j][0] - x; 
        var dy = lines[j][1] - y; 
        var s2 = (dx - dy / tan1) / (sin2 / tan1 - cos2); 
        var s1 =  (dx + s2 * cos2) / Math.cos(theta); 
        if(s1 < lineLength && s2 < lineLength && s1 > 0 && s2 > 0){
          strokeWeight(0); 
          ellipse(lines[j][0] + s2 * cos2, lines[j][1] + s2 * sin2, 15, 15); 
        }
      }      
    }
    refresh = false;
  }
}
 
function mousePressed() {
  refresh = true;
}

dinkolas-Intersections

Lines are stored in point-slope form, intersections are calculated with slope-intercept form, and points are calculated using the parametric form.

I used lots of information from the p5.js website's Reference section, and lots of my knowledge of intersections comes from the Khan Academy Pixar in a Box Rendering series.

var slider;
var lines;
var tstep;
var t;
var intersections
 
function setup() {
  createCanvas(720, 480);
  slider = createSlider(1,1000,10);
  slider.position(10, 10);
  t = 0;
  tstep = 2;
  angleMode(DEGREES);
  intersections = [];
  lines = []
  recalculate();
  stroke(255);
  strokeWeight(1)
  textSize(15);
}
 
function mouseReleased() {
  recalculate();
}
 
function recalculate() {
  background(255);
  t = 0;
  var m1,m2,b1,b2,x,y,a1,a2,t1,t2,line1,line2;
  lines = []
  intersections = []
  for (var i = 0; i &lt; slider.value(); i += 1) {
    lines.push([random(720), random(480), tan(random(-89,89))])
  }
  for (var ln1 = 0; ln1 &lt; lines.length - 1; ln1 += 1) {
    for (var ln2 = ln1+1; ln2 &lt; lines.length; ln2 += 1) {
      line1 = lines[ln1];
      line2 = lines[ln2];
      m1 = line1[2];
      m2 = line2[2];
      b1 = line1[1]-m1*line1[0];
      b2 = line2[1]-m2*line2[0];
      x = (b2-b1)/(m1-m2);
      y = m1*x + b1;
      t1 = sqrt(pow(x-line1[0],2) + pow(y-line1[1],2));
      t2 = sqrt(pow(x-line2[0],2) + pow(y-line2[1],2));
      intersections.push([x,y,max(abs(t1),abs(t2))]);
    }
  }
}
 
function position(ln, T) {
  var a = 1 / sqrt(pow(ln[2],2)+1);
  var b = ln[0];
  var c = sqrt(1-pow(a,2)) * abs(ln[2])/ln[2];
  var d = ln[1];
  return [a*T + b, c*T + d];
}
 
function draw() {
  var p1, p2, intersection;
  t += 2;
  noStroke();
  fill(0);
  for (var i = 0; i &lt; intersections.length; i += 1) {
    intersection = intersections[i]
    if (abs(t) - tstep &lt; intersection[2] &amp;&amp; intersection[2] &lt;= abs(t)) {
      ellipse(intersection[0], intersection[1], 10, 10);
    }
  }
  stroke(240,30,50);
  for (var j = 0; j &lt; lines.length; j += 1) {
    ln = lines[j]
    p1 = position(ln, t);
    p2 = position(ln, -t)
    line(p1[0], p1[1], p2[0], p2[1]);
  }
  noStroke();
  fill(0);
  rect(0,0,200,45);
  fill(255);
  text(slider.value(), 150, 27)
}

harsh-Intersections

// First, create each line
// 		- line is constrained in length, and saved as [x1,y1],[x2,y2]
//		- draw the line
// Second, for each line, run algorithm to find int point
//		- save point to point masterlist
//    - draw point masterlist
 
 
var boolDoRefresh;
var numLinesSlider;
var lineLengthSlider;
 
function setup() {
	createCanvas(720, 400);
	numLinesSlider = createSlider(0,50,10);
	numLinesSlider.position(20,20);
 
	lineLengthSlider = createSlider(0,400,200);
	lineLengthSlider.position(20,40);
	background(255);
	boolDoRefresh = true;
}
 
 
function draw() {
	if (boolDoRefresh) {
		background(204, 255, 204)
 
		var lines = [];
		var lineLength = lineLengthSlider.value();
		var numLines = numLinesSlider.value();
		text("Number of Lines = "+ numLines.toString(), 30 + numLinesSlider.width, 35);
		text("Line Length = "+ lineLength.toString(), 30 + lineLengthSlider.width, 55);
 
		for (var i = 0; i < numLines; i++) {
			var curLine = makeLine(lineLength);
			lines.push(curLine);
			push();
			stroke(102, 204, 255);
			strokeWeight(2);
			line(curLine[0][0], curLine[0][1], curLine[1][0], curLine[1][1]);
			pop();
		}
 
 
		var points = [];
		for (var j = 0; j < lines.length; j++) {
			for (var k = 0; k < lines.length; k++) {			
				if (j === k) {
					continue;
				}		
				else {
					var line1 = lines[j];
					var line2 = lines[k];
					var curPoint = findIntersection(line1, line2);		
					if (curPoint != false) {
						points.push(curPoint);
						push();
						noStroke();
						fill(255, 153, 0,50);
						ellipse(curPoint[0], curPoint[1], 20, 20);
						pop();
					} 
				}
			}
		}
 
		var numIntersections = points.length;
		text("Intersections: "+ numIntersections.toString(),625,380);
		boolDoRefresh = false;
	}		
}
 
function mousePressed() {
	boolDoRefresh = true;
}
 
function makeLine(length) {
	var x1 = random(length, width - length);
	var y1 = random(length, height - length);
	var randAngle = Math.round(random(0, 360));
	var xLength = Math.cos(randAngle) * length;
	var yLength = Math.sin(randAngle) * length;
	var x2 = x1 + xLength;
	var y2 = y1 + yLength;
	var curLine = [
		[x1, y1],
		[x2, y2]
	];
	return curLine;
}
 
 
function findIntersection(line1, line2) {
	// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
	// Determine the intersection point of two line segments
 
	var x1 = line1[0][0]
	var y1 = line1[0][1]
	var x2 = line1[1][0]
	var y2 = line1[1][1]
 
	var x3 = line2[0][0]
	var y3 = line2[0][1]
	var x4 = line2[1][0]
	var y4 = line2[1][1]
 
	var denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
	if (denominator === 0) {
		return false;
	} 
 
		var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
		var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
 
		if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
			return false;
		} 
 
			var x = x1 + ua * (x2 - x1)
			var y = y1 + ua * (y2 - y1)
			return [x, y];
}

weirdie-Intersections

var boolDoRefresh;
var numlines = 12;
var length = 400;
var lines = new Array(numlines);
 
function setup() {
  createCanvas(720, 480);
  background(21, 62, 71);
  boolDoRefresh = true;
}
 
function draw() {
  if (boolDoRefresh) {
    //reset background
    background(21, 62, 71);
    stroke(24, 191, 179);
 
    //create lines
    for(var x = 0; x &lt; numlines; x++) 
    {
      var xstart = int(random(0, width)); 
      var ystart = int(random(0, height)); 
      var slope = random(0, 6.28); 
      var xend = length*cos(slope) + xstart; 
      var yend = length*sin(slope) + ystart; 
      lines[x] = [xstart, ystart, xend, yend]; 
    } 
    //check intersections 
    for(var l1 = numlines-1; l1 &gt;=0; l1--)
    {
      var l2 = l1-1;
      while(l2 &gt;= 0)
      {
        line1 = lines[l1];
        line2 = lines[l2];
        var cross = intersect(line1[0], line1[1], line1[2], line1[3], 
                              line2[0], line2[1], line2[2], line2[3]);
        if(cross != false)
        {
          fill(28, 229, 242);
          noStroke();
          ellipse(cross.x, cross.y, 20, 20);
        }
        l2--;
      }
    }
 
    //draw lines
    {
      for(x = 0; x &lt; numlines; x++)
      {
        stroke(24, 191, 179);
        line(lines[x][0], lines[x][1], lines[x][2], lines[x][3]);
      }
    }
 
    boolDoRefresh = false;
  }
}
 
// original calculation by Paul Bourke
// Implementation by Leo Bottaro
// http://paulbourke.net/geometry/pointlineplane/javascript.txt
// Determine the intersection point of two line segments
// Return FALSE if the lines don't intersect
function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
 
  // Check if none of the lines are of length 0
	if ((x1 === x2 &amp;&amp; y1 === y2) || (x3 === x4 &amp;&amp; y3 === y4)) {
		return false
	}
 
	denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
  // Lines are parallel
	if (denominator === 0) {
		return false
	}
 
	let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
	let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
 
  // is the intersection along the segments
	if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) {
		return false
	}
 
  // Return a object with the x and y coordinates of the intersection
	let x = x1 + ua * (x2 - x1)
	let y = y1 + ua * (y2 - y1)
 
	return {x, y};
}
 
function mousePressed() {
  boolDoRefresh = true;
}

chromsan-Intersections

let refresh = true, num_lines = 12, lines = [], line_length = 300;
 
function setup() { createCanvas(720, 480) }
 
function draw() {
 
  if (refresh) {
    refresh = false;
    lines = [], clear(); background(237, 243, 255); 
 
    // generate lines 
    for (let x = 0; x &lt;= num_lines; x++) {
 
        let l = {};
        l.x1 = random(width); l.y1 = random(height); 
        // create random second point on a circle 
        let angle = random() * Math.PI * 2;
        l.x2 = (Math.cos(angle) * line_length) + l.x1
        l.y2 = (Math.sin(angle) * line_length) + l.y1;
        lines.push(l);
    }
 
    fill(140, 184, 255); noStroke();
 
    // check lines for intersection
    for (let x = 0; x &lt;= num_lines; x++) {
        for (let y = 0; y &lt; num_lines; y++) {
 
            if (y != x){
                let res = intersects(lines[x], lines[y]);
                if (res != false) ellipse(res.x, res.y, 20, 20);
            }
        }
    }
 
    stroke(0); strokeWeight(2);
 
    // draw lines 
    for (let x = 0; x &lt;= num_lines; x++) {
        line(lines[x].x1, lines[x].y1, lines[x].x2, lines[x].y2);
    }
 
  }
}
 
function mousePressed() { refresh = true }
 
// algorithm from Paul Bourke http://paulbourke.net/geometry/pointlineplane/
// adapted from Leo Bottaro's implementation
// calculate intersection point of two lines
function intersects(l1, l2) {
 
    let denom = ((l2.y2 - l2.y1) * (l1.x2 - l1.x1) - (l2.x2 - l2.x1) * (l1.y2 - l1.y1));
 
    let ua = ((l2.x2 - l2.x1) * (l1.y1 - l2.y1) - (l2.y2 - l2.y1) * (l1.x1 - l2.x1)) / denom;
    let ub = ((l1.x2 - l1.x1) * (l1.y1 - l2.y1) - (l1.y2 - l1.y1) * (l1.x1 - l2.x1)) / denom;
 
    if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) return false;
 
    let x = l1.x1 + ua * (l1.x2 - l1.x1);
    let y = l1.y1 + ua * (l1.y2 - l1.y1);
 
    return {x, y};
}

yalbert-Intersections


var segs = [];
var intersections = [];
var clicked = false;
var numSegs = 12;
var lineLength = 300;
var dotSize = 20;
 
function setup() {
  angleMode(DEGREES);
  createCanvas(700, 700);
  resetLines();
  findIntersections();
}
 
function draw() {
  background(255);
 
  //creates a new set of segments if the mouse is clicked
  if(clicked){
    resetLines();
    findIntersections();
    clicked = false;
  }
  drawSegs();
  drawIntersections();
}
 
function drawSegs(){
  for(i = 0; i &lt; numSegs; i++){
    segs[i].drawSeg();
  }
}
 
function drawIntersections(){
  for(i = 0; i&lt; intersections.length; i++){
    intersections[i].drawIntersection();
  }
}
 
function mousePressed() {
  clicked = true;
}
 
function Segment(x1, x2, y1, y2){
  this.x1 = x1;
  this.x2 = x2;
  this.y1 = y1;
  this.y2 = y2;
  this.drawSeg = function(){
    stroke(0);
    strokeWeight(2);
    line(this.x1, this.y1, this.x2, this.y2);
  }
}
 
function Intersection(x, y){
  this.xPos = x;
  this.yPos = y;
  this.drawIntersection = function(){
    strokeWeight(0);
    fill(0, 100);
    ellipse(this.xPos, this.yPos, dotSize, dotSize);
  }
}
 
function resetLines(){
  segs = [];
  for(i = 0; i &lt; numSegs; i++){
    var x1 = random(0, width);
    var y1 = random(0, height);
    var secondPoint = setSecondPoint(x1, y1);
    var x2 = secondPoint[0];
    var y2 = secondPoint[1];  
    newSeg = new Segment(x1, x2, y1, y2);
    segs.push(newSeg);
  }
}
 
//Calculates the second point by selecting a point at the edge of a circle
//where the radius is the desired length of the lines and the center
//is the first point
function setSecondPoint(x1, y1){
  var angle = random(0, 360);
  var y2 = sin(angle) * lineLength + y1;
  var x2 = cos(angle) * lineLength + x1; 
 
  //If the second point is outside the canvas, another one is calculated
  while(x2 &lt; 0 || x2 &gt;= width || y2 &lt; 0 || y2 &gt;= height){
    angle = random(0, 360);
    y2 = sin(angle) * lineLength + y1;
    x2 = cos(angle) * lineLength + x1; 
  }
 
  return [x2, y2];
}
 
//iterates through all of the segments to find the intersections
function findIntersections(){
  intersections = [];
  for(firstInd = 0; firstInd &lt; numSegs; firstInd++){
    firstSeg = segs[firstInd];
    for(secInd = 0; secInd &lt; numSegs; secInd++){
      secondSeg = segs[secInd];
      intersection = findIntersection(firstSeg.x1, firstSeg.y1, 
                                      firstSeg.x2, firstSeg.y2,
                                      secondSeg.x1, secondSeg.y1,
                                      secondSeg.x2, secondSeg.y2);
      if(intersectionIsValid(intersection)){
        intersections.push(new Intersection(intersection[0], intersection[1]));
      }
    }
  }
}
 
//check that the intersection exists and hasn't already been discovered
function intersectionIsValid(intersection){
  if(intersection == false){
    return false;
  }
  for(i = 0; i &lt; intersections.length; i++){
    if(intersections[i].xPos == intersection[0] &amp;&amp; intersections[i].yPos == intersection[1]){
      return false;
    }
  }
  return true;
}
 
//Paul Bourke's equation for finding the intersection of two lines
//Code courtesy of Leo Bottaro
function findIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
  // Check if none of the lines are of length 0
  if ((x1 === x2 &amp;&amp; y1 === y2) || (x3 === x4 &amp;&amp; y3 === y4)) {
    return false
  }
 
  denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
 
  // Lines are parallel
  if (denominator === 0) {
    return false
  }
 
  let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
  let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
 
  // is the intersection along the segments
  if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) {
    return false
  }
 
  // Return a object with the x and y coordinates of the intersection
  let x = x1 + ua * (x2 - x1)
  let y = y1 + ua * (y2 - y1)
 
  return [floor(x), floor(y)]
}