Coding Challenge #87: 3D Knots

Подписаться 1,7 млн

Просмотров 39 тыс.

50% 1

Getting tied up in 3D Knots in Processing is loads of fun! Thank you to Paul Bourke for the helpful reference and formulae! Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #86: ...
🎥 Next video: • Coding Challenge #88: ...
🎥 All videos: • Coding Challenges
References:
📔 Knots: paulbourke.net/geometry/knots/
📝 Knot Theory: en.wikipedia.org/wiki/Knot_th...
Live Stream Archive:
🔴 Coding Train Live 111: • Live Stream #111: More...
Related Coding Challenges:
🚂 #25 Spherical Geometry: • Coding Challenge #25: ...
🚂 #12 The Lorenz Attractor: • Coding Challenge #12: ...
🚂 #86 Cube Wave by Bees and Bombs: • Coding Challenge #86: ...
Timestamps:
0:00 Introduction
1:30 Understanding the equations and spherical coordinates
2:47 Coding starts here!
3:44 Implementing the formulae into code
5:03 Making the shape
5:30 Translate to the middle
6:21 That kinda looks like a knot!
8:04 Making it look pretty
8:58 Animating the knot
10:53 Adding the color back
12:00 Things you can try!
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...
#3drendering #3dknots #polartocartesiancoordinates #java #processing

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

10 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 83

@orestes_io 6 лет назад

One of my favourites so far. Great stuff, Daniel!

@turkenits 6 лет назад

Well done!

@atrumluminarium 6 лет назад

To quote my wise friend after he had a little too much beer: "If phi is pronounced 'phee', then pi should be pronounced 'pee' " :P

@StashX 6 лет назад

Actually, both are pronounced exactly like that in Greek. Theta is also more like 'Theeta', it's not like Feta, the cheese.

@asston712 5 лет назад

@@StashX Who pronounces theta feta? It's pronounced (THAY-TUH)

@StashX 5 лет назад

@1:45, sounds lige Feta.

@asston712 5 лет назад

@@StashX Yep, that one time out of all the times he has said it correctly? K

@StashX 5 лет назад

It's all over the video. This timestamp was a random one, i haven't wached again the full video to find it. All i say, is that in Greek it's Θήτα, not Θέτα.

@SourabhBhat 6 лет назад

I loved this succinct coding challenge.

@kenhaley4 6 лет назад

Very nice, Dan!

@ritikkhatri 6 лет назад

so nice to look at!!!!

@prashanthkumar0 6 лет назад

wow really awsome 👍

@marmor2602 6 лет назад

this is honestly so cool...

@wildfyah 6 лет назад

Wow nice 😮

@jatinyadav5967 6 лет назад

awesome bro

@taiken64 6 лет назад

Wonder if I could make a bouncy, animated knot, as opposed to a static, rotating one. 🤔

@MarkJKellett 6 лет назад

I would love to see you do flocking birds algorithm. It would be so cool to see that in p5 js

@d_v_d1070 6 лет назад

happy Processing 3 is used again in your challenges

@TheCodingTrain 6 лет назад

me too!

@zaramintheequanimous 6 лет назад

Awesome as always , I wondered if these programs can be a permanent background for my pc ~ I'd be awesome ~ 😁

@erik8467 6 лет назад

Hey, I found your channel recently by stumbling across your snake game tutorial and it's awesome! A lot of coding channels out there lack the enthusiasm you have on order to keep the lessons fun and entertaining, I definitely enjoy your videos. I have a question, I downloaded p5 from it's website and I got the zip file that included a few JS files, I was wondering what program you use to write your code in your p5 javascript tutorials, it seems very simple and convenient, where can I download it from? Thanks

@RitobanRoyChowdhury 6 лет назад

He uses Atom, an amazing open source text editor on GitHub. atom.io/ However, in this video, he uses Processing, which is a Java-based language that p5.js is based on. For this, he uses the regular processing editor found at processing.org/download/

@erik8467 6 лет назад

Ritoban Roy Chowdhury thanks so much for the help! I've used atom before for Html and CSS it's really great, wanted to know what the other ones were as well, once again thank you

@blasttrash 6 лет назад

There is also sublime or vscode. vscode and atom are quite popular these days though.

@rahmatalbariqi6236 6 лет назад

Hi! im just curious with the sphere to cartesian coordinate conversion. I saw in wikipedia (en.wikipedia.org/wiki/Spherical_coordinate_system) it has different formula than you use, but when i applied it the wikipedia one didnt work but your formula work! Can you explain this? thanks!

@HandyProductions 6 лет назад

Can you make a video on how to download processing.js please? i have done it on kahn academy but I kinda want to download it and start to do stuff by myself but i can't quite figure out how to download it.

@TheCodingTrain 6 лет назад

These are my workflow videos (using p5.js which is a little different than processing.js) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HZ4D3wDRaec.html Also: sublime text: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UCHzlUiDD10.html atom editor: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d3OcFexe9Ik.html brackets: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nmZbhManVcY.html codepen: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5gfUgNpS6kY.html

@Shavronne 6 лет назад

this is processing for java not js

@HandyProductions 6 лет назад

thanks!

@innocentdogooder9911 6 лет назад

Could you make a vid about downloading the P5.js app for windows?

@hjjol9361 6 лет назад

Je ne sais pas quoi dire si ce n'est : You're Knot the best, but closest !

@anjuro 6 лет назад

