Lesson 6 Creating animation

Points and Activities

  1. Using off-screen image to avoid screen-flushing.
  2. Creating off-screen image and copying it to the real screen.
  3. Drawig on the off-screen.
  4. Creating animation

Example 6

Screen of the applets

Exm6.java
import java.awt.*;                 
import java.applet.*;              
import java.awt.event.*;

public class Exm6 extends Applet implements ActionListener  
{
    Button button1 = new Button(); // Plot Button
    Button button2 = new Button(); // Init Button
    Image buffer;   // image buffer
    Graphics myGC;  // graphics for the buffer

    int vxmin,vymin,vxmax,vymax;  //screen coordinates
    double xmin,ymin,xmax,ymax;   //imaginary coordinates
    double dx;                    //interval of x
    double angle;                 //angle
    double d_angle;               //interval of angle
    double cx,cy,cr;              //center and radius of circle
    
    /* initializing */
    public void init(){
        String str;
        
        xmin=-3;xmax=7;ymin=-1.5;ymax=1.5;
        vxmin=0;vxmax=500;vymin=0;vymax=150;
        dx=Math.PI/60;
        angle=0;d_angle=Math.PI/60;
        cx=-1.5;cy=0;cr=1;
        
	setLayout(null);  //free layout
	setSize(500,150); //size of this applet
		
	add(button1);
	button1.setLabel("Plot");
	button1.setFont(new Font("Dialog", Font.PLAIN, 16));
	button1.setBounds(320,5,50,20);
	button1.addActionListener(this);
	    
	add(button2);
	button2.setLabel("Init");
	button2.setFont(new Font("Dialog", Font.PLAIN, 16));
	button2.setBounds(390,5,50,20);
	button2.addActionListener(this);
        
	// create off-screen image
	buffer = createImage(vxmax-vxmin,vymax-vymin);
	
	// get graphics
	myGC = buffer.getGraphics();
      
    	setLayout(null);
	setSize(500,150);
    }
    public void paint(Graphics g){
        drawGraph(); //draw graph to the buffer.
        g.drawImage(buffer,0,0,this); //copy buffer to the screen 
    }
    
    public void drawGraph()  {             
	double x1,y1,x2,y2;           
	  
	//axes and scale
	scale(myGC);
	    
	//unit circle
	myGC.setColor(Color.black);     
	Line(myGC,cx,ymin,cx,ymax);
	Circle(myGC,cx,cy,1);
	x1=cx;y1=cy;
	x2=cx+cr*Math.cos(angle);y2=cy+cr*Math.sin(angle);
	Line(myGC,x1,y1,x2,y2);
	myGC.setColor(Color.gray);     
	Line(myGC,x2,y2,angle,Math.sin(angle));
	    
	//graph
	myGC.setColor(Color.blue);     
	x2=0;y2=Math.sin(x2);
	for(x1=0;x1<=angle;x1=x1+dx){
		y1=Math.sin(x1);
		Line(myGC,x1,y1,x2,y2);
		x2=x1;y2=y1;
	}
   }

	/* Convert imaginary coordinates to screen cordinates. */
    public int mapX(double x){
	int sx;
	sx= vxmin+(int)((x-xmin)/(xmax-xmin)*(double)(vxmax-vxmin)) ;
	return sx;
    }
    public int mapY(double y){
	int sy;
	sy= vymin+(int)((ymax-y)/(ymax-ymin)*(double)(vymax-vymin));
	return sy;
    }
    
    /* Drawing Line */
    public void Line(Graphics g,double x1,double y1,double x2,double y2){
	g.drawLine(mapX(x1),mapY(y1),mapX(x2),mapY(y2));
    }
    
    /* Drawing Circle */
    public void Circle(Graphics g,double x,double y,double r){
	g.drawOval(mapX(x-r),mapY(y+r),mapX(2*r)-mapX(0),mapY(-2*r)-mapY(0));
    }
    
    /* axes and lattice */
    public void scale(Graphics g){
	double x,y;
	//back color
	g.setColor(new Color(255, 255, 192)); 
	g.fillRect(vxmin,vymin,vxmax-vxmin,vymax-vymin);
	    
	g.setColor(Color.lightGray);
	for (x=Math.PI/2;x<=Math.PI*2;x=x+Math.PI/2){
		Line(g,x,-0.05,x,0.05);
	}
	for (y=-1;y<=1;y=y+1){
		Line(g,-0.05,y,0.05,y);
	}
	    
	// xy-axes
	g.setColor(Color.black);
	Line(g,0,ymin,0,ymax);
	Line(g,xmin,0,xmax,0);     
    }
    
    public void actionPerformed(ActionEvent event)
	{
	String str;
	Object object = event.getSource();
	Graphics g=getGraphics();
		
		
	if (object == button1){
		angle=0;
		//plotting animation
		while(angle<2*Math.PI){
			angle=angle+d_angle;
			paint(g);
		}
	}
	if (object == button2){
		angle=0;
		repaint();
	}
     }
	
}

Exm6.html
<HTML>
<HEAD>
<TITLE>Exm6</TITLE>
</HEAD>
<BODY>
<APPLET CODE="Exm6.class" WIDTH=500 HEIGHT=150></APPLET>
</BODY>
</HTML>


Excercise 6a
Modify Exm6.java to draw two graphs; y=sin x and y=sin 2x.

Excercise 6b
Modify the program of Excercise 6a to draw two graphs; y=sin x and y=sin ax. Use text box to change the value of a.