https://editor.p5js.org/jperry/sketches/_c1ZdsAwz
GIFs:
https://drive.google.com/drive/folders/1W71_ftURNEb3jq9eyk16Ty-xXDvgNEyH?usp=sharing
This project was inspired by mood rings that change color based on the heat from your finger. I wanted to portray this through happy and sad emotions, with the happy able to overpower the sad. The faces and color pallets are changed by the movement of the mouse.
Within my code I worked with the sin function to make the colors move around a certain pallet.
let sinValR = sin(angleR);
let sinValG = sin(angleG);
let sinValB = sin(angleB);
let r = map(sinValR, -1, 1, 0, 255);
let g = map(sinValG, -1, 1, 0, 255);
let b = map(sinValB, -1, 1, 0, 255);
This created a circular movement through the color wheel. Mapping allowed the value to move around the color wheel based on angles. To limit the pallet to warm or cool colors, I used r,g,b strategically to force the colors to move through those specific values.
fill(255, g, b);
ellipse(x/8, y/8, sizeX4, sizeX4);
fill(255, g, 0);
ellipse(x/4, y*4/ 2, sizeX4/2, sizeX4/2);
fill(r, g, 0);
ellipse(x, y, sizeX5,sizeX5);
With motion, I made the circles in the happy area move, while the sad area stays stagnant. This is to show how emotion affects us and our activities. The circles from the happy area will also leave a trace over the sad area if the mouse is in the upper right or lower left corners. This is to comment on the ways that joy can spread and provide a cure for sadness.
Getting the circles to move all at once was difficult, but eventually I was able to get it to work by using experimental coding and moving the if statements around within the code.
For sources I used the p5.js reference page.