# Coding problem(character Animation Program)

**URL:** <https://discourse.processing.org/t/coding-problem-character-animation-program/12598>\
**Category:** Coding Questions\
**Created:** [July 8, 2019, 6:48pm UTC](https://discourse.processing.org/t/coding-problem-character-animation-program/12598 "2019-07-08T18:48:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![megarou](https://avatars.discourse-cdn.com/v4/letter/m/f04885/32.png) [@megarou](https://discourse.processing.org/u/megarou)\
**Post date:** [July 8, 2019, 6:48pm UTC](https://discourse.processing.org/t/coding-problem-character-animation-program/12598/1 "2019-07-08T18:48:39Z")

</div>

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);

```

}  
}

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 9, 2019, 1:03am UTC](https://discourse.processing.org/t/coding-problem-character-animation-program/12598/2 "2019-07-09T01:03:46Z")

</div>

pls not post unformatted code,  
use the

```auto
</> code tag

```

from the editor menu

* * *

in case of a p5.js pls do not post code at all, better just link to the example code about the problem at  
[https://editor.p5js.org/](https://editor.p5js.org/)  
( if the image file part is needed, that could be also the best way to provide that files. )