By Juweek Adolphe in P5.js Tutorial — Jan 10, 2024

How to Make an Aroma Diagram (P5.js tutorial)

Welcome to this exciting p5.js tutorial where we'll dive into creating an interactive aroma diagram. p5.js, a JavaScript library, offers a powerful platform for creative coding, allowing us to visualize data and concepts in an interactive manner. Today, we're focusing on representing various aroma compounds through a dynamic and engaging diagram.

Setup and Initial Variables

In p5.js, the setup() function is our starting point. It initializes our canvas and sets up essential variables. In this project, we have two key global variables:

Gourmet Data is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.

bugs: Represents dynamic elements in our diagram, each corresponding to an aroma.
aromaCompounds: An array containing different aroma compounds, each with a unique color and a ratio representing its prevalence or importance.

The aromaCompounds array is crucial as it gives each 'bug' its unique identity. For instance.

Each compound's ratio affects how often it appears, mirroring real-world distributions.

The Bug Class

Our Bug class is a cornerstone, encapsulating the behavior and properties of each aroma element. It demonstrates the object-oriented capabilities of p5.js. The constructor initializes the bug's position and associated compound.

[

The methods move(), shrink(), and interact() animate our bugs, making them move, decrease in size over time, and interact with one another. This interaction is a simplified representation of how different aromas might combine or react.

These interactions are based off of real-life properties, as listed in the corresponding blog post.

Drawing and Animating the Compounds

The draw() function is the heartbeat of our p5.js sketch, continuously updating the canvas. Here, we iterate over the bugs array, updating the position, appearance, and size of each bug. We also handle the interactions between bugs, where two bugs can merge to create a new one, adding an engaging and dynamic aspect to our diagram.

Aroma Compound Selection

chooseAromaBasedOnRatio() plays a pivotal role in determining which aroma compound a new bug represents. This function selects a compound based on the predefined ratios, ensuring a diverse yet representative mix of aromas in our diagram. The use of cumulative ratios in this selection process ensures that each compound's representation is proportional to its specified ratio.