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
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'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.
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.
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!
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.
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
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
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.
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 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.....
@@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...
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
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. 😄👏
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)
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
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
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.
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.
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
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...
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?
wondering the same thing, i think it's because points displayed in front of you are actually supposed to be behind you and not visible? did you ever find an answer to this? sorry to necro
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.
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.
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); }
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!
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.
30:27 I have a problem in my mind because sometimes I can see what Daniel intended it to be and sometimes I see a deformed cube, is that only happening to me?
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 "
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.
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 ruclips.net/video/6_sUVhH7VfU/видео.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
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
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.
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
the explanation and the analogy with the shadow were just amazing
This video inspired me to code my own 3D modelisation software for my final school project. So thank you so much!
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;
}
You're so good-natured that you make coding fun.
18:44
"This works to fast"
-no programmer ever
"I'm going to reward myself with a piece of space melon"
This is the future :P
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!!
Good that you fixed that extra zero, was making me crazy that it was working even though that typo
same lol
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
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?
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.
Shoot, now I'm hyped to try implement this myself... Well, here goes my night
Was doing this at work today, came back to your video for reference. Thanks Dan :D
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
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.
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
First nice and easy explanation of 3D rendering I see in my life. Thanks !!!
Yes! Thank you Dan, you're making me so happy with these videos! :D
Why did that make sense in the most confusing way possible? Thank you for this
This a best explanation i've seen in youtube about this theme. Thank you so much
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...
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
Daniel, you're so close to make a full 3D graphics engine!
I don’t watch the entire video but i’ve already liked
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.
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 RUclips now! AMAZING
Nice video, looking forward into higher dimensions!
Also a guest video would be nice, been a long time since the last
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!
Love it! love everything! Love coding! Love examples! Love humor! EVERYTHING!!
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)
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
16:20 i was screaming at my screen for the missing comma and extra 0
31:15 was the best part 🤣
Finally someone actually explained projection matrix's :D
Awesome video! Just what I needed for my advent of code problem
In a past life, Daniel was a mad scientist.
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
6:34 omg that looks familiar!
Thank you Linear Algebra & Matrix Theory!
A Giant at work. Thanks for making this video!
13:26 everytime I get an error in my code
Literally no body able to explain that simple projection matrix that simple, I was to give up 3d programming and my RUclips shows your video.
Shiffman “Oh boy! this work too fast. I didn’t want it to work that fast”.
All other programmers drop their mouth
Perfect for my Ti-84 CE-T Calculator
My favorite channel
Love the videos and your energy man!
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.
Enjoyed this one quite a lot!
Very talented young man!!! Love your video!
I have the same shirt. Same pinch!
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.
I hope you defined the direction of x y z.
It's quite confusing whether z is the vertical axis or y.
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 (;
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
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...
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?
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.
At 32:00 why did the cube all the sudden lost the distortion?
wondering the same thing, i think it's because points displayed in front of you are actually supposed to be behind you and not visible? did you ever find an answer to this? sorry to necro
"I can like DISTORT THE WORLD" followed by evil laughter. Fantastic video as usual, thanks Dan
Great videeo as ever. Well done!!
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.
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]
could i know where do you get (draw and render functions)?
thank you
Where can I learn more about this? I'm hoping to learn as much as possible. I really need to improve my canvas game.
You insane coder
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.
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
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?
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!
Amazing video, thank you!
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?
where to get all that java code?
Can you please send this code I am getting error.and please tell which app should I use for java in my phone
Very interesting video, math is just amazing.
Thank you, thank you for everything!
I know this is done in processing, but there's got to be some some way to use hardware acceleration for matrix operations.
Cool video, homie!
it's like a four dimensional hyperspace
I wonder how to draw colored faces so that only front ones are visible
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 😃
i love your channel
Same, inspiration for my own AI videos :)
Where can i find functions that he has written before and using now?
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.
How to decrease rotation speed?
If we use pictures, instead of lines and dots?
What will the projection matrix be if the camera will be in some other point say (10, 20, 7)
30:27 I have a problem in my mind because sometimes I can see what Daniel intended it to be and sometimes I see a deformed cube, is that only happening to me?
You mean distance = 1? Only happens there. Not at any other distance
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!
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.