A348/A548 Mastering the World-Wide Web (4/3 cr.)

Spring Semester 2002

Example: Transparent images in IceBlox

We'll put everything inside a frame.

import javax.swing.*; 

class Example extends JFrame {

}

Let's put a panel inside the frame, to draw our graphics in it.

import javax.swing.*; 

class Example extends JFrame {

    private class Surface extends JPanel {

    }
}

We can put the frame up on the screen, as follows.

import javax.swing.*; 

class Example extends JFrame {

    Example() {

	this.setSize(400, 400); 

	this.getContentPane().add(new Surface()); 

	setTitle("This is an example..."); 

	this.show(); 

    }

    private class Surface extends JPanel {

    }

    public static void main(String[] args) {

	Example a = new Example(); 

    }

}

We add a window adapter, and we're ready to focus on images from now on.

import javax.swing.*; 
import java.awt.event.*; 

class Example extends JFrame {

    Example() {

	this.setSize(400, 400); 

	this.getContentPane().add(new Surface()); 

	setTitle("This is an example..."); 

	addWindowListener(new WindowCloser()); 

	this.show(); 

    }

    private class Surface extends JPanel {

    }

    private class WindowCloser extends WindowAdapter {
	public void windowClosing(WindowEvent event) {
	    System.out.println("Thanks for using this program. Good-bye!"); 
	    System.exit(0); 
	}
    }

    public static void main(String[] args) {

	Example a = new Example(); 

    }

}

Let's make the panel entirely blue, to have a background for the images.

import javax.swing.*; 
import java.awt.event.*; 
import java.awt.*; 

class Example extends JFrame {

    Example() {
	this.setSize(400, 400); 
	this.getContentPane().add(new Surface()); 
	setTitle("This is an example..."); 
	addWindowListener(new WindowCloser());
	this.show(); 
    }

    private class Surface extends JPanel {
 
	public void paintComponent(Graphics g) {
	    
	    super.paintComponent(g); 

	    g.setColor(Color.blue); 

	    g.fillRect(0, 0, 400, 400); 

	}
	
    }

    private class WindowCloser extends WindowAdapter {
	public void windowClosing(WindowEvent event) {
	    System.out.println("Thanks for using this program. Good-bye!"); 
	    System.exit(0); 
	}
    }

    public static void main(String[] args) {
	Example a = new Example(); 
    }
}

Now we'll be using this image:

The URL for this picture is:

http://www.cs.indiana.edu/classes/a348/CTED/moduleFour/lectures/iceblox/iceblox.gif

There are 6 x 8 pictures, each 30 x 30 pixels, that we will be working with (48 frames in all).

I will choose images 36 (lowest flame) and 39 (happy penguin).

import javax.swing.*; 
import java.awt.event.*; 
import java.awt.*; 
import java.net.*; 
import java.awt.image.*; 

class Example extends JFrame {

    Surface panel; 

    Example() {
	this.setSize(400, 400); 
	this.getContentPane().add(panel = new Surface()); 
	setTitle("This is an example..."); 
	addWindowListener(new WindowCloser());
	this.show(); 
    }

    private class Surface extends JPanel {
	public void paintComponent(Graphics g) {

	    g.setColor(Color.blue); 
	    g.fillRect(0, 0, 400, 400); 

	    if (frames[39] != null) {
		g.drawImage(frames[39], 100, 100, this); 
	    }

	    if (frames[36] != null) {
		g.drawImage(frames[36], 200, 100, this); 
	    }

	}
    }

    private class WindowCloser extends WindowAdapter {
	public void windowClosing(WindowEvent event) {
	    System.out.println("Thanks for using this program. Good-bye!"); 
	    System.exit(0); 
	}
    }

    int smallPictures = 8 * 6; 
    Image[] frames = new Image[smallPictures]; 

