そこで、処理の PDE ファイルを processing.js の PJS ファイルにプリコンパイルして、帯域幅を節約し、コードを簡単に縮小できるようにしました。
私はすでに多くのことを試しましたが、次の2つの質問とその回答を読みました:
ロード時間を短縮するために処理jsスケッチをプリコンパイルする方法は?
複数の processing.js スケッチを同時に実行する方法
ただし、ロードされず、Firebug から次のように表示されます。
uncaught exception: PJS compile is not supported
私は PDE ファイルを読み取る「通常の」バージョンを取得しましたが、将来のプロジェクト用にこれを使用したいと考えています。
ここに HTML コードがあります。 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 ファイル: (プリロードのコメントを削除しても何も変わりません。)
/* @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;
})