logo标签列表

如何将可汗学院的计算机程序离线运行或嵌入到我的网站中？

javascriptprocessing.jskhan-academy
13
4个回答
17
Khan Academy使用Processing.js，这是一个与<canvas>元素交互的JavaScript库。虽然Processing实际上是一种独立的编程语言，但Khan Academy仅使用仅基于JavaScript的Processing.js代码。
因此，您需要设置一个导入Processing.js的网页，设置一个<canvas>并在其上构建一个Processing.js实例。最后，您需要确保您的Khan Academy代码具有Processing.js实例的所有成员（我使用with完成此操作），以及类似于Khan Academy对Processing.js的小修改的等效内容，如mouseIsPressed和getImage。
以下是一些已经为我工作的样板文件。可能需要进一步开发才能使其适用于更复杂的示例；请在找到不起作用的示例时发布评论。
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    var processing = new Processing(canvas, function(processing) {
        processing.size(400, 400);
        processing.background(0xFFF);

        var mouseIsPressed = false;
        processing.mousePressed = function () { mouseIsPressed = true; };
        processing.mouseReleased = function () { mouseIsPressed = false; };

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

        function getImage(s) {
            var url = "https://www.kasandbox.org/programming-images/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        }

        // use degrees rather than radians in rotate function
        var rotateFn = processing.rotate;
        processing.rotate = function (angle) {
            rotateFn(processing.radians(angle));
        };

        with (processing) {


            // INSERT YOUR KHAN ACADEMY PROGRAM HERE


        }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });
  </script>
</body>
</html>
你能否将这个发布到gist.github.com，并写一个许可前言，以便我可以在自己的代码中使用它？ - Ape-inago
我相信，由于在Stack Overflow上发布，它已经获得了CC BY-SA的许可。这对你有用吗？ - Robert Tupelo-Schneck
我知道那个，但我不喜欢假设别人知道那个条款。谢谢你的许可 :) - Ape-inago
这对我尝试过的大多数程序都完美运行。其中有几个动画速度过快，但希望我能找到解决方法。 - thinsoldier
@thinsoldier：我猜太快的动画是因为processing.js处理弧度，而Khan Academy处理角度。如果你在Khan Academy中切换到弧度模式（angleMode =“radians”），那么它就可以正常工作了。 - Michael
3

对Robert答案的补充：

Processing.js默认使用弧度作为角度值，Khan Academy JS则使用度数。如果在Robert上面的代码中增加以下几行（在with语句之前），那么您就可以像KA一样使用旋转命令。

var rotateFn = processing.rotate;
processing.rotate = function(angle) {
    rotateFn(processing.radians(angle));
}
2
我已经创建了一个脚本，可以解决这个问题。您可以在其.js文件顶部的注释中阅读其文档。 https://github.com/vExcess/libraries/blob/main/runPJS.js 以下是它的最基本用法：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Using PJS in HTML</title>
</head>
<body>

    <script class="pjs-src" type="data">
        // WRITE PROCESSING.JS CODE HERE
        background(255, 0, 0);
    </script>
  
    <!-- import my script which will automatically run the PJS code -->
    <script src="https://cdn.jsdelivr.net/gh/vExcess/libraries@main/runPJS.js"></script>

</body>
</html>

您可以在此处查看其演示： https://www.khanacademy.org/computer-programming/how-to-use-easily-use-processingjs-in-html/6388181215264768 使用我的脚本将运行Khan Academy版本的PJS，这意味着getImage()等函数将起作用(除了某些图片由于未知原因拒绝加载)，而angleMode默认为degrees。它还会为您解决图像异步加载的问题。您可以运行几乎所有来自Khan Academy的程序，无需对代码进行任何修改。需要注意的是，它目前不支持KA的getSound/playSound。
1

抱歉我回答有点晚。但是我已经自己解决了这个问题...

你可以克隆这个代码库或者按照下面的说明进行操作:

