所以我尝试将处理的PDE文件预先编译为processing.js的PJS文件以节省带宽并且能够轻松地缩小代码。
我已经尝试了很多东西，我读了以下两个问题及其答案：
How to precompile processingjs sketch to speed load times?
How to have multiple processing.js sketches running at the same time
然而，它没有加载，Firebug给了我这个：
uncaught exception: PJS compile is not supported
我得到了“常规”版本，可以读取PDE文件的工作情况，但我希望将其用于未来的项目。
这是HTML代码，api.1.0.0.min.js是processing.js v1.4.1 api，其中集成了html5的全屏方法，它还包括minim，它可以在“常规”版本上工作（相同的修改）制作了非api版本的processing.js）。
<!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文件： （删除预加载的注释不会改变任何内容。）
/* @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;
})
答案 0 :(得分：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>