Interactive-Background/particleConnect.js at master · CrypticGuy/Interactive-Background · GitHub

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// Project Name: Particle Connect
// Developer: Vasu Goel
// License: MIT
// Date: 8/10/2017


var particleArray = []

function windowResized()
{
    resizeCanvas(windowWidth, windowHeight);
}

function mouseClicked()
{
    if (particleArray.length < 100)
    {
        particleArray.push(new createParticles(mouseX, mouseY));
    }
}

function setup()
{

    createCanvas(windowWidth, windowHeight);
    for(var i = 0 ; i < 70; i++)
    {
        particleArray.push(new createParticles(random(width), random(height)));
    }
}

function draw()
{
    background(20);
    for (var i = 0; i < particleArray.length; i++)
    {
        particleArray[i].move();
        for (var j = i; j < particleArray.length; j++)
        {
            particleArray[i].lineGenerator(particleArray[j].valX(), particleArray[j].valY());
        }
        particleArray[i].display();
        particleArray[i].checkEdges();
    }
    //ellipse(windowWidth/2, windowHeight/2, 100, 100);
}

function createParticles(x, y)
{
    this.angle = random(-1, 1);
    this.x = x;
    this.y = y;
    this.diameter = random(10, 15);
    this.speedX = random(-1.5, 1.5);
    this.speedY = random(-1.5, 1.5);
    this.opacity = random(180, 255);
    this.move = function()
    {
        this.x += this.speedX;
        this.y += this.speedY;
    }
    this.display = function()
    {
        var d = (sin(this.angle + PI/2) * this.diameter/2) + this.diameter/2;
        fill(255, 255, 255, this.opacity);
        //stroke(255);
        noStroke();
        ellipse(this.x, this.y, d, d);
        this.angle += random(0.01, 0.05);
    }

    this.lineGenerator = function(a, b)
    {
        if (dist(this.x, this.y, mouseX, mouseY) < 127)
        {
            stroke(0, 0, 255, 255 - 2*dist(this.x, this.y, mouseX, mouseY));
            line(this.x, this.y, mouseX, mouseY);
        }
        if (dist(this.x, this.y, a, b) < 127)
        {
            stroke(0, 0, 255, 255 - 2*dist(this.x, this.y, a, b));
            line(this.x, this.y, a, b);
        }
    }

    this.checkEdges = function()
    {
        if (this.x > (width + this.diameter) || this.x < (0 - this.diameter))
        {
            this.x = width - this.x;
        }
        if (this.y > (height + this.diameter) || this.y < (0 - this.diameter))
        {
            this.y = height- this.y;
        }
    }

    this.valX = function()
    {
        return this.x;
    }
    this.valY = function()
    {
        return this.y;
    }
}