I decided to build on this flocking system by adding an interactive element to the screen. Using ml5.js poseNet I added a flee behavior from the users nose. As the user moved the camera would detect where their nose was and the particles would have a strong force repelling them from their nose (Figure 2). This example can be viewed here and the code can be viewed here.
At this point, I decided to shift gears a bit. I was noticing various posts on the r/creativecoding subReddit of examples using complex attractors. I was particularly drawn to this example where the particles almost look like they are moving through a complex attractor flow field. I wanted to set out to make this example in hopes to build on it for a future project. I recognized that this may be a longer term project so I simply began by building a simple flow field example following this sample code. I began to play around with the equations that made the vectors behind the flow field to get different effects. Figure 3 shows a test where I manipulated the flow field randomly but started the particles at the top and bottom of the screen to get a nice growing effect.
From here it was clear that I needed to understand the behaviors of the complex attractor that I wanted to use in order to understand how to implement that equation into a flow field. Thus, I took this example from the creative coding subReddit and added sliders to manipulate the constants. Figure 5 shows the example of how you can interact with this example. The code can be found here and the example can be found here. All of these steps were certainly beginning steps for a larger project where I build with these complex attractors and create an interactive simulation.