1
그래서 처리하기 전에 PDJ 파일을 processing.js의 PJS 파일에 저장하여 대역폭을 절약하고 코드를 쉽게 축소 할 수있었습니다.Processing.js 미리 컴파일 된 스크립트가 작동하지 않고 "PJS 컴파일이 지원되지 않습니다"오류가 발생합니다.
이미 잔뜩 시도하고 나는 다음과 같은 두 가지 질문과 답변을 읽어
How to precompile processingjs sketch to speed load times?
How to have multiple processing.js sketches running at the same time
그러나로드하지 않고 방화범은 저에게이 제공 :
를uncaught exception: PJS compile is not supported
나는 PDE 파일을 읽는 "일반"버전을 가지고 있지만 차라리이 파일을 갖고 싶습니다. 다시 프로젝트.
여기에 HTML 코드 api.1.0.0.min.js는 html5의 전체 화면 메소드가 통합 된 processing.js v1.4.1 API이며 minim도 포함되어 있으며 "일반"버전에서도 동일하게 작동합니다 non-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>
는 아파치 글꼴 유형 및 캐싱 정보를 제공합니다.
나는 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;
})