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

Bookends 12.7.8 - Reference management a...
Bookends is a full-featured bibliography/reference and information-management system for students and professionals. Bookends uses the cloud to sync reference libraries on all the Macs you use.... Read more
VirtualBox 5.1.14 - x86 virtualization s...
VirtualBox is a family of powerful x86 virtualization products for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers... Read more
FileZilla 3.24.0 - Fast and reliable FTP...
FileZilla (ported from Windows) is a fast and reliable FTP client and server with lots of useful features and an intuitive interface. Version 3.24.0: New The context menu for remote file search... Read more
BusyContacts 1.1.6 - Fast, efficient con...
BusyContacts is a contact manager for OS X that makes creating, finding, and managing contacts faster and more efficient. It brings to contact management the same power, flexibility, and sharing... Read more
BusyCal 3.1.4 - Powerful calendar app wi...
BusyCal is an award-winning desktop calendar that combines personal productivity features for individuals with powerful calendar sharing capabilities for families and workgroups. Its unique features... Read more
Duplicate Annihilator 5.8.3 - Find and d...
Duplicate Annihilator takes on the time-consuming task of comparing the images in your iPhoto library using effective algorithms to make sure that no duplicate escapes. Duplicate Annihilator detects... Read more
MarsEdit 3.7.10 - Quick and convenient b...
MarsEdit is a blog editor for OS X that makes editing your blog like writing email, with spell-checking, drafts, multiple windows, and even AppleScript support. It works with with most blog services... Read more
WALTR 2 2.0.9 - $39.95
WALTR 2 helps you wirelessly drag-and-drop any music, ringtones, videos, PDF, and ePub files onto your iPhone, iPad, or iPod without iTunes. It is the second major version of Softorino's critically-... Read more
Paperless 2.3.9 - $49.95
Paperless is a digital documents manager. Remember when everyone talked about how we would soon be a paperless society? Now it seems like we use paper more than ever. Let's face it - we need and we... Read more
Adobe After Effects CC 2017 14.1 - Creat...
After Effects CC 2017 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous After Effects customer). The new, more connected After Effects CC... Read more

Super Mario Run dashes onto Android in M...
Super Mario Run was one of the biggest mobile launches in 2016 before it was met with a lukewarm response by many. While the game itself plays a treat, it's pretty hard to swallow the steep price for the full game. With that said, Android users... | Read more »
WarFriends Beginner's Guide: How to...
Chillingo's new game, WarFriends, is finally available world wide, and so far it's a refreshing change from common mobile game trends. The game's a mix of tower defense, third person shooter, and collectible card game. There's a lot to unpack here... | Read more »
Super Gridland (Entertainment)
Super Gridland 1.0 Device: iOS Universal Category: Entertainment Price: $1.99, Version: 1.0 (iTunes) Description: Match. Build. Survive. "exquisitely tuned" - Rock Paper Shotgun No in-app purches, and no ads! | Read more »
Red's Kingdom (Games)
Red's Kingdom 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: Mad King Mac has kidnapped your father and stolen your golden nut! Solve puzzles and battle goons as you explore and battle your... | Read more »
Turbo League Guide: How to tame the cont...
| Read more »
Fire Emblem: Heroes coming to Google Pla...
Nintendo gave us our first look at Fire Emblem: Heroes, the upcoming mobile Fire Emblem game the company hinted at last year. Revealed at the Fire Emblem Direct event held today, the game will condense the series' tactical RPG combat into bite-... | Read more »
ReSlice (Music)
ReSlice 1.0 Device: iOS Universal Category: Music Price: $9.99, Version: 1.0 (iTunes) Description: Audio Slice Machine Slice your audio samples with ReSlice and create flexible musical atoms which can be triggered by MIDI notes or... | Read more »
Stickman Surfer rides in with the tide t...
Stickson is back and this time he's taken up yet another extreme sport - surfing. Stickman Surfer is out this Thursday on both iOS and Android, so if you've been following the other Stickman adventures, you might be interested in picking this one... | Read more »
Z-Exemplar (Games)
Z-Exemplar 1.4 Device: iOS Universal Category: Games Price: $3.99, Version: 1.4 (iTunes) Description: | Read more »
5 dastardly difficult roguelikes like th...
Edmund McMillen's popular roguelike creation The Binding of Isaac: Rebirth has finally crawled onto mobile devices. It's a grotesque dual-stick shooter that tosses you into an endless, procedurally generated basement as you, the pitiable Isaac,... | Read more »

