p5.dimensions.js icon indicating copy to clipboard operation
p5.dimensions.js copied to clipboard

nD Visulization

Open max0410 opened this issue 8 years ago • 15 comments

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

max0410 avatar Feb 18 '17 04:02 max0410

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.

Smilebags avatar Feb 18 '17 04:02 Smilebags

image Here is a crappy drawing of 4d cube

max0410 avatar Feb 18 '17 04:02 max0410

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

Smilebags avatar Feb 18 '17 04:02 Smilebags

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

max0410 avatar Feb 18 '17 04:02 max0410

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

Smilebags avatar Feb 18 '17 04:02 Smilebags

image

5d projection My brain hurts now

max0410 avatar Feb 18 '17 04:02 max0410

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

max0410 avatar Feb 18 '17 04:02 max0410

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

Smilebags avatar Feb 18 '17 04:02 Smilebags

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

max0410 avatar Feb 18 '17 16:02 max0410

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.

max0410 avatar Feb 18 '17 16:02 max0410

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

Smilebags avatar Feb 18 '17 23:02 Smilebags

Nice work with your code, it looks good!

Smilebags avatar Feb 18 '17 23:02 Smilebags

Thanks!

max0410 avatar Feb 19 '17 03:02 max0410

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

max0410 avatar Feb 19 '17 17:02 max0410

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

Smilebags avatar Feb 26 '17 00:02 Smilebags