Тёмный

Coding Challenge  

The Coding Train
Подписаться 1,7 млн
Просмотров 319 тыс.
50% 1

In this coding challenge, I implement the Discrete Fourier Transform algorithm in JavaScript and render a drawing using epicycles derived from the transform. Code: thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ Fourier Transform: editor.p5js.org/codingtrain/s...
🕹️ Fourier Transform - user-drawn path: editor.p5js.org/codingtrain/s...
🕹️ Fourier Transform - complex numbers: editor.p5js.org/codingtrain/s...
🕹️ Fourier Transform - user-drawn path with complex numbers: editor.p5js.org/codingtrain/s...
Other Parts of this Challenge:
📺 Part 2: • Coding Challenge 130: ...
📺 Part 3: • Coding Challenge 130: ...
🎥 Previous video: • Coding Challenge #129:...
🎥 Next video: • Coding Challenge 131: ...
🎥 All videos: • Coding Challenges
References:
🚂 Coding Train Logo: / 1079437780466520065
💾 p5.FFT: p5js.org/reference/#/p5.FFT
💾 FFT on Algorithm Archive: www.algorithm-archive.org/con...
🗄 Discrete Fourier transform on Wikipedia: en.wikipedia.org/wiki/Discret...
🗄 Complex Number on Wikipedia: en.wikipedia.org/wiki/Complex...
Videos:
🎥 But what is the Fourier Transform? A visual introduction: • But what is the Fourie...
🎥 Fourier Analysis For The Rest Of Us: • Fourier Analysis For T...
🎥 Epicycles, complex Fourier series and Homer Simpson's orbit: • Epicycles, complex Fou...
🔴 Code Train Live 165: • Coding Train Live 165:...
Related Coding Challenges:
🚂 #125 Fourier Series: • Coding Challenge 125: ...
Timestamps:
0:00 Introducing today's topic: a Fourier transform drawing machine
1:29 Fourier transform algorithm
3:08 Signal processing
5:49 Make a signal array
12:09 Euler's formula
15:34 Write the discrete Fourier transform function
21:50 What do we need for a circular epicycle?
22:47 Calculate the amplitude, frequency, and phase
26:30 Calculate amount of time to move per frame of animation
29:44 Draw an arbitrary path for both x and y
31:07 Write an epiCycles() function
34:30 Have epiCycles() return a vector with an x and y
38:59 Grab the path of the Coding Train logo
41:38 Render the epiCycles by order of amplitude
43:57 Conclusion and next steps
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: ru-vid.comjoin
🛒 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...
#fouriertransformsquarewave #discretefouriertransform #epicyclesdrawing #javascript #p5js

Опубликовано:

 

