Coding Challenge

No video

Coding Challenge

Рет қаралды 89,389

Күн бұрын

In this video, I visualize the "mathematical heart" Cardioid using times tables calculations. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #132:...
🎥 Next video: • Coding Challenge #134....
🎥 All videos: • Coding Challenges
References:
🗄 Cardioid on Wikipedia: en.wikipedia.org/wiki/Cardioid
📝 Rainbow Topics suggestion from Eduardddd: github.com/CodingTrain/Rainbo...
Videos:
🎥 Times Tables, Mandelbrot and the Heart of Mathematics: • Times Tables, Mandelbr...
🎥 Times Tables Visualization Poster in Processing: • Times Tables Visualiza...
🎥 Polar Coordinates: • 3.4 Polar Coordinates ...
🎥 The Modulo Operator: • Guest Tutorial #6: The...
🔴 Coding Train Live 168: • Coding Train Live 168:...
Related Coding Challenges:
🚂 #21 Mandelbrot Set with p5.js: • Coding Challenge #21: ...
🚂 #116 Lissajous Curve Table: • Coding Challenge #116:...
🚂 #134 Heart Curve: • Coding Challenge #134....
🚂 #163 Bézier Curves: • Bézier curves (Coding ...
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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: kzfaq.infojoin
🛒 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...
#cardioid #cardioidtimestables #timestablesvisualization #heartalgorithm #polarcoordinates #modulooperator #processing

Пікірлер: 185

@chrisd961 5 жыл бұрын

Yet again small coding challenge videos have won my heart :P

@codingphysics695 5 жыл бұрын

Math visualized by a beautiful and elegant animation. That's why I love this channel.

@SirajRaval 5 жыл бұрын

Glad you met Simon as well! What a genius kid :D

@captainalpha4853 5 жыл бұрын

This dude is a genius yall.

@abdulalhazred5924 5 жыл бұрын

そうですか

@beron_the_colossus 5 жыл бұрын

Great video as always! Happy Valentines Day!

@paraglide01 5 жыл бұрын

Funny but your KZfaq recommendations list is almost the same as mine. I love CodeBullet.

@dannorris1406 5 жыл бұрын

Love this. It starts to look like a spinning sphere. Definitely going to try a few ideas out with it.

@bastianroling1430 5 жыл бұрын

This is by far the best video i've ever watched . Loved it

@pelegmichael5489 5 жыл бұрын

Just saw this amazing video! Thanks for taking my suggestion, you made my day!

@KristianPedersen 5 жыл бұрын

We love you with all our cardioids!

@funguslars 5 жыл бұрын

I love cool animations and visual tricks that have to do with math!

@sbkrish4356 5 жыл бұрын

Regularly I'm watching your videos. But today only subscribed to your channel. On Valentine's day my love goes to this.😍

@Rockstard4 5 жыл бұрын

It is one of the best videos I have seen. Loved it.

@heck0272 5 жыл бұрын

Simply put, beautiful!

@zonetwelve5881 5 жыл бұрын

I love processing and I love p5.js too Also your chanel, include you Happy Valentine's Day

@Mortagus 5 жыл бұрын

The animation is just mesmerizing 😆

@djsyntic 2 жыл бұрын

I liked how you linked the number of points to the mouse's X position. Might have been interesting to see that in conjunction with linking the factor to the mouse's Y position.

@luce2988 5 жыл бұрын

i had learned programming because of you :)

@MathematicsOptimization 5 жыл бұрын

The thumbnail was flickering while I was scrolling, try it yourself

@user-lv8by1up5o 5 жыл бұрын

True

@tswan137 5 жыл бұрын

I think my resolution or refresh rate is too high to see this. #humblebrag

@lopa8519 5 жыл бұрын

Wow you're right

@SayanDas-yd2tx 5 жыл бұрын

@@tswan137 This reminds me of the 'Is that some kind of peasant joke i am too rich to understand?' meme🤣

@Crazyclay78YT 2 жыл бұрын

Correct

@kaksisve4012 4 жыл бұрын

Thanks for tutorial! I've just made this with Haskell!

@Manusmusic 2 жыл бұрын

I found this video because I am looking for more understanding on cardioids for painting project. Also inspired by Swedish painter Hilma Af Klint and her visions consisting the symbol. Your code created the most elegant animation, i love it. I feel like I have an idea for a tool for an artist but I don't have the understanding for the coding (Took one course of csharp in uni but don't remember much). I'd imagine the software having a adjustable slider with a reasonable gaps around the cardioid shape for example, it helps to visualize and trace the shapes.

