NOC-W05-Your DIY Pinky Heart!

Please play it by YOURSELF here! 

https://editor.p5js.org/TinaZhang226/sketches/3Z0sXT72w

 

Inspiration: 

People are having different habits in drawing the same “heart” shape~ so I want to create a canvas using p5.js where people could draw the heart shape as they want and try manipulating different attributes. 

 

Basic Logic:

Need many sliders for people to change the values; 

Determine what values are to be changed; 

• size of the heart shape
• color ( actually opacity ) 
• speed ( actually the angle added every frame ) 
• stroke ( actually one coefficient affecting the height and width of every ellipse ) 
• degreeA ( the distance of two highest point ) 
• degreeB ( the degree of folding) 

Create basic heart shape with sin() and cos() function;

• 

 

Creating Process: 

1. test with the slider and basic heart curve with different sizes:
2. Apply aesthetic color and test with circle element:
3. Add more sliders to play with different attributes:
4. Try different stroke size, applying another sin() and cos() here to make more fun:
5. Manipulating the stroke with sin(size)*cos(opacity), etc. : 
6. Want to create different heart curves so that this DIY canva can be more educative for people to vividly observe how the heart curve function’s every sin and cos’ s amplifier changes the heart shape:
7. Final polishing.

 

Final Documentation: