Could you please help me to make this processing.js code in html page work?

LeonardoSaponara · June 2017

Hi to all, I'm new to programming and I'm learning it mostly from Khan Academy. Doing so I did some projects that I wanted to run off line, therefore I used a template to move it into an html page. First to test the template I tried to move a simple visualization to the html page and it worked perfectly. Then I tried to move my little game inside the html page but it didn't work. I think that maybe the problem is in the way I tried to load image but I'm not perfectly sure. Here a github link with all the files, under testtest folder there is the visualization that work. Thank you very much for your help, I tried everything but I'm still not able to figure what to do. Github link: https://github.com/LeonardoSaponara/Jump //I resolved the problem migrating to p5.js therefore I've updated the project on Github, see old commit to view the code at time of my question.

GoToLoop · June 2017

http://ProcessingJS.org/reference/setup_/

https://forum.Processing.org/two/discussion/8997/hoppy-beaver

LeonardoSaponara · June 2017

http://ProcessingJS.org/reference/setup_/ https://forum.Processing.org/two/discussion/8997/hoppy-beaver

Regarding the second link: I'm not searching for an Hoppy beaver port, I'm searching to use convert my program to an html file and my program share only some portion of his code with Hoppy Beaver. Regarding the first link I've to say that I've understood very little on how integrate a setup in this template, considering also that this template cover in another way some parameters of setup. Since the template work with another code ( Testtest in github links) I suppose that the problem isn't the setup but some other things, maybe the way on how I've loaded the image from the same local folder but I'm not sure.

kfrajer · June 2017

http://processingjs.org/reference/pjs directive/

From the prev link:

In Javascript-only Processing.js code you cannot use these directives. You must change the options directly on the Processing.Sketch object. See the examples below for changing these properties on variables bound to a Processing or Processing.Sketch instance:

So it seems this will apply to you. I was looking at your code and I would recommend to migrate it to p5.js. The reason is simple. With p5.js you have more versatility and more flexibility. Second, most of your code is already js. I ran your code and it seems the problem there is that it doesn't recognize the PImage. To me, it seems Processing.js is not doing its magic. It is just a suggestion but I would do it if I were you. However, I could see @GoToLoop taking on the challenge to make it work.

Kf

LeonardoSaponara · June 2017

Thanks to kfrajer I've understood the problem: in javascript-only processing.js (so, as far as I've understood in a file different from a .pde) you can't use pjs directive and you should instead edit the Processing object, but I think it is not possibly to edit it to add images. The most viable solution for me so is to migrate to p5,js. An alternative solution would be download the Processing development environment,write down there the code producing a .pde file and then change and use the html file to call the code(not sure if this latter solution works but should). In my opinion is far easier and far time-saving migrate to p5.js.

kfrajer · June 2017

This is my attempt. Notice one of your png filenames is not proper. Replace space with an hyphen. regarding image location, create a folder labeled data in your folder containing the html+javascript files and placed there all your images.

Kf

HTML

<!DOCTYPE html>
<!-- This is based on DillingerLee's great template here:
     https://github.com/Team-Code/KA_Offline -->
<html> 
  <head>
    <meta charset="UTF-8">
    <title>Processing.JS inside Webpages: Template</title>
    <!-- Run all the JavaScript stuff -->
    <!-- Include the processing.js library -->
    <!-- See https:// khanacademy.zendesk.com/hc/en-us/articles/202260404-What-parts-of-ProcessingJS-does-Khan-Academy-support- for differences -->
    <!-- <script src="https:// cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> -->
    <script async src=http:// CDN.JSDelivr.net/g/p5.js(p5.min.js+addons/p5.dom.js)></script>
    <script defer src=masterjump.js></script>
    <script>  </script>
  </head>
  <body>
    <p align="center"> 
      <!--This draws the Canvas on the webpage -->
      <canvas id="mycanvas"></canvas> 
    </p>
  </body>

</html>

masterjump.js

var img;
var a,b,c,d,e,f;

var sticks = [];
var hearts = [];
var grassXs = [];

var t;
var beaver;
var Sticke;
var Hearteg;

