TweetFollow Us on Twitter

Feb 97 Getting Started

Volume Number: 13 (1997)
Issue Number: 2
Column Tag: Getting Started

The ShapeWorld Applet

By Dave Mark

A few months ago I promised an applet that did double-buffered animation. When I started work on the sample applet, I realized that I was definitely jumping the gun and there was still a lot of ground to cover to get to double-buffering. Since then, I've explored the AWT event-handling mechanism, as well as the various shape drawing routines in the Graphics class.

This month I am going to bring these concepts (and a few new ones) together into an applet called ShapeWorld. This month's version of ShapeWorld (I'll extend it next month) randomly scatters some rectangles into a Canvas, then responds to mouse clicks by selecting and deselecting the rectangles. As you'll see next month, ShapeWorld was designed to be extended. For now, let's get the first version up and running.

The ShapeWorld Project

Launch the CodeWarrior IDE and create a new project named ShapeWorld.µ using the Java applet stationery. Create a new source file named ShapeWorld.java and add it to the project. Here's the ShapeWorld.java source code:

import java.awt.*;
import java.util.*;

abstract class Shape
{
 booleanhighlighted;
 ShapeCanvasshapeCanvas;
 int    shapeX, shapeY, shapeWidth, shapeHeight;
 RectangleboundsRect;
 Shape( ShapeCanvas canv, int x, int y,
 int width, int height )
 {
 shapeCanvas = canv;
 highlighted = false;
 
 shapeX = x;
 shapeY = y;
 shapeWidth = width;
 shapeHeight = height;
 boundsRect = new Rectangle( x, y, width, height );
 }
 
 abstract public void draw( Graphics g );
 
 public void setHighlight( boolean newHighlight )
 {
 highlighted = newHighlight;
 }
 
 public boolean isHighlighted()
 {
 return highlighted;
 }
 
 public boolean isPointInShape( int x, int y )
 {
 return boundsRect.inside( x, y );
 }
}

class RectShape extends Shape
{
 RectShape( ShapeCanvas canv, int x, int y,
 int width, int height )
 {
 super( canv, x, y, width, height );
 }
 
 public void draw( Graphics g )
 {
 if ( isHighlighted() )
 {
 g.setColor( Color.black );
 g.fillRect( shapeX, shapeY, shapeWidth, shapeHeight );
 g.setColor( Color.red );
 g.fillRect( shapeX+2, shapeY+2,
 shapeWidth-4, shapeHeight-4 );
 }
 else
 {
 g.setColor( Color.red );
 g.fillRect( shapeX, shapeY, shapeWidth, shapeHeight );
 }
 }
}

class ShapeCanvas extends Canvas
{
 Vector shapes;
 Shape  curShape;
 
 ShapeCanvas( int width, int height )
 {
 shapes = new Vector();
 curShape = null;
 
 setBackground( Color.yellow );
 
 resize( width, height );
 }
 
 public void addShape( Shape newShape )
 {
 shapes.addElement( newShape );
 }
 
 public void paint( Graphics g )
 {
 for ( Enumeration e = shapes.elements(); 
 e.hasMoreElements(); )
 {
 Shape s = (Shape)e.nextElement();
 s.draw( g );
 }
 }
 
 public Shape findInShapeList( int x, int y )
 {
 for ( Enumeration e = shapes.elements(); 
 e.hasMoreElements(); )
 {
 Shape s = (Shape)e.nextElement();
 
 if ( s.isPointInShape( x, y ) )
 {
 s.setHighlight( ! s.isHighlighted() );
 s.draw( getGraphics() );

 return s;
 }
 }
 
 return null;
 }
 
 public void update (Graphics g)
 {
   paint(g);
 }
 
 public boolean mouseDown( Event e, int x, int y )
 {
 curShape = findInShapeList( x, y );
 
 return true;
 }
}

public class ShapeWorld extends java.applet.Applet
{
 ShapeCanvassCanvas;
 final intshapeWidth = 20;
 final intshapeHeight = 20;
 
