Coding Challenge
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- In this Coding Challenge, I visualize a "Lissajous Curve Table" with Processing (Java). Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #115:...
🎥 Next video: • Coding Challenge #117:...
🎥 All videos: • Coding Challenges
References:
🗄 Lissajous Curve on Wikipedia: en.wikipedia.org/wiki/Lissajo...
🐦 Panlepan Twitter: / 954694464697720833
🐦 Julio Mulero Twitter: / 1039456605736185856
Videos:
🎥 Lissajous Curves with p5.js: • Coding Challenge #116 ...
🎥 Lissajous Curve by standupmaths: • Making a physical Liss...
🎥 Polar Coordinates: • 3.4 Polar Coordinates ...
🎥 Harmonic motion: • 3.5 Simple Harmonic Mo...
🎥 2D Arrays in JavaScript: • 9.15: 2D Arrays in Jav...
🔴 Coding Train Live 152: • Coding Train Live #152...
Related Coding Challenges:
🚂 #55 Mathematical Rose Patterns: • Coding Challenge #55: ...
🚂 #60 Butterfly Generator: • Coding Challenge #60: ...
🚂 #81 Circle Morphing: • Coding Challenge #81.1...
🚂 #133 Times Tables Cardioid Visualization: • Coding Challenge #133:...
🚂 #134 Heart Curve: • Coding Challenge #134....
🚂 #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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: th-cam.com/users/thecodingtrainjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#lissajouscurve #polarcoordinates #processing
I wonder what the curves would look like in 3D, like another set of sin waves that control height?
In 3D I think you would need another angle.
You need a third set of wheels for a third dimension. So yeah, basically another set of sine waves.
It will look rather similar, but with another dimension added. The circles will be spheres, the arcs will be semispheres etc.
The interesting thing is that a three-dimensional lissajous is only possible in a virtual environment, as the "arms" would cross each other and the lines would intersect.
But copy the project and add another dimension to it, change to P3D and check for yourself.
A 3d lissajous curve is basically 3 lissajous curves merged, if you look from infinity in the x direction you'll see a 2d lissajous curve created by the circles rotating in the y and z plane. If looking from the y axis you'll see the lissajous from xz and from the z axis you'll see the xy curve.
I made a 4d version projected to 3d quite recently, a bit harder to imagine/understand that but it's fun to play around with ^^
i made this for fun i guess
gfycat.com/ColorfulMeatyAmericankestrel
@@Bolt6265 dang that's cool!
The error you got is a but in JOGL. It is harmless and can be ignored. It will be silenced in a later release.
5:46 I like how the captions just read "(silly noises)". You are literally my favourite youtuber and give me my will to survive at times.
Could someone please make a remix of 5:43 to 5:47 ? Because that's hilarious ^^
PS: Love your videos; It is you who motivated me to become a programmer...
Owl Surojit some beatboxing eh
I was playing at 1.5x speed😂had to stop at this part
I love how you seem to have so much fun doing these videos haha keep it up man you made me get into coding
Saw the tiny bit of those cuves in Matt Parker video myself, coded it myself and then here you are! Amazing to see another style of coding for the identical tasks.
I never normally comment on youtube videos but you have helped me be able to code some mathematical ideas of my own I have had for years but not been able to progress them any further, thank you for bringing me your videos.
Pff this is easy
..to watch
...if you aren't following
It feels like I'm learning, but really I'm just watching art
Wow, rarely have been so excited to enjoy a video!!
I was searching about lissajous curves and thought it would be cool to write it in processing, I'm glad there is a video about that! You are the best :D
I Love your videos! Thanks for your amazing positiveness. Greetings from Colombia
Yay Processing 3 is used again . Daniel hope you see that videos you make with Processing 3 are watched the most often ( * hint* hint* :) ), maybe a topic regarding the some applications of sharders might be good , huge huge admirer of all the work you do
ABC Aus! Wonderful video Dan. I love your work. You are sensational!
The order of rows and columns still fits the standard (x,y) notation, because the computer reads right-to-left to define the array. When you go to access it though, it reads left-to-right.
Think of it like a low-level list and a high-level list. You define bottom up, but you access top down.
it really looks so cool, just like pure harmonics in nature
very nice how you think like that.. without any stuck you are a genius bro
Nice! Great video as always, Dan!
Thanks for the great video. I want to know why did you choose eclipse for the dots along the circle? Why not use vertex?
When you searched for the saved frame of the table the file name was something like "lissajous00629" although you saved it as "lissajous####.jpg" is this some command for saving it with a certain numeric code?
you didn't make me get into coding but watching your videos is hella fun
Love your videos, congratulations!
And after watching I always rewrite from zero in Processing.py, but never, NEVER using classes at all... imho they only add weight, complexity and let everything less obvious and unclear, with longer code. Sure, all "objects" as arrays, but never in the pseudo oop way, just hate it in "anything bellow 1000 lines" (aka "simple stuff", where I do not need lots of classes and tons of objects). But YES, it gratley serves the purpose to TEACH oop, damn it, and you do it great!
And again, your channel is AWESOME, and YOU are awesome! Keep the passion and the great mood!
I’m so confused, yet so satisfied. This was pretty cool!
I ended up taking the challenge and did it myself
In 1h45... I rarely program so cut me some slack
BUT I succeeded!
I love your videos! I learn so much from them. I understand programming concepts as taught by you quicker and more completely than anyone else. I also love how you problem solve as you go. It helps me see the process. Keep it up, my man!
you're a magician dan
This could be a real cool application/integration for the new Fourier videos you’re in the process of making. This code can be remixed to visualize a 3D phase map the combination of 3 separate circle rates and amplitudes. Let me know what you think!
Youre so smart man!
if you want really good performance, use the FX2D renderer
Not watched yet, so I may be repeating things you'll say here, but here goes:
This is something I tackled on a graphing calculator some years ago, using parametric curves with horizontal and vertical sine waves of different integer frequencies. What I found trickiest was choosing the relative phases so that the curves never came to a "point," but always flowed as a complete, continuous curve. I solved that problem by the following rules:
Parameter = t; (x,y) = (f(mt), g(nt))
where m & n are positive integers; and f and g are each either sin or cos, chosen independently.
And to make those choices, first test the parity of m and n. Then:
(1) If at least one of them is odd, then that one gets cos; the other gets sin, whether it's even or odd.
(2) If both are even, repeatedly divide both by 2 until condition (1) holds, then apply that rule. [But still use the original m,n to draw.]
There are always other choices that will achieve the desired result, but this is the simplest set of rules that always work.
And here's another insight into Lissajous figures: All of these result from orthographic projection of a sine wave, drawn on a strip of width W, then rolled into a cylinder of height W, with the sine wave's frequency chosen so that the rolled-up version matches the sine curve smoothly with itself.
And the same L-Curve can be produced by one sine wave rolled up horizontally, or another sine wave rolled up vertically.
In either case, the phase can be changed by simply rotating the cylinder continuously on its axis; this gives the full, general case of L-Curves.
OK, watched it now. Really neat!
So I leave it to you to try these phasing rules or not; what you've got is awesome enough. So just if you're interested...
Fred
Thanks for the feedback!
Nice thanks
I first saw the Lissajous demonstration in the standupmaths video, and I wanted to see if I could do this in Python. I havent tried it out, but Ill follow along as I watch, converting to Python... ^_^
What do you use to render live graphics in python?
Hey, how do i show graphics. Have you tried that already, i mean in python?
I use Zelle's graphics.py library, with a few tweaks. That does 2D rendering. Very simple to work with. But performance is terrible the more drawn objects there are (as Python runs code sequentially) I had to generate the curves first, them render it all at once. If you want 3D graphics, there are other librarys better suited (or you can do what I did and create a framework for n-dimensional vectors and points, and over time create projections for higher dimensions)
well, this probably was just a Parker Square of a video
Could true arcade.academy. OpenGL accelerated.
As an electrical engineering student, I admit that this is awesome
Coming soon, in a future episode of The Coding Train: Lissajou curves... in 3D!!!
Masterrrr!
Hey Dan! You can use Processing's built-in attribute functions like ellipseMode(CORNER) for drawing circles from their upper-left corner. That way you won't have to calculate the circles' center offset.^^
Very cool.
*: D*
this is too good to be
12 rows and 23 columns. That's a minute or so of my life well spent.
Just saw that Lissajous gif on Twitter and were asking to myself "hey, that could be a nice project to do on Processing...". And here it is! Thank you!
I tried to do in one loop but still need the functions addX and addY. If I add the point only get the circles in diagonal.
This lissajouss figure is created when we superpose two SHM with different frequency
Cool
Make a Spirograph simulation! I think that’d be cool along side this as things that are fun to watch
i traveled back in time to make this video for you! th-cam.com/video/0dwJ-bkJwDI/w-d-xo.html
I got it...........almost, in VB. Its kinda the same that is to say it draws the paths but no circles at the top of the columns or rows. Its a work in progress i guess.
omg around 25:40 shifman got compressed out of reality
more so around 25:00
It look like the sierpinski triangle pattern when you increase the number of circle, kinda fun imo
优秀
Люблю твои видео! Ты очень позитивный и занимаешься хорошим делом))
When you are iterating over rows, cols use r, c instead of i, j
OMG OMG OMG OMG LEAVE THE CASINO LEAVE THE CASINO
It's OK.
He fixed the second HALF_PI sneakily around 19:37
Finally! Rows, columns! lol
I had literally the same thought when I saw Matt Parker’s video
*dinnnng* processing, now processing is a java based programming enviroment ...
I parrot along ever since my 2nd episode =>
5:43 ahh ohh uhh ehh ahh
someone know how I can give every curve a unique coloring?
The chances of the URL starting with two hyphens after the equal is 1/64^2... and you got it.
Can you do a version of this in 3d?
The code runs fast i the start but when one of the shapes finishes and starts overlapping, the code becomes very slow. is there any way to fix this?
This is because the program keeps adding points to the path. Even if the Lisa-figure is complete. I added a check if the last point added (self.current) is equal to curves[row].col].path[0] (the first point in the path). If so, then the path is closed and the Lisa-figure complete. So you don't have to add more points. However, some Lisa-figures are now only drawn in half: because the path crosses the first point. Haven't a solution for that just now...
@@renealgera I already fixed the part where it keeps on adding points. So when all the curves are completed, it becomes fast. But It becomes slow even before all the figures are completed, even if one is completed,
would like to see you try to replicate the growth of a slimemold in p5.js
If that is even possible
The pattern made by these curves at 25:04 looks as if it is following the left visualisation shown here: mathworld.wolfram.com/LeastCommonMultiple.html
I need that whistle
Dan sells them at amazon.com - www.amazon.com/ideas/amzn1.account.AFRDHABWPWJEAX34FWZKCMUULDTA/FTP7TKU60DU5
CHECK OUT MY ORIGINAL CHALLENGE ON LISSAJOUS PATTERNS HERE:
th-cam.com/video/uiFvAT0Z5zM/w-d-xo.html
I created this in java a week ago and now i am seeing this video... i dont known its name. I made it after watching a video of ted which shows pattern of 3/4
The angle is offset when being used, so your angle reset is out of phase. But really cool
Oops!
You should do a break down on some of the “Art” programs on the site called complexification .net. Its run by Jared Tarbel although he no longer posts new pieces. But his art is cool and he posts the source code!
what a site! very impressive images
is there a tshirt for it? I'll refactor this later? xd
Well, there is, hah! www.designbyhumans.com/shop/codingtrain
now move the circles with perlin noise instead
"I is iterating through all columns" isn't it supposed to be "I am"?
Just kidding... 😁 Nice video as always
Dojebales
Goodness, a Parker Square of a video
why is the pvector current reintialized in the addPoint function?
Matt Parker fanclub
Don't know what kind of diseases your affected by but thanks the explanations.
At 6:40 'Can I make that look nicer?'
Well: pixelDensity(displayDensity());
Do a rubicks cube next time
Please, I am really waiting for it
Seria interesante ver como lo realizar ia
Rubik's, not rubicks.
Can i get algorithm plz sir?
Are you on Mastodon, can I follow you??
choochoo.space/@shiffman
The dots alone look kind of like moving water
27:30, find the pretzel.
(10,12)?
The error is only on Macs that use the graphics card. More often than not, you can ignore the error. However, I hooked up an Arduino and a gesture sensor to a Processing sketch. Input from the sensor would crash the sketch when using P2D. The program would run fine (albeit slower) without P2D. I could use arrow key presses to replace the gesture sensor input and P2D without the sketch crashing.
15:35 Hahaha :) I agree rows and columns in that order is more standard, but without a doubt, when I declare matrices that carry even a minimal of "cartesianity" meaning, I always go for X and Y order. I think code should be the more unambiguous the better. I even prefer to call the iteraring variables x and y, instead of i and j... XD
27:37
10:16
11:25
11:44
25:01
sin waves under an oscilloscope XY anyone?
Hey Dan. Nice video!! For a future coding challenge it would be awesome if you can try to implement a griddlers solver. It would be really cool I think. For some info and ideas of what this is:
www.griddlers.net/es/home
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
Done!
It looks like there is a phase difference between the columns and rows.
Please teach python please
Hey can you build cryptography ? using an algorithm like Lattice-based? it is post-quantum proof algo,here is wiki page en.wikipedia.org/wiki/Lattice-based_cryptography
First
nobody cares
please make a video about kotlin
As a computer science, I am sorry to say that is very cool but very poor implemented. in the table there are repeating patterns, would have been much more interesting plotting non multiple frequency and get more patterns or not to redraw multiple, and even , to fasten the process, to detect the completed picture and stop (just detect both circles have completed the loop) :-) By the way, I understand the coding exercise, but again, as computer enthusiast we should not forget the basic: this is the classica exercize for NON digital computer, can be done with 0 lines of codes, just running an xy oscilloscope and 2 function generators, and I am sure.... it will even run faster :-)