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.
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.
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!
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.
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.
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??
Try either of these playlists to start from scratch! ruclips.net/p/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA ruclips.net/user/shiffmanplaylists?view=50&shelf_id=2&sort=dd
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!
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
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.
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.
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.
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.”)
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
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. 😖
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
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
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.
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.
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.
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?
@@_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
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!
This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help ruclips.net/video/AmlAiKsiy0o/видео.html.
This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help ruclips.net/video/AmlAiKsiy0o/видео.html.
I have programmed in c++for 2 years now and after watching your videos, I really want to dive in to JavaScript. You make one of the funnest programs that I really want to do on my free time but I just cant on C++. Making this in C++ would be by far the hardest possible thing and you made it in 10 minutes using JavaScript. How long would it take to learn JavaScript and understanding the libraries? The code and syntax are somewhat similar to c++ but I think the most difficult part would be learning the libraries and implementing them the way you do. In a nut shell, I want to be able to write this code in a matter of an hour with just my understanding of JavaScript. How long you think it'll take to learn this for a person who will dedicate 4-5 hours a day?
Hi Hussein! This video uses Processing which is based on Java (!). I do a lot of JavaScript also on my channel mostly using the p5.js library. It's a good place to get started but if you are an experienced programmer in a different language you might want to investigate using JS without p5 for certain applications. Here is a playlist to get you started: ruclips.net/p/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA This workflow series might help also: ruclips.net/p/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X
Math visualized by a beautiful and elegant animation. That's why I love this channel.
Yet again small coding challenge videos have won my heart :P
This dude is a genius yall.
そうですか
Glad you met Simon as well! What a genius kid :D
We love you with all our cardioids!
Great video as always! Happy Valentines Day!
Funny but your RUclips recommendations list is almost the same as mine. I love CodeBullet.
Love this. It starts to look like a spinning sphere. Definitely going to try a few ideas out with it.
Regularly I'm watching your videos. But today only subscribed to your channel. On Valentine's day my love goes to this.😍
I love cool animations and visual tricks that have to do with math!
Just saw this amazing video! Thanks for taking my suggestion, you made my day!
This is by far the best video i've ever watched . Loved it
It is one of the best videos I have seen.
Loved it.
The animation is just mesmerizing 😆
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.
Simply put, beautiful!
I love processing and I love p5.js too
Also your chanel, include you
Happy Valentine's Day
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.
i had learned programming because of you :)
16:24 - RIP RUclips compression
Yup lol
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!
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.
Finally, I know why you see that heart shape pattern on the bottom of mugs and bowls!
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.
The thumbnail was flickering while I was scrolling, try it yourself
True
I think my resolution or refresh rate is too high to see this. #humblebrag
Wow you're right
@@MeruXYZ This reminds me of the 'Is that some kind of peasant joke i am too rich to understand?' meme🤣
Correct
This was gorgeous
Thanks for tutorial! I've just made this with Haskell!
This is amazing loved it
i love your content you always inspire me
Oh man this video was awesome! Deff gotta try this in c# here soon
Here's the webGL version of it i made with unity hahaha
sniffle6.itch.io/animated-cardiod
Awesome, thanks for sharing!
Lovely bro. You're a genius.
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
You are awesome!
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??
Try either of these playlists to start from scratch!
ruclips.net/p/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
ruclips.net/user/shiffmanplaylists?view=50&shelf_id=2&sort=dd
Can you make a video or link URLs to how to set up p5.js on visual studio code?
I did already! ruclips.net/p/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X
That was awesome!
You did it! Thank you
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!
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
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.
Beautiful!!
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.
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.
@@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.
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.”)
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
*Awesome Sir* ☆☆
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. 😖
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
So awesome!
Genius Level... Mathologer as well...
that is just fantastic
You have been watching mathologer!! ... oh you just pointed it out! Come and visit Melbourne sometime.
Oh, I would love to! Never been to Australia. . .
yo thanks for this man
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
Beautiful
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.
The videos in this channel are an excellent resource. Aside from that you just need a lot of Google and patience
Start here! ruclips.net/p/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
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.
Thank youuu so much
I love that cute sun on your desktop 😂
that was clean
This was really cool gonna go try to code this up in java
Uau! Que incrível! ✨
This was really cool...…….Thank you!
Great video amazing hello from México
Why does adding PI to the angle invert the whole thing?
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.
Where can I find js code that I can edit.
editor.p5js.org/codingtrain/sketches/gwcGb_NPm
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?
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!
Love it!
ME: could you hack NASA
CODING TRAIN: Yea no problem
Could you please say which language you are using......
Sir in my processing .... There is showing circle function does not exist
Are you on version 3? www.processing.org/reference/circle_.html
It's only in the very latest Processing!
This is amazing..
What is this IDE??????
dude's living life
What language is this ?
Looks like AHK Syntax ?
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 ?
begin with watching the video of Big Shaq: Man's not hot
@@_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
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!
It's awesome,
How can we turn this gcode?
what would it look like if used prime numbers
Made this modification to the coding challenge in p5.js. I hope you like it
editor.p5js.org/AleksHSE/full/iU__Fza15
My personal favorite is from factor 70-100
This is lovely! Please submit a link to the coding train website if you like!
github.com/CodingTrain/website/wiki/Community-Contributions-Guide
Any 'C' language version?
I made this some time ago and posted it on my channel after watching that Mathologer video.
Amazing
Cardioid same root as cardiac , in french coeur (heart)
How you learn to code like this dude!!!!!!!pls reply
love it
I mistakenly drew something similar trying to draw a circle using canvas animation
which language is this??
This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help ruclips.net/video/AmlAiKsiy0o/видео.html.
Maravilhoso!
Is this p5.js
This video uses Processing (which is built on top of the Java programming language). For more info, visit processing.org and also this video might help ruclips.net/video/AmlAiKsiy0o/видео.html.
Math in a good way!
your youtube recommendations are (almost) identical to mine. isn't it cool?
How to make a infinite div carousel
trough js setinterval...
I made a 3d dynamic model of this if you'd like to see?
Happy Feb 13th everybody! :D
We did this in class as an activity for valentine's day in computer science
It didn't feel like 17:20
I have programmed in c++for 2 years now and after watching your videos, I really want to dive in to JavaScript. You make one of the funnest programs that I really want to do on my free time but I just cant on C++. Making this in C++ would be by far the hardest possible thing and you made it in 10 minutes using JavaScript. How long would it take to learn JavaScript and understanding the libraries? The code and syntax are somewhat similar to c++ but I think the most difficult part would be learning the libraries and implementing them the way you do. In a nut shell, I want to be able to write this code in a matter of an hour with just my understanding of JavaScript. How long you think it'll take to learn this for a person who will dedicate 4-5 hours a day?
This is processing not c++. If you know c++ picking up js or processing should be relatively easy
Hi Hussein! This video uses Processing which is based on Java (!). I do a lot of JavaScript also on my channel mostly using the p5.js library. It's a good place to get started but if you are an experienced programmer in a different language you might want to investigate using JS without p5 for certain applications. Here is a playlist to get you started:
ruclips.net/p/PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
This workflow series might help also:
ruclips.net/p/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X
Wait what?! This dude plays rust?! Unexpected... 2:00
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);
}
💜
Can someone make a clock from that, it would be amazing
RUclips compression just died at the end
we need complete js for begginer series.. .plz make it (we need pure js ..not p5 or other .....
thank you
Valentines - Day
you forgot to list the javascript version of the Cardioid you wrote in python in the video
All the code (including JS) can be found here! thecodingtrain.com/CodingChallenges/133-times-tables-cardioid.html