@siddhantjain2402 5 жыл бұрын

This was gorgeous

@eduardt7253 5 жыл бұрын

You did it! Thank you

@JohannesHeld 5 жыл бұрын

That was awesome!

@threeshot24 5 жыл бұрын

You are awesome!

@lovespictures2973 5 жыл бұрын

Beautiful!!

@prithviraj8801 3 жыл бұрын

This is amazing loved it

@slyer7695 5 жыл бұрын

I love that cute sun on your desktop 😂

@nassav3 5 жыл бұрын

So awesome!

@PraveenKumar-mn2dm 5 жыл бұрын

This was really cool...…….Thank you!

@husamk3207 5 жыл бұрын

i love your content you always inspire me

@arturzyx 5 жыл бұрын

Uau! Que incrível! ✨

@ishaanrastogi657 5 жыл бұрын

Lovely bro. You're a genius.

@ScorpioGameKing 5 жыл бұрын

This video got me to finally break down and work on translation maths of Python's tkinter module just so I could do this. Oh how I wish I wasn't to lazy to learn p5. It's not like this channel has a great series for learning it or anything. Still, great video!

@aaronrothwell7615 5 жыл бұрын

I tried a similar approach, with C#, but the problem is you end up looking for alternate ways of doing things, so you spend less time coding.When using P5/Processing you can follow along and just code at the same time.

@HelloJollywood 5 жыл бұрын

*Awesome Sir* ☆☆

@dukestt 5 жыл бұрын

that is just fantastic

@stefomc1228 5 жыл бұрын

Dude u are doing imposible i am so confused when i see that code. Great job u learned everything form that programming language i think is p5 js

@cobaltbluesky2276 Жыл бұрын

Finally, I know why you see that heart shape pattern on the bottom of mugs and bowls!

@NikhoPrasetyoPratama 5 жыл бұрын

Love it!

@t.walker3101 5 жыл бұрын

This was really cool gonna go try to code this up in java

@nomackleo 2 жыл бұрын

Beautiful

@martinflores9611 5 жыл бұрын

Great video amazing hello from México

@konstantinrebrov675 4 жыл бұрын

I am simply astonished at how few lines of code you took to generate that graphics. I am contrasting to DirectX with C++ in which the boilerplate code to set everything up can be just as long.

@gonzalochristobal 5 жыл бұрын

yo thanks for this man

@pradeeshbm5558 5 жыл бұрын

This is amazing..

@CodingWithUnity 5 жыл бұрын

Oh man this video was awesome! Deff gotta try this in c# here soon

@CodingWithUnity 5 жыл бұрын

Here's the webGL version of it i made with unity hahaha sniffle6.itch.io/animated-cardiod

@TheCodingTrain 5 жыл бұрын

Awesome, thanks for sharing!

@grainfrizz 5 жыл бұрын

16:24 - RIP KZfaq compression

@ruler255 5 жыл бұрын

Yup lol

@kingtarekdz 5 жыл бұрын

hello nice game with math and specially with the love day you makke the with number and have a magnefist meaning always the numbers have a secrets behind so cool video thank's for your work good night

@fre1253 5 жыл бұрын

that was clean

@marcoronzani7197 5 жыл бұрын

I saw that shape in furier transform too, when the frequency drops to...i don’t remember ahah, however it is created wrapping a sinwave around a circle with each point on the circle rappresenting the angle (pi and so on) and the line connecting the point and the center long proportionally to the sine of that angle...or cosine...it doesn’t matter i think!

@ffggddss 5 жыл бұрын

That was stupendous!!! And now that you've done all your multiplication tables, what next? You could try some other kinds of functions to determine where to draw a line from each point on the circle. Quadratic or other polynomial; sine or cosine; log or exponential, ??? You could use a non-circular ellipse instead of a circle, although that would just be a dilation of the circle case, in its simplest form. Or use some other closed curve ... not sure that would create anything interesting ... So is there any way this could be extended into 3 dimensions? Would we still be drawing lines? Or would they be planes? Fred

@jakub7048 5 жыл бұрын

ME: could you hack NASA CODING TRAIN: Yea no problem

@xBrOwNeDoG 5 жыл бұрын

Amazing

@GodSpeaksInMath 5 жыл бұрын

Genius Level... Mathologer as well...

