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

VueScan 9.5.09 - 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
Airmail 2.1 - Powerful, minimal email cl...
Airmail 2 is a new mail client designed for OS X 10.10 Yosemite with fast performance and intuitive interaction. Support for iCloud, MS Exchange, Gmail, Google Apps, IMAP, POP3, Yahoo!, AOL, Outlook.... Read more
Logitech Control Center 3.9.2 - Keyboard...
Logitech Control Center (LCC) is designed to support OS X and allows you to take full advantage of your Logitech keyboard, mouse, or trackball. With the LCC you can: Browse the Internet using... Read more
Adobe Acrobat Pro 15.007.20033 - Powerfu...
Acrobat Pro DC is available only as a part of Adobe Creative Cloud, and can only be installed and/or updated through Adobe's Creative Cloud app. Adobe Acrobat Pro DC with Adobe Document Cloud... Read more
CleanMyMac 3.0.1 - Delete files that was...
CleanMyMac makes space for the things you love. Sporting a range of ingenious new features, CleanMyMac lets you safely and intelligently scan and clean your entire system, delete large, unused files... Read more
Evernote 6.0.10 - Create searchable note...
Evernote allows you to easily capture information in any environment using whatever device or platform you find most convenient, and makes this information accessible and searchable at anytime, from... Read more
CleanApp 5.0.1 - Application deinstaller...
CleanApp is an application deinstaller and archiver.... Your hard drive gets fuller day by day, but do you know why? CleanApp 5 provides you with insights how to reclaim disk space. There are... Read more
Quicken 2015 2.5.0 - Complete personal f...
Quicken 2015 helps you manage all your personal finances in one place, so you can see where you're spending and where you can save. Quicken automatically categorizes your financial transactions,... Read more
Tonality Pro 1.1.4 - Professional-grade...
Tonality Pro gives you the power to create stunning and dramatic black & white images. This is a complete monochrome image editor with more than 150 one-click style presets, totally unique... Read more
Adobe Photoshop CC 2014 15.2.2 - Profess...
Photoshop CC 2015 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous Photoshop customer). Photoshop CS6 is still available for purchase (... Read more

WAVE Personal Calendar Now Connects You...
WAVE Calendar, by e-sites, has added an interesting new feature: real life personal assistants. The e-sites webpage has been redesigned so personal assistants can apply to work directly with WAVE. [Read more] | Read more »
Find Your Vacation Home With Dwellable
Dwellable is a new travel app that helps you to find rental homes for your vacation, allowing you to swipe your way through listings from over 15,000 destinations worldwide. [Read more] | Read more »
Play Endless Golf in Flick Golf Free...
Full Fat has released a new update for Flick Golf! Free. The ‘Eliminator’ update brings a whole new way to play with its endless round. [Read more] | Read more »
The Enchanted Cave 2 (Games)
The Enchanted Cave 2 2.1 Device: iOS Universal Category: Games Price: $2.99, Version: 2.1 (iTunes) Description: Delve into a strange cave with a seemingly endless supply of treasure, strategically choosing your battles to gather as... | Read more »
Crystal Siege is on Sale With a New Univ...
Crystal Siege,  FDG Entertainment's RPG  Tower Defense game, has gone universal in its latest update. [Read more] | Read more »
Platforming Action RPG Swordigo is Curre...
Touch Foo's 2D action-platformer, Swordigo, is free for a limited time on the App Store. Now you can run, jump, and slash your way through adventure for absolutely nothing. [Read more] | Read more »
Watch This Homerun Slides into Home on t...
Eyes Wide Games has launched their one-touch baseball game, Watch This Homerun, for the Apple Watch. [Read more] | Read more »
Disney Celebrates May 4th With Galaxy Si...
For Star Wars Day, May 4, join Disney Interactive and Lucasfilm as they celebrate with a whole lot of in=-app sales for their Star Wars apps. [Read more] | Read more »
Oh My Pixel! We Go Hands-on With The Kni...
I recently had a chance to play around with the upcoming Knights of Pen & Paper 2 from Paradox Interactive. I was a huge fan of the first game, so I had a lot of expectations going into it - and I wasn't disappointed. The game has gotten some... | Read more »
Throw Out Your Stylus and Sketch With Pe...
Penpoint Drawing, by Damin Liu,  is a new creative drawing app that uses your finger as your stylus. [Read more] | Read more »

Price Scanner via MacPrices.net

Save up to $300 on a new Mac, $30 on an iPad,...
Purchase a new Mac or iPad at The Apple Store for Education 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
iPad-Based iLynn Program Provides A Private U...
Lynn University of Boca Raton, Florida has announced that its innovative iPad-powered online bachelor’s degree program will be called iLynn. Beginning in fall 2015, Lynn U. says the new program will... Read more
iPad mini 4 Rumors Begin To Gel
First, I’ve been really hoping there will even be an iPad mini 4 at all. The smallest iPad has reportedly been hit pretty hard by iPhone 6 Plus cannibalization, along with getting caught in the... Read more
Mac Pros on sale for up to $260 off MSRP
B&H Photo has Mac Pros on sale for up to $260 off MSRP. Shipping is free, and B&H charges sales tax in NY only: - 3.7GHz 4-core Mac Pro: $2799, $200 off MSRP - 3.5GHz 6-core Mac Pro: $3719.99... Read more
Save up to $600 with Apple refurbished Mac Pr...
The Apple Store is offering Apple Certified Refurbished Mac Pros for up to $600 off the cost of new models. An Apple one-year warranty is included with each Mac Pro, and shipping is free. The... Read more
iMacs on sale for up to $205 off MSRP, NY tax...
B&H Photo has 21″ and 27″ iMacs on sale for up to $205 off MSRP including free shipping plus NY sales tax only: - 21″ 1.4GHz iMac: $999 $100 off - 21″ 2.7GHz iMac: $1189 $110 off - 21″ 2.9GHz... Read more
12-inch 1.1GHz Silver MacBook in stock today
B&H Photo has the new 12″ 1.1GHz Silver MacBook in stock today for $1299 including free shipping plus NY sales tax only. Act now if you’re interested, since we don’t expect B&H to have this... Read more
iPad Air 2s on sale for up to $50 off, NY tax...
B&H Photo has iPad Air 2s on sale for up to $64 off MSRP including free shipping plus NY sales tax only: - 16GB iPad Air 2 WiFi: $469 $30 off - 64GB iPad Air 2 WiFi: $549.99 $50 off - 128GB iPad... Read more
Check Apple prices on any device with the iTr...
MacPrices is proud to offer readers a free iOS app (iPhones, iPads, & iPod touch) and Android app (Google Play and Amazon App Store) called iTracx, which allows you to glance at today’s lowest... Read more
Sale! New 13-inch 256GB MacBook Air for $1099...
B&H Photo has the new 2015 13″ 1.6GHz/256GB MacBook Air on sale for $1099.99 including free shipping plus NY tax only. Their price is $100 off MSRP. Read more

Jobs Board

*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
Senior Identity Architect - *Apple* Pay - A...
Changing the world is all in a day039s work at Apple . If you love innovation, here039s your chance to make a career of it. You039ll work hard. But the job comes with Read more
Hardware Systems Integration Engineer - *App...
Changing the world is all in a day039s work at Apple . If you love innovation, here039s your chance to make a career of it. You039ll work hard. But the job comes with Read more
Senior Identity Architect - *Apple* Pay - A...
Changing the world is all in a day039s work at Apple . If you love innovation, here039s your chance to make a career of it. You039ll work hard. But the job comes with Read more
Hardware Systems Integration Engineer - *App...
Changing the world is all in a day039s work at Apple . If you love innovation, here039s your chance to make a career of it. You039ll work hard. But the job comes with Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.