Processing.js pre-compiled script not working, throws "PJS compile is not supported" error

StackOverflow https://stackoverflow.com/questions/19755421

Question

So I tried pre-compiling processing's PDE files to processing.js's PJS files to save bandwidth and to be able to minify the code easily.

I already tried a bunch of stuff and I read the following two questions and their answers:

How to precompile processingjs sketch to speed load times?

How to have multiple processing.js sketches running at the same time

However, it doesn't load and Firebug gives me this:

uncaught exception: PJS compile is not supported

I got the "regular" version that reads PDE files working but I'd rather have this one for future projects.

Here is the HTML code, api.1.0.0.min.js is the processing.js v1.4.1 api with html5's fullscreen method integrated, it also included minim and it does work on the "regular" version (same modifications made to the non-api version of 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 delivers font type and caching information so that's why it's not in here.

The PJS file which I converted using the processing.js helper tool: (Removing the comments for preload doesn't change anything.)

/* @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;
})
Was it helpful?

Solution

I got it working in the end, the api.1.0.0.min.js file contains processing-js-1.4.1-api, minim.js and it also contains MDN's toggleFullScreen() method.

<!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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top