Coding Challenge #133: Times Tables Cardioid Visualization

Channel:

The Coding Train

Subscribers:

1,740,000

Published on February 14, 2019 2:24:23 PM ● Video Link: https://www.youtube.com/watch?v=bl3nc_a1nvs

Duration: 17:21

84,032 views

2,845

In this video, I visualize the "mathematical heart" Cardioid using times tables calculations. Code: https://thecodingtrain.com/challenges/133-time-tables-cardioid-visualization

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/gwcGb_NPm

🎥 Previous video: https://youtu.be/alhpH6ECFvQ?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/oUBAi9xQ2X4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🗄 Cardioid on Wikipedia: https://en.wikipedia.org/wiki/Cardioid
📝 Rainbow Topics suggestion from Eduardddd: https://github.com/CodingTrain/Rainbow-Topics/issues/1036

Videos:
🎥 Times Tables, Mandelbrot and the Heart of Mathematics: https://youtu.be/qhbuKbxJsk8
🎥 Times Tables Visualization Poster in Processing: https://youtu.be/I-b54QkD3so
🎥 Polar Coordinates: https://youtu.be/O5wjXoFrau4
🎥 The Modulo Operator: https://www.youtube.com/watch?v=r5Iy3v1co0A
🔴 Coding Train Live 168: https://youtu.be/_xa87yl0nd4?t=2077s

Related Coding Challenges:
🚂 #21 Mandelbrot Set with p5.js: https://youtu.be/6z7GQewK-Ks
🚂 #116 Lissajous Curve Table: https://youtu.be/--6eyLO78CY
🚂 #134 Heart Curve: https://youtu.be/oUBAi9xQ2X4
🚂 #163 Bézier Curves: https://youtu.be/enNfb6p3j_g

Timestamps:
0:00 Introduction
1:00 Simon Tiger's Processing Day presentation
2:07 Discussion of the times tables calculations
4:03 Start Coding!
5:34 Map the point's index to an angle
6:08 Use polar coordinates to get point location
6:31 Draw the points
7;48 Start with the 2-times table
8:37 Write a getVector() function
11:00 Use modulo operator to get remainder for mapping
12:28 Add PI to rotate the cardioid 180 degrees
13:31 Animate by mapping mouseX to the total number of points
14:34 Change to 3-times table
16:19 Animate by changing the factor
16:43 Conclusion and creative possibilities

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://thecodingtrain.com/discord
💖 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

#cardioid #cardioidtimestables #timestablesvisualization #heartalgorithm #polarcoordinates #modulooperator #processing