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

Latest Forum Discussions

See All

Pack a magnifying glass and practice you...
Somehow it has already been a year since Torchlight: Infinite launched, and XD Games is celebrating by blending in what sounds like a truly fantastic new update. Fans of Cthulhu rejoice, as Whispering Mist brings some horror elements, and tests... | Read more »
Summon your guild and prepare for war in...
Netmarble is making some pretty big moves with their latest update for Seven Knights Idle Adventure, with a bunch of interesting additions. Two new heroes enter the battle, there are events and bosses abound, and perhaps most interesting, a huge... | Read more »
Make the passage of time your plaything...
While some of us are still waiting for a chance to get our hands on Ash Prime - yes, don’t remind me I could currently buy him this month I’m barely hanging on - Digital Extremes has announced its next anticipated Prime Form for Warframe. Starting... | Read more »
If you can find it and fit through the d...
The holy trinity of amazing company names have come together, to release their equally amazing and adorable mobile game, Hamster Inn. Published by HyperBeard Games, and co-developed by Mum Not Proud and Little Sasquatch Studios, it's time to... | Read more »
Amikin Survival opens for pre-orders on...
Join me on the wonderful trip down the inspiration rabbit hole; much as Palworld seemingly “borrowed” many aspects from the hit Pokemon franchise, it is time for the heavily armed animal survival to also spawn some illegitimate children as Helio... | Read more »
PUBG Mobile teams up with global phenome...
Since launching in 2019, SpyxFamily has exploded to damn near catastrophic popularity, so it was only a matter of time before a mobile game snapped up a collaboration. Enter PUBG Mobile. Until May 12th, players will be able to collect a host of... | Read more »
Embark into the frozen tundra of certain...
Chucklefish, developers of hit action-adventure sandbox game Starbound and owner of one of the cutest logos in gaming, has released their roguelike deck-builder Wildfrost. Created alongside developers Gaziter and Deadpan Games, Wildfrost will... | Read more »
MoreFun Studios has announced Season 4,...
Tension has escalated in the ever-volatile world of Arena Breakout, as your old pal Randall Fisher and bosses Fred and Perrero continue to lob insults and explosives at each other, bringing us to a new phase of warfare. Season 4, Into The Fog of... | Read more »
Top Mobile Game Discounts
Every day, we pick out a curated list of the best mobile discounts on the App Store and post them here. This list won't be comprehensive, but it every game on it is recommended. Feel free to check out the coverage we did on them in the links below... | Read more »
Marvel Future Fight celebrates nine year...
Announced alongside an advertising image I can only assume was aimed squarely at myself with the prominent Deadpool and Odin featured on it, Netmarble has revealed their celebrations for the 9th anniversary of Marvel Future Fight. The Countdown... | Read more »

Price Scanner via MacPrices.net

Every model of Apple’s 13-inch M3 MacBook Air...
Best Buy has Apple 13″ MacBook Airs with M3 CPUs in stock and on sale today for $100 off MSRP. Prices start at $999. Their prices are the lowest currently available for new 13″ M3 MacBook Airs among... Read more
Sunday Sale: Apple iPad Magic Keyboards for 1...
Walmart has Apple Magic Keyboards for 12.9″ iPad Pros, in Black, on sale for $150 off MSRP on their online store. Sale price for online orders only, in-store price may vary. Order online and choose... Read more
Apple Watch Ultra 2 now available at Apple fo...
Apple has, for the first time, begun offering Certified Refurbished Apple Watch Ultra 2 models in their online store for $679, or $120 off MSRP. Each Watch includes Apple’s standard one-year warranty... Read more
AT&T has the iPhone 14 on sale for only $...
AT&T has the 128GB Apple iPhone 14 available for only $5.99 per month for new and existing customers when you activate unlimited service and use AT&T’s 36 month installment plan. The fine... Read more
Amazon is offering a $100 discount on every M...
Amazon is offering a $100 instant discount on each configuration of Apple’s new 13″ M3 MacBook Air, in Midnight, this weekend. These are the lowest prices currently available for new 13″ M3 MacBook... Read more
You can save $300-$480 on a 14-inch M3 Pro/Ma...
Apple has 14″ M3 Pro and M3 Max MacBook Pros in stock today and available, Certified Refurbished, starting at $1699 and ranging up to $480 off MSRP. Each model features a new outer case, shipping is... Read more
24-inch M1 iMacs available at Apple starting...
Apple has clearance M1 iMacs available in their Certified Refurbished store starting at $1049 and ranging up to $300 off original MSRP. Each iMac is in like-new condition and comes with Apple’s... Read more
Walmart continues to offer $699 13-inch M1 Ma...
Walmart continues to offer new Apple 13″ M1 MacBook Airs (8GB RAM, 256GB SSD) online for $699, $300 off original MSRP, in Space Gray, Silver, and Gold colors. These are new MacBook for sale by... Read more
B&H has 13-inch M2 MacBook Airs with 16GB...
B&H Photo has 13″ MacBook Airs with M2 CPUs, 16GB of memory, and 256GB of storage in stock and on sale for $1099, $100 off Apple’s MSRP for this configuration. Free 1-2 day delivery is available... Read more
14-inch M3 MacBook Pro with 16GB of RAM avail...
Apple has the 14″ M3 MacBook Pro with 16GB of RAM and 1TB of storage, Certified Refurbished, available for $300 off MSRP. Each MacBook Pro features a new outer case, shipping is free, and an Apple 1-... Read more

Jobs Board

*Apple* Systems Administrator - JAMF - Activ...
…**Public Trust/Other Required:** None **Job Family:** Systems Administration **Skills:** Apple Platforms,Computer Servers,Jamf Pro **Experience:** 3 + years of Read more
IT Systems Engineer ( *Apple* Platforms) - S...
IT Systems Engineer ( Apple Platforms) at SpaceX Hawthorne, CA SpaceX was founded under the belief that a future where humanity is out exploring the stars is Read more
Nurse Anesthetist - *Apple* Hill Surgery Ce...
Nurse Anesthetist - Apple Hill Surgery Center Location: WellSpan Medical Group, York, PA Schedule: Full Time Sign-On Bonus Eligible Remote/Hybrid Regular Apply Now Read more
Housekeeper, *Apple* Valley Village - Cassi...
Apple Valley Village Health Care Center, a senior care campus, is hiring a Part-Time Housekeeper to join our team! We will train you for this position! In this role, Read more
Sublease Associate Optometrist- *Apple* Val...
Sublease Associate Optometrist- Apple Valley, CA- Target Optical Date: Apr 20, 2024 Brand: Target Optical Location: Apple Valley, CA, US, 92307 **Requisition Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.