    void loadImages() { 

	String artworkURL = "http://www.cs.indiana.edu/classes" + 
	    "/a348/CTED/moduleFour/lectures/iceblox/iceblox.gif"; 
	
	Image artwork; 
	
	try { 
	    artwork = 
		Toolkit.getDefaultToolkit().getImage(new URL(artworkURL));
	} catch (Exception e) { 
	    artwork = 
		Toolkit.getDefaultToolkit().getImage("iceblox.gif");
	}
	
	ImageProducer artworkProducer = artwork.getSource(); 
	
	ImageFilter filter; 
	
	int i = 0, j = 0; 
	
	for (int k = 0; k < smallPictures; k++) {
	    
	    filter = new CropImageFilter(j*30, i*30, 30, 30);   
	    
	    frames[k] = 
		createImage(new FilteredImageSource(artworkProducer, 
						    filter)); 
	    if (++j == 8) { j = 0; i++; } 
	}
	
	System.out.println("Great: All of the images have now been loaded...");

	panel.repaint(); 

    }

    public static void main(String[] args) {
	Example a = new Example(); 
        a.loadImages(); 
    }
}

I didn't use any media tracker, as I wanted to just compare the images.

Here's the final example in which we superimpose the images.

import javax.swing.*; 
import java.awt.event.*; 
import java.awt.*; 
import java.net.*; 
import java.awt.image.*; 

class Example extends JFrame {

    Surface panel; 

    Example() {
	this.setSize(400, 400); 
	this.getContentPane().add(panel = new Surface()); 
	setTitle("This is an example..."); 
	addWindowListener(new WindowCloser());
	this.show(); 
    }

    private class Surface extends JPanel {
	public void paintComponent(Graphics g) {

	    g.setColor(Color.blue); 
	    g.fillRect(0, 0, 400, 400); 

	    if (frames[frames.length - 1] != null) {
		g.drawImage(frames[39], 100, 100, this); 
		g.drawImage(frames[36], 108, 108, this); 

		g.drawImage(frames[36], 200, 100, this); 
		g.drawImage(frames[39], 208, 108, this); 

	    }

	}
    }

    private class WindowCloser extends WindowAdapter {
	public void windowClosing(WindowEvent event) {
	    System.out.println("Thanks for using this program. Good-bye!"); 
	    System.exit(0); 
	}
    }

    int smallPictures = 8 * 6; 
    Image[] frames = new Image[smallPictures]; 

    void loadImages() {

	String artworkURL = "http://www.cs.indiana.edu/classes" + 
	    "/a348/CTED/moduleFour/lectures/iceblox/iceblox.gif"; 
	
	Image artwork; 
	
	try { 
	    artwork = 
		Toolkit.getDefaultToolkit().getImage(new URL(artworkURL));
	} catch (Exception e) { 
	    artwork = 
		Toolkit.getDefaultToolkit().getImage("iceblox.gif");
	}
	
	ImageProducer artworkProducer = artwork.getSource(); 
	
	ImageFilter filter; 
	
	int i = 0, j = 0; 
	
	for (int k = 0; k < smallPictures; k++) {
	    
	    filter = new CropImageFilter(j*30, i*30, 30, 30);   
	    
	    frames[k] = 
		createImage(new FilteredImageSource(artworkProducer, 
						    filter)); 
	    if (++j == 8) { j = 0; i++; } 
	}
	
	System.out.println("Great: All of the images have now been loaded...");

	panel.repaint(); 

    }

    public static void main(String[] args) {
	Example a = new Example(); 
        a.loadImages(); 
    }
}

Finally, transparency can be measured.

I have a demo from chapter 7 (seven) in Petchel, which I include here:

/*
  
  <applet code="CompositeTest.class" width=400 height=400>
 
  </applet>
  
*/ 

import java.applet.*;
import java.awt.*;
import java.awt.geom.*; 
import java.util.*;

// A quick n' dirty approach to encapsulating the properties (position, 
// size, etc) of a square so that it can be updated regularly 
class AlphaBox 
{
    // a random number generator for the class
    private static Random random = null;
    
    // all rendering will be based from a single unit square
    private static Rectangle2D square = null;
    
