Coding Challenge #86: Cube Wave by Bees and Bombs
Vložit
- čas přidán 5. 08. 2024
- 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: czcams.com/users/thecodingtrainjoin
🛒 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
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)
Thank you!!! (Actually I think I it should be. . . )
rotateX(-ma);
rotateY(-QUARTER_PI)
YES
The wiki for iso view refers to plane rotation while the p5 function rotates around the said axis
Thought it was abit wacky when he called x vertical
Yeah, so painful for me to watch this back!
Glad to help ^_^
This dude can literally create anything with his mind
he can
This is what I think people call "god-like powers"
kenan 238 English?
And his laptop
Most of us would have to use a computer to do stuff like this.
15:24 lmao every programmer 30 min after enthusiastically starting a new project;
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.
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.
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.
where ddi you guys learn to code by yourselfs?
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.
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!"
So happy that you've gotten back to graphical coding challenges
Thanks!
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.
Using distance to do the offset is genius. I'm adding that to my toolbox.
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!
I stop programing a long time ago. But look at you doing this CZcams . Make me remember my past and the exitment when i finish a program :). THANK YOU.
Lmao "Rotate 45 degrees..." PI/8
That was funny
it was 22.5 instead of 45 lmao
Wow, i Love the awesome animation loops from Dave (Bees and Bombs) and I like your tutorials too. Thanks for this Christmas gift :-)
Nobody: ...
This guy: Translate();
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
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.
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)
This guy is fantastic,kudos to him!
Really enjoyed this episode, thanks Dan.
You are so cool, i feel very creative while watching your videos hats off to you man
WebGL: can't handle 2d, runs 3d perfectly.
"My powers are massive, not catered to your lowly tasks... "
Webgl can, p5js can't
the rect() function in webgl p5.js actually draws so many triangles that webgl starts lagging when the triangles move to each other
Wow this is awesome Dan I fallowed along tru the hole thing great video
I like so much this video!!! Congrats
So cool and well done vid, thanks a lot !
your videos are really relaxing thanks
Another good video, Daniel. Thanks! :)
congrats , man: you're an excellent coder!
It's amazing ! You are the amazing programmer !!! :O
You just explained a sine wave to me better than anyone ever did, in like 30 seconds!
Love your videos!
fantastic to watch, just fantastic.
I love these animated style coding challenges.
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
Your laughing style is amazing ... I like it ..
Awesome video...you are the best
Beautiful!!
Your excitement at 18:17 is wonderfully awesome.
Pls never stop doing those videos. I'll be a famous programmer like you.
I love your channel Dan, nice name aswell! ❤️
2:11 "so if we just let h equal 100..." and there you go. all done.
You should have made it in a rainbow color in order to honour your old channel name! Keep up the good work!
That’s a pretty good LD impression!
Hahaha I like your videos very much! And I'm learning a lot.
Thanks!
orthographic projection: flashes back to all my TD (Technical Drawing) classes in secondary school
He made it, unbelievable
U are the master of Coding!
For an ofset centered around zero, you could square the numbers so they eminate from the origin
very nice man!!
This fricking made my day
Well done!
I love this !!!
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
Brilliant!
This guys awesome
This is really cool! ^_^
Loool funny video, gj man.
At the very end it looks like a jellyfish
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?
You my dear sir are fantastic, when i watch it for breakfast it gives a positive charge for the whole day!
so much of thenks. :)
Amazing video.
Amazing
Really impressive
Nice, nice. Thx
wow! magic!
You are amazing person in the world
this is great, I'm trying to do the same you did but in Unity and with c#. good practice
Okay, I admit.. you nailed it.
...as usual. :)
No he didn't...but close!
U r the man !!!!
12:37 ah, the Unity forum, one of my most frequently visited websites xD
10:37 how do I make that black borders? I tried copying the same program and i just got flat colours without edges
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.
on the face for the animation you made is it possible that you could make the sine wavelengths half the size to match the animation? because it looks like your one has 1 wavelength when the birds and bees looks like it has 2
You are a genius
Its awesome
you made me want to try this out myself, but in c++ XD
Why would someone dislike it? Love to watch his videos...
Can someone help me?
The boxes that have been drawes have no black-colored edges. They have the same color as the box. And when I try my program on the Website of P5 everything works how it should. what can I do?
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
Thank you for this clarification!
Please do more of these!!!
Sweet!
Greetings from Laponia
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!
what's better is,you don't have to code physics because unity already has it
YOu are insane!
OMG! You are amazing
Philippe Henrique "you is" 😂😂😂😂😂😂
I just realized now the mistake
The proper grammar for that is "I just now realized my mistake."
ophello thanks for the correction
Cool Stuff
pretty pretty pretty close 🥰
I know nearly nothing about JS or programming itself, yet I found this video quite interesting to watch
Try either of these playlists to start from scratch!
czcams.com/users/shiffmanplaylists?view=50&shelf_id=14&sort=dd
czcams.com/users/shiffmanplaylists?view=50&shelf_id=2&sort=dd
The Coding Train I will definitely try! Thanks so much :))
Which IDE does he use? I still use p5.js web editor but I want to use an IDE. Can someone recommend please?
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)
Whats the difference between void setup() size(x, y); and setup() {
createCanvas(x, y);}?
One is Processing, one is p5.js, see: czcams.com/video/AmlAiKsiy0o/video.html
thx a lot!
Can you upgrade, simplify or convert my version of KAREL 3D in WebGL with Three.js to p5.js?
8:55 What purpose does the push() and pop() fill?
They create a "block" of instructions that all get sent together to the Graphics Layer, thus reducing the number of "housekeeping" operations it has to perform.
It's also commonly used to "temporarily" apply transforms/rotates, and have them all "revert" with a pop.
Is there a youtube channel like this but with other programming languages? Python for example? This channel is so cool.
No there isn't
Coding along, I add ortho() and and my boxes disappear, comment it out and they reappear. Why?
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!
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)
What's the command you're doing to re-format the code?
SHIFFMAN IS THE NEW BOB ROSS
If Bob Ross drank a lot more coffee luv u Dan
I really get the urge to make a hacky 2d css transition version of this
my god, thhis is free tutorial... damn love it
26:20 Larry David reference xD
I actually tried to improve the version.
editor.p5js.org/lavagod/present/M2tExTqYd
A bit of a late question to ask on this, but what do you use to host to localhost:8000?
This workflow video series might help! czcams.com/play/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X.html (TLDR: node http-server or python SimpleHTTPServer)