Coding Challenge

In this coding challenge, I visualize a 4D Hypercube (aka "Tesseract") in Processing (Java). Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #112:...
🎥 Next video: • Coding Challenge #114:...
🎥 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...
🗄 Tesseract on Wikipedia: en.wikipedia.org/wiki/Tesseract
Videos:
🎥 Understanding 4D -- The Tesseract: • Understanding 4D -- Th...
🚂 3D Rendering with Rotation and Projection: • Coding Challenge #112:...
🚂 Matrix Math: • 10.6: Neural Networks:...
🚂 Matrix Multiplication for 3D Rendering: • Matrix Multiplication ...
🔴 Coding Train Live 148.2: • Coding Train Live #148...
Related Coding Challenges:
🚂 #112 3D Rendering with Rotation and Projection: • Coding Challenge #112:...
Timestamps:
0:00 Introducing today's topic: rendering a 4D hypercube
7:30 Create a P4Vector class
9:43 Extend the points array to have 16 points
13:06 Create the projection matrix
16:16 Stereographic projection
18:04 Connect the points
22:17 Add an offset to the connect function
26:26 Create rotation in the 4th dimension
29:49 Create a rotationXY matrix
36:52 Rotate around the w axis
40:23 We have now entered the 4th dimension!!
40:58 What dimension could you visualize?
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: kzbin.infojoin
🛒 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 #orthographicprojection #rotationmatrix #4dhypercube #tesseract #processing

[@jacobhiance8937]

"I'll refactor later..." would make for a great shirt.

[@jean-micheltorres6925]

I'll get one of these :-)

[@IbakonFerba]

I would defenitely buy it, I feel this so much! xD

[@dandanthedandan7558]

Actually, put flexible LED on your shirt and put this on display to amaze your friends and passerbies

[@kim15742]

clang-format

[@manikantaneerugatti5206]

hello sir, which programming language is this?

[@Jianju69]

4D doesn't rotate about axes; it rotates about *PLANES* .

[@TheCodingTrain]

This is a very important correction / clarification thank you!

[@Jianju69]

we'll figure all of this out together!

[@ffggddss]

The important thing to realize about rotations in n dimensions, is that the "basic" rotations *always* rotate within a plane. That is, there is a plane of rotation. There *is* still an "axis," but its dimension is n-2, so In two dimensions, n=2, the axis is a point. In n=3, the axis is a line. In n=4, the axis is a plane. Etc. In linear-algebra-speak, it is the invariant subspace of the rotation; the set of vectors that are invariant under the rotation. Fred

[@Lyle-xc9pg]

Yes!

[@jojolafrite90]

Nothing rotates "about" anything. Things rotate AROUND axes, or other things.

[@tobiumevolume9890]

Coding challenge #2312: Representing string theory in p17js!

[@whimsy5623]

What a terrifying sentence

[@harrymack3565]

i love how you visualizing 4d in a 3d world on a 2d screen made of 1d rows of 0d pixles.

[@YOM2_UB]

Reconstructed into 3D by our brains.

[@AlgyCuber]

technically those pixels are in 2d bc they’re not perfect points, they’re circles or some other shapes

[@humanoidx977]

Pixels are 3D. They're made of RGB LEDs, which is 3D.

[@AmazingVideoGaming]

Actually everything is 3d, if we zoom in enough,everything is made up of atoms(protons,nutrons...),which are 3d

[@martysh1226]

@@YOM2_UB projected as 2d in our eyes

[@Bunny99s]

