Processing Warm up #1

(you may need to refresh to see

Introduction

Here we’ll do a simple introduction to Processing, “drawing” in Processing, and animation in processing

What is Processing?

Processing is an IDE or Integrated Development Environment. This just means the place you type, run, and test your code. It works very similarly to Mu, except when you press “play” a new window will be created as rather than uploading code to a microcontroller (the CPX) we’re running the code on our computer.

The lower half of the screen is the console where we can “print” to the screen.

You may find this condescending, but Processing was designed with artists/non-engineers in mind. So when you save a file rather than being a “project” it is saved as a “sketch.” Note that since we can have multiple tabs and files in our project, it will create a collection of folders.

Sizing Things Up

We’ll draw to screen right now using shapes and changing their “strokes” and “fills” you should be familiar with this from Adobe Illustrator. Before we do that we have to set up the context onto which we will create shapes. To do this we’ll need size() and background().

size() simply sets the size of the window we create when we press play. It expects two parameters which are the width and height of our window respectively.

background() will set the background color of our window. It expects either 1 or 3 parameters. Giving it 3 will set an RGB color (in that order), and 1 parameter will set the same number for all three; resulting in a gray. If this helps background(255,255,255) will be the same as background(255).

You don’t have to set either of these properties, but by default, Processing will create a 300 by 300 pixel window with a middle gray background.

Drawin’

To draw to the screen we’ll need to know a bunch of new functions, but they are pretty intuitive. To draw shapes we need ellipse() and rect().

Both of these functions expect 4 parameters: x position, y position, width and height in that order. The only difference is that an ellipse will use its center as its anchor or registration point while a rectangle will use its upper left corner.

By default elllipse and rect will create a white shape with a black outline, that is 1 pixel in width. To change this, we have to set our stroke and fill.

noStroke() and noFill(), with no parameters required, will remove the stroke or fill. fill() and stroke() will set the fill or stroke respectively. They expect 1, 2 , 3 or 4 parameters. 1 will set a gray (like the background()), 3 will set an rgb value. 2 or 4 allow us to add a value for opacity, or the alpha channel. All values are from 0 to 255.

Here’s a simple example showing all these functions in use︎︎︎

Making things Move

Making things animate is part of why we are using Processing and not simply creating images in Photoshop. To do this, like with Mu, we need to create a loop. Processing does this slightly differently, by allowing us to define two functions. One is called setup() and the other is called draw(). setup() is where we set initial values for the screen, and the background, etc. and draw() is our loop which gets updated as fast as the computer will allow, or as close to our frameRate() parameter if you set one.

Here’s an example making a circle move, we’ll explain what’s happening after︎︎︎

Here’s how it works. First we create an x and y variable, this allows us to change them later.

Something unique to Python that we have to do is write global x, y for those variables in each function. This allows us to designate that we want to use the same x and y as we define there. The nerd term for this is that they have “global scope” or can be accessed from anywhere.

You might also notice that we set the ellipse’s position dynamically using height/2. Height is a variable Processing gives us access to in order to know the height of the window in question. height/2 thus allows us to center the ellipse.

In our draw loop, we simply make x equal to itself +5, giving it a speed of five (5) pixels per frame. If we want it to loop our around we can create a conditional like so︎︎︎

You might also want to see what happens if you comment out background() and it isn’t refreshed every frame.

Know that, by no means am I trying to gate keep any of this content. You can always look at the reference for Processing’s Python mode, and check out the examples within the app.

A Reminder That Python Still Works

Just as a reminder, the Python we learned before still applies, so stuff like conditionals, for loops, functions, still work.︎︎︎

Your homework is to make a landscape with Processing and then make another version with something moving

︎Back to Interactive & Experience Design