Hello there, i’m facing a some kind of coding problem?!!, the problem is, i’ve loaded some images of a character to animate, i’ve succeeded to animate the first loaded images of the character, but i couldn’t know how to animate the other loaded images of the character, p5.js gives me an error message it says" can’t read the property ‘Width’ of undefined of this code:-
image(spritesheetA2[frameCount % spritesheetA2.length], 0, 0);,i’m using p5.js, i really need your help, please help me, guide me please, thank you, here is my whole code;
let spritesheet = [];
let spritesheetA2 = [];
let spritedata ={
“frames” :[{ “name”: “F1”,
“position”:{
“x”:0,
“y”:0,
“w”:500,
“h”:444
},
"name2": "F2",
"position2":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name3": "F3",
"position3":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name4": "F4",
"position4":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name5": "F5",
"position5":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name6": "F6",
"position6":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name7": "F7",
"position7":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name8": "F8",
"position8":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name9": "F9",
"position9":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name10": "F10",
"position10":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name11": "F11",
"position11":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name12": "F12",
"position12":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name13": "F13",
"position13":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name14": "F14",
"position14":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name15": "F15",
"position15":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name16": "F16",
"position16":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name17": "F17",
"position17":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name18": "F18",
"position18":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name19": "F19",
"position19":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name20": "F20",
"position20":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name21": "F21",
"position21":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name22": "F22",
"position22":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name23": "F23",
"position23":{
"x":0,
"y":0,
"w":500,
"h":444
},
"name24": "F24",
"position24":{
"x":0,
"y":0,
"w":500,
"h":444
},
}]
}
let animation = [];
let animationa2 = [];
let fr = 20;
function preload() {
spritesheet[0] = loadImage(‘F1.jpg’);
spritesheet[1] = loadImage(‘F2.jpg’);
spritesheet[2] = loadImage(‘F3.jpg’);
spritesheet[3] = loadImage(‘F4.jpg’);
spritesheet[4] = loadImage(‘F5.jpg’);
spritesheet[5] = loadImage(‘F6.jpg’);
spritesheet[6] = loadImage(‘F7.jpg’);
spritesheet[7] = loadImage(‘F8.jpg’);
spritesheet[8] = loadImage(‘F9.jpg’);
spritesheet[9] = loadImage(‘F10.jpg’);
spritesheet[10] = loadImage(‘F11.jpg’);
spritesheet[11] = loadImage(‘F12.jpg’);
spritesheetA2[12] = loadImage(‘F13.jpg’);
spritesheetA2[13] = loadImage(‘F14.jpg’);
spritesheetA2[14] = loadImage(‘F15.jpg’);
spritesheetA2[15] = loadImage(‘F16.jpg’);
spritesheetA2[16] = loadImage(‘F17.jpg’);
spritesheetA2[17] = loadImage(‘F18.jpg’);
spritesheetA2[18] = loadImage(‘F19.jpg’);
spritesheetA2[19] = loadImage(‘F20.jpg’);
spritesheetA2[20] = loadImage(‘F21.jpg’);
spritesheetA2[21] = loadImage(‘F22.jpg’);
spritesheetA2[22] = loadImage(‘F23.jpg’);
spritesheetA2[23] = loadImage(‘F24.jpg’);
}
function setup() {
createCanvas(600, 700);
let frames = spritedata.frames;
for(let i = 0; i < frames.length; i++) {
let pos = frames[i].position;
let img = spritesheet;
animation.push();
frameRate(fr);
}
frames = spritedata.frames;
for(let j = 0; j < frames.length; j++) {
let pos = frames[j].position;
let img = spritesheetA2;
animationa2.push();
}
console.log( );
}
function draw() {
background(0);
if(keyIsPressed === true){
image(spritesheet[frameCount % spritesheet.length], 0, 0);
}else {
image(spritesheet[0], 0, 0);
}
image(spritesheetA2[frameCount % spritesheetA2.length], 0, 0);
}
function keyTyped() {
if(key === ‘z’) {
image(spritesheet[frameCount % spritesheet.length], 0, 0);
}
}