Intersections

const numLines = 12

const lineLength = 350

const w = 720

const h = 480

let lines = []

let intersections = []

​

// ----- line generation functions ------

const generateLine = () => {

  let angle = Math.random() * Math.PI

  let x0 = Math.random() * (w - lineLength * Math.cos(angle))

  let y0 = Math.random() * (h - lineLength * Math.sin(angle))

  return {

    x0,

    y0,

    x1: x0 + Math.cos(angle) * lineLength,

    y1: y0 + Math.sin(angle) * lineLength,

  }

}

const regenerateLines = () => {

  lines = []

  for (let i = 0; i < numLines; i++) { 

    lines.push(generateLine()) 

  } 

} 

​

// ----- intersection calculation functions ------ 

const getSlope = (L) => (L.y1 - L.y0) / (L.x1 - L.x0)

const getYInt = (L, slope) => L.y0 - slope * L.x0

​

const ptInLineBounds = (pt, L) => {

  let minX = Math.min(L.x0, L.x1)

  let minY = Math.min(L.y0, L.y1)

  let maxX = Math.max(L.x0, L.x1)

  let maxY = Math.max(L.y0, L.y1)

  return (pt.x > minX && pt.x < maxX && pt.y > minY && pt.y < maxY) 

} 

​

const calculateIntersection = (line0, line1) => {

  // get lines in y = mx + b form

  const m0 = getSlope(line0)

  const b0 = getYInt(line0, m0)

  const m1 = getSlope(line1)

  const b1 = getYInt(line1, m1)

  // get x intersect value: m0 * x + b0 = m1 * x + b1

  const x = (b1 - b0) / (m0 - m1)

  const y = m0 * x + b0

  const pt = {x, y}

  // make sure it actually falls on both lines

  if (ptInLineBounds(pt, line0) && ptInLineBounds(pt, line1)) {

    return(pt)

  }

  return null

}

​

const calculateAllIntersections = () => {

  intersections = []

  for (let i = 0; i < numLines; i++) {

    for (let j = 0; j < numLines; j++) { 

      if (lines[i] !== lines[j]) { 

        intersection = calculateIntersection(lines[i], lines[j]) 

        if (intersection) intersections.push(intersection) 

      } 

    } 

  } 

} 

​

// ----- window functions ------ 

​

// for pulsing rainbow colors 

const colors = ["#E50013", "#E33100", "#E17600", "#DFBA00", "#BDDD00", 

"#78DB00", "#34D900", "#00D70D", "#00D54F", "#00D38F", "#00D1CE", 

"#0092CF", "#0051CD", "#0012CB", "#2B00C9", "#6800C7", "#A300C5", 

"#C300A7", "#C1006A", "#BF002E"] 

let currentColorIndex = 0 

​

const updateColor = () => {

  fill(colors[currentColorIndex])

  currentColorIndex++

  if (currentColorIndex >= colors.length) {

    currentColorIndex = 0

  }

}

​

// for pulsing dots

const maxDotSize = 14

const minDotSize = 10

let dotSize = 12

let shrink = false

​

const updateDotSize = () => {

  if (shrink) dotSize = dotSize - 1

  else dotSize++

  if (dotSize < minDotSize) shrink = false 

  if (dotSize > maxDotSize) shrink = true 

} 

​

function mouseClicked() { 

  regenerateLines()

  calculateAllIntersections()

}

​

function setup() { 

  createCanvas(w, h)

  regenerateLines()

  calculateAllIntersections()

  strokeWeight(3)

  window.setInterval(() => { 

    updateColor(); 

    updateDotSize();

  }, 50)

} 

​

// ----- draw functions ------

​

const drawLine = (L) => { 

  stroke(255)

  line(L.x0, L.y0, L.x1, L.y1) 

}

​

const drawIntersection = (I) => { 

  noStroke()

  ellipse(I.x, I.y, dotSize) 

}

​

const drawAllLines = () => { lines.forEach(drawLine) }

const drawAllIntersections = () => { intersections.forEach(drawIntersection) }

​

function draw() { 

  background(0)

  drawAllLines()

  drawAllIntersections()

}