Coding: Games, Apps and the Arts Unit 0: Processing Basics 1

Essential Skills  DM-1: Use technology to advance critical thinking and construct knowledge  DM-6: Demonstrate an understanding of technology tools and operations 2

Day 0  Syllabus  Name game! 3

Day 1: What is Processing?  “Processing relates software concepts to principles of visual form, motion and interaction. It integrates a programming language, development environment, and teaching methodology into a unified system. Processing was created to teach fundamentals of computer programming within a visual context, to serve as a software sketchbook, and to be used as a production tool. Students artists, design professionals and researchers use it for learning, prototyping, and production.” Processing: A programming Handbook for Visual Designers and Artists  4

Opening Processing and Saving Student Work  Icon on desktop  Very important to keep work organized  Let's create a file to save all your work in  YourNameCoding2014  **Add more details here** 5

Processing Development Environment (PDE)  Consists of:  simple text editor for writing code  a message area  a text console  tabs for managing files  a toolbar with buttons for common actions  series of menus 6

PDE continued  The buttons on the toolbar consist of: 7

PDE continued  Programs written using processing are called Sketches  Each sketch has its own folder  The main program file for each sketch has the same name as the folder  If the sketch is named Sketch_123, the folder will be Sketch_123 and the main file will be Sketch_123.pde  A folder sometimes contains other folders for media files and code libraries  These will be in a “data” folder  They can be added by selecting “Add file” or dragging them into the text editor  All images, fonts, sounds, and other kinds of data files loaded in the sketch must be in this folder 8

Coding syntax—coding is writing!  Creating software is an type of writing  Just like English, there are different parts of writing code  Comments—ignored by the computer by important for people since they allow the programmer to write personal notes to others who read the code //two forward slashes are used to denote a comment //All text on the same line is part of the comment /* A forward slash followed by an asterisk allows the comment to continue until the opposite occurs. This is useful for multiline comments */ 9

Coding is Writing Continued  Functions allow a program to draw shapes, set colors, calculate numbers, and execute many other types of actions  May or may not require parameters  Ex: size(200,200);  Expressions  Software Expressions are combinations of operators (+,-,*,/)  Statements are made of one or more expressions  The statement terminator is a semicolon 10

Coding is Writing, Continued 11

Coding is Writing, Continued  Just like different types of sentences, there are different types of statements  Size(200,200) // Run the size( ) functions  int x;// Declare a new variable x  x = 102// Assign the value 102 to the variable x  Background(x); // Run the background function  We will discuss these in more detail later! 12

Coding is Writing, Continued  The computer runs the software faster than the human eye can perceive  In order to see this, we can use the function println( ) to display data while the program is running  This function writes the text to the console  To print text, place the output in quote: println(“Processing…”);  To print a variable, don’t put it in quotes int x = 20; println(x);  Use a comma inside println( ) to write more than one value  Use the “+” operator to combine variables with custom text in between 13

Your First Program: "Hello, World!"  Go to  Bookmark this page--this is super useful!  Lets look at "println()"  a function's parentheses surround the functions parameters  a parameter is a piece of data that you “feed” a function when calling the function  println can have zero parameters, one parameter, or several parameters  this we know due to the parameters section of the data reference page  println("Hello, World!");  In this case, our parameter is the string "Hello, World!"  Explore and see what other parameters you can input! 14

Returns  The Returns section of the documentation tells us that type of data (if any) the function returns  looking at the "Returns" section of println, we see the word void  void is a keyword used indicate that a function returns no value  Each function must either return a value of a specific datatype or use the keyword void to specify it returns nothing  If we look at sqrt() we see it returns a float  see what happens when we type in the following float y = sqrt(64); println(y); 15

Day 1 Homework/Closure  Using Processing’s documentation, find:  three functions that have void as the return type  three functions that return a value  In a discussion with your Computer Science friend (without consulting any resources), use as many Processing-related words as you can  Homework:  Download Processing  Copy and paste some examples--just play around with it!  Check out the Exhibition page--there are some awesome things there 16

Day 2: The text() function  Go to the reference page for Processing's text() function  What is it's return type?  What does return type mean?  There are many ways to use the text() function  we will use text(str,x,y)  str will be a String (the text we want displayed)  x and y will be floats that define the objects location  a float is a number containing a decimal point like -3.2 or 7.0  This function will display the text on the sketch, not the console  console is typically used for debugging the program, not output 17

Processing Coordinate System  Processing uses a Cartesian coordinate system with the origin in the upper-left corner  Using the three-dimension coordinate system, the z-coordinate is zero at the surface of the image, with negative z-values moving back in space 18

The text() function continued 19

Modifications  textSize() function changes the text size  fill() function changes the color  We can write it as one word at a time. How?  We can also put in a z-coordinate! What does this do? 20

Two VERY Important Modes of Drawing  We will use these modes A LOT.  2 modes:  Static—things will only be drawn to the screen once  This goes in the setup( ) function  Continuous—objects are continually drawn to the screen for as long as the program runs  Useful as it means objects can change their properties or characteristics over time like color, shape, size or position  This goes in the draw( ) function 21

“Hello, World!” in static (setup) mode 22

“Hello, World!” in continuous (draw) mode 23

