Coding Challenge #116: Lissajous Curve Table

Channel:

The Coding Train

Subscribers:

1,740,000

Published on October 3, 2018 1:00:59 PM ● Video Link: https://www.youtube.com/watch?v=--6eyLO78CY

Duration: 27:57

110,360 views

2,679

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

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

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

References:
🗄 Lissajous Curve on Wikipedia: https://en.wikipedia.org/wiki/Lissajous_curve
🐦 Panlepan Twitter: https://twitter.com/panlepan/status/954694464697720833
🐦 Julio Mulero Twitter: https://twitter.com/juliomulero/status/1039456605736185856

Videos:
🎥 Lissajous Curves with p5.js: https://youtu.be/glDU8Nsyidg
🎥 Lissajous Curve by standupmaths: https://youtu.be/4CbPksEl51Q
🎥 Polar Coordinates: https://youtu.be/O5wjXoFrau4
🎥 Harmonic motion: https://youtu.be/m463X1cqV6s
🎥 2D Arrays in JavaScript: https://www.youtube.com/watch?v=OTNpiLUSiB4
🔴 Coding Train Live 152: https://youtu.be/Adk4LjmYyYg?t=732s

Related Coding Challenges:
🚂 #55 Mathematical Rose Patterns: https://youtu.be/f5QBExMNB1I
🚂 #60 Butterfly Generator: https://youtu.be/O_0fRV4MTZo
🚂 #81 Circle Morphing: https://youtu.be/u2D4sxh3MTs
🚂 #133 Times Tables Cardioid Visualization: https://youtu.be/bl3nc_a1nvs
🚂 #134 Heart Curve: https://youtu.be/oUBAi9xQ2X4
🚂 #C1 Maurer Rose: https://youtu.be/4uU9lZ-HSqA

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/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

#lissajouscurve #polarcoordinates #processing