Making Pacman appear on top of your own image – Using background images in Processing

Playing with Pacman functions

4 Ikamvacoders playing with Pacman functions

This is a fun project where we are going to use our Pacman function and the code which makes Pacman move around to create a portrait of ourselves with our Pacman creations.

If you just want to change the Pacman function image in the example Processing sketch there are just two steps:

  1. You can download a zip file with the code from here.
  2. Unzip the file, run the sketch and check that the background loads. Now you can adapt the function (or variables) to draw and label your own Pacman and show him/her in your sketch. For example here are two different versions of the function call.
    //This draws a large yellow pacman using the built in label 
    //and X and Y positions.
    drawPacman(centreX,centreY,pacSize, yellow, label);
    //This draws a smaller blue pacman and customises the label 
    //and X and Y positions.
    drawPacman(centreX/3,centreY/2,50, blue, "Lisa");

To load your own image and use it as background in the Processing sketch there are six  steps you need to follow:

  1. Start your own sketch, you can download the code from here.
  2. Choose an image (we used this one) and copy it into your sketch’s data folder.
  3. Create a Processing Image variable  with the statement:
    PImage bg;

    This code should be placed right at the beginning of the sketch with the other global variables.

  4.  In void setup() you should ensure that the window is the same size as your image. In our example, the image is 500*359 pixels, and so we use this for the size() of the Processing sketch window as well:
    size(500,359);//draw window the same size as your image
  5. Also in void setup(), your program needs to load the image information from an image file (which you should have saved in your data folder in step 2, remember). If you want to change the image that you load you should change the filename to  be the same as your new image. VERY IMPORTANT. Loading the image takes a while. Never, never use this code in your draw() function.
    bg = loadImage("bg.png");
  6. At last we are ready to display the image!  In void draw(), set the image as the background to your sketch with this code:
      background(bg);
Advertisements

3 thoughts on “Making Pacman appear on top of your own image – Using background images in Processing

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s