Price Scanner via MacPrices.net

Twelve South Releases RelaxedLeather Cases fo...
Inspired by the laid-back luxury of burnished leather boots and crafted in rich tones of taupe, herb and marsala, RelaxedLeather cases deliver smart, easy protection for the iPhone 7. Each genuine... Read more
Week’s Best Deal: New 2016 13-inch 2.0GHz Mac...
Amazon has the new 2016 13″ 2.0GHz non-Touch Bar MacBook Pros on sale for a limited time for $225 off MSRP including free shipping: - 13″ 2.0GHz MacBook Pro, Space Gray (MLL42LL/A): $1274.99 $225 off... Read more
Back in stock: Apple refurbished Mac minis fr...
Apple has Certified Refurbished Mac minis available starting at $419. Apple’s one-year warranty is included with each mini, and shipping is free: - 1.4GHz Mac mini: $419 $80 off MSRP - 2.6GHz Mac... Read more
Apple Ranked ‘Most Intimate Brand’
The top ranked ‘”intimate” brands continued to outperform the S&P and Fortune 500 indices in revenue and profit over the past 10 years, according to MBLM’s Brand Intimacy 2017 Report, the largest... Read more
B-Eng introduces SSD Health Check for Mac OS
Fehraltorf, Switzerland based independant Swiss company- B-Eng has announced the release and immediate availability of SSD Health Check 1.0, the company’s new hard drive utility for Mac OS X. As the... 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: -... Read more
4-core 3.7GHz Mac Pro on sale for $2290, save...
Guitar Center has the 3.7GHz 4-core Mac Pro (MD253LL/A) on sale for $2289.97 including free shipping or free local store pickup (if available). Their price is a $710 savings over standard MSRP for... Read more
128GB Apple iPad Air 2, refurbished, availabl...
Apple has Certified Refurbished 128GB iPad Air 2s WiFis available for $419 including free shipping. That’s an $80 savings over standard MSRP for this model. A standard Apple one-year warranty is... Read more
13-inch 2.7GHz Retina MacBook Pro on sale for...
B&H Photo has the 2015 13″ 2.7GHz/128GB Retina Apple MacBook Pro on sale for $100 off MSRP. Shipping is free, and B&H charges NY tax only: - 13″ 2.7GHz/128GB Retina MacBook Pro (MF839LL/A): $... Read more
Laptop Market – Flight To Quality? – The ‘Boo...
Preliminary quarterly PC shipments data released by Gartner Inc. last week reveal an interesting disparity between sales performance of major name PC vendors as opposed to that of less well-known... Read more

Jobs Board

*Apple* & PC Desktop Support Technician...
Apple & PC Desktop Support Technician job in Manhattan, NY Introduction: We have immediate job openings for several Desktop Support Technicians with one of our most Read more
Senior Workstation Administrator - *Apple*...
…with extraordinary HR. QualificationsJOB SUMMARY/OVERVIEWThe Senior Workstation Administrator - Apple supports the mission of TriNet by providing advanced level Read more
Intermediate *Apple* macOS Systems Integrat...
**Position Summary:** SC3 is actively seeking an Intermediate Apple macOS systems integration administrator that will be responsible for providing Apple Mac Read more
*Apple* & PC Desktop Support Technician...
Apple & PC Desktop Support Technician job in Los Angeles, CA Introduction: We have immediate job openings for several Desktop Support Technicians with one of our Read more
*Apple* Retail - Multiple Positions - Apple,...
SalesSpecialist - Retail Customer Service and SalesTransform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.