Smilebags / p5.dimensions.js

An addon for p5.js which adds support for higher dimensional calculations.
72 stars 24 forks source link

nD Visulization #24

Open max0410 opened 7 years ago

max0410 commented 7 years ago

Looking into the code of this website I see it uses a 3d javascript library called X3D. The things they are showing are 3d projections of 4d objects. For example, are eyes can not see 3d, they see 2d. So, our life is a 2d projection of a 3d world. Pretty deep right. So for in order for the nD Visualization to work, we will have to take our nD data and project it on to a 3d canvas, most likely using p5js's tool for 3d objects. So we just have to figure out how to project nD objects to 3d. I have been researching on this.

2d projection of 0d hypercube image

2d projection of 1d hypercube image

2d projection of 2d hypercube image

2d projection of 3d hypercube image

2d projection of 4d hypercube image

2d projection of 5d hypercube image

3d projection of a 4d hypercube http://codepen.io/max0410/pen/zNQQQM

Smilebags commented 7 years ago

Great work. Yes, projection matrices are what we will need for that. A projection matrix for 3>2 might look like this: (x',y') = (x/z, y/z) So, what we need to do is the same thing from 4 to 3. I think the best way to do this will to be first implement a matrix function which can take a nVector and another matrix argument, and return the resulting nVector. Are you familiar with matrices? If so would you like to start implementing a function for doing that?

Maybe we should define an nMatrix first, as a standard which we can always base the functions off. I'll work on that now.

max0410 commented 7 years ago

image Here is a crappy drawing of 4d cube

Smilebags commented 7 years ago

Yeah, that looks right. Well, it is a 2D projection of a 3D projection of a 4D cube.

max0410 commented 7 years ago

I was just about to post a 2d projection of a 5d object If we get the 2d projections down, then we ccan do the 3d ones

Smilebags commented 7 years ago

Yep. I just committed an initial idea for how to implement matrices, but not anywhere near complete.

max0410 commented 7 years ago

image

5d projection My brain hurts now

max0410 commented 7 years ago

Ok, I'm going to figure out p5js's 3d stuff.

Smilebags commented 7 years ago

That would be great. There's quite a lot there.

max0410 commented 7 years ago

Here is a 3d projection of a 4d wireframe. http://codepen.io/max0410/pen/xgNWjG

max0410 commented 7 years ago

I used custom shapes so I could create just a wireframe, I am trying to find a way to just use box(), and then have translucent faces.

Smilebags commented 7 years ago

Translucency is pretty complex in simple engines like webGL, you can look it up but it might be difficult.

Smilebags commented 7 years ago

Nice work with your code, it looks good!

max0410 commented 7 years ago

Thanks!

max0410 commented 7 years ago

I created an adjustable 4d hypercube: http://codepen.io/max0410/pen/zNQQQM Now I will use the hypercube4d() function to create a 5d hypercube!

Smilebags commented 7 years ago

Looks good! Check out my new example and see if you can extend it. :)