或者你可以像这样设置: 在你的index.html文件中引用这三个文件的源代码:

Processing.js:

https://raw.githubusercontent.com/Khan/processing-js/66bec3a3ae88262fcb8e420f7fa581b46f91a052/processing.js

loadKa.js:

这是用于将多个独立文件一起加载的生产代码：

!(function(window, JSON, localStorage)
{
    function createProcessing()
    {
        var args = Array.prototype.slice.call(arguments);
        args.push({ beginCode: "with(processing)\n{", endCode: "}"});
        var any = combine.apply(this, args);

        this.cache = window.cache = {};
        this.cache.loadedImages = window.cache.loadedImages = {};
        this.cache.imageNames = window.cache.imageNames = [
            "avatars/aqualine-sapling", 
            "avatars/aqualine-seed", 
            "avatars/aqualine-seedling", 
            "avatars/aqualine-tree", 
            "avatars/aqualine-ultimate", 
            "avatars/avatar-team", 
            "avatars/duskpin-sapling", 
            "avatars/duskpin-seed", 
            "avatars/duskpin-tree", 
            "avatars/duskpin-ultimate", 
            "avatars/leaf-blue", 
            "avatars/leaf-green", 
            "avatars/leaf-grey", 
            "avatars/leaf-orange", 
            "avatars/leaf-red", 
            "avatars/leaf-yellow", 
            "avatars/leafers-sapling", 
            "avatars/leafers-seed", 
            "avatars/leafers-seedling", 
            "avatars/leafers-tree", 
            "avatars/leafers-ultimate", 
            "avatars/marcimus", 
            "avatars/marcimus-orange", 
            "avatars/marcimus-purple", 
            "avatars/marcimus-red", 
            "avatars/mr-pants", 
            "avatars/mr-pants-green", 
            "avatars/mr-pants-orange", 
            "avatars/mr-pants-pink", 
            "avatars/mr-pants-purple", 
            "avatars/mr-pants-with-hat", 
            "avatars/mr-pink", 
            "avatars/mr-pink-green", 
            "avatars/mr-pink-orange", 
            "avatars/old-spice-man", 
            "avatars/old-spice-man-blue", 
            "avatars/orange-juice-squid", 
            "avatars/piceratops-sapling", 
            "avatars/piceratops-seed", 
            "avatars/piceratops-seedling", 
            "avatars/piceratops-tree", 
            "avatars/piceratops-ultimate", 
            "avatars/primosaur-sapling", 
            "avatars/primosaur-seed", 
            "avatars/primosaur-seedling", 
            "avatars/primosaur-tree", 
            "avatars/primosaur-ultimate", 
            "avatars/purple-pi", 
            "avatars/purple-pi-pink", 
            "avatars/purple-pi-teal", 
            "avatars/questionmark", 
            "avatars/robot_female_1", 
            "avatars/robot_female_2", 
            "avatars/robot_female_3", 
            "avatars/robot_male_1", 
            "avatars/robot_male_2", 
            "avatars/robot_male_3", 
            "avatars/spunky-sam", 
            "avatars/spunky-sam-green", 
            "avatars/spunky-sam-orange", 
            "avatars/spunky-sam-red", 
            "avatars/starky-sapling", 
            "avatars/starky-seed", 
            "avatars/starky-seedling", 
            "avatars/starky-tree", 
            "avatars/starky-ultimate", 
            "creatures/Hopper-Happy", 
            "creatures/Hopper-Cool", 
            "creatures/Hopper-Jumping", 
            "creatures/OhNoes", 
            "creatures/OhNoes-Happy", 
            "creatures/OhNoes-Hmm", 
            "cute/Blank", 
            "cute/BrownBlock", 
            "cute/CharacterBoy", 
            "cute/CharacterCatGirl", 
            "cute/CharacterHornGirl", 
            "cute/CharacterPinkGirl", 
            "cute/CharacterPrincessGirl", 
            "cute/ChestClosed", 
            "cute/ChestLid", 
            "cute/ChestOpen", 
            "cute/DirtBlock", 
            "cute/DoorTallClosed", 
            "cute/DoorTallOpen", 
            "cute/EnemyBug", 
            "cute/GemBlue", 
            "cute/GemGreen", 
            "cute/GemOrange", 
            "cute/GrassBlock", 
            "cute/Heart", 
            "cute/Key", 
            "cute/PlainBlock", 
            "cute/RampEast", 
            "cute/RampWest", 
            "cute/Rock", 
            "cute/RoofEast", 
            "cute/RoofNorth", 
            "cute/RoofNorthEast", 
            "cute/RoofNorthWest", 
            "cute/RoofSouth", 
            "cute/RoofSouthEast", 
            "cute/RoofSouthWest", 
            "cute/RoofWest", 
            "cute/Selector", 
            "cute/ShadowEast", 
            "cute/ShadowNorth", 
            "cute/ShadowNorthEast", 
            "cute/ShadowNorthWest", 
            "cute/ShadowSideWest", 
            "cute/ShadowSouth", 
            "cute/ShadowSouthEast", 
            "cute/ShadowSouthWest", 
            "cute/ShadowWest", 
            "cute/WoodBlock",
            "cute/Star", 
            "cute/StoneBlock", 
            "cute/StoneBlockTall", 
            "cute/TreeShort", 
            "cute/TreeTall", 
            "space/girl2", 
            "space/girl3", 
            "space/girl4", 
            "space/girl5", 
            "space/healthheart", 
            "space/minus", 
            "space/octopus", 
            "space/planet", 
            "space/plus", 
            "space/rocketship", 
            "space/star", 
            "space/3", 
            "space/4", 
            "space/5", 
            "space/6", 
            "space/7", 
            "space/8", 
            "space/9"
        ];

        window.links = {
            proxyUrl : "https://cors-anywhere.herokuapp.com/",
            image : ["https://www.kasandbox.org/third_party/javascript-khansrc/live-editor/build/images/", 
                     "https://github.com/Khan/live-editor/tree/master/images",
                     "https://www.kasandbox.org/programming-images/"],
        };

        var self = this;

        this.setup = function()
        {
            function code(processing)
            {
                processing.size(400, 400);
                processing.background(255, 255, 255);
                processing.angleMode = "degrees";

                processing.mousePressed = function() {};
                processing.mouseReleased = function() {};
                processing.mouseMoved = function() {};
                processing.mouseDragged = function() {};
                processing.mouseOver = function() {};
                processing.mouseOut = function() {};
                processing.keyPressed = function() {};
                processing.keyReleased = function() {};
                processing.keyTyped = function() {};

                processing.getSound = function(name)
                { 
                    return "Sound"; 
                };
                processing.playSound = function(sound) 
                { 
                    console.log(sound + " is not supported yet..."); 
                };

                processing.getImage = function(name)
                {
                    return (window.cache || self.cache).loadedImages[name] || processing.get(0, 0, 1, 1);
                };

                var lastGet = processing.get;
                processing.get = function()
                {
                    try{
                        return lastGet.apply(this, arguments);
                    }
                    catch(e)
                    {
                        if(arguments[2] !== 0 && arguments[3] !== 0)
                        {
                            console.log(e);
                        }else{
                            throw e;
                        }
                    }
                };

                processing.debug = function(event) 
                {
                    try{
                        return window.console.log.apply(this, arguments);
                    } 
                    catch(e) 
                    {
                        processing.println.apply(this, arguments);
                    }
                };
                processing.Program = {
                    restart: function() 
                    {
                        window.location.reload();
                    },
                    assertEqual: function(equiv) 
                    {
                        if(!equiv) 
                        {
                            console.warn(equiv);
                        }
                    },
                };
            }

            code = combine(new Function("return " + code.toString().split("\n").join(" "))(), any);

            var matched = code.toString().match("this[ ]*\[[ ]*\[[ ]*(\"KAInfiniteLoopSetTimeout\")[ ]*\][ ]*\][ ]*\([ ]*\d*[ ]*\);*");

            if(matched)
            {
                code = new Function("return " + code.toString().replace(matched[0], ""))();
            }

            window.canvas = document.getElementById("canvas"); 
            window.processing = new Processing(canvas, code);
        };

        this.imageProcessing = new Processing(canvas, function(processing)
        {
            try{
                processing.imageCache = JSON.parse(localStorage.getItem("imageCache"));
            }
            catch(e)
            {
                console.log(e);
            }

            if(!processing.imageCache)
            {
                processing.imageCache = {};
            }

            processing.getImage = function(name, callback, url)
            {
                if(name === undefined) { return get(0, 0, 1, 1); }

                url = url || window.links.image[0] + name.split(".")[0] + ".png";
                callback = callback || function() {};

                if(!processing.imageCache)
                {
                    var img = processing.loadImage(url);
                    callback(img, name);
                    return img;
                }
                if(processing.imageCache[name])
                {
                    var img = processing.loadImage(processing.imageCache[name]);
                    callback(img, name);
                    return img;
                }

                toDataURL(window.links.proxyUrl + url, function(dataUrl)
                {
                    processing.imageCache[name] = dataUrl; 
                    localStorage.setItem("imageCache", JSON.stringify(processing.imageCache));
                    callback(processing.imageCache[name], name);
                });

                return processing.loadImage(processing.imageCache[url] || url);
            };

            window.cache.imageNames.forEach(function(element, index, array)
            {
                processing.getImage(element, function(img, name)
                {
                    window.cache.loadedImages[name] = img;

                    if(index === array.length - 1)
                    {
                        (window.setTimeout || function(func)
                        {
                            return func.apply(this, arguments);
                        })
                        (function()
                        {
                            self.setup();
                        }, 50);
                    }
                });
            });
        });
    }

    function combine(a, c)
    {
        var args = Array.prototype.slice.call(arguments);
        var config = {};

        var funcArgs = "";
        var join = "";
        for(var i = 0; i < args.length; i++)
        {
            if(typeof args[i] === "object")
            {
                config = args[i];
                continue;
            }

            var to = args[i].toString();

            var temp = to.substring(to.indexOf('(') + 1, to.indexOf(')'));

            if(temp !== "" && temp !== " ")
            {
                funcArgs += temp + ",";
            }

            join += to.slice(to.indexOf('{') + 1, -1);
        }

        funcArgs = funcArgs.slice(0, -1);

        return new Function("return function any(" + funcArgs + "){" + (config.beginCode || "").replace("\n", "") + join + (config.endCode || "") + "}")();
    }

    function toDataURL(url, callback) 
    {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() 
        {
            var reader = new FileReader();
            reader.onloadend = function() 
            {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }

    return {
        createProcessing: window.createProcessing = this.createProcessing = createProcessing,
        toDataURL: window.toDataURL = this.toDataURL = toDataURL,
        combine: window.combine = this.combine = combine,
    };
}( 
    (window || {}), 
    (JSON || { stringify: function() { return "{}"; }, parse: function() { return {}; } }), 
    (localStorage || { getItem: function() { return {} }, setItem: function() {}, removeItem: function() {} })
));

Index.js:

在你的index.js文件中 用法:
function main()
{
      //Your code here (Trust me it really works!)
}

createProcessing(main);

你也可以将更多的参数作为函数添加到createProcessing函数中。 是的，我已经拥有了除声音以外的一切，有时（很少）还有夸张的控件！

我正在寻找这个东西，为我的孩子的项目使用。这个解决方案可以解决异步加载图片的问题。 - Yiyu Jia
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接