Coding Challenge
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 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] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 1](http://i.ytimg.com/vi/Qs5zdBqLn_8/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.
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.
the explanation and the analogy with the shadow were just amazing
18:44
"This works to fast"
-no programmer ever
Yes! Thank you Dan, you're making me so happy with these videos! :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
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!!
"I'm going to reward myself with a piece of space melon"
This is the future :P
This video inspired me to code my own 3D modelisation software for my final school project. So thank you so much!
You're so good-natured that you make coding fun.
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
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
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
First nice and easy explanation of 3D rendering I see in my life. Thanks !!!
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
I saw the content on the slack several days ago and I can saw it on TH-cam now! AMAZING
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 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
Love the videos and your energy man!
Love it! love everything! Love coding! Love examples! Love humor! EVERYTHING!!
Shoot, now I'm hyped to try implement this myself... Well, here goes my night
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.
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
Amazing video, thank you!
Enjoyed this one quite a lot!
Nice video, looking forward into higher dimensions!
Also a guest video would be nice, been a long time since the last
Thank you, thank you for everything!
thanks to your tutorial i created something that does essentially the same thing in pico8. this is a-ma-zing, keep it up
I don’t watch the entire video but i’ve already liked
Very talented young man!!! Love your video!
Awesome video! Just what I needed for my advent of code problem
Great videeo as ever. Well done!!
A Giant at work. Thanks for making this video!
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)
Finally someone actually explained projection matrix's :D
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.
Good that you fixed that extra zero, was making me crazy that it was working even though that typo
same lol
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.
Really interesting video thank you and keep up the good work 😃
Daniel, you're so close to make a full 3D graphics engine!
I have the same shirt. Same pinch!
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...
I love to learn a lot from you..
I love your videos and thanks you helped me a lot with that video tho!
Very interesting video, math is just amazing.
16:20 i was screaming at my screen for the missing comma and extra 0
I love this😍😍💻
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
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.
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
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!
13:26 everytime I get an error in my code
My favorite channel
You are amazing 🤩
Awesome
You insane coder
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?
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.
its 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.
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.
You are my Idol ♥
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!
thank you!!!!
6:34 omg that looks familiar!
Thank you Linear Algebra & Matrix Theory!
will machine learning and ml5 be available in processing itself sometime?
You r the best teacher
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.
In a past life, Daniel was a mad scientist.
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!
i love your channel
Same, inspiration for my own AI videos :)
could i know where do you get (draw and render functions)?
thank you
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?
thats cool sir
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]
U RE GREAT
I hope you defined the direction of x y z.
It's quite confusing whether z is the vertical axis or y.
Love your vedio
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.
Shiffman “Oh boy! this work too fast. I didn’t want it to work that fast”.
All other programmers drop their mouth
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
Where can i find functions that he has written before and using now?
I know this is done in processing, but there's got to be some some way to use hardware acceleration for matrix operations.
Hi I get an error trying to run P3D on my mac and google says it might be an OS problem. How did you get it to work on your computer?
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...
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?
I want to make a program that will accept length, width and height from user at run time. Based on the user input a 3d box will be created. Can I achieve this using Java Applet or Swing? if not then what programming language and tools I need to use?
So if I would like to fill the quads with some color, how can I be sure that front polygons would be drawn after rear ones so they are not overlapping?
Oh, this is a good extra challenge! You would have to "z sort" the shapes to draw from back to front.
and what if I want them to be intersecting?)))
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?