�ݺ�ߣ

#LADIESLEARNINGCODE
Creative Coding and DataVisualization with Processing
Lead Instructor:!
Stephen Boyd - @sspboyd, sspboyd@sspboyd.ca
Download and install Processing if you haven’t done so already:!
https://processing.org/download/!
!
Grab a copy of the project files and slides as well: 
http://bit.ly/1rbEDJH!
!

WHAT IS PROCESSING?
‣ Processing is a language environment that is built for artists and designers learning
programming for the first time!
‣ It’s built on top of the Java language - meaning it employs all the same principles,
structures, and core concepts of Java and other similar languages!
‣ Processing doesn’t cost a dime and is open source!!
‣ Unlike some languages where you input text and receive a text output (like Ruby),
Processing allows you to input text and receive a visual output!
‣ AKA if you’re a visual learner, this language is for you!

WHY PROCESSING?
‣ We can use it visualize our own data 
NikeYear in Fuel: http://fathom.info/yearinnikefuel !
‣ It can shed new information on already existing things:  
Forms https://vimeo.com/38421611!
‣ It can help us better understand large amounts of data: 
Just Landed https://vimeo.com/4587178 
Avengers Assemble http://blog.blprnt.com/blog/blprnt/avengers-assembled-and-visualized-part-1!
‣ LargeVideo Installations – https://vimeo.com/29458889 
Interactive Installations – http://aaron-sherwood.com/works/firewall/!
‣ It’s fun! 
Digital Ribbons https://vimeo.com/2430949

OUR PROCESSING
PROJECTS
‣ Interactive Installations and Prints 
http://www.flickr.com/photos/sboyd/157804458/lightbox/ 
http://www.flickr.com/photos/sboyd/8269274300/!
‣ DataVisualizations for work: 
http://www.flickr.com/photos/sboyd/6506711543/!
‣ Physical Objects and Craft 
http://libselliott.blogspot.ca/ 
http://n-e-r-v-o-u-s.com/shop/!
‣ Games, Experiments:  
http://asalga.github.io/Asteroids/ 
http://mats.4ormat.com/curating-randomness

GETTING STARTED 
THE BASICS…

IT ALL STARTS WITH ONE
LINE
‣ rect(10, 20, 150, 200);

THE SKETCHBOOK
‣ Processing programs are often referred to as “sketches” !
‣ On screen output goes onto a “canvas”!
‣ The folder where you store your sketches is called your sketchbook!
‣ The file extension for Processing is “.pde”!
‣ When saving sketches, do not use spaces or hyphens, and do not start your sketch name
with a number!
‣ Today, our sketches will also contain a folder called “data”.This is where media related files
are stored

PIXELS
common graph your computer (in pixels)
(0, 0)
x x
y y
(0, 0)

BASIC SHAPES
Rectangle!
‣rect (x, y, width, height); 
rect (100, 200, 50, 125);!
Circle!
‣ellipse (x, y, width, height); 
ellipse (125, 275, 100, 100);
Line!
‣line (x1, y1, x2, y2); 
line (10, 30, 50, 125);

FUNCTIONS
‣ Other way of thinking about functions are as instructions, or commands. !
‣ When drawing a rectangle or circle on our screen, we are providing a command for
the computer to follow!
‣ This is otherwise known as a function.The term rect and ellipse as seen in the last
slide are built in functions that Processing recognizes!
‣ Notice how we also specify where the shape is located and how big it is in ( ), aka
parenthesis.This is known as the function’s argument !
‣ Each function and its argument must always end in a semicolon

COLOR
‣ The fill function specifies what color to make a shape: 
fill (255, 10, 100); !
‣ The stroke function specifies what color to make the border around a
shape: 
stroke (100, 50, 255); !
!
‣ But wait… what do those 3 numbers in between the parenthesis refer to?

RGB
‣ Individual colors are expressed in a range from 0 (none of that color) to 255
(as much of that color as possible)!
‣ 0 = black | 255 = white!
‣ 3 values - red, green, blue combined 
e.g. 155, 15, 215 = purple!
‣ To get the RGB values of a color in Processing: 
>Tools > Color Selector

COLORTRANSPARENCY
‣ In addition to red, green and blue, there is also an optional fourth
component that specifies transparency!
‣ This value also ranges from 0 to 255, with 0 being completely
transparent and 255 being completely opaque!
‣ The following is an example of how it would look:  
fill (255, 160, 52, 100);

