Sprites using arrays

Processing Coding Questions
1

I need help with using multiple images to create an animated sprite that moves as the mouse moves. My professor wants us to use arrays to accomplish this, but I’m not sure how to integrate multiple images into the code to create an animation. I could really use some help! I can attach the code for the mouse that we did in class, but I don’t know how to convert the ellipse that we currently have into a series of images that appear as an ‘animation’.

int [] xpos = new int [50];
int [] ypos = new int [50];

void setup() {
  size(400,500);
  smooth();
  
// intialize 
for (int i = 0; i < xpos.length; i++) 
  xpos[i] = 0;
  ypos[1] = 0;
}
  
  void draw() {
    background(255);
    

    //shift array values
    for (int i = 0; i < xpos.length-1; i++) {
      xpos[i] = xpos[i+1];
      ypos[i] = ypos[i+1];
    }
    
    //new location
    xpos[xpos.length-1] = mouseX;
    ypos[ypos.length-1] = mouseY;
    
    //draw everything 
    for(int i = 0; i < xpos.length; i++) {
    noStroke();
    fill(255-i*50);
    ellipse(xpos[i], ypos[i],i,i);
    }
  }
3

please help I do not want to fail my programming class lol

4

Currently your code draws an ellipse. Have you tried replacing the ellipse wiyh an image? How to do this? It is easy. You can do it by adding these three lines of code:

In the global scope (not inside neither setup or draw functions) add: PImage img;

Then in setup(): img = loadImage("path/to/your/image.jpg");

Finally, you call this image in draw(): image(img, x[i],y[i]);

where I am using the information stored in the array. Now, there are two things you need to keep in mind:

  1. You need to make sure the image is available and that your sketch can access it. Where to palce the image? Assuming you are using the Processing IDE, press ctrl+k so it will open a file explorer. Create a folder there and name it data and place the image there. Make sure the image is of a smaller size. If the image is big, you need to resize it.
  2. You need to learn how to use the reference. If you are programming in Processing, the reference should be by your side in your coding journey. The processing does not only provides details about the major functions supported by processing. It also provides basic and important examples to understand the functions and it also provides essential details to keep in mind while using those functions. For instance, the loadImage() explains where images need to place in your sketch so for Processing to be able to load them.

Trying to add an animation is a bit more challenging and unfortunately out of the scope here as it is your homework and you need to figure out this part yourself.You can always check the reference, the examples and the tutorials available in the Processing Foundation page.

Kf

2 Likes
5

…in addition, specifically, if you have been asked to use arrays, you should also read the tutorial on arrays!

https://processing.org/tutorials/arrays/

1 Like