Coding Challenge #86: Cube Wave by Bees and Bombs

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

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

50% 1

The artist BeesandBombs makes amazing algorithmic looping GIFs! Here's my attempt to recreate one of my favorite GIFs in JavaScript with p5.js and the WEBGL renderer. Code: thecodingtrain.com/challenges...
🤖GIF: / 940639806522085376
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #85: ...
🎥 Next video: • Coding Challenge #87: ...
🎥 All videos: • Coding Challenges
References:
💾 p5.js reference: p5js.org/reference/
🖌 Bees and Bombs: / beesandbombs
Videos:
🚂 Simple Harmonic Motion: • 3.5 Simple Harmonic Mo...
🎥 Back to School on the Coding Train: • Back to School on the ...
🔴 Coding Train Live 109: • Coding Train Live 109:...
Related Coding Challenges:
🚂 #87 3D Knots: • Coding Challenge #87: ...
🚂 #135 Making a GIF Loop in Processing: • Coding Challenge #135:...
Timestamps:
0:00:00 Coding Cube Wave by Bees and Bombs
0:02:41 Applying Oscillation
0:07:43 Moving to 3D
0:11:33 Adding Perspectives and Movement
0:23:25 Applying an Offset
0:28:32 Final wave and suggestion for improvements
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...
#webgl #simpleharmonicmotion #3d #beesandbombs #javascript #p5js

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

5 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@multiapples6215 6 лет назад

Ok, the reason why the isometric view is off is because you did the rotates wrongly. Replace: RotateX(-QUARTER_PI) RotateY(ma) With: RotateX(ma) RotateY(-QUATER_PI)

@TheCodingTrain 6 лет назад

Thank you!!! (Actually I think I it should be. . . ) rotateX(-ma); rotateY(-QUARTER_PI)

@joaovitordossantos9949 6 лет назад

YES The wiki for iso view refers to plane rotation while the p5 function rotates around the said axis

@TriatomicKey52 6 лет назад

Thought it was abit wacky when he called x vertical

@TheCodingTrain 6 лет назад

Yeah, so painful for me to watch this back!

@multiapples6215 6 лет назад

Glad to help ^_^

@goobi8617 5 лет назад

This dude can literally create anything with his mind

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

he can

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

This is what I think people call "god-like powers"

@charliedinerman7941 3 года назад

kenan 238 English?

@zidanutomo326 3 года назад

And his laptop

@chitlitlah Год назад

Most of us would have to use a computer to do stuff like this.

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

15:24 lmao every programmer 30 min after enthusiastically starting a new project;

@jackdaddypfc 6 лет назад

As some one who taught himself assembly language on a commodore 64, may I say you are exactly what aspiring young programmers need. Good work sir.

@Roundtablist 6 лет назад

I did the same thing on an Apple ][ and I thoroughly agree. Dan has helped me try to restore some fun to my coding. To approach it with the same sense of wonder and excitement that motivated me to push through the incredibly difficult thing I was trying to do back then.

@reyariass 6 лет назад

I salute you both. I don’t know what I would do without today’s IDEs and their auto-completion. Probably a whole lot of single syntax typing then testing immediately after to see if did something spectacular.

@vittim1998 5 лет назад

where ddi you guys learn to code by yourselfs?

@KayOScode 5 лет назад

I did all of the above and built 3d render engines from scratch. Im talking from scratch meaning no libraries, not even a graphics api.

@ritageraghty4404 5 лет назад

Father Mark I guess you are from Ireland. Gee, how well I remember Father Mark's repetitive quotes: "Drink, drink drink!"..."Girls, girls, girls!" ...."Feck, feck, feck!"

@steeperdrip9188 6 лет назад

So happy that you've gotten back to graphical coding challenges

@TheCodingTrain 6 лет назад

Thanks!

@aditya95sriram 6 лет назад

Please, please do more from Bees and Bombs. Some of those are really mind-boggling and I have no clue how he does them in processing.

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

Just started a coding camp and found your channel. You're brilliant friend. Absolutely brilliant, thank you for sharing your knowledge and your thought process while breaking down the code!

@oliverpieternmonochromeand3897 6 лет назад

Wow, i Love the awesome animation loops from Dave (Bees and Bombs) and I like your tutorials too. Thanks for this Christmas gift :-)

