CODEWITHSUNDEEP
javascriptimagep5.js
Ann-Kathrin
Ann-Kathrin

Reputation: 27

image won't load in p5.js

I am trying to upload a image to one of my p5 files.
I tried it the way it is described in the p5 reference, but that does not work.
Then I tried to write the image in a separate function and run that function in draw(), but that does not work either.
I also tried to embed the JS file to a HTML file to display it in a browser, but again, that doesn't work.
I tried to locate the problem by using console.log and apparently, you can't get into the preload function.

I also checked that the image has the right name and it is in the same folder as the JS file.

This is the code snippet I tried to use:

let img;

function preload() {
  img = loadImage("hamster.jpg");
}

function draw() {
  image(img, 0, 0, 300, 300);
}

Upvotes: 0

Views: 8219

Answers (4)

Bilal Haider
Bilal Haider

Reputation: 33

For guys as dumb as myself, :p My image was loading just fine, with live server. but it was bigger than the canvas, and transparent part of it, was the only part in the canvas That's why I couldn't see it.

Upvotes: 1

V. Rohan
V. Rohan

Reputation: 1

let img;
function preload() {
  img = loadImage("hamster.jpg");
}

function setup(){
  createCanvas(600,600);
}

function draw() {
  image(img, 0, 0, 300, 300);
}

Upvotes: 0

mdr721
mdr721

Reputation: 21

So what you need to do is start a local server, you are probably just clicking the html file. To start a local server use this guide https://github.com/processing/p5.js/wiki/Local-server

Upvotes: 0

Luke Garrigan
Luke Garrigan

Reputation: 5021

Your code works fine for me.

Check out this p5 project I've created with your code - maybe there's an issue with your project structure: https://editor.p5js.org/LukeGarrigan/sketches/WS_5sauc2

Upvotes: 1

Related Questions