joxin-Intersections

I made the lines spin.

Have fun playing 🙂

Here is how my code works:

  • each time the mouse clicks,
    • a new set of 12 lines are created randomly.
  • in each frame,
    • all the lines rotate.
    • a new set intersections are found according to the current lines.
    • everything is drawn.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

// reference: Paul Bourke (http://paulbourke.net/geometry/pointlineplane/)
 
var lines = [];
var intersections = [];
const n = 12;
const speed = 5000;
 
function setup() {
  createCanvas(720, 480);
  background(255, 230, 230);
  mousePressed();
}
 
function draw() {
  background(255, 230, 230);
  intersections = [];
  for (var i = 0; i < lines.length; i++) {
    for (var j = 0; j < i; j++) {
      var inter = intersection(lines[i], lines[j]);
      if (inter != null) {
        intersections.push(inter);
      }
    }
  }
  drawAll(intersections, lines);
}
 
function mousePressed() {
  lines = [];
  for (var i = 0; i < n; i++) { 
      var x = random(150, width-150); 
      var y = random(100, height-100); 
      var angle = random(0, 360)/360 * 2*PI; 
      var magnitude = 300; 
      var newLine = {x: x, y: y, a: angle, m: magnitude}; 
      lines.push(newLine); 
  } 
} 
 
function intersection(l1, l2) { 
    var offset = map(millis() % speed, 0, speed, 0, 2*PI); 
    var x1 = l1.x + l1.m*cos(l1.a + offset)/2; 
    var y1 = l1.y + l1.m*sin(l1.a + offset)/2; 
    var x2 = l1.x - l1.m*cos(l1.a + offset)/2; 
    var y2 = l1.y - l1.m*sin(l1.a + offset)/2; 
    var x3 = l2.x + l2.m*cos(l2.a + offset)/2; 
    var y3 = l2.y + l2.m*sin(l2.a + offset)/2; 
    var x4 = l2.x - l2.m*cos(l2.a + offset)/2; 
    var y4 = l2.y - l2.m*sin(l2.a + offset)/2; 
    var denom = (y4-y3) * (x2-x1) - (x4-x3) * (y2-y1); 
    var noma = (x4-x3) * (y1-y3) - (y4-y3) * (x1-x3); 
    var nomb = (x2-x1) * (y1-y3) - (y2-y1) * (x1-x3); 
    if (denom != 0) { 
      var ua = noma/denom; 
      var ub = nomb/denom; 
      if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
        var inters = {x: x1 + ua * (x2 - x1), y: y1 + ua * (y2 - y1)};
        return inters;
    }
  }
  return null;
}
 
function drawAll(intersections, lines) {
  fill(255);
  noStroke();
  for (var i = 0; i < intersections.length; i++) {
    var p = intersections[i];
    ellipse(p.x, p.y, 20);
  }
 
  fill(0);
  stroke(100, 150);
  strokeWeight(2);
  var offset = map(millis() % speed, 0, speed, 0, 2*PI);
  for (var j = 0; j < lines.length; j++) {
    var l1 = lines[j];
    var x1 = l1.x + l1.m*cos(l1.a + offset)/2;
    var y1 = l1.y + l1.m*sin(l1.a + offset)/2;
    var x2 = l1.x - l1.m*cos(l1.a + offset)/2;
    var y2 = l1.y - l1.m*sin(l1.a + offset)/2;
    line(x1, y1, x2, y2);
  }
}