People always get the concept of rotation wrong ^^. The fact that a rotation is around an "axis" is only true for 3d, no other dimension has this link. You don't have the concept of a rotation axis in 2d without using the 3rd dimension as helper. Rotations actually happens in 2d rotation planes. The 2d space only has one plane, the 2d space itself. 3d has exactly 3 planes. A 2d plane in 3d has exactly one normal vector. However in 4d we have 6 rotation planes and each 2d plane has two normal vectors. It's basically just the number of combinations you can make from the component count. In 3d it's XY, XZ. YZ. In 4d it's XY, XZ, XW, YZ, YW, ZW. Any rotation in 3d is a "single" rotation. So even you rotate in several planes at the same time you always get a single rotation within a rotated plane (where the normal is the rotation axis). In 4d you can actually have double rotations that are independet from each other. Keep in mind a rotation matrix only changes the coorindates where the sin and cos are. Every "1" in a rotation matrix means that this dimension stays unchanged. In 4d you have two "1s". So a double rotation would be a combination where you exchange the two 1s with another rotation. So (XY and ZW) or (XZ and YW) or (XW and YZ). This gets more complex when dealing with 5d (10 rotation planes), 6d (15 rotation planes) or 7d (21 rotation planes). btw: Doing a double perspective projection and only from the center of an object is a rather arbitrary choice for projecting 4d into 2d. Keep in mind that you can also offset (move) 4d objects in 4 different directions. Usually in 3d we work with homogeneous coordinates to allow translation to be applied through a matrix. Though that means we actually use 4d vectors and 4x4 matrices for ordinary 3d. Lifting that up one dimension we actually need a 5x5 matrix and 5d vectors to do proper 4d stuff. This is important since the power of matrices lies in the fact that you can simply combine them into one. So you finally have a single matrix that does all sorts of local space rotation, position offsets, projecting down to 3d as a single matrix. Successive perspective projections can't be done as the perspective divide can't be performed in a matrix. It's done by the homogeneous divide at the end. 4d (or higher dimensions in general) is / are really fascinating. It gives you a new way of thinking of fundamental measures. "0d" you only have a single point with no size and no location since the whole space is just a single point. Therefore an "object" in 0d doesn't require any components in a vector to describe that object. "1d" space consists of infinitely points in a single direction. Now a new measure is born: length. The length between two points in 1d is the sum of infinitely many points between the start and end point. "2d" space consists of infinitely many "1d spaces" stacked next to each other. We get a second independent direction and a new measure: "area". A finite area is the sum of infinitely many 2d lines which each contains infinitely many points. So points squared (p^2) "3d" space consists of infinitely many "2d spaces" stacked next to each other. Again a new independent direction is used here. The new measure is "3d volume". A finite 3d volume contains infinitely many finite 2s spaces which contains infinitely many 1d spaces which contains infinitely many points (p^3) "4d" space consists of infinitely many 3d spaces stacked next to each other in a new independent direction. The new measure is "4d volume". A finite 4d volume contains infinitely many finite 3d volumes. (p^4) The 8 3d cubes which represent the boundary of the 4d volume are just the "surface" of the 4d volume. Inside a tesseract there is infinitely 3d volume, just like in a 3d solid cube there is infinitely many area if you could chop up the 3d volume into infinitely many slices. Note that the sum of 3d space inside a 4d volume is non overlapping. So inside a 1x1x1 4d cube there would be enough 3d space to hold our entire universe :P though, just statistically. We have a continous 3d space. The 3d space inside a 4d hypercube is folded in a weird way.

[@TheCodingTrain]

Thanks for this comprehensive feedback!!

[@ewanarends5512]

Bendix Perschk so true

[@swiftjsulli]

Yess

[@helhel9753]

I know some of these words!

[@shepherds314]

I really appreciate the amount of work put into this comment to convey such an amount of information in a comprehensive way that's not entirely mathematical yet enough to grasp the context and understand it. Bravo. Bravo.

[@__-to3hq]

"looks like a completely insane person wrote this code when in fact a completely insane person did write this code" xD

[@ziggyzoggin]

This guy is so wholesome and his coding videos are really helpful for my own projects :) Thank you coding train!

[@rodrigoqteixeira]

Euclides: "Math is the language that describes the universe" modern matematitions creating formulas for the 4th dimention: We don't have of that here

[@greencoder7419]

Please don't make a Tessaract. We only have a few Avengers left.

[@kevnar]

"Any sufficiently advanced technology is indistinguishable from magic." - Arthur C. Clark

[@riuza9681]

4:12 when he says that, i tried to look at the cube while forcing me to ignore this illusion of 3D to just see 2D lines and dots and then the tesseract totally makes sense ! Thank you for that Mr coding train

[@ziggyzoggin]

Yep, if you try hard enough the wireframe cube rotating looks like a small square distorting and then becoming the outer square, just like the tesseract with cubes!

[@dandanthedandan7558]

Project a five-dimensional cube on a fourth-dimensional projection onto a three-dimensional construct onto a two-dimensional screen brought by a large amount of 0 dimensional pixels next :)

[@inv41id]

I mean if you really think about it the values of pixels are actually best represented as points in a three-dimensional colour space. Also if you want to add another layer to what you just said you should consider that the pixel data is actually stored in a one-dimensional array.

[@lkajsdflkasjdf1597]

A one dimensional array can still describe two dimensional space.

[@americanengineering2063]

he prob doesnt have enough ritalin for that

[@yesveryprofesionalnameyes6055]

Excuse wtf lol

[@samuelsimon4087]

@@yesveryprofesionalnameyes6055 lol

[@dandanthedandan7558]

