Coding Challenge #81.1: Circle Morphing - Part 1

Other Parts of this Challenge:

References:

Videos:

Related Coding Challenges:

Timestamps:
0:00 Introducing today's topic: Circle Morphing
3:58 Use polar coordinates to get the points on the circle
6:17 Draw the path of the circle
7:36 Get the triangle path
15:30 Write a polar to cartesian function
18:43 Use modulus to get the points on the triangle path
23:19 Use lerp() to morph between the circle and triangle
25:33 Use the sine function to ossillate between a circle and a triangle
28:25 Conclusion and suggstions for variations

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#golanlevin #interpolation #circlemorphing #polarcoordinates #javascript #p5js

[mmheti]

I have an idea for a challenge. Generate bunch of 2D shapes on the canvas. Let the mouse be the point light source. The challenge would be to draw shadows.

[carlwheeser]

You mentioned the "chat".... I hadn't watched any of your videos for a while, but I just kinda was ignoring seeing you go live pretty often in my subscription page. Just now realized that you were streaming coding challenges. I really gotta check in on one of these streams.

[azyfloof]

26:55 Cool optical illusion! :D
When the circle collapses down into a triangle, the shape appears lighter in colour than the surrounding background
When the triangle expands back out, it appears darker :O

[paulkerrigan]

Thanks for this, man. The way you break down problems and simplify them has helped me with my own programming. You make it all seem so simple. I'm sure that Processing contributes to that, what with it being a lot simpler than setting up and using DirectX or OpenGL in C++, but I like how you do things. These videos are incredibly educational. I am a web developer by trade, and I've been pushing to get us to use more JavaScript animation in our projects! :-)

[tswan]

20:40

Just leaving this here for when i inevitably come back for a chuckle

[cmarkme]

The White Board is looking kind of Mucky!! We need a Cloth Object :-)

[haideralipunjabi]

you actually debugged from 6:17pm to 6:44pm. Those who watched the stream will know the pain 😂

[Naej]

That's so beautiful, the beauty of math and computer science combined <3

[beaverjoe]

I think this tutorial parts you spent more than the video hours to make it. Inside of the coding parts many codes combined with experiences and the concise structure. Thanks So much and i guess i save the time and learn more from it.

[kalapita]

let cartesian = (radius, angle) =>
createVector(radius * cos(angle), radius * sin(angle));

still working <3

[superpatata]

whats you doing is really amazing continue like that !

[shilangyu]

for( x of array), yes, there is a new ES6 foreach loop :)

[VZwebs]

why don't you use <= 120 instead of < 120 for stopping condition? 3:28

[polyroguegames]

Oh man, I really hope you make an implementation of the Boids algorithm! So excited for that day haha.

[TanjoGalbi]

You wanted a value between 0 and 1 from the theta using sine which gives -1 to 1. Instead of adding 1 then divide by 2 like you did, simply get the absolute of the sine:
let amt = abs( sin(theta) );

[tshddx]

Has The Coding Train ever investigated PID controller algorithms or other concepts in control theory? This might be a nice simple context within which to investigate PIDs. I love the idea of tackling the “easy” task of interpolating points between a circle and a triangle in tons of creative ways. Another potentially interesting idea is to write two functions to recognize circles and triangles, and use machine learning or a genetic algorithm to train points to move in such a way as to satisfy those two functions.

[CxMooMs]

I am so bad at maths, I stoped learning it very early during school time and as soon as you speak maths during your videos I'm lost.. I try to understand but.. Yea.. I don't.
I'm trying to learn web development at home, HTML etc. So I know that at some point I'll have to learn JS but I kind of know that it will be VEEERY hard just by watching your videos where there is always maths involved...

[amanmahendroo]

for (let /iterand/ of /iterable/) {} is what you're looking for

[tbntdima]

Hi man, i really like your videos and the way you teach. Just wondering if you have some vanilla js videos. And also I am very lost what to watch next :D

[seancpp]

Hey guys. Not sure where else to ask this...
In one episode he talks about "fixing" the intellisense in VSCode for JS / p5.js
Does anyone remember what those steps are to stop the annoying incorrect suggestions ?