DMA How-To: Write a Computer Program Using Processing

By Phill Powell

This Digital Media Academy How-To project of writing a computer program using Processing will give you a new appreciation of programming, and challenge you creatively.

Through a simple project (drawing a smiley face), you’ll gain an understanding of programming basics using Processing, a programming language created as an iteration of Java™, with the goal of making learning computer programming an easy, fun and visual experience.

Please Note: This project uses Processing. DMA uses Processing in its Introductory Programming courses, as well as other great programming tools like Scratch©, Python™ and Swift™.

How Processing Works
Before we dig in, let’s cover some basic concepts related to computer programming:

  • A function is whatever you’re trying to create by programming code. (For our purposes, let’s say that the function is an ellipse, or circle.)
  • A command is an instruction you give to the program by writing it in the editor. Each command is unique and each does something different.
  • Computer_Programming_function
    This diagram shows how the syntax of a function is expressed in Processing. Hey, you’re writing code!

  • For each unique function, there are parameters that you assign to that function and write in the editor. Parameters are values that let you assign very specific qualities to whatever function you’re trying to create. Typical parameters include:
    i) X Coordinate
    ii) Y Coordinate
    iii) Width
    iv) Height
  • The syntax of the function expresses the function and describes the parameters and is written like this:

  • ellipse (x,y,width,height);

    (Note: Remember to add a semicolon after the ending parenthesis that contains the parameters. Also, there should be no extra spaces within the syntax.)

  • Keep in mind that function calls get executed in order from top to bottom, so if you want a shape to overlap another, you have to draw the topmost shape last.

  • Now let’s say you wanted to define the size of the canvas you’ll be working on in the editor. To define its size, you would set the total pixels along the X axis, along with the total pixels along the Y axis, and write it like this:

    size (500,500);

    This would set the canvas size to 500 by 500 pixels.

    With an open Processing IDE window, you can start programming visual shapes right away. There are no class structures, no graphics to import and no playing around with functions, inheritance or other programming commands.

    Project Steps: Drawing a Smiley Face
    There are 7 major steps to this project of drawing a simple smiling face, as well as a number of smaller steps:

    STEP 1: Gather the project materials you will need

    a) Visit the Processing website and download Processing. This is a free and open-source application.

    b) Watch the Processing tutorial, starting with this introduction:



    STEP 2: Set the size of the screen

    Set the size of the screen by entering the following code:

    size (500,500);

    STEP 3: Draw a circle

    Draw a circle (ellipse) by entering the following code:

    ellipse (250,250,400,400);

    STEP 4: Create the eyes

    Create the eyes by entering the following code:

    ellipse (150,150,50,50);
    ellipse (350, 150, 50, 50);

    STEP 5: Set the color of the eyes

    Set the color of the eyes to blue by entering the following code:

    fill (0,0,255);

    STEP 6: Create the mouth

    Create the mouth by entering the following code:

    line (150,300,350,300);


    Computer_Programming_face
    Remember that the first two parameters of a line command are the starting coordinates of the line, and the second two parameters are the ending coordinates of the line.

    STEP 7: Make the mouth smile

    To make the face’s mouth smile, you’ll need to change the mouth from a line to an arc. To use an arc function to draw an arc instead of a line, enter the following code:
    arc (a,b,c,d,start,stop);

    Arc Parameters
    a: X Coordinate of the arc’s ellipse
    b: Y Coordinate of the arc’s ellipse
    c: Width of the arc’s ellipse by default
    d: Height of the arc’s ellipse by default
    start: Angle to start the arc (specified in radians)
    stop: Angle to stop the arc (specified in radians)

    Congratulations! You made a smiley face.

    EXTRA: WHAT ELSE CAN YOU CREATE?

    Take a look at the reference below for the syntax of many functions, and then try drawing your own face, creature or anything you can imagine! If you can’t think of anything, try drawing a house.

    Drawing Reference
    Use these commands to help you carry out the following functions:

  • Setting the screen size: size (horizontal_width,vertical_height);
  • Creating a line: line (x_start,y_start,x_end,y_end);
  • Creating an ellipse: ellipse (x,y,width,height);
  • Creating a rectangle: rect (x,y,width,height);
  • Creating a triangle: triangle (x1,y1,x2,y2,x3,y3);
  • Setting the fill color: fill (red,green,blue);
  • Setting the line color: stroke (red,green,blue);
  • Setting the background color: background (red,green,blue);

  • Processing is excellent for giving students their first step to text-based programming, as an intermediate step after something like Scratch and before jumping into something like Java™.

    Processing’s ability to give instant visual output makes it fabulous for learning programming. And since it actually is Java™, you get an introduction to programming with Java™, and what it can do – including creating arrays, complex data structures and objects.