Как я могу сделать эти функции processing.js в javascript?

Question

В этом уроке: https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/rotating-3d-shapes показано, как создавать 3d-фигуры и вращать их. Я следовал шаги, воссоздающий все в JavaScript вместо Processing.js, но не может по каким-то причинам сделать эти функции (в JavaScript):

var rotateY3D = function(theta) { 
    var sinTheta = sin(theta); 
    var cosTheta = cos(theta); 
    for (var n = 0; n < nodes.length; n++) { 
     var node = nodes[n]; 
     var x = node[0]; 
     var z = node[2]; 
     node[0] = x * cosTheta - z * sinTheta; 
     node[2] = z * cosTheta + x * sinTheta; 
    } 
}; 

Это была моя попытка:

var rotateZ3D = function (theta) { 
     var sinTheta = Math.sin(theta); 
     var cosTheta = Math.cos(theta); 
     for (var n = 0; n<nodes.length; n++) { 

      var x = nodes[n][0]; 
      var y = nodes[n][1]; 
      nodes[n][0] = x * cosTheta - y * sinTheta; 
      nodes[n][1] = y * cosTheta + x * sinTheta; 
     } 
} 

Мог бы кто-нибудь сказать мне, что я делаю неправильно, или если мне нужно пойти по этому поводу по-другому?

Answer 1

Проблема первоначально заключалась в использовании функций «sin» и «cos». Ваш theta был в градусах, а встроенные в javascript - радиан.

(При необходимости детали преобразования можно найти в комментариях вопрос)

После фиксации, что проблема была с окружающим кодом.

(Вот скрипка с кодом: http://jsfiddle.net/bvqswvnL/1/)

первого увидеть какие результаты вращения следует вызвать функцию draw ПОСЛЕ rotateZ3D один.

Чтобы показать результат (а функция работает) Я добавил setInterval поэтому точка постоянно повернуты и рисовать.

также:

• Добавлен board.restore(); до конца функции так преобразования не «накапливаются» draw;
• Изменено board.lineTo(node1[1], node1[1]) к board.lineTo(node1[0], node1[1]) (думает, это было действительное намерение;

(Вот скрипка с результатом http://jsfiddle.net/bvqswvnL/2/)