› ›

p5.js in different browsers

AndzejusAndzejus
edited November 2015 in p5.js Programming Questions

Good day,

I'm not experienced with p5, processing or programming in general. So I was really excited when I saw, how easy it is to work with p5.

I made a silly little pong game. In p5 editor it works the way I want, just gets more and more slow after running for some time.

Then there is a possibility to run a sketch in browser (from p5 editor). The browser in my case is chrome. Sketch runs fine, even without slowing down. But as code got longer I noticed that it doesnt always run inside browser even if it works in editor. For example I had to put if statement inside another if statement instead of checking all conditions inside one if statement.

Another possibility is to run a sketch by launching index.html file. Here again I get different results. For example sounds do not want to get pre-loaded. I dont know, maybe it would get solved by properly hosting it somewhere instead running it like that. But this is not biggest issue (I just commented out all the sounds in the code). Even without sounds it gives different results in different browsers:

In windows I tried it on explorer, firefox, chrome and opera. It worked ok on all except firefox.

I also tried it on linux ubuntu, on chromium and firefox. Again, it didnt work on firefox. And on chromium it worked, but very slow.

So this is my story. And the question is: are there any guidelines, what should be avoided and what must be done, to make a code good for all browsers? Or maybe there is a possibility to export a sketch in some kind of exe file that could be sent to other people and I would be sure that it will run on their machines exactly the same as on mine?

Tagged:

Best Answers

Answers

  • blindfishblindfish

    There are several different issues at play here:

    1. Sounds (and other files) not loading from local files: known problem where some browsers deliberately block access to the local file-system as a security restriction. The same applies to some cross-domain requests online.
    2. Cross-browser support for JavaScript has improved massively in recent years; but there may still be cases where different browsers interpret/support code differently; particularly if you include ES6 (very latest JavaScript) code.
    3. Performance issues and bugs may be present in your code. Post it here if you want someone to check it over.

    In terms of possible solutions/guidelines:

    • running on a local server or from p5 IDE should resolve #1 (as should hosting it online)
    • Look at supported browsers and also check what support is guaranteed by any libraries you use
    • Check JS resources like Mozilla for best practice - and also check browser compatibility for particular methods/properties etc - e.g. default parameters
    • Use tools like caniuse to check compatibility of HTML, CSS, JS etc...
    • Search for resources on cross-browser compatible best practice. These are issues that web developers have faced for many years. Things have certainly improved but it's a very fast moving environment...

    As for packaging your code up as an app. It's an interesting idea and in principle possible thanks to things like NodeJS and the Atom Electron platform; but at present p5js doesn't provide any tools to do this...

    Good luck!

  • AndzejusAndzejus

    Hosting files did solve issue with sound. Here is my silly little game:

    http://andrius.5gbfree.com/index2.html

    There are bugs in it and it doesnt work on firefox (up and down doesnt work). I dont feel like fixing those bugs- I acheaved my goal with this game (had fun and learned something new).

    Thank you blindfish for your comments- I will use those resources when I work on my next p5 project.

  • GoToLoopGoToLoop
    edited November 2015
  • GoToLoopGoToLoop
    edited November 2015 Answer ✓

    But not all is lost! Rather than having this verbosity if () condition:
    if (keyIsPressed && keyCode == UP_ARROW) {}

    Why not rely on something more simple & succinct like keyIsDown()?:
    if (keyIsDown(UP_ARROW)) {}

    http://p5js.org/reference/#/p5/keyIsDown

    Even keyPressed() is better & safer than keyIsPressed + keyCode:
    http://p5js.org/reference/#/p5/keyPressed

  • AndzejusAndzejus

    GoToLoop, thank you! I updated code according to your suggestion and now it works in firefox too.

  • GoToLoopGoToLoop
    edited November 2015 Answer ✓

    Just played it in some Firefox browser and it's working alright! :-bd
    Although you've left some println('pass1'); at some place there and it's littering the console.

    But I've got an important recommendation about how to implement methods in classes. L-)
    Methods declared inside a class' constructor wastes lotsa RAM for each object created from it.

    this.moveNot = function() {
  if (this.yPos < height / 4) {
    this.yPos = this.yPos + 1;
  } else if (this.yPos > height / 4) {
    this.yPos = this.yPos - 1;
  } else {
    this.yPos = height / 4;
  }
}

    That's why we should move them outside the constructor's function and declare it as its prototype:

    Player.prototype.moveNot = function() {
  if (this.yPos < height / 4) {
    this.yPos = this.yPos + 1;
  } else if (this.yPos > height / 4) {
    this.yPos = this.yPos - 1;
  } else {
    this.yPos = height / 4;
  }
}

    As a bonus, a more compact moveNot()'s implementation: O:-)

    Player.prototype.moveNot = function() {
  const h4 = height >> 2, diff = h4 - this.yPos;
  this.yPos += diff == 0? 0 : diff > 0? 1 : -1;
}
  • AndzejusAndzejus

    That's very interesting concept. I've glanced at p5 reference page, but I did'nt see anything about prototypes.

    So inside constructor I declare only those functions that will be used with all instances, and if it may be used or not, then I put it outside (as prototype). Otherwise interpreter will read those functions even if they do not need to be executed. Did I understood it correctly?

  • blindfishblindfish

    prototypes are part of the JavaScript language, for which there is plenty of documentation. I'm reading the you don't know JS series at the moment. It is suitable for beginners but goes into a bit more technical detail about what's happening under the hood so is also useful to more experienced coders who don't have a technical background..

  • GoToLoopGoToLoop
    edited November 2015

    So inside constructor I declare only those functions that will be used with all instances, ...

    Inside constructor we don't declare any methods! All of them are declared externally.
    All the rest stays in constructor though. That is, those properties known in OOP as instance variables.

    I've glanced at p5 reference page, but I didn't see anything about prototypes.

    Indeed, they don't utter the word prototype not even once!
    Neither in reference, tutorials and examples sections!

    What they teach is exactly what you had just done above, throw everything inside constructor:
    http://p5js.org/examples/examples/Objects_Objects.php

    BtW, just found out this very nice article about most common JS prototype design patterns:
    http://www.HTMLGoodies.com/beyond/javascript/some-javascript-object-prototyping-patterns.html

    And take a look at what was said there about defining methods inside constructor:

    What you may not realize about this particular pattern is that it's the most expensive in terms of memory.

    But don't fret! Your game doesn't instantiate classes more than 2 times.
    Again that's what is quoted from the article:

    Maybe not so bad if you only need a couple of objects.

    So there's no much need to refactor your "SuperHeroPong.js" game classes to define methods externally in prototype in your particular case here.

    However, if your game had some classes which many new objects would be created from, then they would warrant a prototype refactoring for sure. ;;)

Sign In or Register to comment.