Coding Assignment 4 – Network

Concept:

For this week’s assignment, I was inspired by the mystique of celestial bodies and quantum mechanics to create a network of dynamically connected particles gravitating around the mouse coordinates. It involves particle interaction, attraction, acceleration, and velocity. The number of particles starts low and gradually increases to reach 350, alongside their opacity and size. Upon mouse movement, the particles follow slowly the coordinates with some noise introduced implicitly.

Code: https://editor.p5js.org/bdr/sketches/ekie7vlHu

Code Walkthrough:

Particle Class:

Constructor: each particle is initialized with a random position, velocity, and an initial distance vector.

Update(): It is responsible for updating the particle’s position based on its velocity and applying boundaries to ensure particles stay within the canvas. It also calculates the acceleration pointing towards the mouse cursor and adds it to the particle’s velocity, creating an attraction effect.

update() {
        if (this.position.x > width / 2 || this.position.x < -width / 2 || this.position.y > height / 2 || this.position.y < -height / 2) {
            this.position = createVector(random(-150, 150), random(-150, 150));
            this.velocity = createVector(random(-0.5, 1), random(-0.5, 1));
        }
        let m = createVector(mouseX - width/2, mouseY - height/2);
        let acceleration = p5.Vector.sub(m, this.position);

        acceleration.setMag(0.5);
        this.velocity.add(acceleration);
        this.position.add(this.velocity);
}

Display(): Mainly to display the particles. It calculates the distance vector to track proximity to other particles to later draw the connecting line.

As the network grows bigger, the transparency of the connecting line decreases. The particles – filled circles – are replaced with larger non-filled ellipses.

stroke(255, 0, 0, this.distance.x + this.distance.y);

Draw Function:

Translate(): translates the coordinate system to the center of the canvas to make it easier to work with particle positions.

To gradually create multiple instances of particles, I’m adding one particle at every iteration.

The line is drawn using the following:

for (i=0; i<particles.length; i++) {
        particles[i].display();
        for (j=0; j<particles.length; j++) {
            if (i!=j){
                if (particles[i].position.x <= particles[j].position.x + 28 && particles[i].position.x >= particles[j].position.x - 28) {
                    if (particles[i].position.y <= particles[j].position.y + 28 && particles[i].position.y >= particles[j].position.y - 28) {
                        stroke(255, 0, 0, particles[i].distance.x + particles[i].distance.y);
                        line(particles[i].position.x, particles[i].position.y, particles[j].position.x, particles[j].position.y);
                    }
                }
            }
        }
    }

Challenges:

One of the challenges that I have faced is certainly the computational power.  Having ore particles means needing more power and therefore sacrificing speed. Hence keeping the max to 350.

Improvements:

Repulsion force: Add repulsion forces alongside attraction
Wind force using mouse movement/click: Upon using the mouse, the particles will move away following the wind movement and power.