Video není dostupné.
Omlouváme se.
Coding Challenge
Vložit
- čas přidán 17. 08. 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...
🕹️ p5.js Web Editor Sketch: editor.p5js.or...
🎥 Previous video: • Coding Challenge #111:...
🎥 Next video: • Coding Challenge #113:...
🎥 All videos: • Coding Challenges
References:
💾 Matrix Multiplication: matrixmultiplic...
🗄 Rotation Matrix on Wikipedia: en.wikipedia.o...
🗄 3D Projection on Wikipedia: en.wikipedia.o...
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....
👾 Share Your Creation! thecodingtrain...
🚩 Suggest Topics: github.com/Cod...
💡 GitHub: github.com/Cod...
💬 Discord: thecodingtrain...
💖 Membership: czcams.com/users/the...
🛒 Store: standard.tv/co...
🖋️ 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/Cod...
This description was auto-generated. If you see a problem, please open an issue: github.com/Cod...
#3drendering #projectionmatrix #perspectiveprojection #rotationmatrix #processing
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 czcams.com/video/6_sUVhH7VfU/video.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.
Sehr gut
The way this guy speaks and gestures had me on the edge of my seat throughout the video
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. ☺️
Not the hero we deserve, but the hero we need
"I'm going to reward myself with a piece of space melon"
This is the future :P
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
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.
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?
This video inspired me to code my own 3D modelisation software for my final school project. So thank you so much!
the explanation and the analogy with the shadow were just amazing
You're so good-natured that you make coding fun.
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
Shoot, now I'm hyped to try implement this myself... Well, here goes my night
18:44
"This works to fast"
-no programmer ever
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
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!!
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.
Yes! Thank you Dan, you're making me so happy with these videos! :D
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
Was doing this at work today, came back to your video for reference. Thanks Dan :D
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
This a best explanation i've seen in youtube about this theme. Thank you so much
Good that you fixed that extra zero, was making me crazy that it was working even though that typo
same lol
First nice and easy explanation of 3D rendering I see in my life. Thanks !!!
Finally someone actually explained projection matrix's :D
Nice video, looking forward into higher dimensions!
Also a guest video would be nice, been a long time since the last
I don’t watch the entire video but i’ve already liked
I saw the content on the slack several days ago and I can saw it on CZcams now! AMAZING
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.
Why did that make sense in the most confusing way possible? Thank you for this
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!!
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 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...
A Giant at work. Thanks for making this video!
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
Daniel, you're so close to make a full 3D graphics engine!
16:20 i was screaming at my screen for the missing comma and extra 0
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.
Awesome video! Just what I needed for my advent of code problem
thanks to your tutorial i created something that does essentially the same thing in pico8. this is a-ma-zing, keep it up
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)
6:34 omg that looks familiar!
Thank you Linear Algebra & Matrix Theory!
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 favorite channel
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!
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
In a past life, Daniel was a mad scientist.
Enjoyed this one quite a lot!
13:26 everytime I get an error in my code
Very talented young man!!! Love your video!
Love the videos and your energy man!
You r the best teacher
26:29 Here is the algorithm:
int k = 0;
for (int i = 1; i < 5; ++i) { int l = 1;
for (int j = 1; j < 5; ++j) drawLine(hdc, p[k], p[l += j]);
k += i;
}
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
Literally no body able to explain that simple projection matrix that simple, I was to give up 3d programming and my CZcams shows your video.
Great videeo as ever. Well done!!
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.
Amazing video, thank you!
Thank you, thank you for everything!
I have the same shirt. Same pinch!
You are amazing 🤩
Shiffman “Oh boy! this work too fast. I didn’t want it to work that fast”.
All other programmers drop their mouth
You insane coder
"I can like DISTORT THE WORLD" followed by evil laughter. Fantastic video as usual, thanks Dan
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.
should i learn linear algebra or some math and physics for my computer graphics class? i really didnt understand how rotation works
please someone help me
You probably do by now (;
thats cool sir
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?
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.
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]
ive been following along using python, so far everything works, until i add perspective. Anyone know the original perspective formula i should use?
Did you find the correct formula?
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!
Cool video, homie!
it's like a four dimensional hyperspace
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
I love your videos and thanks you helped me a lot with that video tho!
Really interesting video thank you and keep up the good work 😃
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 tried this on javascript. On z rotation with only 4 vertices the first dot is not spinning and the entire dots are spinning towards this point. Same with other rotations but with two dots being the center. Why does this happen
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.
I hope you defined the direction of x y z.
It's quite confusing whether z is the vertical axis or y.
i love your channel
Same, inspiration for my own AI videos :)
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.
could i know where do you get (draw and render functions)?
thank you
Very interesting video, math is just amazing.
Where can I learn more about this? I'm hoping to learn as much as possible. I really need to improve my canvas game.
31:15 was the best part 🤣
THANKS
I love this😍😍💻
I know this is done in processing, but there's got to be some some way to use hardware acceleration for matrix operations.
I wonder how to draw colored faces so that only front ones are visible
for(int i = 0; i < codingChallenge.length; i++){
println("thank you Dan for doing what you are doing");
println("like your Coding Challenge nr: " + i);
}
@Yuri Lopes
There doesn't have to be any space, because "println();" moves to the next line after printing the text.
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...
I love to learn a lot from you..
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've watched both this and the livestream, and I'm always lost on why the matrices have 3 rows. A point X, Y and Z shouldn't be only row on the Matrix? 3 cols, 1 row? How does that become 3 cols, 3 rows?
Can you please send this code I am getting error.and please tell which app should I use for java in my phone
"Processing, Java based, creative, development, platform thing."