codepens/fredrikaflowfield-heart/README.markdown

1011 B

Fredrika ❤️❤️❤️❤️❤️ - Flowfield Heart

_A Pen created at CodePen.io. Original URL: https://codepen.io/DonKarlssonSan/pen/XGgBae.

Inspired by Daniel Shiffman's Coding Train episode Coding Challenge #134 Heart Curve: https://www.youtube.com/watch?v=oUBAi9xQ2X4

Setup:

  • Draw a heart using the sixth curve found on Wolfram
  • Fill the curve
  • Store the image for future reference
  • Clear the screen
  • Fill the screen with particles

Draw loop:

  • Clear the screen with semi transparent black to create particle trails as the particles move around
  • If a particle is inside the heart (checked by referencing the image we stored during setup): affect its motion with a flow field(1), else: let the particle turn in a random direction and move a step.

(1) I have an extensive blog post about how a flow field works.