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

Unite 3 3.1 - Turn websites into full-fe...
Unite 3 lets you turn websites into apps on your Mac and change the way you use your computer forever Creating your app It all starts with the new Unite creation tool. Simply enter a name for your... Read more
App Tamer 2.5.2 - Efficiently manage you...
App Tamer tames your processor-monopolizing apps and keeps them from chewing up excessive CPU time and battery life. Powered by a unique AutoStop feature, App Tamer stops each application when you... Read more
Sid Meier's Civilization IV 1.74 -...
Note: Sid Meier's Civilization IV is no longer under development and the developer provides no support for it. With Civilization IV, history as you know it, is history. Rule throughout time and... Read more
Day One 4.15.3 - Maintain a daily journa...
Day One is an easy, great-looking way to use a journal / diary / text-logging application. Day One is well designed and extremely focused to encourage you to write more through quick Menu Bar entry,... Read more
Backblaze 7.0.1.450 - Online backup serv...
Backblaze is an online backup service designed from the ground-up for the Mac. With unlimited storage available for $6 per month, as well as a free 15-day trial, peace of mind is within reach with... Read more
Visual Studio Code 1.47.0 - Cross-platfo...
Visual Studio Code provides developers with a new choice of developer tool that combines the simplicity and streamlined experience of a code editor with the best of what developers need for their... Read more
Apple Pages 10.1 - Apple's word pro...
Apple Pages is a powerful word processor that gives you everything you need to create documents that look beautiful. And read beautifully. It lets you work seamlessly between Mac and iOS devices, and... Read more
Shimo 5.0.2 - VPN client for everyone.
Shimo is the most versatile VPN client for OS X and it enables really everybody to master secure network. It supports more protocols than any other VPN application out there! CiscoVPN, AnyConnect,... Read more
Yasu 6.0.1 - System maintenance app.
Note: Yasu is not being sold anymore and is listed only for people who had purchased it in the past. Yasu was created with system administrators who service large groups of workstations in mind, Yasu... Read more
Keynote 10.1 - Apple's presentation...
Easily create gorgeous presentations with the all-new Keynote, featuring powerful yet easy-to-use tools and dazzling effects that will make you a very hard act to follow. The Theme Chooser lets you... Read more

Latest Forum Discussions

See All

Puzzle & Dragons welcomes the cast o...
Puzzle & Dragons has a history of wild crossovers, and its latest is no exception. The gates of hell are now open, and the cast of Devil May Cry have made their grand entrance into the world Puzzle & Dragons. The collaboration is set to... | Read more »
Meteorfall: Krumit's Tale is launch...
Meteorfall: Krumit's Tale is getting an iOS & Android beta test this Thursday, and you can sign up now to get involved. [Read more] | Read more »
Marvel Duel, NetEase's promising ca...
Marvel Duel, NetEase's collectable card battler, has now opened for pre-registration in Thailand, Indonesia, Malaysia, and the Philippines. [Read more] | Read more »
PUBG Mobile teams up with Yamaha for a l...
PUBG Mobile has had various collaborations with various companies since it first burst onto the scene. The latest sees the popular battle royale title teaming up with vehicle and marine products company Yamaha, meaning players can take one of... | Read more »
Marvel Super War launches its third seas...
Marvel Super War, NetEase's popular MOBA, has kicked off its third season today, introducing its Zone Invasion beta and an all-new playable superhero. [Read more] | Read more »
Brave Dungeon, Unlock Games' idle-R...
Brave Dungeon, Unlock Games' idle-RPG and auto chess title, has been downloaded over 1 million times since it launched last week. To commemorate reaching this milestone the developers have decided to host a series of in-game events. [Read more] | Read more »
Clash Royale: The Road to Legendary Aren...
Supercell recently celebrated its 10th anniversary and their best title, Clash Royale, is as good as it's ever been. Even for lapsed players, returning to the game is as easy as can be. If you want to join us in picking the game back up, we've put... | Read more »
Steam Link Spotlight - Disco Elysium
Steam Link Spotlight is a feature where we look at PC games that play exceptionally well using the Steam Link app. Our last entry was Signs of the Sojourner Read about how it plays using Steam Link over here. | Read more »
Distract Yourself With These Great Mobil...
There’s a lot going on right now, and I don’t really feel like trying to write some kind of pithy intro for it. All I’ll say is lots of people have been coming together and helping each other in small ways, and I’m choosing to focus on that as I... | Read more »
Pokemon Go's July Community Day wil...
Pokemon Go developers have announced the details concerning the upcoming Gastly Community Day. This particular event was selected by the players of the game after the Gas Pokemon came in second place after a poll that decided which Pokemon would... | Read more »

