BIOM Tool
BIOM is a compact web tool built with p5.js, created as a small experiment in visual growth. It generates abstract animations and stills that resemble organic, cell-like structures through form repetition and soft color transitions. Each composition is framed within a customizable Swiss-style poster layout, where modular design meets fluid motion.
Originally created just for fun, this project motivated me to experiment with visualizing graphics in the form of customizable poster art created in a programming environment. Yet, apart from purely aesthetic pleasure, the program provides the feature to export the animation and graphics in high resolution in various formats and save the tool's settings for the poster and graphics as a preset in JSON format.
Performance and compatibility
Here are some technical considerations to keep in mind when using the tool:
- Browser Performance: Rendering speed can vary widely depending on your hardware and browser. If you notice significant slowdowns, try switching to a different browser - Chrome and Firefox tend to offer the best performance.
- Video Export: During export to video, the process may stop due to insufficient memory, especially with high resolution or long videos. If this happens, try reducing the resolution or length of the video. For large or high-resolution videos, consider exporting as a PNG sequence and later converting it to a video using the FFmpeg library.
- MP4 Lag: When exporting to MP4 format, a library-related lag can lead to performance drops, causing the program to slow down noticeably after capturing and exporting the animation. Refreshing the page resolves this issue.
- Mobile Support: The tool isn’t optimized for mobile devices. You’ll need at least an 800×600 display to run it reliably.
Please let me know if you're running into any issues or discover a bug while using the program.
Credits
I would like to acknowledge the use of several third-party libraries within this project and express my sincere gratitude to their creators for making these resources available:
-
The p5.js ↗ Creative Coding Library, a product of the collective efforts of an incredible team;
-
The Tweakpane ↗ interface library, ingeniously developed by Hiroki Kokubun;
-
The HME Library ↗ for encoding directly to H264 format, created by Trevor Sundberg;
-
The p5.capture ↗ library by tapioca24 for recording animations;