SKETCH SETUP
‣ In order to write our very first program, we must initialize the sketch’s
setup. Functions that only happen once are located here. For example,
the size of a sketch!
‣ We start a block of code with an opening “{“ and end it with a closing
“}”

SKETCH SETUP
void setup () {!
size (775, 500);!
}
begin setup of our sketch!
this is the size of our sketch (in pixels!)!
end the setup of our sketch
** “void” refers to a function that returns no value.
‣ When we place functions inside the setup, this is known as nesting.The functions themselves
are known as a block of code

RUNNINGYOUR SKETCH
‣ To visually see what you just coded, press the play button in the top left
hand corner

ALGORITHMS
‣ Computer programming is all about writing specific instructions that are
in sequence - otherwise known as an algorithm!
‣ If asked the question “how do I drive a car?” your answer (in sequential
steps) would be known as an algorithm

DRAW
‣ The function draw acts like a loop. It draws over top of your
output window over and over and over again until you quit the
sketch!
‣ It’s important to remember the term algorithm here. Draw always
always always displays code in sequence 
 
rect (100, 200, 50, 125); 
ellipse (125, 275, 100, 100); In this example, the rectangle is drawn first, followed by the circle.
However, the rate at which draw loops is extremely fast, and
therefore not actually visible to the naked eye

DRAW
void draw () {!
background (255);!
fill (240, 10, 10, 155);!
ellipse (100, 100, 100, 100);!
}
let’s draw something in our sketch!
the background color of our sketch in RGB!
the color of our rectangle in RGB!
the location and size of our ellipse!
let’s stop drawing something in our sketch
and go back to the beginning of draw()

TWO OR MORE SHAPES
void draw () {!
fill (240, 10, 10);!
!
rect (50, 100, 400, 200);!
fill (50, 255, 10);!
!
ellipse (200, 100, 50, 50);!
}
Always specify how your
shape is going to look
BEFORE you draw your
shape!
!
1. fill!
2. shape
this fill is being applied to this circle
this fill is being applied to this rectangle

THE REFERENCE
‣ All the functions that we’ve looked at so far are all part of Processing’s built in
library. You can browse every term in the library by using something called the
Reference!
‣ To find the reference: 
> Help > Reference 
We will only go over a few of these today, but once you feel comfortable, take a
look at others!
‣ If you forget what a term in your code means or want a proper definition with
examples, highlight the term and go to > Help > Find In Reference!
‣ THE REFERENCE ISYOUR BEST FRIEND!

ERRORS - BUGS
‣ Processing is case sensitive: lowercase and CAPITAL letters matter!!
‣ For example, typing “Rect” instead of “rect” will cause an error and will not
open the output window!
‣ Errors also often come from missing squiggly brackets, parenthesis, and
semicolons!
‣ You will run into errors on every program you write. It’s just part of the
process. !
‣ SAVE OFTEN!

TIPS &TRICKS
‣ Processing doesn’t care about s p a c i n g !You can space out functions,
variables, or anything else in Processing as much or as little as you like !
‣ As we add more and more code to our exercises, you might start to see
things getting a little messy and confusing (aka, squiggly brackets not lining
up, or nesting not being visually appealing). Use the Auto Format tool (>
Edit > Auto Format) to organize your code.This will also become your
best friend!

GOOD HABITS: COMMENTING CODE
void draw () { // this is where I start drawing!
background (100, 215, 225); // the background color is blue!
fill (240, 10, 10); // the rectangle is red!
rect (50, 100, 400, 200); // x, y, width, height!
} // this is where I stop drawing

VARIABLES
‣ Variables are a way for you to store information (often words or
letters or images)!
‣ Think of a variable as a box! Inside that box is the stuff (or
information) that we want to refer to later.!
‣ Processing uses two types of number variables: 
int - “integers” which store whole numbers  
float - “floating point values” which store decimal numbers

VARIABLES
int rectX = 100; 
int rectY = 20; 
int rectWidth = 100; 
int rectHeight = 25;!
void setup() { 
size(775, 500); 
} 
 
void draw() { 
background(255); 
rect(rectX, rectY, rectWidth, rectHeight); 
}

