# Mzansi messages with shapes, text and images

Do you have a message to share with the world? Here’s an exercise where you draw the shapes to create the colours of Mzansi’s flag (or any other). Then you can use the flag as a background to display your message to the world in text.

Make a flag with a message

We can use Processing to display images and text.
For this sketch to work you will need to have a folder labelled ‘data’ where you have saved an outline of the South African map. You’ll also need to download the font file and save it in the ‘data’ folder.

Make this into the South African flag

You can see from the sketch that only one or two of the shapes in the flag have been coloured in. The shapes in the flag are a bit more complex than the simple shapes such as rectangles and ellipses which we’ve played with so far here, here and here.
To make these irregular shapes Processing lets us use single points, or vertices and combine them into enclosed shapes. For example, this is how we would draw the yellow triangle to the left of the flag.

```//yellow triangular stripe
fill(255,255,0);
beginShape();
vertex(0, 24);
vertex(75, 69);
vertex(0, 115);
vertex(0, 103);
vertex(55, 70);
vertex(0, 37);
vertex(0, 25);
endShape(CLOSE);```

So create each point in the shape as a vertex and then put them all together and enclose them by beginShape() and endShape(CLOSE). But how do you know the coordinates for each point/vertex?
This is where the sketch below is quite handy. If you run it you will see that there is an if-statement which checks whether you are clicking on the image and then runs a function. Don’t worry about how exactly it works, we will learn about it in future weeks.

```  if (mousePressed) {
if (mouseButton == LEFT) {
getCoordinates();
}
}```

The idea is that you run the sketch, click on the corners of your shape, note their coordinates, and add the new shape to the Processing sketch. See whether you can fill in the whole flag.

Their order is important, check that if you draw a line connecting the dots in order you will outline the shape.
Can you work out how to customise the message which appears on the flag?

```/* @pjs preload="saflag.png"; */
PImage flag;
PFont font;
String message = "Listen up Mzansi!";
void setup() {
frameRate(12);
size(200, 143); //draw window
textFont(font);
}
void draw() {
smooth();
image(flag, 0, 0);
stroke(0);
//black triangle
fill(0);
triangle(0,37,0,103,55,69);
//yellow triangular stripe
fill(255,255,0);
beginShape();
vertex(0, 24);
vertex(75, 69);
vertex(0, 115);
vertex(0, 103);
vertex(55, 70);
vertex(0, 37);
vertex(0, 25);
endShape(CLOSE);
//now add a green sideways Y shape

//add a white stripe for the top

//and now a red stripe at the top

//add a white stripe for the bottom

//and a blue stripe at the bottom

fill(0);
textAlign(LEFT);
textSize(10);
text(message,79,height/2);

//this helps you find the coordinates of the points you click
if (mousePressed) {
if (mouseButton == LEFT) {
getCoordinates();
}
}

}
void getCoordinates(){
// Joining an array of ints requires first
// converting to an array of Strings
int[] coords = new int[2];
coords[0] = mouseX;
coords[1] = mouseY;
String coordPair = join(nf(coords, 0), ", ");
fill(0);
text(coordPair, 50,height-50, 200,100);
save("mapcoords.png");
}```