NOC: VECTORS AND FORCES

INTRO

I created a color explorer using vectors and forces. There are two transparent red ellipses, that are influenced by mass and gravity and by the wind force. As the user, you can click onscreen to start the wind force. The overlap of the red ellipses and the sides showcase various color palettes.

LINK TO CODE

PROCESS

INSPIRATION

I was inspired by the code for the bouncing ball and wind force. Mainly, I was inspired by the color change when the two objects overlapped.

That got me thinking about the primary color wheel and the overlap of colors. So, I decided I wanted to experiment with colors on this assignment.

DESIGN

Instead of a static color wheel, I would make it dynamic, with various circles bouncing around due to gravity/wind and when overlapping they would change colors. I watched the Shiffman videos about overlapping circles and their area, but I was having trouble applying this concept to the vector space. In addition, I wanted a class of circles, but wasn’t sure how to change the individual color of each circle. Is there a good way to change the individual color of a class object?

CODE

I was browsing through various p5 interactions and came upon constrain. I thought it would be interested to allow the ellipses to control the movement of other ellipses through a constrain, therefore it was like the user was controlling all elements.

The larger circles were pulling the smaller circles left and right. The movement reminded me of a pulley, so I decided to add lines.

Overall, I experimented with various lines and connections of these items. Ideally I wanted the line to go from the radius of the large circle to the radius of the smaller circle, but the movement of the circle due to wind would mean the line would have to be loose and not straight. I also thought the overall user interaction might be a bit confusing between the small and larger circles. So, I decided to create a blue border on top to showcase the difference. That’s when I realized I could overlap my colors together and expanded the colors to the entire canvas.