Issue with loading images in p5.js

p5.js Coding Questions
1

I tried making a clock for my background with a background image using this code:

let h; let m; let s;
let bg;

function preload() {
  bg = loadImage("Background/Wireframed Dark BG.png");
}


function setup() {
  bg.loadPixels();
  
  createCanvas(windowWidth, windowHeight);
}


function draw() {
  background(bg);
  
  h = hour();
  m = minute();
  s = second();
  
  if(h < 10) {
    h = str("0" + h);
  }
  
  if(m < 10) {
    m = str("0" + m);
  }
  
  if(s < 10) {
    s = str("0" + s);
  }
  
  
  textAlign(CENTER);
  fill(255);
  textSize((width - textWidth("00:00:00")) / 5);
  text(h + ":" + m + ":" + s, width / 2, height / 2);
}

This gave me this aboslute unit of an error and I can’t find a way to fix it. I’m using Firefox, don’t know if it affects it.

image
image.png970×276 16 KB

Help would be appricated. :slight_smile:

1 Like
2

why not start from the provided examples
https://editor.p5js.org/p5/sketches/Image:_Background_Image ,

/*
 * @name Background Image
 * @description This example presents the fastest way to load a
 * background image. To load an image as the background,
 * it must be the same width and height as the program.
 */
let bg;

function setup() {
  // The background image must be the same size as the parameters
  // into the createCanvas() method. In this program, the size of
  // the image is 720x400 pixels.
  bg = loadImage('assets/moonwalk.jpg');
  createCanvas(720, 400);
}

function draw() {
  background(bg);
}

or even better start with

function draw() {
//  background(bg);
  image(bg,0,0);
}

as you not show the link to your code and uploaded image
we can not test at
https://editor.p5js.org/ ,

1 Like
3

Still got the same issue. Tried it in Chrome and got the same result.

4

you tried the linked example from p5.js and it not worked in CHROME
must be your computer / setup.

did you copy your project to
p5.js online editor?

5

No, no the example worked on p5.js online. I’ve tried your code you gave me and adjusted it for my image and got the same error. I’ll try copying the example and adapt my code on it. I’ll get back to it later.

6

Yeah, same error, but it works in the online editor but not the ide which is very strange.

7

pls link to online editor,
pls post html and script file you use local
and a screen shot of the local path / file structure
also, what revision of p5.js you use local ( means when you install p5.js MODE / or update template )

8

I’m seeing the same errors when running my p5-powered game on github.io. It works fine on local web server, or on my own website. You can see it here, on any browser: https://zenzoa.github.io/bunbons/