TweetFollow Us on Twitter

Mar 97 Getting Started

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

An Expanded ShapeWorld Applet

By Dave Mark

Last month's Getting Started column introduced the ShapeWorld applet. The initial version of ShapeWorld featured four classes: The ShapeWorld class extends the Applet class and creates and controls all the applet objects. The ShapeCanvas class extends the Canvas class and implements the canvas we'll do all our drawing in. The Shape class is designed to be extended and provides the basic functions for implementing a shape. The RectShape class extends Shape and overrides the Shape classes' abstract draw() method to draw a rectangular shape.

Why divide the shapes into two separate classes? After all, we could have just done the drawing in the Shape class. However, that is what this month's column is all about. We are going to add a second Shape subclass to our applet, along with some code that lets you drag your shapes around in the ShapeCanvas.

The ShapeWorld Project

Here's the source code to this month's applet. For the most part, we've added code to last month's project with only a few lines changed (mostly to change the way highlighting works - more on this in a moment).

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 erase( Graphics g )
 {
 g.clearRect( shapeX, shapeY, shapeWidth, shapeHeight );
 }
 
 public void setHighlight( boolean newHighlight )
 {
 highlighted = newHighlight;
 }
 
 public boolean isHighlighted()
 {
 return highlighted;
 }
 
 public boolean isPointInShape( int x, int y )
 {
 return boundsRect.inside( x, y );
 }

 public voidmoveThisMuch( int x, int y )
 {
 boundsRect.move( shapeX + x, shapeY + y );
 shapeX = boundsRect.x;
 shapeY = boundsRect.y;
 shapeWidth = boundsRect.width;
 shapeHeight = boundsRect.height;
 }
}

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 OvalShape extends Shape
{
 OvalShape( 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.fillOval( shapeX, shapeY, shapeWidth, shapeHeight );
 g.setColor( Color.red );
 g.fillOval( shapeX+2, shapeY+2,
 shapeWidth-4, shapeHeight-4 );
 }
 else
 {
 g.setColor( Color.red );
 g.fillOval( shapeX, shapeY, shapeWidth, shapeHeight );
 }
 }
}

class ShapeCanvas extends Canvas
{
 Vector shapes;
 Shape  curShape;
 Point  mousePosition;
 
 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.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 );
 
 if ( curShape != null )
 {
 curShape.setHighlight( true );
 mousePosition = new Point( x, y );
 
 return true;
 }
 
 return false;
 }
 
 public boolean mouseDrag( Event e, int x, int y )
 {
 Graphics g;
 
 if ( curShape != null )
 {
 g = getGraphics();
 
 curShape.erase( g );
 
 curShape.moveThisMuch( x - mousePosition.x,
 y - mousePosition.y );
 
 mousePosition.x = x;
 mousePosition.y = y;
 
 curShape.draw( g );
 
 return true;
 }
 
 return false;
 }
 
 public boolean mouseUp( Event e, int x, int y )
 {
 if ( curShape != null )
 {
 curShape.setHighlight( false );
 repaint();
 
 return true;  
 }
 
 return false;
 }
}

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 );
 }

 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;
 
 OvalShape r = new OvalShape( sCanvas, x, y, 
 shapeWidth, shapeHeight );
 sCanvas.addShape( r );
 }
 }
}

Running the New ShapeWorld

Before we get to the source code differences between last month's applet and this month's applet, take a look at Figure 1, which shows the applet running under the Metrowerks VM. The figure shows the applet window with the ShapeCanvas taking up most of the window (shown in yellow). The Canvas shows 10 RectShapes and 10 OvalShapes.

Notice that only one shape is highlighted. In last month's applet, we toggled highlighting for a shape on and off again with each click. Since we added dragging this month, I wanted to try a slightly different approach to highlighting. Now, highlighting turns on when a drag starts and turns off when the drag ends. This isn't necessarily correct for all applications, but the changes needed to implement this approach are worth understanding.

Notice also that when one shape drags over another, the underlying shape is erased to the background color and is not restored until the drag ends. Take some time to see why this happens. How could you change this code so that "dragged-over" shapes are not erased by the drag?

