This interactive graphic is designed to be played in a live music performance place, where once the music starts, and the audiences start to make a noise, the black graphic starts to fill more and more vibrant colors in respond to the audiences reactions.
I created this flow field starting with drawing points, and then created vectors to assign a direction to each point in space to make them move. Then I mapped the coordinateds of the points to the RGB values to assign colors to them.
The interactive part is involved with amplitude and microphone AudioIn(), where I set when the microphone amplitude level is greater then certain value, then the graphic starts to fill colors, and when it is smaller than certain value, just fill black.
I also used noise to produce random values with smooth gradients, so I mapped the value of the noise from 0 to 1 at each point in space to an angle from 0 to 720. Finally I limited the flow field to a circle by using the dist() function within p5.vector.
Full Code: https://editor.p5js.org/yz7720/sketches/Fnjn_QsBK
Reference:
Комментарии