1

所以我尝试将 processing 的 PDE 文件预编译为 processing.js 的 PJS 文件，以节省带宽并能够轻松地缩小代码。

我已经尝试了很多东西，并且阅读了以下两个问题及其答案：

如何预编译 processingjs 草图以加快加载时间？

如何同时运行多个 processing.js 草图

但是，它没有加载，Firebug 给了我这个：

uncaught exception: PJS compile is not supported

我得到了可以读取 PDE 文件的“常规”版本，但我宁愿将这个版本用于未来的项目。

这是 HTML 代码，api.1.0.0.min.js 是 processing.js v1.4.1 api，集成了 html5 的全屏方法，它还包括 minim，它在“常规”版本上工作（对processing.js 的非 api 版本）。

<!DOCTYPE html>
<html>
<title>Ikben V1.01</title>
<center>
<style type="text/css">
    html {overflow: hidden;}
    body{margin: 0; padding: 0}
    :-webkit-full-screen #IkbenCanvas{width: 100%; height: 100%;}
</style>
<head>
    <canvas id="IkbenCanvas"></canvas>
</head>
<body>
    <script src="../api.1.0.0.min.js" type="text/javascript"></script>
    <script id="Sketch" src="ikbenweb.pjs" type="text/javascript"></script>
    <script>
        new Processing(IkbenCanvas, Sketch)
    </script>
</body>
</center>
</html>

Apache 提供字体类型和缓存信息，这就是它不在此处的原因。

我使用 processing.js 辅助工具转换的 PJS 文件：（删除 preload 的注释不会改变任何内容。）

/* @pjs preload="data/a.png,data/b.png,data/c.png,data/d.png,data/e.png,data/f.png,data/g.png,data/h.png"; */

(function($p) {

    var song = null;
    var minim = null;
    minim = new Minim(this);

    var nonsense = null;
    var numberOfImages = 0,
        imageSize = 0,
        heightCounter = 0,
        widthCounter = 0;
    var loopingBackground = false,
        audioStarted = false;
    var images = $p.createJavaArray('$p.PImage', [8]);

    function setup() {
        $p.textAlign($p.CENTER, $p.CENTER);
        $p.imageMode($p.CENTER);
        $p.frameRate(30);
        numberOfImages = 3;
        $p.noStroke();
        nonsense = $p.loadStrings("data/text.txt");
        images[0] = $p.loadImage("data/a.png");
        images[1] = $p.loadImage("data/b.png");
        images[2] = $p.loadImage("data/c.png");
        images[3] = $p.loadImage("data/d.png");
        images[4] = $p.loadImage("data/e.png");
        images[5] = $p.loadImage("data/f.png");
        images[6] = $p.loadImage("data/g.png");
        images[7] = $p.loadImage("data/h.png");

        horseSong = minim.loadFile("data/song.mp3");
    }
    $p.setup = setup;

    function draw() {
        $p.size(self.innerWidth, self.innerHeight);
        if ($p.millis() > 2500) {
            if (!audioStarted) {
                horseSong.loop();
                audioStarted = true;
            }
            heightCounter = $p.height;
            widthCounter = $p.width;
            loopingBackground = true;
            while (loopingBackground) {
                $p.fill($p.random(0, 255), $p.random(0, 255), $p.random(0, 255));
                $p.rect(widthCounter / 10 - $p.width / 10, heightCounter / 10 - $p.height / 10, widthCounter, heightCounter);
                heightCounter -= heightCounter / 10;
                widthCounter -= widthCounter / 10;
                if (heightCounter <= $p.height / 10) loopingBackground = false;
            }
            for (var i = 0; i < numberOfImages; i++) {
                imageSize = $p.__int_cast($p.random($p.height / 20, $p.height));
                $p.image(images[$p.__int_cast($p.random(0, images.length))], $p.random(100, $p.width - 100), $p.random(100, $p.height - 100), imageSize, imageSize);
            }
            $p.textSize($p.random($p.width / 50, $p.width / 5));
            $p.fill($p.random(0, 255), $p.random(0, 255), $p.random(0, 255));
            $p.text(nonsense[$p.__int_cast($p.random(0, nonsense.length))], $p.random(100, $p.width - 200), $p.random(100, $p.height - 200));
        } else {
            $p.fill(130);
            $p.rect(0, 0, $p.width, $p.height);
            $p.fill(0);
            $p.textSize($p.width / 30);
            $p.text("Press a button or click for fullscreen.", $p.width / 2, $p.height / 2);
        }
    }
    $p.draw = draw;

    function mouseClicked() {
        toggleFullScreen();
    }
    $p.mouseClicked = mouseClicked;

    function keyPressed() {
        toggleFullScreen();
    }
    $p.keyPressed = keyPressed;
})
4