 public void init()
 {
 int    x, y;
 
 sCanvas = new ShapeCanvas( 440, 290 );
 add( sCanvas );
 
 Random ran = new Random();
 Rectangle b = sCanvas.bounds();
 
 for ( int i=1; i<=10; i++ )
 {
 x = b.x + (int)((float)(b.width) * ran.nextFloat() );
 if ( x > b.x + b.width - shapeWidth )
 x -= shapeWidth;
 
 y = b.y + (int)((float)(b.height) * ran.nextFloat() );
 if ( y > b.y + b.height - shapeHeight )
 y -= shapeHeight;
 
 RectShape r = new RectShape( sCanvas, x, y, 
 shapeWidth, shapeHeight );
 sCanvas.addShape( r );
 }
 }
}

Save your typing, then create a new source code file named ShapeWorld.html and add it to the project. Here's the html:

<title>ShapeWorld</title>
<hr>
<applet codebase="ShapeWorld Classes" code="ShapeWorld.class" width=500 
height=300>
</applet>
<hr>
<a href="ShapeWorld.java">The source.</a>

Running the ShapeWorld Applet

Once your source and html are entered and saved, run the ShapeWorld applet. Figure 1 shows my ShapeWorld applet running in the Metrowerks Java applet runner. The ten shapes all appear in red on a Canvas with a background color of yellow. The shapes are randomly distributed throughout the Canvas.

Figure 1. The ShapeWorld applet with no shapes selected.

Figure 2 shows what happens when I click the mouse inside a shape. In this case, I've selected six of the ten shapes. A two pixel border is used to mark a shape as selected.

Figure 2. The ShapeWorld applet with six shapes selected.

The ShapeWorld Source

ShapeWorld creates four classes. ShapeWorld is the main entry point and extends the java.applet.Applet class. The ShapeCanvas class implements the Canvas. The Shape class is an abstract class which means that I won't be creating any Shape objects. The RectShape class extends the Shape class and is used to create the ten shapes you see in the ShapeWorld Canvas.

As you look through the Shape class, remember that all the variables and functions will be inherited by any classes that extend Shape. highlighted is set to true if the shape is selected, false otherwise. shapeCanvas is the enclosing Canvas. shapeX, shapeY, shapeWidth, and shapeHeight define the boundries of this Shape. boundsRect does the exact same thing, but stores this same info in a Rectangle instead of in individual variables. Why the duplication? With both forms available, I don't have to spend time converting from one form to the other. This might seem like a frivolous waste of memory, but when we are stepping through a large number of shapes, perhaps during a redraw cycle, the little time we save can make a difference.

import java.awt.*;
import java.util.*;

abstract class Shape
{
 booleanhighlighted;
 ShapeCanvasshapeCanvas;
 int    shapeX, shapeY, shapeWidth, shapeHeight;
 RectangleboundsRect;
 

The Shape constructor initializes the Shape variables. The draw() function is declared abstract, which means it must be overridden by any class that extends Shape. Note that an abstract function doesn't have a function body. setHighlight() sets highlighted to a new value. isHighlighted() returns the value of highlighted. Finally, isPointInShape() takes advantage of the Rectangle classes' inside() function to tell you if the specified point is inside the Shape's bounding Rectangle.

 Shape( ShapeCanvas canv, int x, int y,
 int width, int height )
 {
 shapeCanvas = canv;
 highlighted = false;
 
 shapeX = x;
 shapeY = y;
 shapeWidth = width;
 shapeHeight = height;
 
 boundsRect = new Rectangle( x, y, width, height );
 }
 
 abstract public void draw( Graphics g );
 
 public void setHighlight( boolean newHighlight )
 {
 highlighted = newHighlight;
 }
 
 public boolean isHighlighted()
 {
 return highlighted;
 }
 
 public boolean isPointInShape( int x, int y )
 {
 return boundsRect.inside( x, y );
 }
}