@ebicer 5 жыл бұрын

love it

@matthewvicendese1896 5 жыл бұрын

You have been watching mathologer!! ... oh you just pointed it out! Come and visit Melbourne sometime.

@TheCodingTrain 5 жыл бұрын

Oh, I would love to! Never been to Australia. . .

@giangtu5329 4 жыл бұрын

Where do I start to learn math again in order to create any shape I want without looking up for formulars? This video is lovely, math and processing is sexy. I was the best in math back to highschool but now forgot everything. 😖

@arianrahman4840 5 жыл бұрын

dude's living life

@dukestt 4 жыл бұрын

Ive been messing with the numbers , the phase seems to be 100 or slighty more. If you change the factor number to 21, 26, 41, 49, 51, 61, 66, 68, 71, 89, 99, 100, 101 these are all pretty interesting with the points at 200

@aataouimohamed6049 5 жыл бұрын

hii given ure a big lover of visualizing interesting maths, I suggest u take a look on the GABRIEL S HORN ( "there is an apparent paradox that the horn could be filled with a finite quantity of paint and yet that paint would not be sufficient to coat its inner surface.”)

@ffggddss 5 жыл бұрын

Rings a bell! That's a surface of revolution with a finite volume, but an infinite surface area (and infinite length), isn't it? Believe it's formed by rotating the graph of y = 1/x from 1 to ∞, about the x-axis. Fred

@WannesMalfait 5 жыл бұрын

I made this some time ago and posted it on my channel after watching that Mathologer video.

@ahammedimtiaze 5 жыл бұрын

There are lots of videos and playlists in your channel. I have enjoyed much of your coding session and very interested to learn. Could you please say from where i should started learning from your channel as a beginner??

@TheCodingTrain 5 жыл бұрын

Try either of these playlists to start from scratch! kzfaq.info/sun/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA kzfaq.infoplaylists?view=50&shelf_id=2&sort=dd

@lucasmachadobueno563 2 жыл бұрын

Maravilhoso!

@ihatelaptops532 5 жыл бұрын

Here is cardioid that I coded in p5.js and the program is much smaller, only 22 lines of code(with line breaks). edit: editor.p5js.org/Jokester/sketches/YhJd13AuT fullscreen: editor.p5js.org/Jokester/full/YhJd13AuT

@TheCodingTrain 5 жыл бұрын

Cool! Please submit a link to the coding train website if you like! github.com/CodingTrain/website/wiki/Community-Contributions-Guide

@kosmar 5 жыл бұрын

ah lovely

@AleksHSE 5 жыл бұрын

Made this modification to the coding challenge in p5.js. I hope you like it editor.p5js.org/AleksHSE/full/iU__Fza15

@AleksHSE 5 жыл бұрын

My personal favorite is from factor 70-100

@TheCodingTrain 5 жыл бұрын

This is lovely! Please submit a link to the coding train website if you like! github.com/CodingTrain/website/wiki/Community-Contributions-Guide

@zer001 5 жыл бұрын

Math in a good way!

@WahranRai 5 жыл бұрын

Cardioid same root as cardiac , in french coeur (heart)

@devi_buns 5 жыл бұрын

I mistakenly drew something similar trying to draw a circle using canvas animation

@tayyiptuzun1341 4 жыл бұрын

It's awesome, How can we turn this gcode?

@mariovelez578 5 жыл бұрын

We did this in class as an activity for valentine's day in computer science

@sham7742 5 жыл бұрын

This all is so great and I really quite enjoy watching it but I have never done this kind of graphical programming before. I just wonder if there's any kind of javascript graphics course I can take so to get along with it as soon as I can.

@abird35 5 жыл бұрын

The videos in this channel are an excellent resource. Aside from that you just need a lot of Google and patience

@TheCodingTrain 5 жыл бұрын

Start here! kzfaq.info/sun/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

@aaronrothwell7615 5 жыл бұрын

The great thing with P5 is it removes the need to do all the hard work in Javascript, so you just start doing the code in the videos, not worrying about a million other things that could go wrong. Sure more knowledge of Javascipt would be good, but just following some of these videos will teach you so much.

@sham7742 5 жыл бұрын

Thank youuu so much

@zantmelendez51 5 жыл бұрын

Can you make a video or link URLs to how to set up p5.js on visual studio code?

@TheCodingTrain 5 жыл бұрын

I did already! kzfaq.info/sun/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

@Ensivion 5 жыл бұрын

Hey I have a really cool animation of this concept that I'd like to publish somehow (in processing, I built my own from scratch), do you know what the best way to do that would be?

@TheCodingTrain 5 жыл бұрын

I would record it as a GIF or video file to share. Or convert it to p5.js so that you can run it in the browser!

@captainahab2518 5 жыл бұрын

what would it look like if used prime numbers

@xXPedoPanda42Xx 5 жыл бұрын

💜

@coolbrotherf127 5 жыл бұрын

I've actually never looked into the main use case for processing. What was the main reason it was developed and why does it have the specific features they wanted to have compared to other similar language packages.

@Ensivion 5 жыл бұрын

main function is where I do preliminary math and the draw loop I use to simply draw in a specific way. It's not important to use, but my style of programming uses it.

@coolbrotherf127 5 жыл бұрын

@@Ensivion I don't think you understood what I was asking. I was asking why the Processing foundation developed Processing and the P5.js library.

@knitpicky 4 жыл бұрын

Hi! desperate student in need of help here. Lets say I wanted to add a conditional statement that, after the "factor" in this code goes above lets say 4, it goes back to 2 and then back to 4? thank you!!! I have a final due in a few days and I want to figure this out but im a bit lost.

@NickWatton 5 жыл бұрын

💖

@zokalyx 5 жыл бұрын

your youtube recommendations are (almost) identical to mine. isn't it cool?

@muhammedshameel5684 5 жыл бұрын

Happy Valentines Day!

@realbingus 5 жыл бұрын

This is the HTML5 Canvas version: window.onload = (() => { setupCanvas(); }); function setupCanvas() { window.requestAnimationFrame(animateCanvas); } var factor = 2; var TWO_PI = 2 * Math.PI; var circlePoints = 200; var increment = TWO_PI / circlePoints; var radius = 400; var hue = 0; function animateCanvas() { var canvas = document.getElementById("mainCanvas"); var ctx = canvas.getContext("2d"); var xOrigin = canvas.width / 2; var yOrigin = canvas.height / 2; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.strokeStyle = `HSL(${hue}, 100%, 50%)`; factor += 0.01; if (hue < 360) { hue++; } else { hue = 0; } for (var i = 0; i < circlePoints; i++) { var currentThing = i * increment; var currentX = radius * Math.sin(currentThing); var currentY = radius * Math.cos(currentThing); var targetThing = (i * factor * increment) % circlePoints; var targetX = radius * Math.sin(targetThing); var targetY = radius * Math.cos(targetThing); ctx.moveTo(xOrigin + currentX, yOrigin + currentY); ctx.lineTo(xOrigin + targetX, yOrigin + targetY); } ctx.stroke(); requestAnimationFrame(animateCanvas); }

@luce2988 5 жыл бұрын

Valentines - Day

@halasimov1362 3 жыл бұрын

Happy Feb 13th everybody! :D

@manhng2739 5 жыл бұрын

Your gf's same me! =)), goodjob bro

@elangkavinrajendran2842 5 жыл бұрын

How you learn to code like this dude!!!!!!!pls reply

@TheCalax 5 жыл бұрын

Why does adding PI to the angle invert the whole thing?

@aaronrothwell7615 5 жыл бұрын

In Processing the default for working with angles is radians, rather than degrees, which you may be more used to. A radian is 57.3 degrees, which multiplied by PI (3.14) is 180 degrees, which is half a circle, and so it rotates it around.

@galaxy5109 4 жыл бұрын

try that in p5

@plony6142 5 жыл бұрын

Can someone make a clock from that, it would be amazing

@ahmedbadal3795 5 жыл бұрын

we need complete js for begginer series.. .plz make it (we need pure js ..not p5 or other ..... thank you

@HyoukaStrb 5 жыл бұрын

is it possible for me to learn this? im bad with math but can i know what books to or what math i can start ?

@_sander_ 5 жыл бұрын

begin with watching the video of Big Shaq: Man's not hot

@HyoukaStrb 5 жыл бұрын

@@_sander_ am i gonna learn for the scratch? i wanna go back to algebra again and so on and so forth i really look up people who can do advance math i think math is fun if you know ot

@BoJaN4464 5 жыл бұрын

Programming is a great way to learn math! Maybe start by making a simple asteroids type game in p5.js to learn how to deal with angles and vectors. I'm pretty sure coding train has a few beginner friendly videos as well as an asteroids video for you to start learning!