BASIC INTERACTION
‣ Another reason why Processing is awesome is because it’s interactive.
Meaning, a user can interact with visuals via different types of input.Today,
we’ll take a look at basic input using a mouse!
‣ Lets recall from the beginning of the workshop: 
rect (x, y, width, height);!
‣ Create a rect in void draw and try replacing the x and y values with the
terms mouseX and mouseY. COOL RIGHT?

CONDITIONALS
‣ A boolean expression evaluates to either true or false 
I am hungry = true. I am afraid of programming = false!
‣ In Processing, we use true and false statements when trying to compare
numbers. For example: 10 is greater than 5 = true!
‣ Today, we’re only going to look at two operators that can be used in a
boolean expression: 
> greater than  
< less than

IF, ELSE
‣ An if, else statement is a specific type of boolean expression!
‣ In essence, it does exactly what it sounds like:  
If this is true, do this. Else it must be false, so do something different!
‣ A real world example could be: If weather is warm, leave jacket at home.
Else, bring jacket

IF, ELSE AND INTERACTION
‣ Let’s combine the if, else statement with the mouseX and mouseY
interaction !
‣ If it were written in English, our next exercise would sound something
like this: 
“If the mouse hovers over the rectangle, display a circle in the middle of
the screen”!
‣ BUT computers are pretty dumb. In code, we have to specify where the
rectangle is and how big it is in order for this reaction to happen

!
!
‣ The above might look extremely terrifying at first, but let’s break it down
together in English (The && is just another way of saying the word “and”)!
‣ If we were to write the above values wrong, what would happen?
if ((mouseX>rectX) && (mouseX<rectX + rectWidth)
&& (mouseY>rectY) && (mouseY<rectY+rectHeight)) {

‣ Now add an ellipse inside the boolean expression and remember to
close it with a “}”!
‣ To get the ellipse to display in the middle of the screen, you can also use
width/2 and height/2 as the x and y values!
‣ Add an “else” block of code and try making the following happen: 
If mouse is over rectangle, display opaque circle. Else, display a nearly
transparent circle.

DATA
‣ As mentioned earlier, all forms of data (whether it’s text, image, video, sound) are
stored inside a data folder located inside the sketch folder !
‣ Today, we’re going to be focusing on text data - more specifically, numerical statistics
that have been taken from Mailchimp reports!
‣ These statistics are split up using commas in a basic text file, and will be used in
Processing to generate visual outcomes!
‣ In this example, we’re going to generate circles that are dependent on how big the
data is. For example, if a report has 200 opens, its circle will be 200 pixels wide

LOADTHE DATA
‣ Open up a basic text editor (text edit, notepad) and write the following 5
pieces of data: 
131,85,87,16,2!
‣ These numbers refer to (in order): 
deliveries, bounces, opens, clicks, unsubscribers, in a single Mailchimp report!
‣ Save the file as data.txt!
‣ Create a folder called “data” within your current sketch folder if it is not
there already. Copy and paste the data.txt file into it

ARRAY
‣ Anytime a program requires multiple instances of similar data, we use
something called an array!
‣ You can think of an array as a list of variables, nicely packed into one line
of code!
‣ In our next step, an array is going to be used to store our 5 pieces of
MailChimp data. It’s important to note that arrays always keep track of
the order the numbers are displayed in - which in our case, is super
handy!

CREATING AN ARRAY
‣ Creating an array is much like creating an integer!
‣ The only difference is, we must indicate the use of an array by placing
empty square brackets after our integer declaration 
 
int [ ] newsletter;!
‣ Add the above to the top of your sketch.We are naming our data set
“newsletter” but like any integer, you can name it whatever you like

