Coding Challenge

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: https://thecodingtrain.com/challenges...

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...

🎥 Previous video:    • Coding Challenge #111: Animated Sprites  
🎥 Next video:    • Coding Challenge #113: 4D Hypercube (...  
🎥 All videos:    • Coding Challenges  

References:
💾 Matrix Multiplication: http://matrixmultiplication.xyz
🗄 Rotation Matrix on Wikipedia: https://en.wikipedia.org/wiki/Rotatio...
🗄 3D Projection on Wikipedia: https://en.wikipedia.org/wiki/3D_proj...

Videos:
🚂 Matrix Math:    • 10.6: Neural Networks: Matrix Math Pa...  
🚂 Matrix Multiplication for 3D Rendering:    • Matrix Multiplication for 3D Rendering  
🔴 Coding Train Live 148.1:    • Coding Train Live #148.1: 3D Renderin...  

Related Coding Challenges:
🚂 #26 3D Supershapes:    • Coding Challenge #26: 3D Supershapes  
🚂 #113 4D Hypercube (aka 'Tesseract'):    • Coding Challenge #113: 4D Hypercube (...  
🚂 #142 Rubik's Cube:    • Coding Challenge #142: Rubik's Cube P...  

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: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...

#3drendering #projectionmatrix #perspectiveprojection #rotationmatrix #processing