I'm that guy that subscribed to this channel quite a while back and totally forgot about it, then I saw this video and clicked. *Then I remembered what kind of monstrosity I have brought myself into.*

[@sadhlife]

lmao go through the playlists one by one, it's a really great journey.

[@dandanthedandan7558]

@@sadhlife give me a minute, I need to get high first.

[@sadhlife]

DANDAN THE DANDAN nice.

[@harshsrivastava9570]

I definitely agree

[@aneon1273]

I just found this channel today and it's hella fun! Added to my subscriptions!

[@patanpaul6897]

Amazing series, continue with it! A dynamic programming series would be awesome too!

[@sachinkainth9508]

As much as I love putting each class in separate files and testing each class using TDD and using the latest version of every package I'm using and making sure I refactor my code as I go, I see the benefit of doing things in this way to get results quicker. This kind of coding looks like great fun.

[@truefiasco2637]

Really fun project! Made this in Pure Data ext, and am having lots of fun playing with all the possible variables!

[@johnnyserup5500]

You are so good at explaining this, thanks!

[@danielhazel7205]

You are more of an inspiration than all programming movies combined. I'd say you did masters in mathematics and physics then ventured into programming coz that's prolly the only way to explain it.

[@sarveshwarans8037]

Love your videos !! Huge fan of your excitement

[@GogiRegion]

I’m going to attempt to take the challenge of creating a 5D and further render.

[@0xKilty]

How did it go?

[@ethanhermsey]

Yes Dan! finally. I've heard you talk about making this for some time. nice work :)

[@reynalindstrom2496]

Thank's and love from Sweden !

[@patrykmierzynski6221]

You've inspired me to program. I love your vids

[@monkeyrobotsinc.9875]

and btw, thank you so much for teaching ME how to do this. i cant wait to try this in my game with unity!

[@scatterrealms5166]

I've just started learning to code and these videos are why!

[@TheCodingTrain]

Keep it up!

[@socolovalexandr]

Yeeeeessss!!!! I watched it!!! And now I'm going to clean my room from my brains all over the walls...

[@vowel1000]

This channel is the best resource for learning code 👍 thanks

[@RedCocoon]

The 4D cube is rendered in 3D matrix on 2D display by 0D pixels

[@sadhlife]

0D pixels would not be visible tbf

[@MattRose30000]

They are only 0D in theory when they are really 3D objects in real life.

[@jansustar4565]

in 1D array of pixels

[@_gekyumeman4127]

@@MattRose30000 the resolution is 0d though

[@MattRose30000]

@@_gekyumeman4127 yeah, something like (1280x720) would be one dimensional. But I was referring to the pixels being actual physical objects that emit light which are in reality 3 dimensional, but we interpret them as 0 dimensional points.

[@devashishrai1964]

You're just awesome man.

[@duality4y]

This video helped me just now figure out what i was doing wrong in code that i wrote like two years ago where it's a nbody sim and there are bodies flying around and i used matrices to rotate and scale/zoom but my distance scaling wasn't right and would warp the particles around the camera (like it's warping space like a massive object). so i am going to revisit that code! i can do this! thanks!

[@noodian3268]

Coding Challenge #5470 The black hole to the 34th dimension can now be opened via Javascript. The Coding Train has taken over all worldly systems, rendering him a god. The hyperspace travel's gotta be refactored later tho

[@hernandostefanamisola8043]

No, The Strillio Metadimensional Inception Rule will be refactored

[@annevandalej496]

Awesome ending!

[@shak7185]

Brilliant video and so entertaining as usual :)

[@soyitiel]

I love this dude

[@alexcubed4270]

This video was awesome

[@sotofpv]

