Chapter 8 - Creating Images and Sound

Bruce Chittenden

8.1 Preparation

In contrast to previous chapters, we will not build a complete scenario in this chapter but work through various smaller exercises that illustrate separate techniques that can then be incorporated into a wide variety of different scenarios.

Exercise 8.1

Click on Scenariosand Click New Enter a Name

and Click Create

Exercise 8.1

Exercise 8.2

Right Click on Worldand Click New subclass

Exercise 8.2

Name the subclass MyWorldand select a Background

Exercise 8.2

Exercise 8.3

400 x 300 x 1

Exercise 8.3

Exercise 8.4

Exercise 8.5public class MyWorld extends World{

/* * Constructor for objects of class MyWorld. * */ public MyWorld() { // Create a new world 400 x 300 cell size 1 pixel. super(400, 300, 1); addObject (new Turtle(), 200, 150); }}

Create a Turtle Object and add it to the center of the World

Exercise 8.5

Exercise 8.6

Exercise 8.6public class Turtle extends Actor{ /* * Act - do whatever the Turtle wants to do. This method is called whenever * the 'Act' or 'Run' button gets pressed in the environment. */ public void act() { int x = getX(); int y = getY(); setLocation (x+10, y); } }

Get our current location and add 10 to the x coordinate

Exercise 8.6

Exercise 8.7

Exercise 8.7

Exercise 8.7

Exercise 8.8

mousePressed The mouse button was pressed and held on an object (pressed and not released)

mouseClicked The mouse was clicked on and object (pressed and released)

Exercise 8.9public class Turtle extends Actor{ /* * Act - do whatever the Turtle wants to do. This method is called whenever * the 'Act' or 'Run' button gets pressed in the environment. */ public void act() { if (Greenfoot.mouseClicked(null)) move(); }

private void move() { int x = getX(); int y = getY(); setLocation (x+10, y); } }

Exercise 8.9

Click anywhere in the World and the Turtle moves to the right

Exercise 8.10

public void act() { if (Greenfoot.mouseClicked(this)) move();}

private void move(){ int x = getX(); int y = getY(); setLocation (x+10, y);}

Exercise 8.10

Must Click on the Turtle to make the Turtle move to the right

Exercise 8.11public class MyWorld extends World{

/* * Constructor for objects of class MyWorld. * */ public MyWorld() { // Create a new world 400 x 300 cell size 1 pixel. super(400, 300, 1);

addObject (new Turtle(), Greenfoot.getRandomNumber(401), Greenfoot.getRandomNumber(301)); addObject (new Turtle(), Greenfoot.getRandomNumber(401), Greenfoot.getRandomNumber(301)); addObject (new Turtle(), Greenfoot.getRandomNumber(401), Greenfoot.getRandomNumber(301)); }}

Exercise 8.11

Must Click on the individual Turtle to make the that Turtle

move to the right

8.2 Working with Sound

The Greenfoot class has a playSound method that we can use to play a sound file. To be playable, the sound file must be located in the sounds folder inside the scenario folder.

Exercise 8.12

/* * Act - do whatever the Turtle wants to do. This method is called whenever * the 'Act' or 'Run' button gets pressed in the environment. */public void act() { if (Greenfoot.mouseClicked(this)) Greenfoot.playSound("Coyote.wav");}

Exercise 8.12

Click on the Turtle to play a sound file

This section involves recording and editing sounds using a sound editing program. If you want to do the exercises in this section you can use any sound editing program or you can download an Open Source sound editor called Audacity from

http://audacity.sourceforge.net/

8.3 Sound Recording and Editing

8.4 Sound File Formats and File Sizes

This section involves recording and editing sounds using a sound editing program. If you want to do the exercises in this section you can use any sound editing program or you can download an Open Source sound editor called Audacity from

http://audacity.sourceforge.net/

8.5 Working with Images

Managing images for actors and world backgrounds can be achieved in two different ways. We can use prepared images from files, or we can draw an image on the fly in our program.

8.6 Image Files and File Formats

This section involves creating and editing images using an image editing program. If you want to do the exercises in this section then you can use Photoshop or download an Open Source image editor called gimp from

http://www.gimp.org/

8.7 Drawing ImagesThe color value is split into three components; the red, green, and blue component. Colors represented this way are usually referred to as RGB colors. This means that we can represent each pixel with color and transparency in four numbers that are:

(R, G, B, A)The first three define Red, Green, and Blue components in that order and the last is the Alpha value. The values are in the range 0 to 255, where 0 indicates no color and 255 indicates full strength. An Alpha value of 0 is fully transparent (invisible), while 255 is opaque (solid).

Color Chart

Exercise 8.29

(255, 0, 0, 255) Red and Solid( 0, 0, 255, 128) Blue and Half Transparent(255, 0, 255, 230) Magenta and Mostly Solid

Exercise 8.30 public ColorTest() { super(400, 400, 1);

boolean black = true;

Exercise 8.30 (continued)for (int x = 0; x < 8; x++){ if (black) //alternate colors at the start of each column black = false; else black = true; for (int y = 0; y < 8; y++) { if (black) // alternate colors { ColorPatch blackSquare = new ColorPatch (0, 0, 0); addObject (blackSquare, x*50 + 25, y*50 + 25); black = false; } else { ColorPatch redSquare = new ColorPatch (255, 0, 0); addObject (redSquare, x*50 + 25, y*50 + 25); black = true; } }}

Exercise 8.30 (continued)* * Write a description of class ColorPatch here. * * @author (your name) * @version (a version number or a date) */public class ColorPatch extends Actor{ /* * Create a Checkers or Chess Board pattern. */ public ColorPatch (int r, int g, int b) { GreenfootImage img = new GreenfootImage (50, 50); img.setColor (new java.awt.Color(r, g, b)); img.fill(); setImage (img); }}

Exercise 8.30

Exercise 8.31public class ColorPatch extends Actor{ /* * Create a Checkers or Chess Board pattern. */ public ColorPatch (int r, int g, int b, int a) { GreenfootImage img = new GreenfootImage (Greenfoot.getRandomNumber (100)+1, Greenfoot.getRandomNumber (100)+1); img.setColor (new java.awt.Color(r, g, b, a)); img.fill(); setImage (img); }}

Exercise 8.31 (continued)public ColorTest(){ super(400, 400, 1);

for (int x = 0; x < 8; x++) { for (int y = 0; y < 8; y++) { int r = Greenfoot.getRandomNumber(256); int g = Greenfoot.getRandomNumber(256); int b = Greenfoot.getRandomNumber(256); int a = Greenfoot.getRandomNumber(256);

ColorPatch square = new ColorPatch (r, g, b, a); addObject (square, x*50 + 25, y*50 + 25); } }}

Exercise 8.31

Exercise 8.32public ColorPatch (int r, int g, int b, int a){ int x = Greenfoot.getRandomNumber(100) + 1; int y = Greenfoot.getRandomNumber(100) + 1;

GreenfootImage img = new GreenfootImage (x, y);

for (int i=0; i<100; i++) { img.setColor (new java.awt.Color(r, g, b, a)); int xi = Greenfoot.getRandomNumber(x + 1); int yi = Greenfoot.getRandomNumber(y + 1); img.fillOval(xi, yi, 4, 4); setImage (img); }}

Exercise 8.32

8.8 Combining Images Files and Dynamic Drawings

Some of the most interesting visual effects are achieved when we combine static images from files with dynamic changes made by our program. We can for example, start with a static image file, and then paint onto it with different colors, or scale it up or down, or let it fade by changing its transparency.

Exercise 8.33 // Number of Squares in each row and column public static final int NUMBER = 12;

// Size of the Square in pixels public static final int SIZE = 30; // Color and Transparency for the Darker Square private static final int BLACKR = 119; private static final int BLACKG = 136; private static final int BLACKB = 153; private static final int BLACKA = 100;

// Color and Transparency for the Lighter square private static final int WHITER = 255; private static final int WHITEG = 255; private static final int WHITEB = 255; private static final int WHITEA = 255;

Exercise 8.33public Board(){ super(NUMBER*SIZE, NUMBER*SIZE, 1);

boolean black = true; for (int x = 0; x < NUMBER; x++) { if (black) // alternate colors at the start of each column black = false; else black = true; for (int y = 0; y < NUMBER; y++) { if (black) // alternate colors { CreateSquare blackSquare = new CreateSquare (BLACKR, BLACKG, BLACKB, BLACKA); addObject (blackSquare, x*SIZE + SIZE/2, y*SIZE + SIZE/2); black = false; } else { CreateSquare whiteSquare = new CreateSquare (WHITER, WHITEG, WHITEB, WHITEA); addObject (whiteSquare, x*SIZE + SIZE/2, y*SIZE + SIZE/2); black = true; } } }

This method is fully parameterized to generate

any size board, with any number of squares, with any

to color combinations

Exercise 8.33

Exercise 8.34public class Box extends World{ /* * Construct the box with a ball in it. */ public Box() { super(460, 320, 1); addObject ( new Ball(), getWidth() / 2, getHeight() / 2); }}

Exercise 8.34public class Ball extends Actor{ private int deltaX; // x movement speed private int deltaY; // y movement speed private int count = 2; /* * Create a ball with random movement. */ public Ball() { deltaX = Greenfoot.getRandomNumber(11) - 5; deltaY = Greenfoot.getRandomNumber(11) - 5; } /* * Act. Move and produce smoke. */ public void act() { move(); }

Exercise 8.34 /* * Move the ball. Then check whether we've hit a wall. */ public void move() { setLocation (getX() + deltaX, getY() + deltaY); checkWalls(); } /* * Check whether we've hit one of the walls. Reverse direction if necessary. */ private void checkWalls() { if (getX() == 0 || getX() == getWorld().getWidth()-1) { deltaX = -deltaX; } if (getY() == 0 || getY() == getWorld().getHeight()-1) { deltaY = -deltaY; } }}

If we are at a wall on the x-axis reverse direction

Exercise 8.34

Exercise 8.35

public class Smoke extends Actor{ private GreenfootImage image; // the original image public Smoke() { image = getImage(); }

Exercise 8.35

Exercise 8.36public class Smoke extends Actor{ private GreenfootImage image; // the original image private int fade; // the rate of fading

public Smoke() { image = getImage(); fade = Greenfoot.getRandomNumber(4) + 1; // 1 to 4 if (fade > 3) { fade = 2; // change 4 to 2, to have double probability for 2 } } /* * In every step, get smaller until we disappear. */ public void act() { shrink(); }

Exercise 8.36 /* * Make the image of this actor a little smaller. If it gets very small, * delete the actor. */ private void shrink() { if(getImage().getWidth() < 10) { getWorld().removeObject(this); } else { GreenfootImage img = new GreenfootImage(image); img.scale ( getImage().getWidth()-fade, getImage().getHeight()-fade ); img.setTransparency ( getImage().getTransparency() - (fade*5) ); setImage (img); } }}

Exercise 8.36

Too much Smoke

Exercise 8.37

/* * Put out a puff of smoke (only on every second call). */private void makeSmoke(){ count--; if (count == 0) { getWorld().addObject ( new Smoke(), getX(), getY()); count = 2; }}

Add some delay for the Smoke

Exercise 8.37

Exercise 8.38public Smoke(){ image = getImage(); fade = Greenfoot.getRandomNumber(4) + 1; // 1 to 4 if (fade > 3) { fade = 2; // change 4 to 2, to have double probability for 2 }}

private void shrink(){ if(getImage().getWidth() < 10) { getWorld().removeObject(this); } else { GreenfootImage img = new GreenfootImage(image); img.scale ( getImage().getWidth()-fade, getImage().getHeight()-fade ); img.setTransparency ( getImage().getTransparency() - (fade*5) ); setImage (img); }}

Fade is a Random Number 0, 1, 2, 2, 3

Exercise 8.38

8.9 Summary

Being able to product sounds and images is a very valuable skill for producing good looking games, simulations, and other graphical applications. By combining images from a file with dynamic image operations, such as scaling and transparency changes, we can achieve attractive visual effects in our scenarios.

8.9 Concept Summary