@arturitoproductions 3 года назад

Super exciting to see you doing these real time coding, I learn a lot from you and, specially important, I get a lot of inspiration

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

Seriously right? Sometimes I think I can't move forward. Then I see a video like this knowing I NEED to move forward because this looks HELLA fun.

@HalNuevemillones 6 лет назад

I stop programing a long time ago. But look at you doing this RU-vid . Make me remember my past and the exitment when i finish a program :). THANK YOU.

@alvaroplol 6 лет назад

Using distance to do the offset is genius. I'm adding that to my toolbox.

@btiwari-games5279 5 лет назад

You are so cool, i feel very creative while watching your videos hats off to you man

@rosslahive 6 лет назад

Really enjoyed this episode, thanks Dan.

@jaronfeld123 6 лет назад

Lmao "Rotate 45 degrees..." PI/8 That was funny

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

it was 22.5 instead of 45 lmao

@zyzo99 6 лет назад

This guy is fantastic,kudos to him!

@live_destin-3408 6 лет назад

Wow this is awesome Dan I fallowed along tru the hole thing great video

@bemresolvido8856 6 лет назад

congrats , man: you're an excellent coder!

@rigby1083 5 лет назад

It's amazing ! You are the amazing programmer !!! :O

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

I like so much this video!!! Congrats

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

wow, i enjoyed this so much, i watched it and coded along, only took me 2 hours (yes, i know about the source code being available but wanted to code it)

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

your videos are really relaxing thanks

@peoplethesedaysberetarded 6 лет назад

Another good video, Daniel. Thanks! :)

@DIDIameli13 6 лет назад

So cool and well done vid, thanks a lot !

@usernamedeww983 5 лет назад

Gid. I love watching him code. Even though I haven't started learning JavaScript yet and a lot of what he does confuses me a bit, his code looks so AMAZING. Mine is all jumbled and stuff and I only put space between my code when I'm done with a concept completely, he does when he's done with a thought, and that doesn't usually look good, but this guy pulls it off and it looks amazing! Lmao

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

WebGL: can't handle 2d, runs 3d perfectly. "My powers are massive, not catered to your lowly tasks... "

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

Webgl can, p5js can't

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

the rect() function in webgl p5.js actually draws so many triangles that webgl starts lagging when the triangles move to each other

@MarkJay 6 лет назад

I love these animated style coding challenges.

@stevewu9372 5 лет назад

Love your videos!

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

You just explained a sine wave to me better than anyone ever did, in like 30 seconds!

@deadmusik9969 3 года назад

fantastic to watch, just fantastic.

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

Nobody: ... This guy: Translate();

@AB-Prince 6 лет назад

For an ofset centered around zero, you could square the numbers so they eminate from the origin

@Min3vidz 6 лет назад

You should have made it in a rainbow color in order to honour your old channel name! Keep up the good work!

@akashkumardas6521 6 лет назад

Your laughing style is amazing ... I like it ..

@JW-pq1ml 6 лет назад

Your excitement at 18:17 is wonderfully awesome.

@alonattar3836 6 лет назад

Beautiful!!

@klausbdl 6 лет назад

Pls never stop doing those videos. I'll be a famous programmer like you.

@arshadjaveed7877 6 лет назад

Awesome video...you are the best

@dan-garden 6 лет назад

I love your channel Dan, nice name aswell! ❤️

@kerhabplays 3 года назад

U are the master of Coding!

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

He made it, unbelievable

@boyiscola 2 месяца назад

That’s a pretty good LD impression!

@Rafael-wq4sn 6 лет назад

Hahaha I like your videos very much! And I'm learning a lot. Thanks!

@goddersgaming2186 6 лет назад

This fricking made my day

@modiddymo 6 лет назад

Well done!

@guiltazaour2871 6 лет назад

very nice man!!

@emmettdja 3 года назад

2:11 "so if we just let h equal 100..." and there you go. all done.

@urgisjot 6 лет назад

