Wednesday, March 23, 2016

Setting up ProcessingJS

ProcessingJS is very easy to set up. I'll be using the Javascript mode, because that's the same one Khan Academy provides and I'm used to it.
Just drop this on your webpage and you're ready to roll:

 
<script src="https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<canvas id="processingJS canvas"></canvas>
<script>
    var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(400, 400);
        frameRate(60);
       
        // ProgramCodeGoesHere
        draw = function () {
            ellipse(mouseX, mouseY, 10, 10);
        };
    }};

    // Get the canvas that ProcessingJs will use
    var canvas = document.getElementById("processingJS canvas");
    var processingInstance = new Processing(canvas, sketchProc);
</script>

Want to see it working? Sure, you're the boss :)