STRING
‣ At the moment, our array is empty.We are going to first load our data in a String
variable and then parse it (aka split it) into the array!
‣ Let’s create a String variable called “data.”That variable will be where the information
in our data.txt file is loaded.To do this, we use a function called loadStrings!
‣ All together it is written like this: 
String[ ] data = loadStrings(“data.txt");!
‣ The above must be placed inside setup, since it will be used in the initial setup of our
sketch

SPLIT
‣ As of right now, our data.txt file contains commas that separate our
numbers from each other. Our computer has no idea that this was done
on purpose and is just expecting some data!
‣ We can use the function split so that the computer splits up the
numbers wherever there is comma and turns them into integers!
‣ It looks like this and must also go inside setup: 
newsletter = int( split( data[0], ',' ) ); It’s important to note that the first
value in an array is always referred
to as 0, and not 1

FOR LOOP
‣ Now that we’ve loaded our data and set it up so that our computer can
understand it, we can now use it!!
‣ Remember our if, else conditional? A for loop is also a boolean that can be
used to execute a set of true or false instructions. In English, it translates to:
whenever this is happening, do this!
‣ In this next step, we want place an ellipse for every piece of data there is. Since
there is only 5 pieces of data in our text file, we can use the for loop and it will
only display 5 circles. It translates to: whenever there is a piece of data, display a
circle

FOR LOOP
‣ Nest your if, else statement within this for loop: 
for (int i = 0; i < newsletter.length; i ++ ) {!
‣ In English the above line means: create an integer called “i” and start it’s value at 0. Count up
towards how many pieces of data there are. Stop once there isn’t anymore data!
‣ If you run the sketch, it might appear as if nothing happened - but there is a change!The for
loop is doing exactly what we’re asking it to do, but all 5 circles are being displayed in the
middle, consequently drawing on top of each other (they’re all using the same x value!)!
‣ We need to space all 5 of them out along the x axis

X AXIS
‣ int circleX = i*150; takes the current value of “i,” multiplies it by 150 and
then places a circle at that value on the x axis!
‣ Add the above inside the beginning of your for loop, and replace your
ellipse x values to circleX!
‣ Now notice how our first circle starts right at the x axis of 0 and gets cut
off.This happens because 0 is our first value (0*150=0).To add a little bit
more spacing, add 80 pixels so that line looks like this: 
int circleX = i*150+80

CIRCLE DIAMETER
‣ To make our circles diameter the size of the data (remember, this is in
pixels!), we can use our newsletter array alongside “i” that was created in
the for loop!
‣ Underneath our circleX integer, let’s add a new integer called circleDia
and have it look at the newsletter array: 
int circleDia = newsletter [ i ] ;!
‣ Now change your ellipse widths and heights to circleDia

LABELS
‣ Now that we have all of our 5 results, let’s set up their 5 corresponding top labels.What we
want to do is this: when we hover over the first label, highlight the first circle.And when the
hover over the second, the second highlights.And so forth!
‣ To do this, we can re-use our for loop!
‣ Let’s take the following (currently at the top of our sketch) and nest it inside our for loop: 
int rectX = 100; 
int rectY = 20; 
int rectWidth = 100; 
int rectHeight = 25;!
‣ Also remember to place the actual rectangle itself inside the for loop!

LABELS
‣ Just like with our circles, we need our rectangles to space out along the x
axis!
‣ Apply the same value for int circleX to int rectX!
‣ You’ll notice that the rectangles start a little too far to the right.Try fixing
this so that they are directly above their corresponding circle

CUSTOMIZE
‣ Phew!The hard parts are over! !
‣ Now take some time to add a second text file to your project so you can compare
two sets of data!
‣ You’ll notice that the fill function will sometimes hide pieces of data.This is because
the circle drawn last will draw over the circle drawn first (remember how draw
works?).Take out the fill function completely and play around with these functions: 
noFill(); 
stroke(0, 255, 50, 255); 
strokeWeight (5);

TEXT
‣ We won’t cover how to add text right now, but inside your Mailchimp
folder you will find a pre-made sketch called displaytext.pde!
‣ Copy all the pieces over to your current sketch to have text inside your
labels!
‣ Most of what you’ll see in displaytext.pde is straight forward - but to save
time, we’ve already made these labels for you!

PROJECT 2 -  
OLYMPIANS ONTWITTER
"@HeatherMoyse", "Heather
Moyse", "2010 & 2014
Olympic Gold Medalist
(bobsleigh); Canadian Nat'l
Rugby player; Occupational
therapist; Motivational &
Keynote speaker; Ready for
my next challenge.", https://
pbs.twimg.com/profile_images/
1283410829/_MGS7358.jpg,
https://pbs.twimg.com/media/
Bhkh4_eIIAAnOvJ.jpg, 9341,
20712, 18287, 15548, 23448,
19829, 19068, 13568, 3457,
8181, 14691, 22773, 5786,
8722, 2150, 21575

BUILDING ON WHAT WE
KNOW
‣ This project will build on some of the ideas from our MailChimp project:!
‣ loadString()!
‣ split()!
‣ arrays!
‣ for loops

NEW CONCEPTS
‣ PImage() -This function loads an image into our sketch. Images can come
from your data directory or directly from the internet!
‣ map() -This is a super useful function that lets you translate a number
from one range to another (it will make sense when you see it)!
‣ max() - finds the largest number in an array!
‣ PFont() - this function lets you pick your fonts and sizes (optional)

STEP ONE – ACQUIRETHE
DATA‣ void setup() { 
size(1000, 700); // set the width and height of the canvas 
background(255); // set the background to white 
int margin = 50; // set a margin to be used around the edge of canvas!
‣ String[] data = loadStrings("HeatherMoyse.txt");  
// load the information in the text file into a variable called ‘data’!
‣ String[] twitterData;  
// Create an array to store the parsed data from the text file!
‣ twitterData = split(data[0],TAB);  
// Lets use split to parse the data and put each piece of data into its own array bucket

STEPTWO – IMAGES
‣ String twAvatarURL = twitterData[3]; // Get the URL for the twitter data array 
PImage twAvatar; // Create the image variable to hold the profile photo 
twAvatar = loadImage(twAvatarURL); // load the image into the variable 
image(twAvatar, margin, margin, 267, 200); // draw the image to the canvas!
‣ String twImgPostURL = twitterData[4]; // Get the URL of the image posted toTwitter 
PImage twImgPost; // Create the image variable to hold the profile photo 
twImgPost = loadImage(twImgPostURL); // load the image into the variable 
image(twImgPost, width-margin-267, margin, 267, 200); // draw the image to the canvas

STEPTHREE – NAME & BIO
‣ PFont unameF; // Create the variable to be used for the user name 
unameF = createFont("Georgia", 24); // load the font into the variable !
‣ PFont bioF; // Create the variable to be used for the bio copy 
bioF = createFont("Georgia", 14); // load the font into the variable

STEPTHREE – NAME & BIO
‣ textFont(unameF); // Select the font to be used for the username 
fill(0); // Set the font color 
String twitterName = twitterData[0]; // Grab theTwitter name from the twitter data array 
text(twitterName, 350, 75); // Print the User name to the canvas!
‣ textFont(bioF); // Select the font to be used for the bio 
fill(0); // Set the font color 
String twBioCopy = twitterData[2]; // Get theTwitter bio copy 
text(twBioCopy, 350, 100, 300, 300); // Print the bio to the canvas

STEP FOUR – BAR CHART
‣ Two new functions to learn:!
‣ max() - finds the largest number in an array of numbers!
‣ map() - translates a number within a set minimum and maximum into a
new number given a new minimum and maximum.

RABBIT HOLES!
‣ Change the data file used in the sketch!? !
‣ Change the size of the images!
‣ Change the background color!
‣ Change the layout of the photos
‣ Add labels to the photos?!
‣ Add additional horizontal lines to the graph!
‣ Add labels for each day to the graph (Day 1,
Day 2, Day 3)….!
‣ Change the fill and stroke used in the sketch

NEXT STEPS
‣ Experiment! Use the reference to add new forms of interaction. Grab more data sets and
see how many you can compare!
‣ We haven’t even touched Processing.js!The javascript version of Processing.!
‣ Share sketches and comment on others on openprocessing.org!
‣ Prototype and build to better understand concepts. Being able to visually see code is a huge
advantage!!
‣ Remember:There are many different ways of doing the same thing.Although we’ve taught
you the most basic, we encourage you to explore other ways of solving problems

THANKYOU!
Content developed by:!
Kathryn Barrett - hi@kathrynbarrett.ca | @kat_barrett!
Stephen Boyd - sspboyd@sspboyd.ca | @sspboyd

PROCESSING COMMUNITIES
‣ @p5Toronto has information about Processing and any events happening
around the GTA!
‣ openprocessing.org is probably the most popular.Thousands of completed
and experimental sketches live here.You can view/download someone’s
code, learn from it and build upon it. (under creative commons licensing)!
‣ forum.processing.org is the official forum for Processing.This community is
AWESOME.There is never a question too out there, and everyone who
frequents this website is there to share knowledge and help each other learn

�ݺ�ߣ

Processing Workshop �ݺ�ߣs for Ladies Learning Code - March 22, 2014

More Related Content

Processing Workshop �ݺ�ߣs for Ladies Learning Code - March 22, 2014