This example uses the mouse and some more sophisticated code to make strips of an image fade in and out. The next example uses the EZIO and is actually simpler, but this one features some interesting tricks:
- the canvas is 800 pixels wide; divide that into 8 100px sections, each with its own image
- whichever 100px section the mouse is in fades in; the rest should fade out
- to do this, we need to keep track of opacities in variables, so we can increase and decrease them
- since this involves a lot of very repetitive code (we're basically doing the same thing 8 times in a row, once for each image strip) we can make it easier by using loops and Arrays.
see the applet
// move the mouse across the screen
// to make strips of the image fade in
// an array for images
PImage[] chicago;
// an array for opacities
int[] opacities;
void setup ()
{
// load the images
int i;
// create the arrays: 8 images, 8 opacity values
chicago = new PImage[8];
opacities = new int[8];
// use a loop to load all the images
for (i=0 ; i < 8 ; i++)
{
String filename = "chicago_" + (i+1) + ".jpg";
chicago[i]=loadImage(filename);
}
size(800,200);
}
void draw ()
{
background(0,0,0);
int i;
// figure out which strip the mouse is over
// each is about 100 pixels wide
int section = mouseX / 100;
// increase the opacity for that strip
opacities[section] += 5;
// loop through all the strips
for (i=0 ; i < 8 ; i++)
{
// set opacity
tint (255,255,255,opacities[i]);
// draw strip 0 at (0,0), strip 1 at (100,0), strip 2 at (200,0), etc...
int x=i * 100;
image(chicago[i],x,0,chicago[i].width,chicago[i].height);
// make each opacity fade out a little bit each frame
opacities[i] -= 1;
// but stop at 0
if (opacities[i] < 0)
opacities[i]=0;
}
}