Your SlideShare is downloading. ×
Processing Workshop Slides for Ladies Learning Code - March 22, 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Processing Workshop Slides for Ladies Learning Code - March 22, 2014

196
views

Published on

These are the slides that were used during the Ladies Learning Code Processing workshop on March 22, 2014 in Toronto. …

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.

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
196
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. #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! !
  • 2. 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!
  • 3. 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
  • 4. 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
  • 5. GETTING STARTED
 THE BASICS…
  • 6. IT ALL STARTS WITH ONE LINE ‣ rect(10, 20, 150, 200);
  • 7. 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
  • 8. PIXELS common graph your computer (in pixels) (0, 0) x x y y (0, 0)
  • 9. 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);
  • 10. 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
  • 11. 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?
  • 12. 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
  • 13. 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);
  • 14. 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 “}”
  • 15. 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
  • 16. RUNNINGYOUR SKETCH ‣ To visually see what you just coded, press the play button in the top left hand corner
  • 17. 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
  • 18. 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
  • 19. 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()
  • 20. 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
  • 21. 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!
  • 22. 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!
  • 23. 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!
  • 24. 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
  • 25. 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
  • 26. 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);
 }
  • 27. 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?
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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)) {
  • 32. 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.
  • 33. PROJECT 1 - MAILCHIMP
  • 34. 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
  • 35. 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
  • 36. 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!
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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!
  • 45. 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
  • 46. 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);
  • 47. 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!
  • 48. 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
  • 49. BUILDING ON WHAT WE KNOW ‣ This project will build on some of the ideas from our MailChimp project:! ‣ loadString()! ‣ split()! ‣ arrays! ‣ for loops
  • 50. 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)
  • 51. LETS GET STARTED
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. 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.
  • 57. 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
  • 58. 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
  • 59. THANKYOU! Content developed by:! Kathryn Barrett - hi@kathrynbarrett.ca | @kat_barrett! Stephen Boyd - sspboyd@sspboyd.ca | @sspboyd
  • 60. BREAK SLIDES
  • 61. 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