chapter 9 active objects + boxball project design animations! what are they? snapshots of objects i...
DESCRIPTION
Animating an Object First create an object Then –Move it a little –Pause for the user to see it –RepeatTRANSCRIPT
![Page 1: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/1.jpg)
Chapter 9 Active Objects+ Boxball Project Design
• Animations!
• What are they?– Snapshots of objects in different positions– When viewed quickly appear to be moving
![Page 2: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/2.jpg)
A Virtual Flipbook:
![Page 3: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/3.jpg)
Animating an Object
• First create an object
• Then– Move it a little– Pause for the user to see it– Repeat
![Page 4: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/4.jpg)
FallingBallpublic class FallingBall extends ActiveObject {
public FallingBall( Location initialLocation, DrawingCanvas aCanvas ){canvas = aCanvas;ballGraphic = new FilledOval (initialLocation, SIZE, SIZE, canvas );start();
}
public void run() {while ( ballGraphic.getY() < canvas.getHeight() ) {
ballGraphic.move( 0, Y_STEP );pause( DELAY_TIME );
}ballGraphic.removeFromCanvas();
}}
![Page 5: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/5.jpg)
Defining an Active Object
• define a class that extends ActiveObject
• ensure the class includes a run method
• pause occasionally within the run method
• include start(); usually as the last statement in the constructor
![Page 6: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/6.jpg)
Using Active Objectspublic class FallingBallController extends WindowController {
private FallingBall droppedBall;
public void begin() {new Text("Click to make a falling ball…”,
INSTR_LOCATION, canvas );}
public void on MouseClick( Location point ) {droppedBall = new FallingBall( point, canvas );
}
}
![Page 7: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/7.jpg)
What if…
• We wanted the falling object to look like a raindrop
![Page 8: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/8.jpg)
Image and VisibleImage Classes
• In the controller class:private Image rainPicture;
rainPicture = getImage("raindrop.gif" );
• Can be used anywhere:new VisibleImage( rainPicture, 0,
canvas.getWidth()/2, canvas );
![Page 9: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/9.jpg)
A Controller Classpublic class FallingRainPicController extends WindowController {
private Image rainPicture;
public void begin() {new Text("Click to make a falling raindrop…",
INSTR_LOCATION, canvas );rainPicture = getImage( "raindrop.gif" );
}
public void onMouseClick( Location point ) {new FallingRainDrop( rainPicture, point, canvas );
}}
![Page 10: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/10.jpg)
A Falling Raindroppublic class FallingRainDrop extends ActiveObject {
private static final int DELAY_TIME = 33;private static final double Y_SPEED=4;private VisibleImage ballGraphic;private DrawingCanvas canvas;
public FallingRainDrop( Image rainPic, Location initialLocation, DrawingCanvas aCanvas ) {canvas = aCanvas;rainGraphic = new VisibleImage( rainPic, initialLocation, canvas );start();
}
public void run() {while ( rainGraphic.getY() < canvas.getHeight() ) {
rainGraphic.move( 0, Y_SPEED );pause ( DELAY_TIME );
}rainGraphic.removeFromCanvas();
}}
![Page 11: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/11.jpg)
Active Object Interactions
• Accomplished with methods and parameters
• A RainCloud:– RainCloud continuously generates drops– Drops fall and disappear at the bottom
![Page 12: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/12.jpg)
The RainCloud Classpublic class RainCloud extends ActiveObject {
public RainCloud( DrawingCanvas aCanvas, Image aRainPic) {rainPic = aRainPic;canvas = aCanvas;start();
}
public void run() {RandomIntGenerator xGenerator = new RandomIntGenerator( 0, canvas.getWidth() );int dropCount = 0;while ( dropCount < MAX_DROPS ) {
new FallingRainDrop( rainPic, new Location( xGenerator.nextValue(), 0 ), canvas);pause( DELAY_TIME );dropCount++;
}}
}
![Page 13: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/13.jpg)
Interactions Between Active and Non-Active Objects
• An Active Object:– Droplet in the shape of an oval
• Created at the top of canvas, falls to the bottom
• A Non-Active Object:– Waterline in the shape of a FilledRect
• Rises as drops fall
![Page 14: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/14.jpg)
A New Kind of Raindrop
1. Created at the top of the screen
2. Falls to the bottom
3. Raises the waterline
![Page 15: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/15.jpg)
Falling Dropletpublic class FallingDroplet extends ActiveObject {
private FilledOval dropletGraphic;private FilledRect collector;
public FallingDroplet( Location initialLocation, DrawingCanvas canvas, FilledRect aCollector ) {dropletGraphic = new FilledOval( initialLocation, SIZE, SIZE, canvas );collector = aCollector;start();
}
public void run() {while ( dropletGraphic.getY() < collector.getY() ) {
dropletGraphic.move( 0, Y_STEP );pause( DELAY_TIME );
}
dropletGraphic.removeFromCanvas();if ( collector.getY() > 0 ) {
collector.setHeight( collector.getHeight() + SIZE/4 );collector.move( 0, -SIZE/4 );
}}
}
![Page 16: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/16.jpg)
Boxball
![Page 17: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/17.jpg)
Classes break problem up
• Boxball Class: – sets up arena, title, status message "Let's Play"– sets up bar and easy/med/hard buttons – sets up target box– onMouseClick
• if on easy/med/hard button, moves bar to different level• if clickPoint is above bar creates a new Ball
![Page 18: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/18.jpg)
Boxball design, continued
• Box Class:– manages the FilledRect that is the target– methods to
• Construct a Box• moveBox move to different x-position• setSize change the size of the box• getLeft retrieve the x position of left side of box• getRight retrieve the x position of right side
![Page 19: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/19.jpg)
Box Class examples
• target = new Box(100, 50, canvas);– creates a new Box at x position 100, width 50
• target.setSize(35); – changes width of box to 35
• target.setSize(BALL_SIZE*1.5);– width set to 50% larger than ball
• target.moveBox();– moves box to a random x position
![Page 20: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/20.jpg)
Boxball Design, continued
• Ball Class– constructor to create a new Ball
• remember the canvas in instance variable– run method to animate ball so it drops
• while ball is above the bottom of the arena, – advance ball by 10 pixels or so– pause 50 milliseconds or so
• after the ball reaches bottom, check if it is within left and right sides of box
![Page 21: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/21.jpg)
Ball class constructor examples• Part 3
– new Ball(BALL_SIZE, point, canvas);• ball will be created at point and fall.
• Part 4– new Ball(BALL_SIZE, point, target, canvas);
• ball will also be able to access target • to check if within left and right edges
• Another possibility—– new Ball(BALL_SIZE, point, arena, target, canvas);
• ball will also be able to access arena to tell when to stop
– each new variation has to add actual parameters
![Page 22: Chapter 9 Active Objects + Boxball Project Design Animations! What are they? Snapshots of objects i n different positions When viewed quickly appear](https://reader033.vdocument.in/reader033/viewer/2022051320/5a4d1b6c7f8b9ab0599b3735/html5/thumbnails/22.jpg)
Have fun with challenges
• Check with instructor frequently to stay on track
• Email code over weekend for help• This is a crucial component to master• Reading textbook can help with concepts