Extensions  What happens if you do “count = count + 10” instead?  What if you do “count + 10 = count” instead?  What if you do “count += count” instead?  What happens if you change the third parameter of the text() function to “100+count”?  What happens if you take out the “background(255)” line in the draw section?  Other questions/things to try and change and see what happens?! 24

Day 2: Closure  Without using any resources, list 7 processing functions  True or false: a function with a void return type voids any previously called functions. Explain your answer 25

Day 3: Shapes!  Processing has 8 different drawing functions to draw simple shapes  Points  Lines  Triangle  Quadrilateral  Rectangle  Ellipse  Arc  Bezier  Each function has its own parameters 26

Points  The point() function has two parameters: the x-coordinate and the y-coordinate 27

Lines  You can place points side by side to create a line…  Or use the line() function!  line(x1,y2,x2,y2)  The first two parameters are the position the line starts and the last two are where it stops 28

In Class Exercise 1. Draw three horizontal lines 2. Draw three vertical lines 3. Using at least 4 lines, draw a shape 29

Shapes  The triangle() function has six parameters, two for each point  The quad() function has eight parameters, two for each point  Go to the processing webpage for more specific information  In Class Exercise:  Using 3 quad() functions, draw what appears to be a 3D cube: 30

Solution (just one-there are many!) 31

Shapes  The rect() function has four parameters  The first two set the location of the upper left corner, the third sets the width and the forth sets the height  The ellipse() function has four parameters  The first two set the center of the ellipse, the third sets the width, and the fourth sets the height  How would you draw a circle?  In class exercise: using the rect() and ellipse() functions, draw a circle inscribed in a square 32

Curves  The most basic curve is an arc, a piece of an ellipse  The arc() function has 6 parameters:  First four parameters are the same as the ellipse function  Last two define the angles where the arc begins and ends  Example: arc(50,50,75,75,radians(40),radians(320));  Example: arc(50,55,50,50,radian(0),radians(90)); arc(50,55,60,60,radians(90),radians(180)); arc(50,55,70,70,radians(180),radians(270)); arc(50,55,80,80,radians(270),radians(360));  What do you notice about this last example?? 33

Bezier Curves  Defined by a series of control points and anchor points  Curve is drawn between the anchor points and the control points define its shape  bezier(x1,y1,x2,y2,x3,y3,x4,y4)  Where curve is drawn between first and fourth coordinates  Control points defined by second and third coordinate pairs  Example: bezier(85,20,40,10,60,90,15,80); 34

35

Closure/Homework  What is the different between the setup() and draw() functions?  What is a parameter?  Homework:  Using the shapes introduced, draw a hexagon using:  only lines  six triangles  Bonus: a rectangle, two squares and 4 triangles 36

Day 4: Changing Shape Attributes  background();  fill();  stroke();  noFill();  noStroke();  noSmooth();  smooth();  strokeWeight();  strokeCap()  strokeJoin();  Color values are from 0 (black) to 255 (white) 37

38

 Second parameter to fill() and stroke() controls transparency 39

In Class Exercise/Homework  Play around with the functions that change the shape attributes.  Don’t forget about the processing website:  Create the following images: 40

Days 5-7: Project 1 41

Day 8: Colors!  Not the same as painting!  Adding all the colors together on computer gives white—in paint it gives black  Computer monitor mixes colors with light—screen is a black surface and colors light is added  This is called additive color  Subtractive color is for inks on paper and canvas 42

RGB values  Intensities of each color are specified with the values between 0 and 255  Setting all to 255 creates white, all to 0 creates black  (255,0,0) creates red  (0,255,0) creates green  (0,0,255) creates blue  Other colors can be found using a color selector  This is found in the Tools menu  Optional forth parameter defines the transparency  255 means entirely opaque; 0 means completely transparent 43

In Class Exercise  1. Create a colored background with a different color shape that has a thick third color for the shapes outline  2. Then put a larger transparent shape of a different color with no stroke on top of the original shape  Example: 44

HSB mode  HSB specification can be used instead to define colors in terms of the hue, saturation and brightness  Hue is what most people this as of the color name  Saturday is the degree of purity in a color  Brightness of a color is its relation to light and dark  colorMode() function sets the color space for a sketch  First parameter is RGB or HSB  Optional second parameter allows Processing to use different values to define colors rather than 0 to

HSB mode  Useful setting is colorMode(HSB, 360,100,100)  0 to 360 degrees on color circle  Percentage values for saturation and brightness  Example: changing simply the hue, same saturation and brightness 46

Example: changing saturation, same hue and brightness 47

Example: changing brightness, same hue and saturation  Create this code on your own… see what happens! Is that what you expected? 48

Hexadecimal  An alternative notation for defining color  Encodes each of the numbers from 0 to 255 into a two-digit value using the numbers 0 through 9 and the letters A through F  You can use this value from Processing’s color selector in your code  Must put a # before the value to distinguish it within the code 49

Closure/Homework  What are the three color models you can use when input colors into Processing?  What is the difference between doing grayscale and color?  Homework:  Take day 4 homework (slide 40) and modify the drawings so they’re in color 50

Day 9: Project 2 51

Day 10: Quest! 52