Graphics Programming in Processing  -  Lesson 1  Drawing Flags  -  Dave Mulkey, Germany 2012

Processing #1 - Drawing Flags

Processing

The programs in these notes will run in Processing
from http://processing.org after downloading and installing the program.
Alternatively, you can run the code directly in the following web-page
without installing anything : http://sketchpad.cc

Goals                

            

Theory

Drawing commands use a standard coordinate system. Every pixel on
the screen has a position, consisting of an x value and a y value.
The top-left corner of the screen is position (0 , 0). The first zero,
the x value, says the position is 0 pixels from the left side of the screen.
The second number says the position is 0 pixels from the top.

The position (100 , 50) says to start at the top left corner, then move
100 pixels across to the right and 50 pixels down from the top.
If the window is 400 pixels wide and 300 pixels high, then the center of
the window is at (200 , 150). Here are the values for various positions:


Rectangles

Processing draws rectangles with the command : rect( x , y , w , h )
The numbers x , y tell where the top-left corner of the rectangle is.
The numbers w , h tell the size of the rectangle – width and height.
 
The size(w , h) command tells the width and height of the window.
We see that we need 3 rectangles for the flag.

Version 1 of our program looks like this:


Now we need to move the rectangles closer, so they are touching,
and then fill them in with colors.

Fitting Together Touching Rectangles

Since the height of each rectangle is 30 pixels, the top of each rectangle
should be 30 more than the rectangle above, like this:
 
    (100 , 50 ... ) Notice that the left (x) coordinate
    (100 , 80 ... ) of each rectangle is always 100.
    (100 , 110 ...) This makes them line up, one below the other.
 
By changing thes y-coordinates, we make the rectangles touch.

- Version 2 -

RGB Colors

The most common way to represent colors in a computer  is by mixing
Red, Green and Blue together. By using various amounts of each
basic color, we can create 16 million different colors.

In Processing, use the command fill( R , G , B) to fill in a rectangle
with a color, where the R, G and B are values between 0 and 255.

Here are some example values:
BLACK
0,0,0   
WHITE
255,255,255
 RED
255,0,0
GREEN
0,255,0
BLUE
0,0,255
PURPLE
255,0,255

For more complicated color mixtures, use Processing's color selector
in the [Tools] menu, and copy the RGB values into your program.
For example, gold is (250,170,50)

- Version 3 -



Rectangle PROPERTIES - Fill and Stroke

A rectangle has properties that tell exactly what it looks like.
These properties include:

    left , top , width , height , fill color , stroke color (color of border)

Now we need to change the stroke color so we don't see a black border
around each rectangle. We do this by changing the stroke color to match
the fill color for each rectangle. Use this command:

    stroke(R , G , B)

Notice that before each rect command, we must define the fill and stroke
to be used when drawing the rectangle. If not specified, Processing will
use whatever fill and stroke it was using before.

- Version 4 - Now the black borders are gone.


More Flags

We can make more flags using just rectangles, for example:
Austria


Sweden

 Belgium


Germany
          

- Practice -

1. Type Version 4 of the sample program into Processing and run it.
    If you make mistakes, correct them until the German flag works.
    Remember that you need a ; semicolon at the end of each line.

2. Change the program to display the flag for Austria.

3. Change the program to display the flag for Belgium.

4. Change the program to show the Sweden flag. This could be
     made with 9 rectangles. Can you see how to make it with fewer
     rectangles? It's possible to manage with just 3 rectangles.

5. Now make a program that shows all 4 flags (above) without text.
    You will need LOTS of commands to accomplish this.
    HINT - make one flag, then use copy-paste to make
    more commands and then just change the numbers.

Lines and Triangles

Some flags contain lines or triangles, as well as other shapes.

Congo

 Scotland
 Israel

These flags aren't so simple any more, so we need to make a PLAN.
Programmers write plans in pseudo-code.  That means very clear and
precise English that is similar to a Java program, but with fewer details.

Planning the Congo Flag

We start with the Congo flag.  It contains 2 triangles and
a yellow parallelogram (ouch).  The good news is that we
don't really need to draw the yellow part.  We can do it like this:

      Pseudocode
We are all set, except for one thing - how do you draw a triangle?
Processing has a triangle command, written like this:

    triangle( x1 , y1 , x2 , y2 , x3 , y3 )

where the x's and y's tell the locations of the 3 corners.

Sketching the Congo Flag

Making a sketch will help a lot - then writing the Java commands
will be a lot easier.

 (50, 50)                      (110, 50)      (150, 50)       
        
(50, 120)          (90, 120)                (150,120)

Here is the resulting program:



Israel Flag

The flag of Israel appears complicated at first glance,
but it actually consists of :
So how do you draw a line?  The idea is similar to a triangle:

    line( x1 , y1 , x2 , y2)

where (x1,y1) is one end of the line and (x2,y2) is the other end.

Here is a sketch with approximate positions for the corners of the star.
    
               
     

Israel Flag Program




StrokeWeight(5) means that each line is 5 pixels thick.
It looks like the coordinates above were not correct - the star is too wide,
like it has been stretched sideways.

More Practice

  1. Type in the Israel program (above) and get it running.

  2. Change the coordinates in the line commands to make the star narrower.

  3. Add the following command:  smooth( ); 
      That will smooth out the jagged appearance of the lines.

  4. Make a Scotland flag.  It has a white background and 4 blue triangles.

Review Questions

  1. What command is used to draw a rectangle?
  2. What command is used to change the color of the border of a rectangle?
  3. What command is used to choose a color for filling in a rectangle?
  4. Consider this command:  triangle(100 , 50 , 200 , 150 , 100 , 150);
    Write 3 line commands that would draw the same triangle.
  5. What RGB values make each of the following colors?
    (a) black    (b) white   (c) red    (d) blue    (e) yellow
  6. What command is used to make thick (fat) lines?
  7. Explain the purpose of the size command.
  8. What commands would fill the entire window with the color green?
  9. Write two line commands that draw a large X.
  10. The following commands draw two squares next to each other, touching.

        rect(100 , 100 , 100 , 100);
        rect(200 , 100 , 100 , 100);

    Write two more rect commands to draw 2 more squares below these,
    so the result is a grid with 2 rows and 2 columns.