RectShape extends the Shape class. The RectShape constructor just passes on its parameters to its superclass constructor, which is the Shape constructor. If the shape is selected, the draw() function draws a black rectangle, insets the rectangle by two pixels on each side, then draws a red rectangle. I could have used two calls to drawRect() to frame the black rectangle followed by a call to fillRect() to fill in the red, but this made the code easier to read.

class RectShape extends Shape
{
 RectShape( ShapeCanvas canv, int x, int y,
 int width, int height )
 {
 super( canv, x, y, width, height );
 }
 
 public void draw( Graphics g )
 {
 if ( isHighlighted() )
 {
 g.setColor( Color.black );
 g.fillRect( shapeX, shapeY, shapeWidth, shapeHeight );
 g.setColor( Color.red );
 g.fillRect( shapeX+2, shapeY+2,
 shapeWidth-4, shapeHeight-4 );
 }
 else
 {
 g.setColor( Color.red );
 g.fillRect( shapeX, shapeY, shapeWidth, shapeHeight );
 }
 }
}

The ShapeCanvas class is my main drawing area. The shapes variable is of the java.util.Vector class. A Vector implements a growable array of objects. I can access the objects via random access (using an integer index) or by stepping through the list. Since I want to tie a list of shapes to my Canvas, a Vector is a natural structure in which to store references to the Shapes. Spend some time reading the java.util.Vector doc to truly appreciate the value of the Vector. In addition, you should read about the Enumeration interface (on the java.util page) that the Vector class implements. The Enumeration interface allows you to step through your Vector using the functions hasMoreElements() and nextElement().

class ShapeCanvas extends Canvas
{
 Vector shapes;
 Shape  curShape;

The ShapeCanvas() constructor creates a new Vector and sets curShape to null. I won't make use of curShape this month, but I will use it next month to keep track of the last selected Shape. The constructor also sets the background color and changes the Canvas' size.

 ShapeCanvas( int width, int height )
 {
 shapes = new Vector();
 curShape = null;
 
 setBackground( Color.yellow );
 
 resize( width, height );
 }

addShape() adds a shape to the Vector. paint() steps through the shapes Vector, retrieving the current Shape and calling its draw() method. This method of stepping through a Vector is extremely useful. Note that nextElement() returns an Object, so I needed to cast the returned value to Shape. By retrieving a Shape instead of a specific derived class such as RectShape(), I can use this code to draw any Shapes stored in the list, no matter the type, as long as each shape is derived from Shape.

 public void addShape( Shape newShape )
 {
 shapes.addElement( newShape );
 }
 
 public void paint( Graphics g )
 {
 for ( Enumeration e = shapes.elements(); 
 e.hasMoreElements(); )
 {
 Shape s = (Shape)e.nextElement();
 s.draw( g );
 }
 }

findInShapeList() also steps through the shapes Vector. In each case, I call each Shape's isPointInShape() function to see if the specified point is in the current Shape. If the point was in the Shape, I flip highlighted and redraw the Shape (since it is now selected.)

 public Shape findInShapeList( int x, int y )
 {
 for ( Enumeration e = shapes.elements(); 
 e.hasMoreElements(); )
 {
 Shape s = (Shape)e.nextElement();
 
 if ( s.isPointInShape( x, y ) )
 {
 s.setHighlight( ! s.isHighlighted() );
 s.draw( getGraphics() );

 return s;
 }
 }
 
 return null;
 }

The update() function calls paint(). The default update() (inherited from the Component class) erases the area to be updated and then calls paint(). By calling paint() without the erase, I avoid an annoying flicker. This trick is well worth remembering. To truly understand what it does, comment out the entire update() method (not just the call to paint() which will prevent drawing from occuring at all!!!)

 public void update (Graphics g)
 {
   paint(g);
 }

The mouseDown() function gets called when I click the mouse in the Canvas. At the moment, I don't do anything interesting with the Shape returned by findInShapeList(), but I will next month.