You are in fact pronouncing phi correctly although right next to that success you have the failure of theta which should have the same vocal as phi in place of "e". Most people pronounce the Greek letters wrong, It hardly matters since almost no one speaks Greek but it can be jarring when everyone has their own version. If you're interested on setting a good example I'm sure you can find a phonetic dictionary for the letters, I would love to see someone step up on this, this mass hysteria is getting to be embarrassing. Anyway, keep up the good work Dan!

@TheCodingTrain 6 лет назад

Thanks for this feedback!

@Jhonatan31415 6 лет назад

Also the math may be wrong as well, as I recall the parametrization of the sphere for phi between 0 and pi is x = r sin phi cos theta ; y = r sin phi sin theta ; z = cos phi , I guess if phi is between -pi/2 and pi/2 the parametrization of the site would be correct.

@anjuro 6 лет назад

It's up to definition, as long as the range of phi is of the form [a,a+pi] any constant a will yield a valid parametrization, the difference being where the "drawing" begins. Of course if the knot wasn't pi-periodic then it would actually matter so it's a valid qualm to keep in the back of your mind.

@citiesinspace4864 6 лет назад

Coding challenge idea! Make a pendulum :)

@mikee. 6 лет назад

What's the hashtag again? #whyknot or #yknot? :D

@TheCodingTrain 6 лет назад

#whyknot (at least that's what I think?)

@vamsi3421 6 лет назад

can you please explain the same thing in p5?

@kingature 6 лет назад

Hey :) Can someone tell me how to activate the auto complete please? In Processing of course.

@peterhayman 6 лет назад

not sure about automatic auto-complete but in file->preferences: "code completion with ctrl+space" (around in the middle), that keyboard combo will do the trick

@toshanluktuke7610 6 лет назад

I think there is a tool which you can download in Processing

@kingature 6 лет назад

Mh, okay at first: Thank you. And the next thing is ... where canI find this tool? I was not able to find one, when I searched for "auto" or "complete". And the only text, that is in my preference.txt is "pdex.completion.trigger = true". I dont't know what to do with this :D

@toshanluktuke7610 6 лет назад

King ature If you're using Processing 3 go to the tools section and click on "add Tool"

@angeldahal1286 6 лет назад

What ide do you recommend for windows??

@TheCodingTrain 6 лет назад

You can use Processing on windows, see: processing.org

@notnooryno 6 лет назад

Would this work with p5.js? I don't think there is a P3D in p5.js.

@yiren609 5 лет назад

There's WEBGL in p5

@franchello1105 6 лет назад

You should add PeazyCam to your 3d sketches

@vamsi3421 6 лет назад

when it comes to p5, how to write an equivalent code{ for(PVector v: vectors)}

@CourageousCoos 6 лет назад

vamsi vammu look up JavaScript ES6 for..of loops: for (let v of vectors) { //code } Might be what you're after!

@veeml7953 6 лет назад

😁

@bram3014 6 лет назад

Can u do lighting next?

@TheCodingTrain 6 лет назад

It's coming in my p5.js WEBGL series. . .

@bram3014 6 лет назад

The Coding Train I'll be waiting then ;)

@rtpHarry 5 лет назад

He forgot to link to Ruby's code and I was curious, so here is the original issue which sparked this: github.com/CodingTrain/Rainbow-Topics/issues/70

@CharltonLepkofker 6 лет назад

Net neutrality am I right?

@hamzanasab1713 6 лет назад

WHEN WE WILL GET MORE MACHINE LEARNING PLZ ;-;

@i.i 6 лет назад

phi faiiiii

@daixso 6 лет назад

Engineer Passion fo fum?

@jameswilson4656 2 года назад

Fee-fi-fo-fum

@prashanthkumar0 6 лет назад

sir please if u can make a tutorial of webgl without p5.js 🙏🙏

@TheCodingTrain 6 лет назад

I would definitely lik dig into deeper concepts later but right now I'm focused on beginner friendly stuff and the p5 library!

@prashanthkumar0 6 лет назад

The Coding Train thank you sir😇

@sk4lman 2 года назад

Why pronounce it "phee" (phi)? Do you say "pee" (pi) too? Edit: I mean, I do say "pee", but I'm Swedish, so... ;)

@atomictraveller 2 года назад

you seem like a genuine egalitarian :O my perspective, if it helps with your objectives.. alls i see is a 3d oscillator. the douchebags who make vsts only want to make known routines, i see methods that can expand human articulacy, thanks for really understanding how empowerment and creativity transform the human experience. just watched, now to see if continuous variation can be achieved (apart from rotation ;) ).

@charbelsarkis3567 6 лет назад

Should have used peasy cam :p

@sabbir4587 6 лет назад

#$uppeeerb

@Hamza-tq7dh 6 лет назад

keep the beard

@nazmcanaraz8316 6 лет назад

sir can we do in Javascript not java

@xzencombo3400 6 лет назад

Deez Knots :P

@coreyholcomb4949 6 лет назад

could you do a video on coding a visual representation of persistent homology in 3D? Here is a pretty good introduction ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h0bnG1Wavag.html I don't think it would be too hard but I'm not a very good programmer.

@bhanuthapliyal1694 6 лет назад

Pheee ? Lmao

@kockaking99 6 лет назад

I bet you someone will make this a meme on /r/furry_irl

@eldarulanov2582 6 лет назад

can u code in python????

@redsurfer_255 4 года назад

i9 think you re an indian

@hcgaming4u 6 лет назад

Just to be picky, the greek letter "phi" is pronounced fi not fee, great video though

@paulhendrix8599 6 лет назад

HCGaming4u Hmm, would have thought he wanted to say something with his look saying it. It's probably not pronounced like the english fi in greek and he pronounces pi the english way anyway ...