All geek questions in one place

Can someone explain the math how this cubic rotating script works?

If you go to the next link, you will see really cool Javascript modeling of a cube that rotates depending on the position of your mouse.

Modeling: here.

alt text

If you look at the source of rotation of the cube script, you will see:

<script type="text/javascript">

/* I wrote this script in a few minutes just for fun. It not made to win any
   competition. */

var dimension = 1, a = 0, b = 0, i = 27;
while (i--) document.write('<b id="l' + i + '">+</b>');

function f()
{
 i = 0;
 for (x = -dimension; x <= dimension; x += dimension)
  for (y = -dimension; y <= dimension; y += dimension)
   for (z = -dimension; z <= dimension; z += dimension)
   {
    u = x;
    v = y;
    w = z;
    u2 = u * Math.cos(a) - v * Math.sin(a);
    v2 = u * Math.sin(a) + v * Math.cos(a);
    w2 = w;
    u = u2; v = v2; w = w2;
    u2 = u;
    v2 = v * Math.cos(b) - w * Math.sin(b);
    w2 = v * Math.sin(b) + w * Math.cos(b);
    u = u2; v = v2; w = w2;
    var c = Math.round((w + 2) * 70);
    if (c < 0) c = 0;
    if (c > 255) c = 255;
    s = document.getElementById('l' + i).style;
    s.left = 300 + u * (w + 2) * 50;
    s.top  = 300 + v * (w + 2) * 50;
    s.color = 'rgb(' + c + ', ' + c + ', 0)';
    s.fontSize = (w + 2) * 16 + 'px';
    /* The Digg users missed depth sort, so here it is. */
    s.zIndex = Math.round((w + 2) * 10);
    i++;
   }
}

/* Using a timer instead of the onmousemove handler wastes CPU time but makes
   the animation much smoother. */
setInterval('f()', 17);

</script>

I looked at it several times, and I still do not understand how points are calculated for a cube. Is this used by "Euler Rotations"? One of the big problems I ran into is using variable names with one letter, which mean nothing to me.

- , ? , , .

+3
2
  • 27 (3x3x3) + ( bold html node)
  • x, y z -1- > 0- > 1 ( 27 (3x3x3) )
  • :
  • z ( 2d-)
  • x b ( 2d- )
  • c ( z-) [0..255] ( [depth-cueing]
  • html- (300/300)

, , , a b body:

<body onmousemove="a = event.clientX / 99; b = event.clientY / 99;"

:

  • - ( ) a
  • a - z
  • b - x
  • c -
  • x, y, z - [-1, -1, -1] - [1,1,1]
  • u, v, w - z
  • u2, v2, w2 - x
  • s - htmlnode

, , .

wikipedia:

http://en.wikipedia.org/wiki/Rotation_matrix#Dimension_three

, 3d: z- 2d-. , "" ( , , , ). 2d- . alt text

( .. - , ):

http://en.wikipedia.org/wiki/Perspective_projection#Perspective_projection

x' = x * (eye_dist / eye_dist + z)
y' = y * (eye_dist / eye_dist + z)

, , 3d .

+7

, . 2D :

--     --   --             -- --     --
| x_new |   | cos(a) -sin(a) | | x_old |
|       | = |               | |       |
| y_new |   | sin(a)  cos(a) | | y_old |
---    --   --             -- --     --

a - , .

, , transformatoin. , ( , ASCII), , (0,1) (sqrt(2)/2,sqrt(2)/2) ( 45 ).

x_new = x_old * cos(45) - y_old * sin(45) = 1 * sqrt(2)/2 - 0 * sqrt(2)/2 = sqrt(2)/2
y_new = x_old * sin(45) + y_old * cos(45) = 1 * sqrt(2)/2 + 0 * sqrt(2)/2 = sqrt(2)/2

(1,0), 45 :

x_new = x_old * cos(45) - y_old * sin(45) = sqrt(2)/2 * sqrt(2)/2 - sqrt(2)/2 * sqrt(2)/2 = 0
y_new = x_old * sin(45) + y_old * cos(45) = sqrt(2)/2 * sqrt(2)/2 + sqrt(2)/2 * sqrt(2)/2 = 1

3D , , , mutliplication XZ.

+2

Source: https://habr.com/ru/post/1717283/

More articles:


All Articles