如何在 processing.js 中更改角度模式？

Question

可汗学院 processing.js 使用度数作为角度值的默认值，但您可以通过以下方式修改它：

angleMode("radians");

Processing.js默认使用弧度，但文档中提到了角度模式（这里作为旋转函数的参数）：

angle float: angle of rotation specified in radians or degrees depending on the current angle mode

但是我没有找到改变它的功能。 rotate函数本身的代码提示没有degree模式：

Drawing2D.prototype.rotate = function(angleInRadians) {
  modelView.rotateZ(angleInRadians);
  modelViewInv.invRotateZ(angleInRadians);
  curContext.rotate(angleInRadians);
};

有没有办法改变角度模式？

Answer 1

你在哪里读到你可以改变它？那将是我们需要修复的旧文档。

使用函数弧度() 和度数() 进行转换。例如：

代码：

// Get the sine of 90 degrees
float s = sin(radians(90));

Answer 2

这是个好问题，让我摸不着头脑。但据我所知，这只是参考文献中的错字。标准 Processing.js 没有 angleMode 函数。这很容易通过在 source code.

中执行 ctrl+f 来确认

那么，为什么它会出现在参考文献中？ angleMode 函数出现在两个地方：

p5.js has an angleMode 函数。这就像 Processing.js，只是 JavaScript 一侧更重。
Khan Academy has an angleMode 变量。他们似乎已将其添加到标准 Processing.js.

我的猜测是可汗学院和 Processing.js 有一些共同的发展根源。它们都是由 John Resig 开发的。所以一些初始代码（和文档）可能是复制粘贴工作。在某些时候，angleMode 包含在文档中，但不在源代码中。

您可以在 Processing.js 网站的 GitHub 上提交问题。

Processing.js 仅支持弧度（虽然您可以使用 radians() 和 degrees() 函数轻松转换，但可汗学院默认使用度数。因此您可以考虑修改任何后续的 Khan使用弧度而不是度数的学院代码：

void setup(){
   angleMode = "radians";
}

那么您从那里获取的任何代码都将与标准 Processing.js 兼容，减去 angleMode 行。

Answer 3

Khan processing.js (pjs) 代码本身无法更改模式。所以你必须转换这些值，正如 Ravi Sharma 在他的回答中所写的那样。

因为我不想那样做，所以在正常 processing.js / web 环境中使用 Khan 原始程序运行，这就是我所做的：

(就是把度数转为弧度，还有鼠标键盘输入)

var canvas = document.getElementById("canvas");                                                                                                                                                                                                                                                                         
var processing = new Processing(canvas, function(processing) {
    processing.size(400, 400);
    processing.background(0,0,0,0);
    processing.sbShow = false;

    var mouseIsPressed = false;
    $(".container").on("mousedown touchstart", function(e) {
        mouseIsPressed = true;
        processing.mouseX = e.pageX;
        processing.mouseY = e.pageY;
        processing.sbShow = false;
    }).on("mouseup touchend", function(e) {
        mouseIsPressed = false;
        processing.mouseX = e.pageX;
        processing.mouseY = e.pageY;
    }).on("mousemove touchmove", function(e) {
        processing.mouseX = e.pageX;
        processing.mouseY = e.pageY;
    });
    processing.mousePressed = function () { mouseIsPressed = true; };
    processing.mouseReleased = function () { mouseIsPressed = false; };

    var keyIsPressed = false;
    processing.keyPressed = function () { keyIsPressed = true; };
    processing.keyReleased = function () { keyIsPressed = false; };

    function getSound(s) {
        var url = "sounds/" + s + ".mp3";
        return new Audio(url);
    }

    function playSound(s) {
        s.play();
    }

    function getImage(s) {
        var url = "img/" + s + ".png";
        //processing.externals.sketch.imageCache.add(url);
        return processing.loadImage(url);
    }

    var rotateFn = processing.rotate;
    processing.rotate = function(angle) {
        rotateFn(processing.radians(angle));
    }
    var cosFn = processing.cos;
    processing.cos = function(angle) {
        return cosFn(processing.radians(angle));
    }
    var sinFn = processing.sin;
    processing.sin = function(angle) {
        return sinFn(processing.radians(angle));
    }

    with (processing) {
    ///////////////////////////////////////////////////////////////////////////////////////////////////
    // Insert original Khan academy pjs code (default is degrees) ...

    /////////////////////////////////////////////////////////////////////////////////////////////
    };

    if (typeof draw !== 'undefined') processing.draw = draw;
});

注意：这还不完整。缺少 tan、atan、atan2 等的转换。

如何在 processing.js 中更改角度模式？

How to change angle mode in processing.js?

processing.js

degrees

radians

khan-academy