Assignment
👾 Explore and/or build something with any of the external libraries we looked at in class or include your own. Try to get them on your computer and serve them locally using VS Code.
Process
For the extra credit assignment, I was inspired by my rain simulator and wanted to experiment more with particle systems. I found the library p5.particle, uses attributes assigned to each particle to affect the simulation.
These particles are then assigned to a fountain, which draws and steps the simulation.
I’m not entirely sure the specifics of how the code works (I know there is something involving JSON), but I understand what each of the attributers does and was able to customize the particles to my liking. The documentation was very useful in figuring this all out.
I tried to use dat.gui to manipulate the simulation as it was running but was unable to get this working. In the gif below, the size of the particle is linked to the value of the slider. I think the reason it’s not changing is because it is only defined in setup. I am now realizing I probably could have just updated the value in the draw loop.
Anyways, I played around with a ton of different simulations, and found a cool effect that can be done with the sizePercent value. I ended up creating a landing page animation for a hypothetical personal website.
Conclusion
Completing this project was a lot more fun than I originally intended. I really enjoyed poking around in a library and having the freedom to create whatever I wanted. I think using a particle system to create a landing page animation is a unique idea and would look pretty cool to have on a website. If I was to continue this further, I would:
- Add colors that change on every visit
- Involve user interaction in some way (have the animation respond to mouse movements or something)
- Create multiple animations that change on every visit