1 回答 1

0

我终于让它工作了，api.1.0.0.min.js 文件包含 processing-js-1.4.1-api、minim.js，它还包含 MDN 的 toggleFullScreen() 方法。

<!DOCTYPE html>
<html>
<title>Ikben V1.02</title>
<center>
<style type="text/css">
    html{position:fixed;top:0;bottom:0;left:0;right:0}body{margin:0;padding:0}
</style>
<head>
    <canvas id="appCanvas"></canvas>
</head>
<body>
    <script src="data/api.1.0.0.min.js" type="text/javascript"></script>
    <script>
        var appCode = (function($p) {
        var horseSong=null,minim=null
        minim=new Minim(this)
        var nonsense=["test","hoi","doei","foo","bar","stuff","hoi hoi hoi hoi hoi","test123","abcdef","123"],numberOfImages=3,imageSize=0,heightCounter=0,widthCounter=0,loopingBackground=!1,audioStarted=!1,images=$p.createJavaArray("$p.PImage",[8])
        function setup(){$p.textAlign($p.CENTER,$p.CENTER),$p.imageMode($p.CENTER),$p.frameRate(30),$p.noStroke(),images[0]=$p.loadImage("data/horse/a.png"),images[1]=$p.loadImage("data/horse/b.png"),images[2]=$p.loadImage("data/horse/c.png"),images[3]=$p.loadImage("data/horse/d.png"),images[4]=$p.loadImage("data/horse/e.png"),images[5]=$p.loadImage("data/horse/f.png"),images[6]=$p.loadImage("data/horse/g.png"),images[7]=$p.loadImage("data/horse/h.png"),horseSong=minim.loadFile("data/horse/song.ogg")}$p.setup=setup
        function draw(){if($p.size(self.innerWidth,self.innerHeight),$p.millis()>2500){for(audioStarted||(horseSong.loop(),audioStarted=!0),heightCounter=$p.height,widthCounter=$p.width,loopingBackground=!0;loopingBackground;)$p.fill($p.random(0,255),$p.random(0,255),$p.random(0,255)),$p.rect(widthCounter/10-$p.width/10,heightCounter/10-$p.height/10,widthCounter,heightCounter),heightCounter-=heightCounter/10,widthCounter-=widthCounter/10,heightCounter>$p.height/10||(loopingBackground=!1)
        for(var e=0;numberOfImages>e;e++)imageSize=$p.__int_cast($p.random($p.height/20,$p.height)),$p.image(images[$p.__int_cast($p.random(0,images.length))],$p.random(100,$p.width-100),$p.random(100,$p.height-100),imageSize,imageSize)
        $p.textSize($p.random($p.width/50,$p.width/5)),$p.fill($p.random(0,255),$p.random(0,255),$p.random(0,255)),$p.text(nonsense[$p.__int_cast($p.random(0,nonsense.length))],$p.random(100,$p.width-200),$p.random(100,$p.height-200))}else $p.fill(130),$p.rect(0,0,$p.width,$p.height),$p.fill(0),$p.textSize($p.width/30),$p.text("Press a button or click for fullscreen.",$p.width/2,$p.height/2)}$p.draw=draw
        function mouseClicked(){toggleFullScreen()}$p.mouseClicked=mouseClicked
        function keyPressed(){toggleFullScreen()}$p.keyPressed=keyPressed
        })
        new Processing(appCanvas, appCode);
    </script>
</body>
</center>
</html>
于 2013-11-16T10:24:35.237 回答