Figure 1. The new ShapeWorld applet running under the Metrowerks VM.

What Source Code was Added This Month?

The first change made to last month's code is the addition of 2 new methods to the Shape class. erase() calls the Graphics method clearRect() to erase the current Shape to the background color. As you might guess, erase() is a key part of the erase/redraw cycle we use when dragging a shape. This is definitely a bare-bones approach to drag animation. Can you come up with some alternatives?

 public void erase( Graphics g )
 {
 g.clearRect( shapeX, shapeY, shapeWidth, shapeHeight );
 }

moveThisMuch() takes an x and a y offset and moves the shape that many pixels left or right and up or down. Just a reminder: since we maintain both a Rectangle (boundsRect) and a set of individual x, y, width, and height variables, we'll need to update both. On reflection, if I had this to do over again, I probably would have picked one or the other but not both, just to avoid the confusion that comes with having to keep both in sync.

 public voidmoveThisMuch( int x, int y )
 {
 boundsRect.move( shapeX + x, shapeY + y );
 shapeX = boundsRect.x;
 shapeY = boundsRect.y;
 shapeWidth = boundsRect.width;
 shapeHeight = boundsRect.height;
 }

Next, we added a new Shape subclass. OvalShape is almost identical to RectShape, calling fillOval() instead of fillRect(). Though the OvalShapes may look like circles, they are indeed ovals. Try changing the bounding rectangle used to create them and see for yourself.

class OvalShape extends Shape
{
 OvalShape( 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.fillOval( shapeX, shapeY, shapeWidth, shapeHeight );
 g.setColor( Color.red );
 g.fillOval( shapeX+2, shapeY+2,
 shapeWidth-4, shapeHeight-4 );
 }
 else
 {
 g.setColor( Color.red );
 g.fillOval( shapeX, shapeY, shapeWidth, shapeHeight );
 }
 }
}

Next, the variable mousePosition was added to the ShapeCanvas class. mousePosition is used to track the mouse's position when the drag started and as it proceeds.

class ShapeCanvas extends Canvas
{
 Vector shapes;
 Shape  curShape;
 Point  mousePosition;

To implement the drag, we had to make a few changes. First, we added some code to the mouseDown() method to highlight the shape and store away the current mouse position.

 public boolean mouseDown( Event e, int x, int y )
 {
 curShape = findInShapeList( x, y );
 
 if ( curShape != null )
 {
 curShape.setHighlight( true );
 mousePosition = new Point( x, y );
 
 return true;
 }
 
 return false;
 }

While the drag is happening, we'll get repeated calls to mouseDrag(). Assuming the drag was inside a shape, we first erase the shape, then move it, then redraw it.

 public boolean mouseDrag( Event e, int x, int y )
 {
 Graphics g;
 
 if ( curShape != null )
 {
 g = getGraphics();
 
 curShape.erase( g );
 
 curShape.moveThisMuch( x - mousePosition.x,
 y - mousePosition.y );
 
 mousePosition.x = x;
 mousePosition.y = y;
 
 curShape.draw( g );
 
 return true;
 }
 
 return false;
 }

When the mouse button is released, the mouseUp() method is called. When this happens, we unhighlight the shape and redraw all the shapes. Note the difference between repaint() and draw().

 public boolean mouseUp( Event e, int x, int y )
 {
 if ( curShape != null )
 {
 curShape.setHighlight( false );
 repaint();
 
 return true;  
 }
 
 return false;
 }
}

Finally, we'll add some code to the ShapeWorld class to create 10 of our new OvalShapes. This code is the same as that used to create the RectShapes.

 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;
 
 OvalShape r = new OvalShape( sCanvas, x, y, 
 shapeWidth, shapeHeight );
 sCanvas.addShape( r );
 }

Till Next Month...

Take some time to look over this code. Can you improve it? What happens if you replace the erase() call with a call to repaint()? Can you improve the performance of the code? How would you add a graphical background to the Canvas? Can you add a pair of buttons to the interface, one to create a new RectShape and one to create a new OvalShape at a random location in the Canvas? See you next month.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

