StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<ol> <li>he writes 27 (3x3x3) <strong>+</strong> (in a bold html node)</li> <li>he iterates over x,y and z axis each from -1->0->1 (so reaching all 27 (3x3x3) points of this cube)</li> <li>so for each point he will do :</li> <li>a rotation around z-axis by a (simple 2d-rotation) </li> <li>a rotation around x-axis by b (simple 2d-rotation again) </li> <li>clamping the value c (which is just a scaled z-coord) into [0..255] (using this as color [depth-cueing]</li> <li>get html-nodes and place them around (300/300) with a simple perspective approach</li> <li>setting color and size according to the depht</li> </ol> <p>The important thing you forget to mention is that global a and b are set in body tag:</p> <pre><code><body onmousemove="a = event.clientX / 99; b = event.clientY / 99;" </code></pre> <p>variable list:</p> <ul> <li>i is just a counter (no function) a</li> <li>a is the angle around z-axis </li> <li>b is angle around x-axis </li> <li>c is color-intensity </li> <li>x,y,z is coordinate in a space between [-1,-1,-1]-[1,1,1]</li> <li>u,v,w are rotated points around z-axis </li> <li>u2,v2,w2 are rotated points around x-axis </li> <li>s is the htmlnode</li> </ul> <p>He used a similar approach as euler angles, but he uses only two axis, so there are not the implicite limitations of using euler angles. </p> <p>For more information about rotations in three dimensions look into wikipedia:</p> <p><a href="http://en.wikipedia.org/wiki/Rotation_matrix#Dimension_three" rel="nofollow noreferrer">http://en.wikipedia.org/wiki/Rotation_matrix#Dimension_three</a></p> <p>Also note, that his projections is not real 3d: he does not a divide by z-coordinate to project into 2d-space. So the depth is "distorted" (difficult to explain, but if you connect the crosses, they will not form a cube, but a distorted cube). In a real 2d-projection, straight lines will form to straight lines again. <img src="https://imgur.com/qWfBO.png" alt="alt text"></p> <p>for correct perspective projection look into this article(do not get confused by the matrix stuff.. just the diagram and a simple intercept theorem is all you need):</p> <p><a href="http://en.wikipedia.org/wiki/Perspective_projection#Perspective_projection" rel="nofollow noreferrer">http://en.wikipedia.org/wiki/Perspective_projection#Perspective_projection</a></p> <pre><code>x' = x * (eye_dist / eye_dist + z) y' = y * (eye_dist / eye_dist + z) </code></pre> <p>for such a simple approach it is ok however, serious 3d will work with homogeneous coordinates. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload