CODEWITHSUNDEEP
javascriptjqueryajaxwordpressprocessing.js
Larpee
Larpee

Reputation: 820

Including Processing.js sketch in Wordpress website only shows empty canvas

I'm trying to include a Processing.js game in a Wordpress website. I'm getting the sketch from Rawgit using an Ajax call, but when I preview the page, it just shows an empty canvas.

Here's a sample version of my code (right now it's being used to load a sketch that draws a red ellipse):

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://rawgit.com/Larpee/The-Khan-Quiz/master/style.css' type="text/css"/>
</head>
<body>
    <div id="title">Page Name</div>
        <div id="game-window"><h5 id="game-title">Game name</h5>
        <canvas id="game"></canvas>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

$.get("https://rawgit.com/Larpee/The-Khan-Quiz/master/test.txt", function (game) {
    var sketchProc = function (processingInstance) {
        with (processingInstance) {
            size(400, 400);
            frameRate(30);
            eval(game);
        }
    };

    var canvas = document.getElementById("game");
    var processingInstance = new Processing(canvas, sketchProc);
});

</script>
</html>

You can try the game and look at its code using this link: https://www.khanacademy.org/computer-programming/the-khan-quiz/6282341959729152

Why is this not working?

Upvotes: 0

Views: 113

Answers (0)

Related Questions