 public boolean mouseDown( Event e, int x, int y )
 {
 curShape = findInShapeList( x, y );
 
 return true;
 }
}

The last thing I want to point out this month is the use of the Random class. ShapeWorld creates 10 new RectShapes (remember, you can't actually create a Shape since you can't create an instance of an abstract class) using the random values returned by Random(). Random is described on the page java.util.Random. Be sure to check out that page of documentation, as it describes a variety of random number distributions and returned types.

public class ShapeWorld extends java.applet.Applet
{
 ShapeCanvassCanvas;
 final intshapeWidth = 20;
 final intshapeHeight = 20;
 
 public void init()
 {
 int    x, y;
 
 sCanvas = new ShapeCanvas( 440, 290 );
 add( sCanvas );
 Random ran = new Random();
 Rectangle b = sCanvas.bounds();
 
 for ( int i=1; i<=10; i++ )
 {
 x = b.x + (int)((float)(b.width) * ran.nextFloat() );
 if ( x > b.x + b.width - shapeWidth )
 x -= shapeWidth;
 
 y = b.y + (int)((float)(b.height) * ran.nextFloat() );
 if ( y > b.y + b.height - shapeHeight )
 y -= shapeHeight;
 
 RectShape r = new RectShape( sCanvas, x, y, 
 shapeWidth, shapeHeight );
 sCanvas.addShape( r );
 }
 }
}

Till Next Month...

As promised, next month I'll add some new functionality to ShapeWorld. Before you peek at next month's column, try your hand at adding a new Shape subclass to ShapeWorld. Experiment. Read the doc. I'll see you then...

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

