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.

Draw your own map

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.

South African flag

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
  flag = loadImage("saflag.png");
  font = loadFont("AndaleMono-24.vlw");
  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

  // now add your own message
  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");
        }
Advertisements

2 thoughts on “Mzansi messages with shapes, text and images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s