Coding Challenge
Vložit
- čas přidán 11. 06. 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: 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...
#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.
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.
"I'm going to reward myself with a piece of space melon"
This is the future :P
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
Shoot, now I'm hyped to try implement this myself... Well, here goes my night
You're so good-natured that you make coding fun.
18:44
"This works to fast"
-no programmer ever
Yes! Thank you Dan, you're making me so happy with these videos! :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 video inspired me to code my own 3D modelisation software for my final school project. So thank you so much!
First nice and easy explanation of 3D rendering I see in my life. Thanks !!!
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!!
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?
Was doing this at work today, came back to your video for reference. Thanks Dan :D
This a best explanation i've seen in youtube about this theme. Thank you so much
Love it! love everything! Love coding! Love examples! Love humor! EVERYTHING!!
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
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.
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 CZcams now! AMAZING
Finally someone actually explained projection matrix's :D
Love the videos and your energy man!
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
Amazing video, thank you!
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
I don’t watch the entire video but i’ve already liked
Awesome video! Just what I needed for my advent of code problem
Why did that make sense in the most confusing way possible? Thank you for this
Enjoyed this one quite a lot!
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!
Nice video, looking forward into higher dimensions!
Also a guest video would be nice, been a long time since the last
A Giant at work. Thanks for making this video!
thanks to your tutorial i created something that does essentially the same thing in pico8. this is a-ma-zing, keep it up
Very talented young man!!! Love your video!
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.
Great videeo as ever. Well done!!
Really interesting video thank you and keep up the good work 😃
16:20 i was screaming at my screen for the missing comma and extra 0
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)
My favorite channel
Daniel, you're so close to make a full 3D graphics engine!
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.
I love your videos and thanks you helped me a lot with that video tho!
13:26 everytime I get an error in my code
You r the best teacher
I have the same shirt. Same pinch!
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 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
I love to learn a lot from you..
I love this😍😍💻
Very interesting video, math is just amazing.
6:34 omg that looks familiar!
Thank you Linear Algebra & Matrix Theory!
You insane coder
You are amazing 🤩
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...
Cool video, homie!
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 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!
In a past life, Daniel was a mad scientist.
THANKS
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.
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.
Awesome
its amazing
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!
thank you!!!!
i love your channel
Same, inspiration for my own AI videos :)
You are my Idol ♥
could i know where do you get (draw and render functions)?
thank you
thats cool sir
Where can I learn more about this? I'm hoping to learn as much as possible. I really need to improve my canvas game.
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;
}
U RE GREAT
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.
Shiffman “Oh boy! this work too fast. I didn’t want it to work that fast”.
All other programmers drop their mouth
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?
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?
Love your vedio
it's like a four dimensional hyperspace
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.
will machine learning and ml5 be available in processing itself sometime?
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.
Cool
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!
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?
I hope you defined the direction of x y z.
It's quite confusing whether z is the vertical axis or y.
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?
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.
I know this is done in processing, but there's got to be some some way to use hardware acceleration for matrix operations.
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
WOW!
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
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