Home

Images

Processing can do more than draw shapes. We can also load images and draw them at x,y locations. Actually, you can do a lot more with images, but we'll start with that.

Read,

Note: your image files must be in a folder called "data" in your sketch folder.

Example 1: Using images

// background image from:
// http://poster.4teachers.org/imgFileWizard/73251.jpg

// spacheships from:
// http://opengameart.org/content/spaceship-set-32x32px

PImage bg;
PImage boss;
PImage player;
int bossx, bossy;
int px, py;

void setup()
{
  size(800, 600);
  bg = loadImage("moon.jpg");
  boss = loadImage("boss1.png");
  player = loadImage("player_ship.png");
  imageMode(CENTER);
  
  bossx = 400; bossy = 100;
  px = 400; py = 500;
}

void draw()
{
  smooth();
  noTint();
  image(bg, width/2, height/2, 
    width, (float(width)/bg.width)*bg.height);
  
  noSmooth();
  tint(255, 100, 100);
  image(boss, bossx, bossy, 4*boss.width, 4*boss.height);
  tint(113, 100, 255);
  image(player, px, py, 3*player.width, 3*player.height);
}

void keyPressed()
{
  if(key == CODED)
  {
    if(keyCode == UP)
    {
      py -= 5;
    }
    if(keyCode == DOWN)
    {
      py += 5;
    }
    if(keyCode == LEFT)
    {
      px -= 5;
    }
    if(keyCode == RIGHT)
    {
      px += 5;
    }
  }
}

Example 2: Animated sprites

// butterflies from:
// http://opengameart.org/content/animated-butterfly

PImage[] butt1 = new PImage[24];
PImage[] butt2 = new PImage[24];

int b1x, b1y;
int b2x, b2y;

void setup()
{
  size(800, 600);
  noSmooth();
  
  b1x = 350; b1y = 300;
  b2x = 450; b2y = 300;
  
  PImage gridimage = loadImage("butterfly.png");
  for(int i = 0; i < 48; i++)
  {
    int row = i / 17;
    int col = i % 17;
    
    if(i < 24) {
      butt1[i] = gridimage.get(col*30, row*25, 30, 25);
    } else {
      butt2[i-24] = gridimage.get(col*30, row*25, 30, 25);
    }
  }

}

void draw()
{
  background(255);
  
  image(butt1[millis()/100 % butt1.length], b1x, b1y, 60, 50);
  image(butt2[millis()/100 % butt2.length], b2x, b2y, 90, 75);
  
  b1x++;
  b2x++;
}

Example 3: Better butterflies

// butterflies from:
// http://opengameart.org/content/animated-butterfly

// background from:
// http://02varvara.files.wordpress.com/2009/11/field-of-flowers.jpg

PImage bg;

PImage[][] butts = new PImage[5][24];
int bcount = 100;
int[] btypes = new int[bcount];
float[] bxs = new float[bcount];
float[] bys = new float[bcount];
int[] bframes = new int[bcount];
int[] bframespeeds = new int[bcount];
float[] bxspeeds = new float[bcount];
float[] bscales = new float[bcount];

void setup()
{
  size(800, 600);
  bg = loadImage("field-of-flowers.jpg");
  imageMode(CENTER);
  
  PImage gridimage = loadImage("butterfly.png");
  for(int i = 0; i < 5*24; i++)
  {
    int row = i / 17;
    int col = i % 17;
    int b = i / 24;
    butts[b][i % 24] = gridimage.get(col*30, row*25, 30, 25);
  }

  for(int i = 0; i < bcount; i++)
  {
    btypes[i] = int(random(5));
    bxs[i] = random(-100, width);
    bys[i] = random(height);
    bframes[i] = int(random(24));
    bframespeeds[i] = int(random(50, 200));
    bxspeeds[i] = 200.0/bframespeeds[i];
    bscales[i] = random(0.5, 2.0);
  }
}

void draw()
{
  noTint();
  image(bg, width/2, height/2, 
    width, (float(width)/bg.width)*bg.height);
  

  for(int i = 0; i < bcount; i++)
  {
    int frame = (millis()/bframespeeds[i] + bframes[i]) % 24;
    int b = btypes[i];
    image(butts[b][frame], bxs[i], bys[i],
      int(bscales[i]*30), int(bscales[i]*25));
    bxs[i] += bxspeeds[i];
    if(bxs[i] > (width+50))
    {
      bxs[i] = -100;
    }
  }
}

Example 4: Explosion

Some code was deleted so that this program cannot be used verbatim to solve Lab 5.

PImage[] explosion = new PImage[24]; // 24 frames for the explosion
int ex, ey, eframe;
boolean player_exp;

void setup()
{
  PImage exp_gridimage = loadImage("explosion_2.png");
  for (int i = 0; i < 24; i++)
  {
    // ... (extract frames of grid image)
  }

  ex = 500; 
  ey = 300;
  player_exp = false;
}

void draw()
{
  // do we show the explosion?
  if (player_exp)
  {
    // ... (show a certain frame of the explosion)
    // ... (move on to next frame)
  }

  // explosion is shown once (does not loop);
  // if we reach the last frame, turn it off
  if (eframe >= explosion.length)
  {
    player_exp = false;
  }
}

void keyPressed()
{
  if (key == ' ')
  {
    player_exp = true; // turn on explosion
    eframe = 0; // start explosion at first frame
    // ...
  }
}
CSE 1211 material by Joshua Eckroth is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Source code for this website available at GitHub.