You my dear sir are fantastic, when i watch it for breakfast it gives a positive charge for the whole day!

@FERCHO8075 6 лет назад

I love this !!!

@driziiD 3 года назад

orthographic projection: flashes back to all my TD (Technical Drawing) classes in secondary school

@jayh5992 6 лет назад

Its an orthographic projection but a isometric view. Isometric view is that the lines going in the back are 1:1 in length and 30 degrees angle going to the back

@TheCodingTrain 6 лет назад

Thank you for this clarification!

@gaimz1855 6 лет назад

Brilliant!

@ashishkingdom 6 лет назад

This is really cool! ^_^

@mitalisharma440 3 года назад

so much of thenks. :)

@jeanmercedes841 5 лет назад

This guys awesome

@2000yearOldYogiAspirant 6 лет назад

Loool funny video, gj man. At the very end it looks like a jellyfish

@akj7 5 лет назад

Instead of working on each block individually, you could have create and animated f(x) = (sinx, sinx, constant), then use the method used for Riemann Integral (creating blocks under the curve of each sinus function). Edit: Then mirror it on one axis.

@PalikkaFilms 6 лет назад

this is great, I'm trying to do the same you did but in Unity and with c#. good practice

@apalepeks2000 3 года назад

Amazing

@danielkatz5925 6 лет назад

Amazing video.

@hazmishaidi 6 лет назад

Okay, I admit.. you nailed it. ...as usual. :)

@ophello 6 лет назад

No he didn't...but close!

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

you can do it in a simpler way such as making all the boxes (4*4) and one in the middle who have all the script it will detect how mush far is the other boxes and their high will be angle*(offsent+distance)

@marcellomarianetti1770 6 лет назад

Really impressive

@Fuzzietomato1 6 лет назад

Please do more of these!!!

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

Nice, nice. Thx

@mariogamer929 5 лет назад

Holy cow. you can program so fast! I made the same thing in C++ and OpenGL, and it took me nearly a day. Most of the time I'm just thinking what to do next in my code, and you just keep going somehow. How do you do that?

@barboygaming3807 6 лет назад

You are amazing person in the world

@N0D0hNuts 3 года назад

You know someone is a real programmer when you type the same word over and over doing mistakes because your mind is going faster than your hands

@philmourelle 5 лет назад

U r the man !!!!

@endone3661 6 лет назад

wow! magic!

@PhilippeHenrique 6 лет назад

OMG! You are amazing

@megatrollsplit1282 6 лет назад

Philippe Henrique "you is" 😂😂😂😂😂😂

@PhilippeHenrique 6 лет назад

I just realized now the mistake

@ophello 6 лет назад

The proper grammar for that is "I just now realized my mistake."

@PhilippeHenrique 6 лет назад

ophello thanks for the correction

@DaCosmoz 6 лет назад

Is there a youtube channel like this but with other programming languages? Python for example? This channel is so cool.

@boggeshzahim3713 6 лет назад

No there isn't

@pascalladal8125 6 лет назад

Man I'm not coding in js but that gave me the kick to start back Unity and c#. It can be easily translated to basic Unity goof around. Lots of fun incoming I believe!

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

what's better is,you don't have to code physics because unity already has it

@nidomika 6 лет назад

I know nearly nothing about JS or programming itself, yet I found this video quite interesting to watch

@TheCodingTrain 6 лет назад

Try either of these playlists to start from scratch! ru-vid.complaylists?view=50&shelf_id=14&sort=dd ru-vid.complaylists?view=50&shelf_id=2&sort=dd

@nidomika 6 лет назад

The Coding Train I will definitely try! Thanks so much :))

@nandhum5859 6 лет назад

You are a genius

@Protegit 6 лет назад

Whats the difference between void setup() size(x, y); and setup() { createCanvas(x, y);}?

@TheCodingTrain 6 лет назад

One is Processing, one is p5.js, see: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AmlAiKsiy0o.html

@Protegit 6 лет назад

thx a lot!

@BaronVonTacocat 6 лет назад

Sweet!

@yashsehgal251 5 лет назад

Its awesome