EtreCheck 3.1.4 - For troubleshooting yo...
EtreCheck is an app that displays the important details of your system configuration and allow you to copy that information to the Clipboard. It is meant to be used with Apple Support Communities to... Read more
Together 3.7 - Store and organize all of...
Together helps you organize your Mac, giving you the ability to store, edit and preview your files in a single clean, uncluttered interface. Features Smart storage. With simple drag-and-drop... Read more
Together 3.7 - Store and organize all of...
Together helps you organize your Mac, giving you the ability to store, edit and preview your files in a single clean, uncluttered interface. Features Smart storage. With simple drag-and-drop... Read more
EtreCheck 3.1.4 - For troubleshooting yo...
EtreCheck is an app that displays the important details of your system configuration and allow you to copy that information to the Clipboard. It is meant to be used with Apple Support Communities to... Read more
Postbox 5.0.9 - Powerful and flexible em...
Postbox is a new email application that helps you organize your work life and get stuff done. It has all the elegance and simplicity of Apple Mail, but with more power and flexibility to manage even... Read more
DiskCatalogMaker 6.5.16 - Catalog your d...
DiskCatalogMaker is a simple disk management tool which catalogs disks. Simple, light-weight, and fast. Finder-like intuitive look and feel. Super-fast search algorithm. Can compress catalog data... Read more
TrailRunner 3.8.827 - Route planning for...
TrailRunner is the perfect companion for runners, bikers, hikers, and all people wandering under the sky. Plan routes on a geographical map. Import GPS or workout recordings and journalize your... Read more
VueScan 9.5.61 - Scanner software with a...
VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more
Postbox 5.0.9 - Powerful and flexible em...
Postbox is a new email application that helps you organize your work life and get stuff done. It has all the elegance and simplicity of Apple Mail, but with more power and flexibility to manage even... Read more
VueScan 9.5.61 - Scanner software with a...
VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more

Latest Forum Discussions

See All