How to win big in Slots Deluxe
Cheating while gambling is illegal and morally wrong, and in some parts of the world it leads to men with names like Vinnie "Six Knuckles" Manchenzo beating you to a pulp in a dark alley. [Read more] | Read more »
How to take over the world in Dictator 2
Running a country isn't easy - especially when you're a dictator who wants to take over the world and crush everyone in your path while you do it. [Read more] | Read more »
Tips and tricks to get a higher score in...
Tank.iois - you guessed it! - another multiplayer arena battler likeAgar.io and Slither.io. It does differentiate itself by putting you in a tiny tank though, so it's not exactly the same. To help you get that all-important high score, we've got a... | Read more »
How to unlock characters in One Tap Tenn...
As the title suggests, One Tap Tennis requires only a single tap to play its particular brand of tennis, and rewards you with a ton of unlockable characters if you perform well. Fortunately for you, we at 148Apps have got a few tips and tricks to... | Read more »
Grab it now: Game Craft’s Legend of War...
The real time strategy game is now available for you to sink your teeth into, through the App Store and Google Play. Combining elements of skill, strategy and empire building, Legend of War is a real gamers’ game. [Read more] | Read more »
Skateboard Party 3 ft. Greg Lutzka (Gam...
Skateboard Party 3 ft. Greg Lutzka 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Skateboard Party is back! This third edition of the popular sports franchise features professional skater... | Read more »
Cubious (Games)
Cubious 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: Cubious – How smart are you? How high is your IQube? Solve the impossible puzzles to find out, and help a lost little cube find his... | Read more »
Goat Simulator Waste of Space (Games)
Goat Simulator Waste of Space 1.1 Device: iOS Universal Category: Games Price: $4.99, Version: 1.1 (iTunes) Description: ** IMPORTANT - SUPPORTED DEVICESiPhone 4S, iPad 2, iPod Touch 5 or better.** | Read more »
Wildfulness - Unwind in nature and calm...
Wildfulness - Unwind in nature and calm your mind with nature sounds and illustrations 1.0 Device: iOS Universal Category: Healthcare & Fitness Price: $1.99, Version: 1.0 (iTunes) Description: Spending time in nature helps you to... | Read more »
Dr. Panda Racers (Education)
Dr. Panda Racers 1.0 Device: iOS Universal Category: Education Price: $2.99, Version: 1.0 (iTunes) Description: STEP ON THE GAS, RACE AND WIN!Fasten your seat belts and get ready to race! Speed your way to the finish line while doing... | Read more »

Price Scanner via MacPrices.net

Enterprise Workers Pick Technology Over Perks...
New Adobe study shows surprising attitudes about office jobs and where the future of work is heading. Adobe has released survey findings revealing that a surprising 70 percent of U.S. office workers... Read more
Goal Zero and OtterBox Partner to Expand iPh...
Goal Zero, specialists in portable power, have announced a partnership with OtterBox, brand smartphone case protection, to offer the Slide and Slide Plus Batteries as modules compatible with the new... Read more
15-inch Retina MacBook Pros on sale for up to...
B&H Photo has 15″ Retina MacBook Pros on sale for up to $210 off MSRP. Shipping is free, and B&H charges NY tax only: - 15″ 2.2GHz Retina MacBook Pro: $1799 $200 off MSRP - 15″ 2.5GHz Retina... Read more
Clearance 2015 13-inch MacBook Airs available...
B&H Photo has clearance 2015 13″ MacBook Airs available for $250 off original MSRP. Shipping is free, and B&H charges NY sales tax only: - 13″ 1.6GHz/4GB/128GB MacBook Air (MJVE2LL/A): $799... Read more
Apple refurbished Apple TVs available for up...
Apple has Certified Refurbished 32GB and 64GB Apple TVs available for up to $30 off the cost of new models. Apple’s standard one-year warranty is included with each model, and shipping is free: -... Read more
21-inch iMacs on sale for up to $120 off MSRP
B&H Photo has 21″ iMacs on sale for up to $120 off MSRP including free shipping plus NY sales tax only: - 21″ 3.1GHz iMac 4K: $1379.99 $120 off MSRP - 21″ 2.8GHz iMac: $1189 $110 off MSRP - 21″ 1... Read more
Kanex Introduces GoPower USB-C Rechargeable B...
Kanex has announced its GoPower USB-C portable battery for the USB-C MacBook, featuring the new industry standard connector and cable used for connectivity and power. Providing users with a new... Read more
Convertible and Detachable Devices Winning Ov...
According to the latest figures published by International Data Corporation (IDC), Western European shipments of ultraslim convertibles and detachables posted positive growth (44.7%) to account for... Read more
New MacBook Pros And Will MacBook Air Be Upgr...
With my mid-2013 13-inch MacBook Air closing on its third anniversary come November, I’m in system upgrade mode. Actually the Haswell CPU equipped Air is still doing a fine job, but my good wife is... Read more
Apple’s Education discount saves up to $300 o...
Purchase a new Mac or iPad using Apple’s Education Store and take up to $300 off MSRP. All teachers, students, and staff of any educational institution qualify for the discount. Shipping is free, and... Read more

Jobs Board

*Apple* Project Engineer - Smart Source Inc...
SmartSource is in need of an Apple Project Engineer for a 12 month contract opportunity in Pittsburg, PA. Role: Apple Project Engineer Location: Pittsburg, PA Read more
Automotive Sales Consultant - Apple Ford Linc...
…you. The best candidates are smart, technologically savvy and are customer focused. Apple Ford Lincoln Apple Valley is different, because: $30,000 annual salary Read more
Service Assistant - *Apple* Chevrolet *App...
Apple Automotive is one of the fastest growing dealer...and it shows. Consider making the switch to the Apple Automotive Group today! At Apple Automotive, we Read more
Editor, *Apple* News - APPLE (United States...
Job Summary The Apple News team is looking for a passionate and knowledgeable editor with experience covering entertainment/pop culture and experience running social Read more
*Apple* Nissan Service Technicians - Apple A...
Apple Automotive is one of the fastest growing dealer...and it shows. Consider making the switch to the Apple Automotive Group today! At Apple Automotive , Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.