@robertlemiesz7143 6 лет назад

For mapping between 0->100 you could do 100*sin(x)^2

@IbakonFerba 6 лет назад

12:37 ah, the Unity forum, one of my most frequently visited websites xD

@ilustrado7291 6 лет назад

SHIFFMAN IS THE NEW BOB ROSS

@kevinfredericks1806 3 года назад

If Bob Ross drank a lot more coffee luv u Dan

@kalapita226 6 лет назад

Greetings from Laponia

@caiozowyecamachocabral5413 6 лет назад

Why would someone dislike it? Love to watch his videos...

@lmmartinez97 6 лет назад

I was thinking of a completely different approach. I learnt programming in Fortran, so the first thing for me is almost always going for arrays. Like you could make an array that stores a position for every little box and then assign a dynamic value of height to each value of that array? I know pretty much anything about p5 and processing, but I do want to learn!

@pypunk6248 5 лет назад

you made me want to try this out myself, but in c++ XD

@krening 6 лет назад

Cool Stuff

@MathGrove Год назад

It took me so long to figure out how to make it spherical vs the shape of a sine wave. You see a lot of people saying to "just square the offset" but that didn't immediately click for me. The solution was to simply square both the distance and the max distance, doh. Update your offset to this and it looks just like the original: let offset = map(d * d, 0, maxD * maxD, -PI, PI)

@Xenthera 6 лет назад

Increase frequency and amplitude of the waves, while decreasing the time step... IE larger and more frequent waves, but with a slower change

@TheCodingTrain 6 лет назад

Fun tip!

@tusharmaurya1668 6 лет назад

YOu are insane!

@turkenits 6 лет назад

I fixed it you just need a longer height to the boxes and a smaller rate

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

pretty pretty pretty close 🥰

@SketchpunkLabs 6 лет назад

Today I post videos about basic voxels then daniel went and posted this today.... now I feel compelled to try to implement this sort of effect with voxels. Guess I'll be up late tonight... :P

@roshanpawara8717 6 лет назад

Great job sir. But yo gotta tell us that for how long have you been in this coding thing coz you just calculate stuff so quickly. You are the "Coding Flash"!

@SkylarkMotion 5 лет назад

It seems to have a kind of circular offset, hence I think you could do it based on a circumference centered at the origin, having the main box at (0, 0) you could make the offset to be sqrt(x*x + y*y), make the height function a cosine so the center box starts at the top, and the offset would increase based on the distance from the origin to the current box. It could also be multiplied by a constant, so you could control the offset difference between the current box and those adjacent to it. By the way, this was a pretty interesting video

@TheCodingTrain 5 лет назад

Thanks for the feedback!

@tychobroucke3910 6 лет назад

I think the offset of the corner parts needs to be te same as the offset on the middle part, also the max offset should be the width of the whole thing minus the base height...

@danielradosa 3 года назад

my god, thhis is free tutorial... damn love it

@may007ank 5 лет назад

If you think your oscillations are off, you can use cos instead of sin.

@slendi9623 6 лет назад

13:56 It looks like a very low resolution 3D Game (The ones from scratch)

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

Late but the push()/pop() resets the matrix (the translate()) after each iteration of the for loop. - Joel

@danielmatthews12312 6 лет назад

I cant believe how few lines of code it takes to make that first ocelating movement

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

oscillating

@hadawaco 6 лет назад

I have absolutely no knowledge about coding... But I love watching you figure out how to copy whatever you're looking at. Id like to get into coding, where should I start?

@zakabamzam 6 лет назад

FlavonoidzExplosion Dan's own P5.js series of tutorials for beginners.

@hadawaco 6 лет назад

zakabamzam oh cool I'll check those out! I've only been watching his channel for a few weeks so I had no idea he had tutorials, that's awesome thanks :)

@TheCodingTrain 6 лет назад

Try either of these playlists to start from scratch! ru-vid.complaylists?view=50&shelf_id=14&sort=dd ru-vid.complaylists?view=50&shelf_id=2&sort=dd

@zakabamzam 6 лет назад

The Coding Train And the Learning Processing book is superb too. Thanks, Dan!