Great zombie games in the spirit of Dead...
Dead Rising 4 arrives tomorrow, giving enthusiasts a fresh chance to take selfies with zombies and get up to other ridiculous end-of-the-world shenanigans. To really get into the spirit of things, we've gone and gathered the best zombie games that... | Read more »
Amateur Surgeon 4 Guide: Advanced tips a...
Amateur Surgeon 4 is still tackling the competition at the top of the App Store charts, so if you haven't tried it out yet, you should probably do that right away. If you've been at it for a while, though, perhaps you're ready to start expanding... | Read more »
Amateur Surgeon 4 Guide: Become the worl...
It's time to wield your trusty pizza cutter again, as Amateur Surgeon has returned with a whole fresh set of challenges (and some old, familiar ones, too). Starting anew isn't easy, especially when all you have at your disposal is a lighter, the... | Read more »
Le Parker: Sous Chef Extraordinaire (Ga...
Le Parker: Sous Chef Extraordinaire 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: | Read more »
Telltale Games really is working on a Gu...
Telltale Games' next episodic adventure is indeed Guardians of the Galaxy. A document tied to the voice actors strike suggested that the project was in the work, but now we have direct confirmation following an announcement at the Game Awards that... | Read more »
Amateur Surgeon returns to iOS and Andro...
Amateur Surgeon and its two sequels disappeared from the App Store some time and it was sad days for all. But now, just in time for the holidays, the Adult Swim favorite makes its joyous return in the shape of Amateur Surgeon 4, a remake with... | Read more »
The best board games on mobile
Sometimes you need to ditch all of the high speed, high action games in favor of something a little more traditional. If you don't feel like parting ways from your mobile device, though, there are still plenty of ways to get that old-school fix.... | Read more »
The best Facebook Messenger Instant Game...
Facebook's new Instant Games is now here, meaning you can play games with your friends directly via Facebook. It's a fun new way to connect with friends, of course, but it's also proving to be a solid gaming experience in its own right, with a... | Read more »
You can now play game's on Facebook...
Facebook launched its new Instant Games platform in an exciting new attempt to engage its user base. As a result, you can now play a number of different games directly through Facebook Messenger. All of these games run with HTML5, meaning you play... | Read more »
Apollo Justice Ace Attorney (Games)
Apollo Justice Ace Attorney 1.00.00 Device: iOS Universal Category: Games Price: $.99, Version: 1.00.00 (iTunes) Description: Court Is Back In Session Star as rookie defense attorney, Apollo Justice, as he visits crime scenes,... | Read more »

Price Scanner via MacPrices.net

Monday roundup of Holiday Mac sales: Up to $3...
Take up to $300 off MSRP on the price of a new Apple Mac at B&H Photo today as part of their Holiday sale. Shipping is free, and B&H charges NY sales tax only. Touch Bar MacBook Pros are in... Read more
12-inch WiFi Apple iPad Pros on sale for up t...
B&H Photo has 12″ WiFi Apple iPad Pros on sale for up to $50 off MSRP, each including free shipping. B&H charges sales tax in NY only: - 12″ Space Gray 32GB WiFi iPad Pro: $749 $50 off MSRP... Read more
9-inch Apple WiFi iPad Pros on sale for $20-$...
B&H Photo has 9.7″ Apple WiFi iPad Pros on sale for $20-$50 off MSRP, each including free shipping. B&H charges sales tax in NY only: - 9″ Space Gray 256GB WiFi iPad Pro: $779.95 $20 off MSRP... Read more
Holiday sale: Apple MacBook Airs available fo...
B&H Photo has 13″ MacBook Airs on sale for $100 off MSRP. Shipping is free, and B&H charges NY sales tax only: - 13″ 1.6GHz/128GB MacBook Air (MMGF2LL/A): $899 $100 off MSRP - 13″ 1.6GHz/... Read more
13-inch Silver Touch Bar MacBook Pro in stock...
Amazon has the new 2016 13″ 2.9GHz/256GB Silver Touch Bar MacBook Pro (MLVP2LL/A) in stock today and on sale for $1749 including free shipping. That’s $50 off MSRP, and it’s the lowest price... Read more
Parallels Toolbox 1.3 for Mac Offers 25 Singl...
Parallels has launched Parallels Toolbox 1.3 for Mac, an upgrade that adds five new utilities to the stand-alone application which was released in August and is available exclusively online at http... Read more
OWC Mercury Elite Pro Dual mini Ultra-Portabl...
OWC has introduced the new OWC Mercury Elite Pro Dual mini, a powerful yet ultra-portable dual-drive RAID solution. The new Mercury Elite Pro Dual mini packs phenomenal performance into a small... Read more
Clearance 13-inch Retina MacBook Pros availab...
B&H Photo has clearance 2015 13″ Retina Apple MacBook Pros available for up to $200 off original MSRP. Shipping is free, and B&H charges NY tax only: - 13″ 2.7GHz/128GB Retina MacBook Pro: $... Read more
Roundup of 2016 13-inch 2.0GHz MacBook Pro sa...
B&H has the non-Touch Bar 13″ MacBook Pros in stock today for $50-$100 off MSRP. Shipping is free, and B&H charges NY sales tax only: - 13″ 2.0GHz MacBook Pro Space Gray (MLL42LL/A): $1449 $... Read more
New 13-inch 2.0GHz Space Gray MacBook Pro in...
Adorama has the new 13″ 2.0GHz Space Gray MacBook Pro (non-Touch Bar, MLL42LL/A) in stock for $1499 including a free 3-year AppleCare Protection Plan. Shipping is free, and Adorama charges sales tax... Read more

Jobs Board

Lead *Apple* Solutions Consultant - Apple (...
# Lead Apple Solutions Consultant Job Number: 53586123 Pittsburgh, Pennsylvania, United States Posted: Nov. 28, 2016 Weekly Hours: 40.00 **Job Summary** The Lead ASC Read more
*Apple* Retail - Multiple Positions- Plano,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
*Apple* Retail - Multiple Positions- Kansas...
Job Description:SalesSpecialist - Retail Customer Service and SalesTransform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
*Apple* Retail - Multiple Positions- Chicago...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Hardware Design Validation Engineer - *Apple...
The Apple Watch team is looking for a Hardware Design Validation Engineer. This person will be part of the Apple Watch hardware team with responsibilities for Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.