Coding Challenge

In this Coding Challenge, I visualize a "Lissajous Curve Table" with Processing (Java). Code: https://thecodingtrain.com/challenges...

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

🎥 Previous video:    • Coding Challenge #115: Snake Game Redux  
🎥 Next video:    • Coding Challenge #117: Seven-Segment Display  
🎥 All videos:    • Coding Challenges  

References:
🗄 Lissajous Curve on Wikipedia: https://en.wikipedia.org/wiki/Lissajo...
🐦 Panlepan Twitter:   / 954694464697720833  
🐦 Julio Mulero Twitter:   / 1039456605736185856  

Videos:
🎥 Lissajous Curves with p5.js:    • Coding Challenge #116 Continued: Lissajous...  
🎥 Lissajous Curve by standupmaths:    • Making a physical Lissajous curve  
🎥 Polar Coordinates:    • 3.4 Polar Coordinates - The Nature of Code  
🎥 Harmonic motion:    • 3.5 Simple Harmonic Motion - Nature of Code  
🎥 2D Arrays in JavaScript:    • 9.15: 2D Arrays in JavaScript - p5.js Tuto...  
🔴 Coding Train Live 152:    • Coding Train Live #152: Lissajous Curve Table  

Related Coding Challenges:
🚂 #55 Mathematical Rose Patterns:    • Coding Challenge #55: Mathematical Rose Pa...  
🚂 #60 Butterfly Generator:    • Coding Challenge #60: Butterfly Generator  
🚂 #81 Circle Morphing:    • Coding Challenge #81.1: Circle Morphing - ...  
🚂 #133 Times Tables Cardioid Visualization:    • Coding Challenge #133: Times Tables Cardio...  
🚂 #134 Heart Curve:    • Coding Challenge #134.1: Heart Curve  
🚂 #C1 Maurer Rose:    • Coding the Maurer Rose  

Timestamps:
0:00 Introducing today's topic
0:30 Inspiration
1:53 Important elements
4:28 Size of the boxes
5:09 Add circles at top of canvas
7:08 Use polar to cartesian coordinates to determine the offset
8:05 Draw a point on the circles
9:17 Add a line
9:52 Adjust speed of rotation based the circle's index
10:40 Add circles along left of canvas
12:05 Create a Curve class
13:24 Draw the path of the curve
15:00 2D arrays
16:06 Matrices are expressed as "row by column"
19:07 Set x and y points for all row and column combination
20:52 Draw the points
21:52 Highlight the points
23:30 Refinements: reverse direction of rotation and reset the circles
27:27 Thank you for watching!

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

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 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-o...

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

#lissajouscurve #polarcoordinates #processing