1. Chapter 10: Creating Images and Sound
Bruce Chittenden
(modified by Jeff Goldstein)

2. 10.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.

3. Exercise 10.1 Click on Scenarios and Click New Enter a Name
and Click Create

4. Exercise 10.1

5. Exercise 10.2
Right Click on World
and Click New subclass

6. Name the subclass MyWorld and select a Background
Exercise 10.2
Name the subclass MyWorld
and select a Background

7. Exercise 10.2

8. Exercise 10.3
400 x 300 x 1

9. Exercise 10.3

10. Exercise 10.4

11. Create a Turtle Object and add it to the center of the World
Exercise 10.5
public 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

12. Exercise 10.5

13. Exercise 10.6

14. Get our current location and add 10 to the x coordinate
Exercise 10.6
public 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

15. Exercise 10.6

16. Exercise 10.7

17. Exercise 10.7

18. Exercise 10.7

19. Exercise 10.8 mousePressed mouseClicked
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)

20. Exercise 10.9 public 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);

21. Click anywhere in the World and the Turtle moves to the right
Exercise 10.9
Click anywhere in the World and the Turtle moves to the right

22. Exercise 10.10 public void act() { if (Greenfoot.mouseClicked(this))
move(); }
private void move()
int x = getX();
int y = getY();
setLocation (x+10, y);

23. Must Click on the Turtle to make the Turtle move to the right
Exercise 10.10
Must Click on the Turtle to make the Turtle move to the right

24. Exercise 10.11 public 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)); }

25. Exercise 10.11
Must Click on the individual Turtle to make the that Turtle move to the right

26. 10.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.

27. Exercise 10.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"); }

28. Click on the Turtle to play a sound file
Exercise 10.12
Click on the Turtle to play a sound file

29. 10.3 Sound Recording in Greenfoot
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

30. 10.4 External Sound Recording & Editing
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

31. 10.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.

32. 10.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

33. 10.9 Drawing Images
The 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).

34. Color Chart

35. Exercise 10.35 (255, 0, 0, 255) Red and Solid
( 0, 0, 255, 128) Blue and Half Transparent
(255, 0, 255, 230) Magenta and Mostly Solid

36. Exercise 10.36 public ColorTest() { super(400, 400, 1);
boolean black = true; }

37. Exercise 10.36 (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* , y* ); }
ColorPatch redSquare = new ColorPatch (255, 0, 0);
addObject (redSquare, x* , y* );

38. Exercise 10.36 (continued) /**
* Write a description of class ColorPatch here. *
(your name)
(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); }

39. Exercise 10.36

40. Exercise 10.37 public 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); }

41. Exercise 10.37 (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* , y* ); }

42. Exercise 10.37

43. Exercise 10.38 public 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); }

44. Exercise 10.38

45. 10.10 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.

46. Exercise 10.39 // 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;

47. Exercise 10.39
public 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); }
CreateSquare whiteSquare = new CreateSquare (WHITER, WHITEG, WHITEB, WHITEA);
addObject (whiteSquare, x*SIZE + SIZE/2, y*SIZE + SIZE/2);
This method is fully parameterized to generate any size board, with any number of squares, with any to color combinations

48. Exercise 10.39

49. Exercise 10.40 public 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); }

50. Exercise 10.40 public 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();

51. If we are at a wall on the x-axis reverse direction
Exercise 10.40 /*
* 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

52. Exercise 10.40

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

54. Exercise 10.41

55. Exercise 10.42 public 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();

56. Exercise 10.42 /*
* 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);

57. Exercise 10.42
Too much Smoke

58. Add some delay for the Smoke
Exercise 10.43 /*
* 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

59. Exercise 10.43

60. Exercise 10.44 Fade is a Random Number 0, 1, 2, 2, 3 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 }
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

61. Exercise 10.44

62. 10.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.

63. 10.9 Concept Summary