I just challenged myself to recreate this with a slightly different method (maybe in theory it's the same) but very happy with the result. Basically grabbed the idea of a source of light somewhere out in the fourth dimension, then interpolated from that point through every vertex of the hypercube and see where it lands in the w=0 dimension. Worked like a charm :D

[@cristix11]

Love the jump scare

[@HKCmoris]

It's like projecting a cube onto a 1D space

[@gxglee5616]

This guy is so cool... I wish I listen more in my computer class

[@cindy8533]

coding with u from Kenya💜

[@jakefisher1638]

Why is this man the Bob Ross of coding

[@xuhaomin7707]

Playing with the same thing ! Love you !

[@krishnanshudey3831]

Wow really awesome

[@LIGHTRAYMultimedia]

Hahahaha. You are the best teacher ever! Congratulations!

[@ShranjaniShukla]

37:03 i am laughing so hard.

[@leandroaraujo4201]

This is probably the most underrated comment I've ever seen lol

[@eliashaider6857]

Awesome video 👌 Laughed so much when you were like: "this code now really looks like it was written by a mad person... And it was" 🤣🤣 Gotta jump into the 4th dimension myself after work 😄

[@graceyudha]

"Java is a weird place" I live in java, i am a weird person

[@ahmadyogi1340]

Yes brother

[@isaacgarcia2979]

JS!

[@hamidbakhtiari3986]

this guy is the perfect example for the word " nobody gets the right values at first try "

[@zarblitz]

Seeing this years late. Anyway what helped me understand how a tesseract is a projection of 4D space into 3D space, is to stare at your projection of a 3D cube into 2D space (the screen), and watch the points and planes change shape as it rotates. Watch how the trapezoid that represents one of the sides flattens as we start to view it "edge on", and watch how they intersect each other in 2D space. We know that intersection is an artifact of the projection into a lower dimension, just like the mind-bending intersections of a tesseract are an artifact of its projection into 3D (or really into a 2D representation of 3D). Try to break the illusion of it being 3D and see how the projection itself changes shape. Once I started to see it that way, looking at a projection of a 4D shape I better understood it as a projection, and stopped trying to see it in 3D.

[@redcartoonanimation654]

You just blown my mind....

[@elementallobsterx]

Hey dan! It's amazing to see how far you came with this channel! You truly are a genius!

[@gomezvillegasdaniel]

awesome!

[@SubparFiddle]

That ending was so epic... lol

[@vorobei-_-2075]

WOW! Incredible;)

[@monkeyrobotsinc.9875]

you did it!!!!!

[@luismiguelgallegogomez8000]

Just stumbled upon this video, proud to be one of the firsts hahaa, awesome video, and a great tutorial to the math of projections :) 10:32 Hahaha

[@juanluisclaure6485]

Ahora ya entiendo por que es un tren, por que nos das el pasaje. esta vez a la cuarta dimension projectada en 3D, gracias por tanto. Saludos desde Bolivia

[@cocadzp1257]

Waw it's awesome

[@ffggddss]

Thanks for that wonderful train ride! To me, the next interesting thing to do is to make some other 4D shapes and subject them to these same 4D rotations. There are, e.g., 6 regular polytopes (hypersolids) in 4D, of which the tesseract is just one. Some important attributes of these, are the numbers of vertices, V, edges, E, faces, F, and cells, C (3D faces). I'll put these into a 4-list: (V, E, F, C). The simplest one (which is the 4D edition of a simplex), is the regular pentatope, or tetrahedral pyramid. It makes the least interesting model for this, but it's still worth portraying; it's analogous to the tetrahedron; its cells are tetrahedra. It has (V, E, F, C) = (5, 10, 10, 5). Then there's the hypercube; tesseract; analogous to the cube; its cells are cubes. (V, E, F, C) = (16, 32, 24, 8) Next is the "dual" of the hypercube, the cross-polytope; 16-cell; analogous to the octahedron; its cells are tetrahedra. (V, E, F, C) = (8, 24, 32, 16) Then perhaps the most interesting, the "hyperdiamond;" 24-cell; not analogous to anything else in any number of dimensions; its cells are octahedra. (V, E, F, C) = (24, 96, 96, 24) The last two are really complex & cluttered, but fascinating nonetheless: The 120-cell; analogous to the dodecahedron; its cells are dodecahedra. (V, E, F, C) = (600, 1200, 720, 120) The 600-cell; analogous to the icosahedron; its cells are tetrahedra. (V, E, F, C) = (120, 720, 1200, 600) And there are plenty of other interesting polytopes; in 4D you can "cross" one polygon with another; e.g., square x square = hypercube. What this operation amounts to is, at every point (both boundary & interior!) of polygon #1 in xy-space, you erect polygon #2 in zw-space. The result has somewhat of a "hypertorus" feel to it. Fred

[@TheCodingTrain]

Oh, thank you for this feedback, this would be super fun to do yes!

[@ffggddss]

@@TheCodingTrain Yes!! Only trouble is getting coordinates for all those figures, and then, figuring out which edges to connect. Fred

[@michaeldamolsen]