27 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 292   
@jonnynik7626
@jonnynik7626 5 лет назад
So basically you've created the most complicated etch-a-sketch of all time
@TheoParis
@TheoParis 4 года назад
XD
@Invalid571
@Invalid571 5 лет назад
You are the best coding teacher ever! Keep up the math related codes.
@onetzaid1
@onetzaid1 5 лет назад
"Lets make an array, called "y" and this is signals" how about naming it "signals"?
@naxaes7889
@naxaes7889 3 года назад
Haha! While everyone can make such mistakes, it always trigger me when is see code like: var a = 20; // age var b = 40; // length instead of: var age = 20; var length = 40;
@spythere
@spythere 3 года назад
@@naxaes7889 It triggers me when someone uses var instead of let without purpose
@doctorcardinal2322
@doctorcardinal2322 3 года назад
@@spythere ES6 makes me cry.
@alexandermcclure6185
@alexandermcclure6185 2 месяца назад
@@spythere there's no difference though
@tfrangel
@tfrangel 5 лет назад
Hey Daniel! I'm a huge fan of your channel, and I always learn a lot from your videos. Although I do not do JavaScript or p5.js, by going through the algorithm step-by-step one can build and expand on the code in any modern language. More importantly, one can not only replicate the code, but also understand it! Combining math, code and graphics is so much fun! In fact, I've been interested in Fourier since ever, but the standard math has always daunting to me, a biologist without strong background in math. Your recent videos on FT are not only amusing, but also expanded the horizon of possibilities in my research. Keep up the GREAT work! Best!
@trumanknight873
@trumanknight873 3 года назад
I love that you shout out other channels and give credit to the inspiration of the video where it is due. Always love your videos keep up the great work
@pozzer3
@pozzer3 4 года назад
Congratulations. The best video of all time. It encapsulates all necessary videos and sites on the internet related to fourier transform and fourier series so anyone with basic knowledge on math can understand and implement a fourier transform. It is simply amazing. I've spent many years of my life trying to understand it and now it it seams so easy.
@CalculusPhysics
@CalculusPhysics 5 лет назад
i love how well you can explain topics, especially complex topics such as Fourier Transform! you’re definitely able to explain them in a really simple, but effective manner. great video as always!
@CodingWithUnity
@CodingWithUnity 5 лет назад
My favorite part about the channel! Very inspiring
@martinskodacek6567
@martinskodacek6567 5 лет назад
I'm watching Daniel's channel since about 50k subs, every time he creates some amazing project, but this is maybe the most amazing thing I've ever seen here :D I heard about FT long time ago, but I've never been interested until now. Great job ;)
@TheCodingTrain
@TheCodingTrain 5 лет назад
Thank you for this nice feedback!
@michaelkotthaus7120
@michaelkotthaus7120 3 года назад
Yeah, this "Fourier machine" is really great! - And it's so inspiring how Dan explains the development of it.
@DirtySocrates
@DirtySocrates 5 лет назад
Jesus this is insane! I remember having to draw a image with piecewise functions in 10th grade and thought that was impressive.
@olegil2
@olegil2 Год назад
This is an awesome way to learn about the discrete fourier transform and fourier series. Even knowing a LOT about fourier transforms as applied to both sound and electronic signals, seeing the DFT used to draw a friggin train blew my mind.
@Thepantino
@Thepantino 5 лет назад
What a beautiful challenge...it's fanstastic...unbelivable to see!
@f.osborn1579
@f.osborn1579 Год назад
This is the coolest explanation of Fourier transformation I’ve ever seen!
@bapolino733
@bapolino733 5 лет назад
Im so glad that you uploud new videos! There was a little break that made me worry
@shaymalkin6846
@shaymalkin6846 5 лет назад
Brilliant work! One of your best ones.. Thank you :)
@musondasalimu2986
@musondasalimu2986 3 года назад
I took computer graphics course in my third year of cs study and all I can say is you've done some amazing
@darkfrei2
@darkfrei2 3 года назад
Thanks for your help! It was always interesting how the fourier transformation works.
@tcholly
@tcholly 4 года назад
When I saw this you gave me an idea, I took your code, and I added something with python. I made something like paint in black and white, and what you draw (if you refresh the page) it get drawn eith your machine. it's all a mix of phyton and javascript. But then I saw your other video where you did that but better :-( I'm still happy of my result Thank you for giving me fantastic ideas every time I watch one of your video
@Shipslaw
@Shipslaw 4 года назад
Beautiful - interaction between x- and y-axes. Put a similar wiper setup on the z-axis and you can make a 3D drawing.
@NatetheAceOfficial
@NatetheAceOfficial 5 лет назад
Don't joke about imaginary numbers Daniel! This is VERY serious business.
@0xDEAD_Inside
@0xDEAD_Inside 5 лет назад
Please explain me!
@canaDavid1
@canaDavid1 5 лет назад
imagine how bad puns would come out of that! Hehehe... "Imagine"-"imaginary"? No? Only me laughing? Anyway, bad pun intended
@danthiel8623
@danthiel8623 5 лет назад
Daniel is my name to
@TheoParis
@TheoParis 4 года назад
@@canaDavid1 lol
@Alistair
@Alistair 2 года назад
@Yo ming concur
@harikrishnametta8549
@harikrishnametta8549 5 лет назад
Dude I loved it! ❤❤
@zer001
@zer001 5 лет назад
Awesome, like always!
@mericinhikayesi8474
@mericinhikayesi8474 11 месяцев назад
I've been looking for this content for years
@narveeviolet
@narveeviolet 5 лет назад
FFT must means FULL of FRUSTRATING TRANSFORMATION. i had to watch more videos about fourier transform to catch up your 1 hour video. and more time to ponder. but only got glimpse of it. I only could start actual coding after i stop to try understand everything mathmatically. it was shame but when I finally reconstructed a straight line with x,y sin waves in my own code I am so satisfied. all my struggle was not in vain. thank you!
@MrTo0ns
@MrTo0ns 5 лет назад
if you don't mind, could i know how long you have been coding, and what is your level of knowledge in mathematics? i just started coding 5 months ago and feel like im picking it up very quickly, and i was always very good at math in highschool, just wanting to get an idea of how long until i'm at the level that I can start figuring this stuff out on my own like you commented that you did, thanks the last video he did on fourier series i understood like 95% of it, but on this one just got totally lost, lol, thanks again
@cosif3001
@cosif3001 5 лет назад
greatest and most complicated programe ever created by a RU-vidr
@FirstLast-cl7xz
@FirstLast-cl7xz 5 лет назад
Yay new video!
@igotapochahontas
@igotapochahontas 5 лет назад
Thanks for making this!
@ashc5536
@ashc5536 3 года назад
What can I say Dan..... You are a legend! (And you dance exactly like me!)
@Dr.AdnanKhan
@Dr.AdnanKhan 2 года назад
Amazing, The way you explained it, its very easy.
@sammikinsderp
@sammikinsderp 6 месяцев назад
This was SO cool!
@btwstr220
@btwstr220 5 лет назад
most helpful source for people who don't understand math functions but understand js :D
@Hoobizone
@Hoobizone 3 года назад
Daniel thank you!! so crazyy
@ankitrai96
@ankitrai96 5 лет назад
Although this video's sophistication only adds to its glory, I miss the time when your videos used to be based on p5.js and were so simple that I would start coding straight away!
@ajoealex1
@ajoealex1 5 лет назад
isn't he using p5.js in this video?
@TheCodingTrain
@TheCodingTrain 5 лет назад
@@ajoealex1 I am! But it does take me a while to get to it 😬
@ajoealex1
@ajoealex1 5 лет назад
@@TheCodingTrain you are awesome.... keep going😊. love the way you explain.
@CJBurkey
@CJBurkey 5 лет назад
Sweet. I was only able to see a part of the stream :)
@Mikus_Ficus
@Mikus_Ficus 2 года назад
Thank you so much Daniel!
@reiko_dev2281
@reiko_dev2281 3 года назад
I loved it Dan, thank you very much for all this! Also i'm making it happens with dart/flutter!
@TheCodingTrain
@TheCodingTrain 3 года назад
Please share when you do!
@atrumluminarium
@atrumluminarium 5 лет назад
FFT if I remember correctly can be used to simulate sea waves in videogame graphics very efficiently Also, as a way to teach complex numbers, have you ever considered making a "complex number library"? You can then refer to it when you do videos like this that build on top of it.
@TheCodingTrain
@TheCodingTrain 5 лет назад
I made a small start to one in the most recent video (part 3 of this series)!
@atrumluminarium
@atrumluminarium 5 лет назад
@@TheCodingTrain Definitely watching that, you're awesome
@BlueyMcPhluey
@BlueyMcPhluey 3 года назад
for something so intimidating, I can't believe how quickly you reproduced that DFT algorithm
@username42
@username42 5 лет назад
it was more fun to watch the live series :D
@loic.bertrand
@loic.bertrand 5 лет назад
"I made a terrible array" 😂😂
@yeorinim2sida
@yeorinim2sida 3 года назад
This practical implementation is 100 x better than 10 videos dealing with the theorem.
@kosmic000
@kosmic000 5 лет назад
amazing!!!
@steveburrus9347
@steveburrus9347 5 лет назад
"KOSMIC DUST" where the hell did you blow in from anyway?
@kossboss
@kossboss 10 месяцев назад
This was Fwording insane!
@adilkhatri7475
@adilkhatri7475 5 лет назад
really really amazing!!
@sergten
@sergten 4 года назад
I believe the performance issue for the logo path is due to the fact that in the dft() function the number of frequencies computed is equal to the number of the data points in the signal array. So if you have 1000 points in the data array - you will be computing 1000 frequencies. It's unlikely that anyone will need that many, most of them are probably close to 0.
@kevnar
@kevnar 3 года назад
Shiffman was a mad scientist in a past life. Lucky for us, he's on the side of good this time around.
@dasten123
@dasten123 5 лет назад
Tip: Don't use "const" when you know you don't want to change a variable - just always use "const" except when it's _really_ not possible. You'll write different code that way because automatically you try to avoid "let" by using functions like .map() and stuff
@noodleexpanding3407
@noodleexpanding3407 5 лет назад
@@kreuner11 what a madlad
@angelcaru
@angelcaru 4 года назад
and .forEach()
@ElBellacko1
@ElBellacko1 3 года назад
i have been deep in the rabbit hole after watching part one of this video
@Rousnay
@Rousnay 4 года назад
I love this mad guy 😍
@samueldelucas4412
@samueldelucas4412 5 лет назад
This is basically Etch-a-sketch, but cooler!!
@iradnuriel9087
@iradnuriel9087 5 лет назад
Cool one!!!!!!
@anshul5909
@anshul5909 3 года назад
Hi, i have learnt a lot from this channel. The content and references provided are great. Great job👍 I don't whether it's the right place to ask, but can you create a video on generating offset polygons. I think they are great, and challenging as well. Can you some techniques for working with them. I really appreciate
@EnriqueMartinezAgraAgra
@EnriqueMartinezAgraAgra 5 лет назад
Man i can tell you. I hate javascript and still love your channel. This is gold
@satanicmonkey666
@satanicmonkey666 4 года назад
I like this video, earned a sub. Thanks
@gregcostanzo4724
@gregcostanzo4724 5 лет назад
3:06 I’m just glad you don’t put bananas in your smoothies.
@akshaypratap2010
@akshaypratap2010 5 лет назад
Great video sir ji
@savinsnsn
@savinsnsn 5 лет назад
Yo that's awesome
@mattmar96
@mattmar96 3 года назад
Thank you
@tonyswain4174
@tonyswain4174 2 года назад
Thinks; that is awesome :)
@SanuAntony
@SanuAntony 11 месяцев назад
Wonderful
@umbertohe5723
@umbertohe5723 5 лет назад
😨 Amazing
@InspireToMake
@InspireToMake 5 лет назад
So... he basically reinvented the Gcode?
@chri-k
@chri-k 3 года назад
Basically yes. But In a wierd way
@woulg
@woulg 3 года назад
Isn't the path file already sorta like gcode? The Fourier transform just gives you the size and starting angle of the little circle/rotating things
@owendeheer5893
@owendeheer5893 5 лет назад
Sad i missed this stream!
@tonywmckinney
@tonywmckinney 2 года назад
Thanks!
@TheCodingTrain
@TheCodingTrain 2 года назад
Thank you for the support!
@dominicrann6699
@dominicrann6699 5 лет назад
Hi coding train. Was just wondering what time you are streaming tomorrow. I love your videos thanks.
@TheCodingTrain
@TheCodingTrain 5 лет назад
Probably 10 or 10:30am ET, will post when ready.
@DaKnightsofawesome
@DaKnightsofawesome 5 лет назад
yea but can you do it like 3blue1brown and make the picture from just one set of circles?
@vilpmax
@vilpmax 5 лет назад
he done something similar in a february video
@TheCodingTrain
@TheCodingTrain 5 лет назад
Yes! See: thecodingtrain.com/CodingChallenges/130.3-fourier-transform-drawing.html
@masterchief1520
@masterchief1520 4 года назад
@@TheCodingTrain nice
@danielalejandrocordovadela657
@danielalejandrocordovadela657 2 года назад
I loved the video so much. I download your code, so I can play a bit with different pictures. However, I have problems to extract the x and y coordinates from a continuous line drawing picture. does someone know how to extract those coordinates other than manually?
@dharmikmistry8781
@dharmikmistry8781 3 года назад
Super 🔥🔥🔥
@indianhuman356
@indianhuman356 4 года назад
Can you drow projection of 3d train into n dimensions greater than 3. Using this technique?
@kumarprosenjit9714
@kumarprosenjit9714 5 лет назад
Great. Thx .
@aetherian_wolf
@aetherian_wolf 5 лет назад
hey i'm trying to make the one where the person draws the shape so that it keeps tracing the path but as it continues to trace it the path disapears at the start so the shape keeps being drawn without the line overlaping at all.
@hedibenfraj6158
@hedibenfraj6158 5 лет назад
Can u do the cristian ilies vasile visualization of pi it's so awesome !!
@arka9504
@arka9504 4 года назад
I hope my FTIR (Fourier Transform Infrared, in chemistry) can drawing like this.
@MasterMindmars
@MasterMindmars Год назад
Amazing work. Do you know how to get the x,y coordinates or the fft parameters of Catherine Zeta jones ? 😀
@zhabiboss
@zhabiboss Год назад
Bob Ross of Fourier drawing
@bwatspro
@bwatspro 5 лет назад
Hello, please can you do Einstein gravitational lensing ?
@diophantine1598
@diophantine1598 3 года назад
Now you just have to do it with a single bunch of circles. (Nothing different between x and y)
@Hagledesperado
@Hagledesperado 5 лет назад
A crude attempt at reducing the number of points in the drawing (to 375 in this case) instead of skipping 7 out of 8 points which gives 625 points, while keeping most of the details of the original 5000 point drawing: function simplifyDrawing(drawing) { const maxHeadingDiff = 0.4; const maxStrokeLength = 16; let newDrawing = []; let headingDiff = 0; let strokeLength = 0; let prevVec = null; for (let i = 0; i < drawing.length -1; i++) { let vec = createVector(drawing[i+1].x - drawing[i].x, drawing[i+1].y - drawing[i].y); if (prevVec == null) { newDrawing.push(drawing[0]); } else { headingDiff += vec.heading() - prevVec.heading(); if (abs(headingDiff) > maxHeadingDiff/8) { strokeLength += vec.mag(); } else { strokeLength += vec.mag()/128; } if (headingDiff > maxHeadingDiff || headingDiff < -maxHeadingDiff || strokeLength > maxStrokeLength) { newDrawing.push(drawing[i+1]); headingDiff = 0; strokeLength = 0; } } prevVec = vec; } if (strokeLength > 0) { newDrawing.push(drawing[drawing.length-1]); } print('Simplified drawing from ' + drawing.length + ' to ' + newDrawing.length + ' points.'); return newDrawing; }
@parvezmahmud6963
@parvezmahmud6963 4 года назад
What is this actually?
@joaquinsifuentes7726
@joaquinsifuentes7726 Год назад
do you know ho to create an array of points in js from an random image?
@vinho3cocacola
@vinho3cocacola 5 лет назад
i like how this relates to alternating current
@zxuiji
@zxuiji 3 года назад
So basically draw in a convoluded way when it is simpler to just normalise those values and multiply them against size and add them to the xy positions wanted
@user-rq4zw8qv9k
@user-rq4zw8qv9k 5 месяцев назад
Nice work! Here you used two signals x and y as pairs of the coordinates to draw it. You can also draw it with one signals e.g., y only, right?
@JohnPaulBuce
@JohnPaulBuce Год назад
im lost halfway in the video but i still love watching your videos, i wish i could program like you lol im so bad at this
@thecalculatedcreativecoder1428
@thecalculatedcreativecoder1428 8 месяцев назад
Its an accomplishment that you got the first half though!!! Keep working at it and over time you will improve.
5 лет назад
Try shrödingers wave function visulation with p5 js
@marcpaters0n
@marcpaters0n 5 лет назад
I would love to learn how the Coding Train logo path was generated.
@ahmetakil787
@ahmetakil787 5 лет назад
yeah me too
@TheCodingTrain
@TheCodingTrain 5 лет назад
Ask twitter.com/tomfevrier, he made it!
@defnotdeepakr
@defnotdeepakr 5 лет назад
Probably something to do with SVG data
@swagagain8651
@swagagain8651 5 лет назад
1) Load picture. 2) Create array. 3) Make function to fill array with coordinates when clicked. 4) Click only 5000x on picture. 5) Profit! Simple as that.
@alexandar1794
@alexandar1794 4 года назад
Actually, you can easily convert any image to array of vectors using any cnc machine software
@MiguelArconadaManteca
@MiguelArconadaManteca 5 лет назад
I tried making this and when I finished, wanted to try with different paths, but I cannot find any online. Do you know how can I find some?
@georgie3
@georgie3 3 года назад
Here's a code improvement that lets you use any time step size and see what happens between sample points. You can learn a lot about how DFT works this way, and it shows what a real "Fourier machine" would draw if you actually built it. The original code relies on aliasing for negative frequencies and plots an idealized path by only "hitting" the original sample points. To fix the negative frequencies issue change lines 31 & 32 to the following: let ang = 0; if (freq < fourierY.length/2) ang = freq * time + phase + HALF_PI; else ang = -(fourierY.length - freq) * time + phase + HALF_PI; x += radius * cos(ang); y += radius * sin(ang); Then you can reduce the time step size -- change the original line 50 to a small number or something like this const dt = TWO_PI / fourierY.length / 10; If your signal is undersampled you'll see a lot more oscillations since the DFT is only able to approximate the original signal. However the plotted line always goes through the sample points and you can increase accuracy by increasing the number of samples (signal array size). Functions containing sine waves don't need very many samples, for example this function works reasonably well for arbitrarily small time step sizes with as few as 16 samples: y = sin(x)*2 + sin(x * 3 + PI/7) for x from 0 to 2*PI. Note there is an ambiguity at N/2 so for some signals like a single straight line odd array sizes might work better.
@TheCodingTrain
@TheCodingTrain 3 года назад
Thank you for this! If you like you can submit it as a community contribution on the coding train website! thecodingtrain.com/CodingChallenges/130.1-fourier-transform-drawing.html
@MarkovChains223
@MarkovChains223 5 лет назад
Fun additional challenge: have the epicycles draw their final position when the drawing is finished.
@pierreandferb
@pierreandferb 5 лет назад
ah i saw it on reddit hahah would be cool though
@eitanshirman9072
@eitanshirman9072 2 года назад
you just broke my mind. wait, it`s a paradox, right?
@zokalyx
@zokalyx 5 лет назад
This is epic! How can you make it like that, but with only one set of circles? (3:28) If you had a link or something I have to search, that's more than enough.
@TheCodingTrain
@TheCodingTrain 5 лет назад
I'm hoping to tackle this tomorrow.
5 лет назад
Why do you have 2 functions?
@sujals7108
@sujals7108 5 лет назад
4:03. infinitely better, that hit the mathematician in me so hard
@TheCodingTrain
@TheCodingTrain 5 лет назад
😂
@akashtakawale9074
@akashtakawale9074 5 лет назад
whattttt. How did u do that.... my mind is blown
@JwalinBhatt
@JwalinBhatt Год назад
Could someone please explain why we add phase at 25:48?
@knowledgekong4970
@knowledgekong4970 3 года назад
There is a mirrored part of the dft result in high freq part and if I draw that out it would be distorted, why your video don't have this problem?
@yurinagel2270
@yurinagel2270 5 лет назад
Hello Daniel, I'm now following your tutorial videos about Java, after i saw you making cool things i wanted to make my own sort of minigame. The thing is i want the bal to bounce back after that the ball hits the pedal, but the problem is i don't know how. Here is the thing i tried following the whole script. ellipse(x,y,24,24); if ((x==mouseX) && (y==300));{ x+=9; } rect(mouseX, 300, 94, 24); float x=width/2; float y=height/2; float kleur1; float kleur2; float kleur3; int xspeed = 2; int yspeed = 2; boolean xgaan = false; boolean ygaan = false; boolean xwaar = false; boolean ywaar = false; void setup() { size (640,360,P2D); background(kleur1,kleur2,kleur3); } void draw() { background(kleur1,kleur2,kleur3); fill(0,255,0); ellipse(x,y,24,24); // if ((x==mouseX) && (y==300));{ //x+=9; //} rect(mouseX, 300, 94, 24); kleur1 += 0.8; kleur2 += -0.8; kleur3 += 3; x += xspeed; if (x > width){ xspeed *= -1; xwaar= true; } if (x < 0){ xspeed *= -1; xwaar =false; } if(mousePressed == true) { xspeed = 0; } if(mousePressed==false){ if(xwaar == false){ xspeed=2; } } if(xwaar == true){ xspeed=-2; } y += yspeed; if (y > height){ yspeed *= -1; ywaar= true; } if (y < 0){ yspeed *= -1; ywaar =false; } if(mousePressed == true) { yspeed = 0; } if(mousePressed==false){ if(ywaar == false){ yspeed=2; } if(ywaar == true){ yspeed=-2; } } }
@TheCodingTrain
@TheCodingTrain 5 лет назад
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
@stevew4213
@stevew4213 3 года назад
Upon watching 'Coding Challenge #130.1: Drawing with Fourier Transform and Epicycles' I had a few questions that I am hoping the board can answer. 1) Given all the points from the picture being drawn, couldn't the picture have been drawn just connecting the points? 2) The equation included the imaginary part 'i' and i is defined a sqrt(-1), but sqrt(-1) was not used in the algorithm, that is a little confusing.
@darkfrei2
@darkfrei2 3 года назад
24:17 - what does it means "frequency = 0"? Is it possible? Can we skip that?
@PeterVanAlem
@PeterVanAlem 5 лет назад
23:57 didn't know Jim Carrey could code!
@iamr0b0tx
@iamr0b0tx Год назад
Thanks
@TheCodingTrain
@TheCodingTrain Год назад
Thank you for the support!
@gloubiboulgazeblob
@gloubiboulgazeblob 5 лет назад
Awesome ! Really awesome ! But how did the guy to generate the logo ???? I think he has "scanned" the logo with a vertical line, then, for all points intersecting that line, he has summed up their y coordinates returning him a value, a kind of signal value. Then he has processing that signal as any signal with an FFT giving him all the values needed for the drawing. Isn't there a more elegant way of writing the SUM function by taking advantage of Javascript ? I tried the something like the following but there's a little problem with passing parameters to the callback function for the real example of your video, I need help, but I tried this and it works fine : //this one is valid for ANY sum you want to implement const Sigma = (start, end, callback) => { sum=0; for (let n=start; n < end; n++) sum += callback(n); return sum; }; //Then, write the callback function you want, like: const f = (n, obj = {"x" : -5}) => { return Math.cos(2*Math.PI*n) * obj.x; }; //And call Sigma from the main code, passing it the f function.Well, roughly speaking of course... X = Sigma(0, N-1, f);
@thecodingcaravan9013
@thecodingcaravan9013 4 года назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-sp2X3uCLQsI.html
@milpas999
@milpas999 3 года назад
Hey, I wonder can we Fourier transform the path of moon in space, as moon revolves around earth, earth revolves around sun and sun revolves around galaxy.??
@braindeadgaming8430
@braindeadgaming8430 4 года назад
Daniel: Always succeeds using Wikipedia Teachers: Nooooooooo!
Далее
Coding Challenge 130: Fourier Transform User Drawing
9:21
Coding Challenge 125: Fourier Series
28:47
Просмотров 584 тыс.
Coding Challenge 171: Wave Function Collapse
1:18:37
Просмотров 534 тыс.
Coding the Collatz Conjecture
23:08
Просмотров 131 тыс.
Coding Challenge #145: 2D Raycasting
36:02
Просмотров 636 тыс.
Coding the Hilbert Curve
28:08
Просмотров 110 тыс.
Coding Challenge #90: Floyd-Steinberg Dithering
28:51
Просмотров 435 тыс.
Coding Challenge 166: ASCII Text Images
22:42
Просмотров 1,1 млн