I can't seem to figure out how to load images in visual studio code for p5.js. Can someone help me understand the process of loading images in p5.js? I've set up a new project, but the images I try to load are not displaying correctly. How can I successfully run an image in visual studio code for p5.js? Despite following the reference documents and adding preload, I'm still facing issues when trying to load images. Even testing with different image files didn't yield different results.
var pic1;
var pic2;
var pic3;
var pic4;
var pic5;
var pic6;
let button;
let posX=0
let posY=0
let list;
let selectedItem = -1;
let drop = false;
let items = ["Apples", "Peaches", "Oranges", "Bananas", "Pears" ];
let itemY = [];
class List {
constructor(x, y, w, h, itemH, txtSize) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.itemH = itemH;
this.txtSize = txtSize;
this.arrwX = this.x + this.w;
this.arrwY = this.y;
this.arrwH = this.h;
}
press(mx, my) {
// arrow touches
if ((mx >= this.arrwX) && (mx <= this.arrwX+this.arrwH) && (my >= this.arrwY) && (my <= this.arrwY+this.arrwH)) {
if (drop == true) {
drop = false;
} else {
drop = true;
}
} // list touches
if (drop) {
if (items.length > 0) {
for (let j = 0; j < items.length; j++) {
if ((mx >= this.x) && (mx <= this.x + this.w) && (my >= itemY[j] ) && (my <= itemY[j] + this.itemH)) {
selectedItem = j;
drop = false;
}
}
}
}
}
displayFieldString(title) {
fill(255); // background color
rect(this.x, this.y, this.w, this.h);
fill(0); // text color
textSize(this.txtSize);
text(title, this.x + 10, this.y + this.txtSize);
}
display() {
if (selectedItem == -1) {
this.displayFieldString("Select item:");
} else {
this.displayFieldString(items[selectedItem]);
}
// arrow
fill(255); // arrow background color
rect(this.arrwX, this.arrwY, this.arrwH, this.arrwH);
fill(0, 255, 0); // arrow color
triangle(this.arrwX+5, this.arrwY+5, this.arrwX+this.arrwH-5, this.arrwY+5, this.arrwX+this.arrwH/2, this.arrwY+this.arrwH-5);
// listItems
if ((items.length > 0) && (drop)) {
for (let j = 0; j < items.length; j++) {
itemY[j] = (this.y + this.h) + j*this.itemH;
fill(255);
rect(this.x, itemY[j], this.w, this.itemH);
fill(0);
textSize(this.txtSize);
text(items[j], this.x + 10, itemY[j] + this.txtSize);
}
}
if (!drop) {
rect(this.x, this.y + this.h, this.w, 0);
}
}
}
function setup() {
createCanvas(500, 400);
list = new List(100, 100, 120, 24, 24, 16);
}
function draw() {
background(220);
list.display();
}
function mousePressed() {
//list.press(mouseX, mouseY);
}
const rightwall=350;
const height=450;
function preload(){
pic1=loadImage("5.png")
pic2=loadImage("Iron ore.jpg")
pic4=loadImage("blastfurnace.jpg")
pic5=loadImage("coal2.jpg")
pic6=loadImage("limestone.jpg")
pic3=loadImage("reactions.jpg")
}
function setup(){
createCanvas(600,600);
background("blue");
button=createButton("CLICK TO LOAD INTO FURNACE")
button.position(150,330);
button.mousePressed(changeBG);
noLoop();
}
function changeBG() {
let val = random(65);
background(val);
loop();
playAnim=true;
draw();
posX=0;
posY=0;
// background will be overwritten with 220
}
function draw() {
background(220);
// text(mouseX + "," + mouseY, 20, 20);
// If the 'a' key is pressed, draw the following text in the canvas
if (key === 'a'){
textSize(22);
text('a key was pressed!', width / 2, height / 2);
}
let s='BLAST FURNACE';
textSize(23);
fill(0,102,153);
text(s,50, 10,300, 400);
img1=image(pic1, 320, 30, 170,210)
img6=image(pic6,posX,160,70,70)
img2=image(pic2,posX, 80, 70, 70)
img5=image(pic5,posX,20,50,50)
img4=image(pic4,posX,posY-300,220,220)
img3=image(pic3,20,340-posY,230, 230)
if (playAnim) {
posX=constrain(posX+1,0,rightwall-30)
posY=constrain(posX-1,posY,height-50)
}
}