Search code examples
processing.jsdegreesradianskhan-academy

How to change angle mode in processing.js?


Khan Academy processing.js uses degrees as default for angle values, but you can modify it by:

angleMode("radians");

Processing.js uses radians as default, but the documentation refers to an angle mode (here as a parameter of rotate function):

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

But I didn't find a function to change it. The code of the rotate function itself suggest that there is no degree mode:

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

Is there a means to change the angle mode?


Solution

  • There is no way to change the mode in the Khan processing.js (pjs) code itself. So you have to convert the values, as Ravi Sharma wrote in his answer.

    As I didn't want to do that, to use Khan orginal programs as they are to run in normal processing.js / web environments, that's what I did:

    (That is not only converting degrees to radians, but also the mouse and keyboard input)

    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;
    });
    

    Note: This is not complete. There are conversions missing for tan, atan, atan2 etc.