I was researching Javascript libraries and I found p5.js. It looks simple and easy, so I decided to try it out. So I made this little code snippet where it should just put up an image on the screen, but for some reason, it doesn’t work. I even looked at one of the p5.js examples on images, but it still won’t work. It just shows nothing. Can you help me here? Thanks!
Here’s my code by the way:
//The player's data
let playerData = {
x: 0,
y: 0,
img: "assets/test.png"
};
//This should create a canvas and load the image from the data set
function setup(){
createCanvas(720, 400);
playerImg = loadImage(playerData.img);
}
//Draws the loaded image on the canvas
function draw(){
image(playerImg, playerData.x , playerData.y);
}
//The player's data
let playerData = {
x: 0,
y: 0,
img: "https://global.discourse-cdn.com/standard10/uploads/processingfoundation1" +
"/original/1X/f026ec45c50121b5d28bf43cacf1cded97b4278e.png"
};
let playerImg;
//This should create a canvas and load the image from the data set
function setup(){
createCanvas(720, 400);
playerImg = loadImage(playerData.img);
}
//Draws the loaded image on the canvas
function draw(){
image(playerImg, playerData.x , playerData.y);
}
Does the image have any color variation in it, especially in the upper left corner, which you would see on the canvas, even if it is a very large image?
