Coding Challenge
ฝัง
- เผยแพร่เมื่อ 19 พ.ค. 2024
- Can I draw and rotate a 3D cube using Processing's 2D renderer with just some math?!?! Yes! Watch to learn more about rotation and projection matrices along with perspective and orthographic projection! Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #111:...
🎥 Next video: • Coding Challenge #113:...
🎥 All videos: • Coding Challenges
References:
💾 Matrix Multiplication: matrixmultiplication.xyz
🗄 Rotation Matrix on Wikipedia: en.wikipedia.org/wiki/Rotatio...
🗄 3D Projection on Wikipedia: en.wikipedia.org/wiki/3D_proj...
Videos:
🚂 Matrix Math: • 10.6: Neural Networks:...
🚂 Matrix Multiplication for 3D Rendering: • Matrix Multiplication ...
🔴 Coding Train Live 148.1: • Coding Train Live #148...
Related Coding Challenges:
🚂 #26 3D Supershapes: • Coding Challenge #26: ...
🚂 #113 4D Hypercube (aka 'Tesseract'): • Coding Challenge #113:...
🚂 #142 Rubik's Cube: • Coding Challenge #142:...
Timestamps:
0:00 Introducing today's topic: 3D rendering in 2D
2:08 Let's begin coding!
7:50 Add a projection matrix
12:00 Add a rotation matrix
18:02 Make a cube with 8 points
20:41 Normalize the cube
21:45 Connect the edges
28:09 Add perspective projection
31:36 Conclusion and next steps
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: th-cam.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...
#3drendering #projectionmatrix #perspectiveprojection #rotationmatrix #processing
![[Full Episode] Hell's Kitchen Thailand EP.15 | 19 พ.ค. 67](http://i.ytimg.com/vi/Mx0ColswPls/mqdefault.jpg)
19:00 technically the light source is infinitely far away
19:43 applying the X matrix to the PVector, then applying the Y and Z matrixes is the same as applying a single XYZ matrix. This XYZ is made matmultipling Z with Y and then the result with X. The order matters.
Graphically Z×(Y×(X×V)) == (Z×Y×X)×V
Thank you for these corrections! That's especially important pointing out the "infinite distance" of the light source. I will pin this comment!
@@TheCodingTrain th-cam.com/video/6_sUVhH7VfU/w-d-xo.html
@@TheCodingTrain sorry again, can you give me any advice how to draw all faces the math or something, thanks
I understood everything absolutely.
If we put to spin 90°, it doesn't spin exactly a quarter of the cube. And if we put to add +1 to angle at each second, from 0 to 90, it spins 360° some times instead only a quarter for one time. Why we couldn't simply put to rotate the exactly angle that we want?
I really felt the need to learn how to create 3D from scratch for the sake of my own sanity, so thank you again.
I agree.
I've been a professional developer for like, 3 years now, but this dude is still too much fun and I wish I had found him in college.
I've been a professional developer for 15 years and still very much enjoy watching him. ☺️
The way this guy speaks and gestures had me on the edge of my seat throughout the video
Not the hero we deserve, but the hero we need
I've been working in 3d game development for nearly 2 years now, and still I learn a lot from your videos! Your work here is a real goldmine, and really accessible to future generations of coders. That's awesome.
Here is a python version for everyone :P
Make sure you have gasp and numpy
from gasp import *
import numpy as np
#Settings
back = color.BLACK
dot = color.WHITE
linec = color.GRAY
scale = 200
timestep = 0.05
distance = 2
#Dont mess with the ones below
centerx = 0
centery = 0
angle = 0
points = np.array([
[-0.5, -0.5, -0.5],
[0.5, -0.5, -0.5],
[0.5, 0.5, -0.5],
[-0.5, 0.5, -0.5],
[-0.5, -0.5, 0.5],
[0.5, -0.5, 0.5],
[0.5, 0.5, 0.5],
[-0.5, 0.5, 0.5]
])
def draw():
rotationZ = np.array([ #These have to be inside the function because angle will still static when initiailzing.
[np.cos(angle), -np.sin(angle), 0],
[np.sin(angle), np.cos(angle), 0],
[0, 0, 1]
])
rotationX = np.array([
[1, 0, 0],
[0, np.cos(angle), -np.sin(angle)],
[0, np.sin(angle), np.cos(angle)],
])
rotationY = np.array([
[np.cos(angle), 0, -np.sin(angle)],
[0, 1, 0],
[np.sin(angle), 0, np.cos(angle)]
])
projected = []
for v in points:
rotatedY = np.matmul(rotationY, v)
rotatedX = np.matmul(rotationX, rotatedY)
rotatedZ = np.matmul(rotationZ, rotatedX)
z = 1 / (distance - rotatedZ[2])
projection = np.array([
[z, 0, 0],
[0, z, 0]
])
projected2d = np.matmul(projection, rotatedZ)
projected2d = projected2d * scale
point(projected2d[0], projected2d[1])
projected.append(projected2d)
for i in range(4):
connect(i, (i + 1) % 4, projected)
connect(i + 4, ((i + 1) % 4) + 4, projected)
connect(i, i + 4, projected)
def createWindow():
begin_graphics(width=800, height=600, title="3D Renderer", background=back)
return 400, 300
def point(x, y):
Circle((x + centerx, y + centery), 2, True, dot, 5)
def connect(i, j, points):
a = points[i]
b = points[j]
Line((a[0] + centerx, a[1] + centery), (b[0] + centerx, b[1] + centery), linec)
def clear():
clear_screen()
centerX, centerY = createWindow()
centerx = centerX
centery = centerY
while True:
draw()
time.sleep(timestep)
clear()
angle = angle + 0.1
the explanation and the analogy with the shadow were just amazing
Exactly the type of information I've been searching for -- thanks for taking the time to make this and explain everything! I'll create something epic in the future with this power
"I'm going to reward myself with a piece of space melon"
This is the future :P
Yes! Thank you Dan, you're making me so happy with these videos! :D
AMAZING!!!! If somebody asked me to do this, I wouldnt even dare to try since I thought is super complex... had no idea it can be so easy!!
18:44
"This works to fast"
-no programmer ever
You're so good-natured that you make coding fun.
This video inspired me to code my own 3D modelisation software for my final school project. So thank you so much!
Why did that make sense in the most confusing way possible? Thank you for this
First nice and easy explanation of 3D rendering I see in my life. Thanks !!!
Was doing this at work today, came back to your video for reference. Thanks Dan :D
Coding Challenge for you, Daniel: Create a 2D maze (as in your maze challenge), then render it in first person perspective using points and lines as in this challenge. Let the user walk around in it with keyboard clicks and mouse looking.
I attempted this years ago in Visual Basic 6.0, without knowing any of this matrix math. It nearly broke my brain.
that would be fun, but probably would take a very long time to do
This a best explanation i've seen in youtube about this theme. Thank you so much
Shoot, now I'm hyped to try implement this myself... Well, here goes my night
Love the videos and your energy man!
OMG when you applied the perspective the first time, I couldn’t see the cube in the right way ! I was just seeing a kind of jelly wobbling xD
What was the fix?
I like your channel. You have such a great attitude, and you're clearly knowledgeable -- but you also show that it's ok not to know everything. You foster a great attitude towards ongoing learning. 😄👏
I saw the content on the slack several days ago and I can saw it on TH-cam now! AMAZING
you are really a genious...i was maing something like this for fun in 2000 year, but i did not reach so far, and with this deep understaning, you are my inspirational mentor , thanks dude
Nice video, looking forward into higher dimensions!
Also a guest video would be nice, been a long time since the last
I always wondered how 3D rendering works. Never thought that it was that 'easy'.
I now really want to build this in C and draw 3D stuff to the console!
You cant draw in a Console i think
Well... he can draw box using - and | so he kinda can create 3d stuff in console.
@@xxslajerxx8890 that is what i will be doing.
I don't know if it worked but I at least tried to share my code:
I have added the code and video to the contributions! Feel free to check it out!
Edit: Please don't mind the commented out garbage in the main function, I forgot that it was there and now I don't know how to change the file.
Therefore I will just add a link to the code: down
+
+
+
edit: gist.github.com/spulilol/4732968c3073faf8a42d2b7477caf929
in my university they told us to build 3d objects from scratch. you do a crazy things with this library. I can't imagine myself build something similar but I will try
Love it! love everything! Love coding! Love examples! Love humor! EVERYTHING!!
Wow processing is amazingly simple!
Yeah, I've made some cool things with it. IDE could be a little better, but the framework is great.
thanks to your tutorial i created something that does essentially the same thing in pico8. this is a-ma-zing, keep it up
Good that you fixed that extra zero, was making me crazy that it was working even though that typo
same lol
Thank you, thank you for everything!
Finally someone actually explained projection matrix's :D
Very talented young man!!! Love your video!
A Giant at work. Thanks for making this video!
Awesome video! Just what I needed for my advent of code problem
I don’t watch the entire video but i’ve already liked
Daniel, you're so close to make a full 3D graphics engine!
Amazing video, thank you!
Enjoyed this one quite a lot!
i know you just uploaded this, but would love to download the code :)
that perspective explanation is the first that has made sense to me, keep it up
You can find it at thecodingtrain.com! (Oh, actually the page is broken for some reason, looking into it.) Code is here: github.com/CodingTrain/website/tree/master/CodingChallenges/CC_112_3D_Rendering
my algorithm for drawing lines is just an array of 12 smallers arrays of 2 that store the two indices needed for each line and it cycles through it.
Any book or tutorial on WebGL or OpenGL should start with exactly the material covered in this video and the previous one, before any GL code is even introduced. Showing how matrix multiplication of vertexes work and how specific matrices can be utilized with point and line drawing primitives of a 2D library to achieve 3D effects - WOW! Brilliant. Just Brilliant. Thanks for clearing up a previously foggy area for me.
awesome, i´d made a program in visual basic a couple years ago that use topographic images of mars´s surface transforming the colors and position of each pixel into an array of values then pass this values to the program por render in 3d with zoom in, zoom out, rotation, water flood simulation and a couple of features more (sorry por my english)
Really interesting video thank you and keep up the good work 😃
Great videeo as ever. Well done!!
i just did this coding challenge myself in processing. But as i just learned quaternions, i did all the rotating thingies with quaternions instead of matrices. It was veeery satisfying, seeing the cube rotate in the end around really any 3d axis.....
Did you watch the 3Blue1Brown video? I am excited to try some Quaternion examples!
@@TheCodingTrain Yes i did. That's where i got the idea from actually... After watching the 3b1b video i read a few university lecture notes about quaternions and 3d rotations and when i then saw your video right here, i thought i could combine the two...
16:20 i was screaming at my screen for the missing comma and extra 0
I love your videos and thanks you helped me a lot with that video tho!
I have the same shirt. Same pinch!
I did the same thing in assembly as a school project(only for more shapes)
Guysudai1 in assembly?? O_o mind sharing the source code, you got me curious...
uploaded it to github.com/guysudai1/asm-project
Guysudai1 holy.cow, that's impressive!! Thanks for sharing!!
@@nvadot1633 no problem!
Woah, In ASSEMBLY!?!??!?! if you can do that, you can do anything!
Lol, dude. You are crazy but you are brilliant, and so was your video. First video I've seen from you. Plain subscribe, of course.
I hope I can understand these topics because I would LOVE to be able to make a 2D perspective based tennis game (like Mario Tennis for Gameboy Advance) but with the aesthetics and fun of a Kunio-kun no-Nekketsu game.
Hugs from Argentina.
P.S: Excuse my awkward English by the way.
6:34 omg that looks familiar!
Thank you Linear Algebra & Matrix Theory!
Do you have any suggestions on how to plot live-data, that comes from the usb/serial-port? P5JS , PixiJS , ZIMJS, TwoJS?
For example, not sure which package would best keep up drawing a simple line graph, as the data that comes streaming in, but I'd *LOVE* to use P2D, maybe with Python!
Very interesting video, math is just amazing.
Anyone following 4 years later… at the point where you connect the lines, simply in the for v : points loop, save the last screen coordinate in a non loop local variable (as in declared outside) then check, if it has been initiated (had a value) then draw a line between it and the current point
I love to learn a lot from you..
Literally no body able to explain that simple projection matrix that simple, I was to give up 3d programming and my TH-cam shows your video.
I love this😍😍💻
you can caclculate the focal length for perspective projection with "focal_length = window_height/2 * cot(fov) / 2)". Dont forget to remove that scaling at 21:09
Cool video, homie!
Shiffman “Oh boy! this work too fast. I didn’t want it to work that fast”.
All other programmers drop their mouth
Awesome
My favorite channel
You insane coder
You are amazing 🤩
In a past life, Daniel was a mad scientist.
You r the best teacher
it's like a four dimensional hyperspace
thank you!!!!
its amazing
You are my Idol ♥
I would really like to see how you'd render 4d rotations as they look really cool, I've tried doing it in Processing without any success, I've been able to "rotate" a hyper cube in "4d "
This will come out today!
Hey Dan, you want to make sure your rotation matrix for the Y axis is correct. The signs on the sin(angle) get swapped for Y, I don't think you've done that.
Can you point me to a timecode where I got it wrong? Or file an issue related to the code here? github.com/CodingTrain/website/issues
@15:34 is where you created the Y rotation matrix. It should be
[cos 0 sin
0 1 0
-sin 0 cos]
I got everything right (using cpp) but I have a couple problems.
Firstly, the z values separate the two layers of cube opposite each other. Basically I now have two squares rotating around an empty space.
It also keeps rotating around the upper left corner (the origin). I tried subtracting the point's position with the cube's position and it kind of centered, but it always rotates around with the upper left point pointing toward the rotation point. I cannot get the rotation point to be inside the cube. When I tried, everything froze.
The worst part is that I just did exactly what you did. I can only guess that there are more 3d helping tools in processing, even without the 3d functions.
Nice coding challange! How do you prevent division by zero when doing the perspective projection (i.e. distance - rotated.z = 0)?
Did you find the solution?
i love your channel
Same, inspiration for my own AI videos :)
"I can like DISTORT THE WORLD" followed by evil laughter. Fantastic video as usual, thanks Dan
could i know where do you get (draw and render functions)?
thank you
13:26 everytime I get an error in my code
The coding train: I finished a 3d cube
Tesseract: hold my beer
The coding train: hahahaha **breathes** no you
Penteract: hold my vodka
The coding train: oh hell no
Where can I learn more about this? I'm hoping to learn as much as possible. I really need to improve my canvas game.
So I ran into two erros I can't fix. "The function "matmul()" expects parameters like "matmul(float[ ][ ], PVector)" and "Duplicate local variable v". I couldn't find an error in my code so I copied the codes from the links into the P3 editor and got the same errors.
THANKS
Thank you for this, but I try for a couple of hours to understand how I could do the same with the planes ( begin shape end shape ). So I would have a fill over it, but it just does not work in my head so far. Any guidance would be much appreciated.
I know this is done in processing, but there's got to be some some way to use hardware acceleration for matrix operations.
will machine learning and ml5 be available in processing itself sometime?
thats cool sir
WOW!
I hope you defined the direction of x y z.
It's quite confusing whether z is the vertical axis or y.
U RE GREAT
Im writing this in javascript canvas from scratch. My current rotation axis is the axes themselves (x,y,z), trying to find a way to move it to the midpoint of the object.
nvm, solved it by translating all points back to the center and translate it back after.
And here i am, trying to search a way to program arduino 8x8x8 RGB led cube to do rotating cube animation. Interesting video, i found some useful info, plus that part in 24:50...
Love your vedio
30:27 WOW I just discovered something super cool! I am currently very tired and so my brain registered the sides wrongly. The small face, the back face, was to me seen as the front face. This means that it looked like a suuuper weird shape (similar to how a rotating tesseract may look when it comes to certain factors). I then paused the video, and basically reregistered the sides of the cube. Then it appeared as it should have from the start. Am I really the only one?
This happened to me. I can switch which version of the cube I'm observing by blinking. Kind of trippy.
5:01 Why do I feel like that book might have an exam based of it....
A) Look at page 8. Find an example of the number 3?....
E.t.c
Cool
How can you change it so when you move the cube up, down, left or right, it still spins around its own center instead of the center of the screen?