From your examples, it looks like the Euler formula generalizes from V - E + F = 2, to V - E + F - C = 0 in 4D. I could not immediately establish whether this is true or why it might be, so I googled a bit and came upon this: www.ems-ph.org/journals/show_pdf.php?issn=0013-6018&vol=62&iss=4&rank=6 (it will return you a PDF file, so if that terrifies you, don't click the link)

[@ivelinmarkov8245]

The best video I have ever watched THANKS! Would you try 5D ?

[@lcmattern]

Weekend Project, get all the rotations + and extra dimension working. Should be fun little experiment.

[@Tordek]

What you really needed there is a variable size vector, like `class PVVector { float[] elems; PVVector(float elems...) { this.elems = elems } }`, so the matrix * vector multiplication just becomes a chaining of helpers: `return matToVec(matMul(matrix, vecToMat(vector)))`

[@TheCodingTrain]

Great suggestion!

[@jojolafrite90]

When you do stuff like that you must feel like Finn i Adventure time after he got the glasses that makes him super smart and he makes a 4-dimensional bubble.

[@mavriksc]

Laughed so hard 16:40 i feel this way so often.

[@__-to3hq]

same I lol-ed xD looks like a completely insane person wrote this code

[@toastyPredicament]

This helped me do the genetic solve.

[@thomaskishmanii2675]

The Cross. God is amazing. Love this video. God Bless.

[@ericrovell1970]

Good day, sir! Amazing video, as usual! Will you do a p5.js challenge of this too? Really want to learn / touch this in js :)

[@larvenkarlsson440]

I'm using this for a DnD closed room puzzel! ;)

[@aaronwong2773]

21:00 I love this part. Cool Debug.

[@fastterior]

I have officially entered the 4th dimension ♥️

[@PerryShops]

3:33 I feel like he was about to start talking about Flatland. Anyone else get that vibe?

[@hermannbarbato]

*we have now entered the fourth dimension*

[@tristunalekzander5608]

YOU ARE A MAD SCIENTIST

[@ranvirchoudhary929]

He sounds like a scientist in the intro till 5 or 6 mins

[@cryptover4491]

lol, I started to watch this vid at 4:29 pm the same time The Coding Train made the vid but just in a completely different day, year and month.

[@deadmusik9969]

6:51 i paused and watched, still thoroughly confused but hell lets roll with it, im learning even though im confused as hell..

[@TiagoTiagoT]

Lookup Urticator's 4D maze if you're into this; the writings on the site are quite interesting.

[@i_Hally]

I want to add a like for every time you use music

[@darkdelphin834]

19:55 That looked cool too

[@may007ank]

A line bound by two points is called a line segment.

[@listeningcosmos]

Blew my mind...

[@madghostek3026]

When you render 3D objects on 2D screen you have to, well, fit in 2D space so it gets chopped down, with 4D figures it gets cut even further. I wonder how would 4d objects look like in 3d space from for example laser visualisation, would this make rotating on W axis more clear?

[@toastyPredicament]

Oh love

[@shanzid01]

Literally making things which you can't even imagine 😂

[@juanfranciscogarciacasado6117]

Anybody know the origin or demonstration of the formula: w = 1 / (distance - v.w)?

[@emanuelmatlhaku4784]

Please create a 5D hypercube. you are awesome.

[@AshDan112]

“Smoke and Brain Matter will start leaking out of my nostrils” oh yeah, that’s hot xD!!!

[@faustorabatti2371]

Hello! I'm a follower of your courses and if may I suggest, it will be good for us have the "starter sketches" to train with you. Anyways, thanks for your lessons!

[@TheCodingTrain]

This is a great suggestion! Come and join the discord I would love to figure out how to do this better! thecodingtrain.com/discord

[@arto_1790]

not understand something feels bad, but half understand something feels even worse

[@tommulvey4752]

I mean if you template something like this , you could do any dimension since they just scale down

[@ShevkoMore]

36:53 : Actually, as I understand, we are usually rotating 2 dimensions (at least beacouse we can't rotate in 0 or 1D), not around one dimension ( or we can say we're rotating around all other dimensions. Infinity of them... So it's unreasonable)

[@ShevkoMore]

37:29 he is actually using the two-dimensional determination of rotation in his code.

[@random-0]

daam good

[@kokas466]

for the next video I would like to see a person in 4D

[@NatetheAceOfficial]

I'll just call the P4D library. Easy peazy.

[@shanzid01]

Holy crap...

[@DogeisCut]

thats acauly the shadow of the 4d object

[@Skullkid16945]

At the end, when it is rotating, its almost like its a cube rotating on itself or something. If you watch, the points will move away, but always come back to form a cube in the center, only to repeat. I love 4D stuff.

[@Carlosdreaming]

Great video Dan. I also watched the full version... By the way, why is this video hidden? Cheers!

[@TheCodingTrain]

It'll come out tomorrow, I release just one video per day even when more are ready. This also allows a viewer to notice an editing mistake I can correct before making public.

[@ClearlyCero]

I don't remember being worried about creating a singularity when i did homework back in school 🤔 maybe they were missing a trick