Object orientation with ‘bandeirinhas’ [work in progress]

A step by step introduction to Object Orientation with Python, in a visual context, using the Processing programming environment

Alexandre B A Villares
2 min readApr 23, 2017

This is an English-language wrap-up of Ensino de programação em um contexto de exploração gráfica com Processing modo Python. presented at GRAPHICA 2017: XII International Conference on Graphics Engineering for Arts and Design. 2017.

Bandeirinha, a small flag in Portuguese, is a very recognizable geometric theme in the Brazilian visual culture. It was explored extensively by painter Alfredo Volpi who took it from the folk decorations of the anual winter festivals (Festas Juninas).

To follow this example install Processing (download), and add Python Mode (use the menu on the top-right of the IDE, which initially will show “Java▾”)

Before we start the Object Orientation properly, on the first two steps we will create a shape and make it move on screen, so I can introduce basic Processing vocabulary. Bear with me.

0. Drawing a small flag

Try this on the Processing IDE, adding the Python Mode!

As a very first step, the code above defines a bandeirinha procedure (to be precise, a function that returns None) that takes coordinates as two parameters for where to place the shape (and an optional size parameter). It changes the coordinate system’s origin with translate() to the provided coordinates and draws a polygon using beginShape(), vertex() and endShape(CLOSE).

Notice that before altering the coordinate system, a ‘context’ is created by with pushMatrix(): so that when the indented code block ends, Processing will do a ‘popMatrix’ and restore the origin to its previous position.

This should be the result of step 1/7

Processing will provide a 100 by 100 pixels canvas by default. And by default the polygon will be white with a black contour.

1. Making it move

On this step we will create global scope variables that will update the bandeirinha position as the frames of the main Processing loopdraw() is invoked.

Add this to the code on the first step, and run!

[not finished]

Then, on Part 3 of 7, we will create a Bandeirinha class. If you like this, consider a small donation at www.patreon.com/arteprog

Code for every step, with Portuguese-language comments, can be found here: https://github.com/villares/mestrado/tree/master/bandeirinhas

--

--