function preload() {    
    a = loadImage("data/Hopper-Happy.png");
    b = loadImage("data/Hopper-Jumping.png");
    c = loadImage("data/healthheart.png");
    d = loadImage("data/marcimus.png");
    e = loadImage("data/mr-pants-with-hat.png");
    f = loadImage("data/Hopper-Cool.png");
    g = loadImage("data/mr-pink.png");
    h = loadImage("data/GrassBlock.png");
}
function setup() {
    createCanvas(400, 400); 
    frameRate(30);
    t = minute();
    beaver = new Beaver(80, 200);

    for (var i = 0; i < 290; i++) {  
    sticks.push(new Stick(i * 60 + 300, random(20, 260)));
    }

    for (var i = 0; i < 25; i++) { 
    grassXs.push(i*20);
    }

    for (var p = 0; p < 3; p++) {
    hearts.push(new Heart(p * 900 + 400, random(20,260)));
    }

}

var Beaver = function(x, y) {
    this.x = x;
    this.y = y;
    this.img = a;
    this.sticks = 5;
};

Beaver.prototype.draw = function() {
    fill(255, 0, 0);
    this.y = constrain(this.y, 0, height-50);
    image(this.img, this.x, this.y, 40, 40);
};

Beaver.prototype.hop = function() {
    this.img = b;
    this.y -= 5;
};

Beaver.prototype.fall = function() {
    this.img = a;
    this.y += 5;
};
Beaver.prototype.checkForStickHit = function(stick) {
    if ( (stick.x >= this.x && stick.x <= (this.x + 40) ) &&
     (stick.y >= this.y && stick.y <= (this.y + 40))) {
    stick.y = -400;
    this.sticks--;
    }
};
Beaver.prototype.checkForHeartHit = function(heart) {
    if ( (heart.x >= this.x && heart.x <= (this.x + 30) ) && (heart.y >= this.y && heart.y <= (this.y + 30))) {
    heart.y = -400;
    this.sticks++;
    }
};
//you'll lose life when touching the ground
Beaver.prototype.LoseLifeGround = function(y) {
    var   y = this.y;
    var    x = this.x;
    if ( y >= 350 ) {
    this.sticks--;
    fill(255, 0, 0);
    text("Ouch",x,y - 5);
    noFill();
    this.y = 200;
    }
};

function Stick(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rectMode(CENTER);
    rect(this.x, this.y, 5, 40);
};



function Heart(x, y) {
    this.x = x;
    this.y = y;
};
Heart.prototype.draw = function() {
    image(c,this.x,this.y,30,30);
};




var loseScreen = function() {
    background(255, 198, 10);
    textSize(34);
    text("I'm sorry,Sir",105,39);
    image(d,101,52,200,200);
    text("YOU LOST!!",102,269);
    textSize(20);
    text("Restart to try again!",108,305);
};
var winScreen = function() {
    background(0, 29, 250);
    textSize(35);
    text("It looks like you've won.",23,84);
    image(e,141,103,125,125);
    image(f,6,131);
    image(g,264,116);
    text("Well done Sir, well done",14,300);

};
function draw() {
    var isGameWon = false;
    var isGameLost = false;
    var Win = function() {
    isGameWon = true;
    };
    if ( minute() === t + 2 && isGameLost === false) {
    Win();
    }
    // static
    background(227, 254, 255);
    fill(130, 79, 43);
    rectMode(CORNER);
    rect(0, height*0.90, width, height*0.10);

    for (var i = 0; i < grassXs.length; i++) {
    image(h, grassXs[i], height*0.85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
    }

    console.log("We got sticks="+sticks.length);
    for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    beaver.checkForStickHit(sticks[i]);
    sticks[i].x -= 1;
    }
    for (var p = 0; p < hearts.length; p++) {
    hearts[p].draw();
    beaver.checkForHeartHit(hearts[p]);
    hearts[p].x -= 1;
    }
    textSize(18);
    text("Life: " + beaver.sticks, 20, 30);
    if (beaver.sticks <= 0 && isGameWon === false) {
    isGameLost = true;
    loseScreen();
    }
    if ( isGameLost === false && isGameWon === true) {
    winScreen();
    }

    if (keyIsPressed && keyCode === 0) {
    beaver.hop();
    } else if ( isGameLost === false && isGameWon === false ) {
    beaver.fall();
    }
    beaver.draw();
    beaver.LoseLifeGround();
};

Keyword: kf_keyword p5.js_demo p5js_demo

Howdy, Stranger!

Categories

In this Discussion

Could you please help me to make this processing.js code in html page work?

Best Answer

Answers

HTML

masterjump.js