P5.js tint() Memory Error

p5.js Coding Questions
1

I’m running an app I just built on safari mobile and I’m getting some strange errors. I’m loading the p5.js & p5.sound libraries but at the moment I’m not using any of p5.sound in my code. That would be added later.

I get this error right as the page loads:
TypeError: undefined is not an object (evaluating ‘t.p5’) p5.sound.js:1:419

51%20AM
Screen Shot 2018-10-04 at 11.52.51 AM.png2620×124 22.5 KB

After 20-30 seconds I get these error message:
[Warning] Total canvas memory use exceeds the maximum limit (256 MB). _getTintedImageCanvas p5.min.js:9771

TypeError: null is not an object (evaluating ‘d.createImageData’) image - p5.min.js:9764

00%20AM
Screen Shot 2018-10-04 at 11.53.00 AM.png2612×380 73 KB

Any idea what could be causing them?

1 Like
2

Hi currymike,

Can we see the index.HTML and the relevant parts of the p5 code you wrote (or have some sort of link to your app’s source code)?

3

The sketch is contained within a Wordpress site another developer created. The index.html adds the following scripts:

  • p5.js
  • p5.sound
  • compass.js
  • p5.geolocation.js

My code is doing is a background image and a compass graphic. The background image is 800x600 px and the compass graphic is 200x200 px. The compass graphic points at a specific trigger location that the user has to walk to. I am using the p5.geolocation library to track the users location and setup a geo fence. Here is the code for the graphics displayed in the canvas:

//Setup Canvas
function setup() {
  createCanvas(windowWidth,windowHeight);
  frameRate(30);
}

funcation draw(){
//Display the background image.
image(img,0,0); 

//Display the compass image.
 push();
 translate(windowWidth / 2, windowHeight / 2);
 imageMode(CENTER);
 rotate(angle);
 tint(255,opacity);
 image(arrow,0,0);
 pop()

I am having no problem in Chrome in both mobile and desktop, the memory usage is around 10mb. I am also having no problem with Safari before version 12. But in Safari version 12 the memory usage goes up to 500 mb and the site crashes on mobile. Any ideas?

1 Like
4

I think it is something to do with the tint() function being very memory intensive.
If possible I would try and avoid using it altogether, perhaps use an image that already is tinted rather than changing it in the program. Or maybe you could tint the image in setup() then save that and use that image in draw(), so you only need to do it once?

Does putting noTint() after image(arrow,0,0); fix the problem?

3 Likes
5

TheWizardBear,

You nailed it! The tint() function is what was crashing the program. I tried putting noTint() after image(arrow,0,0) but it still crashed, the only solution was removing the tint() all together.

I need the arrow to fade away after a few seconds. Is there another way I can change the opacity of an image without using the tint() function?

6

I am actually just going to switch the compass to a html element and control it with css. Probably the quicker and easier solution.

1 Like
7