    // a class copy of the identity affine tranform
    private static AffineTransform identity = null;
    
    // properties of our box
    private AlphaComposite alpha;               
    private double xPos;           // x, y position
    private double yPos;
    private double xVel;           // x, y speed 
    private double yVel;
    private double size;           // width and height
    private Color  color;          // color of this instance
    private Dimension windowSize;
    
    public AlphaBox(Dimension d)
    {
	windowSize = d;
	
	// define any null objects
	if(random == null)
	    { 
		random = new Random();
	    }
	
	if(square == null)
	    { 
		square = new Rectangle2D.Float(-0.5f, -0.5f, 1.0f, 1.0f);
	    }
	
	if(identity == null)
	    {
		identity = new AffineTransform();
	    }
	
	// all composites will be SRC_OVER and very transparent
	// play around with these values (try randomizing them)
	// to get some cool effects
	alpha = AlphaComposite.getInstance(
					   AlphaComposite.SRC_OVER, 0.25f);
	
	// randomize the properties of the box
	xPos = windowSize.width*random.nextDouble();
	yPos = windowSize.height*random.nextDouble();
	xVel = 1+2*random.nextDouble();
	if(random.nextDouble() > 0.5) xVel = -xVel;
	yVel = 1+2*random.nextDouble();
	if(random.nextDouble() > 0.5) yVel = -yVel;
	size = 25+100*random.nextDouble();
	color = new Color(random.nextInt()).brighter();
    }  
    
    // paints the box to the sent Graphics2D context according 
    // to its current properties 
    public void paint(Graphics2D g2d)
    {
	// bounce the box around the window
	
	xPos += xVel;
	if(xPos > windowSize.width)
	    {  
		xPos = windowSize.width;
		xVel = -xVel;
	    }
	if(xPos < 0)
	    {
		xPos = 0;
		xVel = -xVel;
	    }
	
	yPos += yVel;
	if(yPos > windowSize.height)
	    { 
		yPos = windowSize.height;
		yVel = -yVel;
	    }
	if(yPos < 0)
	    {
		yPos = 0;
		yVel = -yVel;
	    }
	
	// render the box  
	g2d.setTransform(identity);
	g2d.translate(xPos, yPos);
	g2d.scale(size, size);
	g2d.setComposite(alpha);
	g2d.setPaint(color);
	g2d.fill(square);
    }
    
} // AlphaBox              

public class CompositeTest extends Applet implements Runnable
{  
    // a thread for animation -- we'll talk about this later 
    private volatile Thread animation;
    
    // an array of AlphaBox objects
    private AlphaBox[] boxes;
    
    public void init()
    {
	animation = new Thread(this);
	
	// create the boxes
	final int n = 10;
	boxes = new AlphaBox[n];
	Dimension size = this.getSize();
	for(int i = 0; i < n; i++)
	    {
		boxes[i] = new AlphaBox(size);
	    }
    }
    
    public void start()
    {
	animation.start();
    }
    
    public void stop()
    {
	animation = null;
    }
    
    // override the update method so that it doesn't clear the window 
    public void update(Graphics g)
    {
	paint(g);
    }
    
    public void paint(Graphics g)
    {
	Graphics2D g2d = (Graphics2D)g;
	
	// paint each AlphaBox
	for(int i = 0; i < boxes.length; i++)
	    {
                       boxes[i].paint(g2d);
	    }
    }
    
    public void run()
    {
	// we'll talk about this stuff later!
	Thread t = Thread.currentThread();
	while (t == animation)
	    {
		try 
		    {
			t.sleep(10);
		    }
		catch (InterruptedException e)
		    {
		    }
		repaint();
	    }      
    }
    
} // CompositeTest

One can

compile CompositeTest.java then
run the applet viewer on it

to see objects of various transparencies.

This is far from being a good tutorial but I hope it helps a bit.

Thanks and please let me know if I can be of more help.

Last updated: Jun 8, 2002 by Adrian German as an example.