Intersections

var col, sliderback, r, g, b;

var lines = [];

var globalMag = 400; //control length of lines

var slider;

var sliderval;

​

function setup() {

    //basic setup

    frameRate(30);

    //these values will shift slightly each time a new line is made so we get a variety of similar colors!

    r = 110;

    g = 94;

    b = 120;

    createCanvas(720, 480);

    background("#F6EAFE");

​

    //making the slider to change the amount of lines

    sliderback = color(255, 255, 255, 150);

    slider = createSlider(12, 100, 12);

    sliderval = 12;

    noStroke();

    slider.position(15, 15);

    fill(sliderback);

    rect(5, 5, slider.width + 55, slider.height + 12);

​

    //run the program!!!

    iterate();

}

​

function mouseClicked() {

    sliderval = slider.value();

    iterate();

}

​

function draw() {

    //continuously check if slider value has changed and iterate if it has

    //this makes it so the image will change as the slider is dragged

    //sometimes mouseClicked() does the job but if you drag in a certain way it won't regiester as a click event

    if (sliderval != slider.value()) iterate();

    sliderval = slider.value();

}

​

//main part of the function that calls every time the slider is changed or the mouse is clicked

function iterate() {

    //reset canvas and lines array

    background("#F6EAFE");

    lines = [];

    createLines(lines, slider.value());

    //intersections are drawn before the lines because it looks prettier to have the circles behind the lines

    drawIntersections(lines);

    drawLines(lines);

    //the rest is just for the slider

    fill(sliderback);

    noStroke();

    rect(5, 5, slider.width + 55, slider.height + 10);

    fill(0);

    text(slider.value() + " lines", slider.width + 11, 20);

}

​

//generates lines and puts them in the array

function createLines(arr, num){

    for (var i = 0; i < num; i++) {

        var tempLine = new Line(Math.floor(random(0, 720)), Math.floor(random(0, 480)));

        arr.push(tempLine)

    }

}

​

//actually draws the lines on the canvas

function drawLines(arr) {

    //colors vary slightly to make it prettier

    col = color(r, g, b, 255);

    stroke(col);

    strokeWeight(3);

    for (var i = 0; i < arr.length; i++) {

        col = color(shiftColor(r), shiftColor(g), shiftColor(b), 255);

        stroke(col);

        line(arr[i].x, arr[i].y, arr[i].x + globalMag * arr[i].vec.x, arr[i].y + globalMag * arr[i].vec.y);

    }

}

​

//finds and then draws the intersections

function drawIntersections(arr) {

    noStroke();

    fill(255, 204, 255);

    for (var i = 0; i < lines.length; i++) {

        for (var j = i + 1; j < lines.length; j++) {

            var pt = intersection(arr[i], arr[j]); //returns null if no point found

            if (pt != null) {

                ellipse(pt.x, pt.y, 30, 30);

            }

        }

    }

}

​

//helper function to change the color slightly for the lines each time

function shiftColor(x) {

    x = x + random(-50, 50);

    return (x <= 255 ? x : 255);

}

​

//uses Paul Bourke's formula @ http://paulbourke.net/geometry/pointlineplane/

function intersection(line1, line2) {

    var x1 = line1.x;

    var x2 = line1.x + globalMag * line1.vec.x;

    var x3 = line2.x;

    var x4 = line2.x + globalMag * line2.vec.x;

    var y1 = line1.y;

    var y2 = line1.y + globalMag * line1.vec.y;

    var y3 = line2.y;

    var y4 = line2.y + globalMag * line2.vec.y;

    var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));

    var x = x1 + ua * (x2 - x1);

    var y = y1 + ua * (y2 - y1);

    var x1points = (x1 <= x2) ? [x1, x2] : [x2, x1];

    var x2points = (x3 <= x4) ? [x3, x4] : [x4, x3];

​

    return ((x1points[0] <= x && x <= x1points[1]) &&

        (x2points[0] <= x && x <= x2points[1])) ? new Point(x, y) : null;

}

​

//basic classes

class Line {

    constructor(x, y) {

        this.x = x;

        this.y = y;

        this.vec = p5.Vector.random2D();

    }

}

class Point {

    constructor(x, y) {

        this.x = x;

        this.y = y;

    }

}