Embed Size (px)
DESCRIPTION
These are the slides that were used during the Ladies Learning Code Processing workshop on March 22, 2014 in Toronto. These slides are based off of the work done by Kathryn Barrett, @kat_barrett. I made some edits to the introductory concepts and added information for the second project, Olympians on Twitter.
Citation preview
#LADIESLEARNINGCODECreative Coding and Data Visualization with Processing
Lead Instructor:!Stephen Boyd - @sspboyd, [email protected]
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
Nike Year 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/4587178Avengers Assemble http://blog.blprnt.com/blog/blprnt/avengers-assembled-and-visualized-part-1!
‣ Large Video Installations – https://vimeo.com/29458889Interactive Installations – http://aaron-sherwood.com/works/firewall/!
‣ It’s fun!Digital Ribbons https://vimeo.com/2430949
OUR PROCESSING PROJECTS
‣ Interactive Installations and Printshttp://www.flickr.com/photos/sboyd/157804458/lightbox/http://www.flickr.com/photos/sboyd/8269274300/!
‣ Data Visualizations for work:http://www.flickr.com/photos/sboyd/6506711543/!
‣ Physical Objects and Crafthttp://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 SHAPESRectangle!
‣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 combinede.g. 155, 15, 215 = purple!
‣ To get the RGB values of a color in Processing:> Tools > Color Selector
COLOR TRANSPARENCY‣ 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
RUNNING YOUR 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
DRAWvoid 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 SHAPESvoid 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 IS YOUR 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
IF, ELSE AND INTERACTION!
!
‣ 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)) {
IF, ELSE AND INTERACTION‣ 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.
PROJECT 1 - MAILCHIMP
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
LOAD THE 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 ON TWITTER
"@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)
LETS GET STARTED
STEP ONE – ACQUIRE THE DATA
‣ void setup() { size(1000, 700); // set the width and height of the canvasbackground(255); // set the background to whiteint 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
STEP TWO – 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 to Twitter 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
STEP THREE – 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 copybioF = createFont("Georgia", 14); // load the font into the variable
STEP THREE – NAME & BIO‣ textFont(unameF); // Select the font to be used for the username
fill(0); // Set the font colorString twitterName = twitterData[0]; // Grab the Twitter name from the twitter data arraytext(twitterName, 350, 75); // Print the User name to the canvas!
‣ textFont(bioF); // Select the font to be used for the biofill(0); // Set the font colorString twBioCopy = twitterData[2]; // Get the Twitter bio copytext(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
THANK YOU!
Content developed by:!Kathryn Barrett - [email protected] | @kat_barrett!Stephen Boyd - [email protected] | @sspboyd
BREAK SLIDES
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
![[Webinar Slides] Put an End to Manual Data Processing](https://img.dokumen.tips/doc/110x75/58887d491a28ab34788b6a2d/webinar-slides-put-an-end-to-manual-data-processing.jpg)
