Coding Challenge #134.2: Heart Curve GIF Loop

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=l5I3Q1JFISE


Duration: 8:22
24,833 views
678

In this multi-part challenge, I use a parametric equation (from Wolfram Mathworld) to draw a heart curve in Processing (Java). Code: https://thecodingtrain.com/challenges/134-heart-curve

p5.js Web Editor Sketches:
πŸ•ΉοΈ Heart Curve: https://editor.p5js.org/codingtrain/sketches/egvieHyt0
πŸ•ΉοΈ Beating Heart GIF: https://editor.p5js.org/codingtrain/sketches/egvieHyt0

πŸŽ₯ Previous video: https://youtu.be/bl3nc_a1nvs?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Next video: https://youtu.be/nBKwCCtWlUg?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
❀️ Heart Curve Formulas: http://mathworld.wolfram.com/HeartCurve.html
πŸ–Œ Daily Art: http://sasj.tumblr.com/
🐝 Bees & Bombs: https://beesandbombs.tumblr.com/
πŸ’Ύ Loop Templates: https://github.com/golanlevin/LoopTemplates
πŸ’Ύ EZGIF: https://ezgif.com/

Videos:
πŸŽ₯ Part 1: https://youtu.be/oUBAi9xQ2X4
πŸŽ₯ Polar Coordinates: https://youtu.be/O5wjXoFrau4
πŸŽ₯ Drawing with Fourier Transform and Epicycles: https://www.youtube.com/watch?v=MY4luNgGfms
πŸŽ₯ Livestream Archive: https://youtu.be/_xa87yl0nd4

Related Coding Challenges:
πŸš‚ #133 Times Tables Cardioid Visualization: https://youtu.be/bl3nc_a1nvs
πŸš‚ #135 Making a GIF Loop in Processing: https://youtu.be/nBKwCCtWlUg

Timestamps:
0:00 Bonus Video: Make a GIF loop of the heart
0:33 The GIF loop should start where it ends
1:32 Map the angle to percent
2:35 Animate by adding and removing points from the array
4:16 Use sine to animate the beating of the heart

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

πŸš‚ Website: http://thecodingtrain.com/
πŸ‘Ύ Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
πŸ’‘ GitHub: https://github.com/CodingTrain
πŸ’¬ Discord: https://discord.gg/hPuGy2g
πŸ’– Membership: http://youtube.com/thecodingtrain/join
πŸ›’ Store: https://standard.tv/codingtrain
πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain
πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/

πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

πŸ”— p5.js: https://p5js.org
πŸ”— p5.js Web Editor: https://editor.p5js.org/
πŸ”— Processing: https://processing.org

πŸ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#heartcurve #parametricequation #polarcoordinates #gifloop #processing



Other Videos By The Coding Train


2019-03-08Coding Challenge #138: Angry Birds with Matter.js
2019-03-06Coding Train Live 171: Fetch function and Angry Birds with Matter.js
2019-03-05Coding Challenge #137: 4D OpenSimplex Noise Loop
2019-03-04I.7 : What is OpenSimplex Noise?
2019-03-0116.18: Polymorphism in JavaScript - Topics of JavaScript/ES6
2019-03-0116.17: Inheritance in JavaScript - Topics of JavaScript/ES6
2019-02-289.20: Look away! Inheritance with Prototype in JavaScript - p5.js Tutorial
2019-02-27Coding Train Live 170: 4D OpenSimplexNoise Loops and ES6 Inheritance
2019-02-25Coding Challenge #136.1: Polar Perlin Noise Loops
2019-02-20Coding Train Live 169: Perlin Noise Loops + JS Inheritance
2019-02-19Coding Challenge #134.2: Heart Curve GIF Loop
2019-02-19Coding Challenge #135: Making a GIF Loop in Processing
2019-02-18Coding Challenge #134.1: Heart Curve
2019-02-14Coding Challenge #133: Times Tables Cardioid Visualization
2019-02-132.6: createGraphics() - p5.js Tutorial
2019-02-13Coding Train Live 168: Mathematical Hearts + GIF Loops
2019-02-12Coding Challenge #132: Fluid Simulation
2019-02-08Coding Challenge #131: Bouncing DVD Logo
2019-02-07ml5.js: KNN Classification Part 3
2019-02-06Coding Train Live 167: Bouncing DVD Logo + Fluid Simulation
2019-02-05ml5.js: KNN Classification Part 2


Tags:
daniel shiffman
coding
the coding train
coding challenge
creative coding
code challenge
javascript (programming language)
programming challenge
coding tutorial
gif loop
gif loop processing
gif loop art
creative coding gif
creative coding tutorials
creative coding art
creative coding processing