Images

intersections

twelve intersections

seventy intersections

var lines = [];
var numOfLines = 12;
var intersectXArray =[];
var intersectYArray = [];

var yAxis = 1;
var c1, c2, c3;

function setup() {
	createCanvas(720, 480);
	
	background(0);

  c1 = color(0);
  c2 = color(16, 45, 117);
	c3 = color(244, 89, 66);
	
	// gradient background 1
	setGradient(0, 0, windowWidth, windowHeight / 2, c1, c2, yAxis);
	
	// gradient background 2
	setGradient(0, windowHeight/2, windowWidth, windowHeight, c2, c3, yAxis);
	
  for (var i = 0; i < numOfLines; i++) {
    lines.push(new Line());
  }

}

function draw() {
  for (var i = 0; i < lines.length; i++) {
    lines[i].display();
  }
  
  for (var i = 0; i < lines.length; i++) {
    for (var j = 0; j < lines.length; j++) {
      intersectXArray.push(intersect(lines[i].x1, lines[i].y1, lines[i].x2, lines[i].y2, lines[j].x1, lines[j].y1, lines[j].x2, lines[j].y2).x);
      intersectYArray.push(intersect(lines[i].x1, lines[i].y1, lines[i].x2, lines[i].y2, lines[j].x1, lines[j].y1, lines[j].x2, lines[j].y2).y);
    } 
  }  
	  
	// display twinkling stars as intersection points
  for (var i = 0; i < intersectXArray.length; i++) {
		star = new Star(intersectXArray[i], intersectYArray[i]);
		star.display();
		star.twinkle();
  }
}

function mousePressed() {
  lines = [];
  intersectXArray = [];
  intersectYArray = [];
  setup();
}

function Line() {
  this.x1 = random(0, width);
  this.y1 = random(0, height);
  this.x2 = random(0, width);
  this.y2 = random(0, height);

  this.display = function() {
    stroke(249, 252, 232, 20);
    strokeWeight(1);
    line(this.x1, this.y1, this.x2, this.y2);
  }
}

function Star(x,y) {
	this.x = x;
	this.y = y
	this.r = random(8);
	
	this.display = function() {
		stroke(22, 71, 119);
		fill(255);
		this.rc = constrain(this.r, 0, 9);
    ellipse(this.x, this.y, this.rc, this.rc);
  };

	this.twinkle = function() {
		if (this.r < 3) {
			this.r += random(-.5,1.5);
		} else if (this.r >= 3 && this.r < 6) {
			this.r += random(-1,1);
		} else if (this.r >=6 && this.r <=9) {
			this.r += random(-1.5,0.5);
		}
		
	}
}

// creates gradients
function setGradient(x, y, w, h, c1, c2, axis) {
	noFill();
	if (axis == yAxis) {  // Top to bottom gradient
   	for (var i = y; i <= y+h; i++) {
    	var inter = map(i, y, y+h, 0, 1);
    	var c = lerpColor(c1, c2, inter);
    	stroke(c);
    	line(x, i, x+w, i);
   	}
 	} 
}

//from Paul Bourke http://paulbourke.net/geometry/pointlineplane/javascript.txt
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
  }

  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 < 0 || ua > 1 || ub < 0 || ub > 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}
}