Price Scanner via MacPrices.net

Apple has 2020 13″ 4-Core MacBook Airs availa...
Apple has a full line of Certified Refurbished 2020 13″ 4-Core MacBook Airs available for $200 off the cost of new models. Each MacBook features a new outer case, comes with a standard Apple one-year... Read more
Apple restocks clearance 2019 13″ MacBook Pro...
Apple has restocked Certified Refurbished 2019 13″ 1.4GHz 4-Core Touch Bar MacBook Pros starting at $979 and up to $440 off original MSRP. Apple’s one-year warranty is included, shipping is free, and... Read more
US Cellular offers $300 off any new Cellular...
US Cellular is offering a $300 discount on any new Cellular Apple iPad, iPad Air, iPad Pro, or iPad mini with a new line of service. According to US Cellular, “Promotional pricing requires purchase... Read more
Sale! 16″ MacBook Pros for $400 off Apple’s M...
Amazon has 16″ MacBook Pros on sale for $400 off Apple’s MSRP today with prices starting at $1999. Shipping is free: – 2019 16″ 2.6GHz 6-Core MacBook Pro Space Gray: $1999.99 $400 off MSRP – 2019 16... Read more
Lowest price ever: Apple AirPods Pro for $214...
Amazon-owned Woot has new Apple AirPods Pro on sale for today only (Monday, July 13th) for $214.99 including free shipping for Prime members. Their price is $35 off Apple’s MSRP, and it’s the lowest... Read more
Woot is selling refurbished Apple iPhones tod...
Amazon-owned Woot is selling refurbished unlocked Apple iPhones today for as low as $99. Shipping is free for prime members. The following models are available, and note that many will sell out... Read more
Take $50 off the 64GB Apple iPhone SE at Simp...
Use coupon code SUMMER2020 at Simple Mobile through July 31, 2020, and take 20% off the 64GB Apple iPhone SE + service plan. This is in addition to their standard $50 discount on the iPhone SE.... Read more
Weekend Sale: Woot offers clearance MacBook,...
Amazon-owned Woot is blowing out a wide range of MacBooks, MacBook Airs, and MacBook Pros starting at only $389. All models are open-box returns, and according to Woot, “these MacBooks are in New-... Read more
Apple’s 2020 Mac minis on sale for up to $100...
B&H Photo has Apple’s 2020 Mac minis on sale today for $40-$100 off MSRP, each including free expedited delivery for many US addresses. These are the same Mac minis sold by Apple in their retail... Read more
Apple restocks refurbished 10.5″ iPad Airs fo...
Apple has restocked 10.5″ WiFI iPad Airs models for up to $100 off MSRP, Certified Refurbished. Each iPad comes with Apple’s standard one-year warranty and includes a new outer case. Shipping is free... Read more

Jobs Board

Perioperative RN - ( *Apple* Hill Surgical C...
Perioperative RN - ( Apple Hill Surgical Center) Tracking Code 62018 Job Description Monday - Friday - Full Time Days Possible Saturdays General Summary: Under the Read more
Surgical Coord/Scheduler-MG - *Apple* Hill...
Surgical Coord/Scheduler-MG - Apple Hill Medical Center - (full-time) - Days Tracking Code 62537 Job Description General Summary: Under general supervision, provides Read more
Office Assistant - *Apple* Hill Medical Cent...
Office Assistant - Apple Hill Medical Center- (part-time) - Days Tracking Code 62649 Job Description General Summary: Under general supervision, performs diversified Read more
Blue *Apple* Cafe Student Worker - Fall - P...
…to enhance your work experience. Student positions are available at the Blue Apple Cafe. Employee meal discount during working hours is provided. Duties include food Read more
Geek Squad Advanced Repair *Apple* Professi...
**769390BR** **Job Title:** Geek Squad Advanced Repair Apple Professional **Job Category:** Store Associates **Store Number or Department:** 000580-Reading-Store Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.