My concept:
I’ve been messing around with this p5.js sketch that’s basically a visualization of data moving through a network. I call it a packet stream. You’ve got these static “nodes” acting like servers, and then these little “packets” that just zip around the screen. It’s supposed to look like some kind of live monitor for a server. I also made it interactive so you can basically click anywhere to put a new packet into the mix, and if you hover your mouse near one it literally creates a yellow line like you’re intercepting it.
A highlight of some code that you’re particularly proud of:
I am really proud of this code because it isn’t just a simple hover effect, it actually uses a distance check to create a connection.
let d = dist(mouseX, mouseY, dataPackets[i].pos.x, dataPackets[i].pos.y);
if (d < 50) {
dataPackets[i].highlight();
}
How this was made:
I wanted the packets to move around naturally, but the math for the speed and direction was very hard to understand for me. I also couldn’t figure out how to stop them from disappearing into the edges of the screen before bouncing back. So I used AI to help me build the Packet class, specifically to get the physics right so they bounce off the walls smooth.
edges() {
if (this.pos.x > width – this.size/2 || this.pos.x < this.size/2) {
this.vel.x *= -1;
}
if (this.pos.y > height – this.size/2 || this.pos.y < this.size/2) {
this.vel.y *= -1;
}
}
Reflection and ideas for future work or improvements:
I am really proud of this work, however, to make it even more interactive I would make the packets actually travel between Node_1 and Node_2 instead of just floating aimlessly.