NotesWeek3
 Syllabus / NotesWeek3 Introduction To Computational Media- Week 3 Notes Just so we all know, in processing (and all languages that I know of), multiplication (usually drawn as x) is denoted by *. Division (usually drawn as a line with two points on the top and bottom) is denoted by /. Some shortcuts in Processing: Increment and Decrement Shortcuts: i++ is equivalent to i = i + 1 and i-- to i = i - 1. For Example-- ``` int i = 0; i++; i++; i++; i--; println(i); ```-- would print out "2" to the console. 0+1+1+1-1. Addition and subtraction shortcuts: i += 10 is equivalent to i = i + 10. The same goes for the other operators. i -= 15 is equivalent to i = i - 15. Guess what i *= 3 would be equivalent to? You get the idea. let's talk about loops again. Refer back to last week's notes and do a demo of a "for" loop. Modulo: i%2 gives us the value of the remainder after a division operation. so for example, if i=7, then i%3 would equal 1, since 7/3 would be 2 remainder 1. if i=9, then i%3 would equal 0, since ``` int i = 1; i++; i -= 10; println(i); int r = i % 3; println(r); ```Modulo allows us an easy way to do something every other time or every how every many times. ``` void setup() { // Do something every other time: for (int i = 0; i < width; i++) { if (i % 2 == 0) { stroke(255,0,0); line(i,0,i,height); } else // == 1 { stroke(0,0,255); line(i,0,i,height); } } } ```When i equals 0, i % 2 would equal 0, when i is 1, i % 2 equals 1, when i is 2, i % 2 equals 0 again and so on... i % 2 will always alternate between 0 and 1 as long as we increment i. It is the same concept with % 3 or any other number. The result will always be 0, 1 or 2 when it is 3. When it is 4 the result will be 0, 1, 2 or 3. Always going up to one less than the number you are dividing by. More Built-in Variables Processing has several more built-in variables that you should be aware of. We have already covered mouseX, mouseY, pmouseX, pmouseY, width and height. The following are along the same lines: mousePressed: A boolean variable that is true if the mouse is currently pressed. keyPressed: A boolean variable that is true if a key is currently pressed. key: A char variable that holds the value of the key currently pressed. keyCode: An integer that holds the value of the key currently pressed. Can be compared to a set of constants for special keys. UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT, BACKSPACE and so on. Modularity Built-in Functions These functions get called automatically (they are callbacks) by Processing. Any code added to these function's code blocks will execute only when the specific action has occurred. mouseDragged(): Called when the mouse is pressed and moved. mouseMoved(): Gets called when the mouse is moved. mousePressed(): Gets called when the mouse button is pressed. mouseReleased(): Gets called when the mouse butotn is released. keyPressed(): Gets called when a key is pressed. keyReleased(): Gets called when a key is released. Mouse Released Example: ``` void mouseReleased() { fill(255,127,0); ellipse(mouseX, mouseY, 10, 10); } ``` CRAZY DRAWING EXAMPLE HERE. Note the use of everything we've talked about so far. This is more complex code than I generally use for a demo, but if you walk through it line by line it should make sense. Creating our own Functions You can create your own functions that you can call anywhere else in your code. There are many advantages to writing functions ``` rather than putting everything in the setup() or loop() functions. * Reuse: Writing a function for a commonly used set of commands that you can call over and over again. For instance, you have a complex shape that you use throughout your code. Rather than cutting and pasting those instructions everywhere you can write them once and call it over and over again. * Encapsulation: Putting functionality in a function and thereby seperating it from the rest of the code helps in understanding the program. It also makes making changes to that code much easier. ```Functions (or methods as I should be calling them) comprise of the following parts: ``` * Return Type: This is the type of data (or variable) that the function returns. So far we have only seen the built-in functions which return nothing and therefore use the type: void. Any of the other data types are acceptable as well. * Name: This is simply the name of the function or method. You will call or execute the function using this. An example is setup. * Arguments: You can pass data into a function through the use of arguments. These are specified as variables of a certain type (your choosing) that the function can then make use of. These variables are local to the function. * Code Block: These are the instructions or code that the function will execute when called. ```Here is an example: ``` // return type, function name, arguments, including types int ourCoolFunction(int someInt, int someOtherInt) { // Declare a variable int aThirdInt; // Do something valuable aThirdInt = someInt * someOtherInt; aThirdInt++; // Return something (an integeter in our case as it must match the //return type) return aThirdInt; } ```We would run this function somewhere else in our code such as: ``` int myResult = ourCoolFunction(10,2); println(myResult); int a = 10; int b = 3; int c = ourCoolFuntion(a,b); println(c); ```Let's look at our modulo example and see if we can use functions to clean up our code. http://itp.nyu.edu/~ck987/week3/moduloFunctionDemo/ ONE POSSIBLE EXAMPLE HERE Let's look at the car demo to see how we can reuse code using functions. It also makes the code easier to read. The car will randomly resize and start at the mouse location whenever the mouse is clicked. The function void mouseClicked() is a function that processing gives you for free. The code inside this function will execute every time the mouse is clicked. CAR FUNCTION DEMO HERE Classes and Objects Java and therefore Processing is an Object Orientated Language. This means that Java makes it easy to use objects in your code. An Object is a datatype just like a variable with a couple of differences. Objects can hold multiple pieces of data and can hold methods to manipulate that data. A Class is the blueprint for an Object. It is the code that represents the data and methods that are contained within. Here's one way to think about Classes and Objects. We are all people, human people. That is a class. The class states that we have hair, a gender, are capable of walking and so on. Our human class, would contain variables that hold the color of our eyes, hair, how fast we walk and so on. It would also contain methods or functions for walking, talking, eating and everything else that we do. In order to create a person, we would use the class human as a blueprint and fill in the values particular to the person we are creating. In (some form of) English: ``` Define Human Class Human Has A Hair Color, Eye Color and Shoe Size. Human Can Walk and Run. Create New Human -This Human has Green Hair, Orange Eyes and wears a size 10 shoe. His name is Joe. Make human do stuff -hey Joe, run! -Hey Joe, stop running. -Hey Joe, walk. ```In Processing we would open a new Tab and type the following: ``` // Give our class a name and tell Processing it is a class. class Human { // Variables for our individual humans. int hairColor; // Shade of gray for simplicity sake int eyeColor; int shoeSize; // Constructor, what we use to create a NEW human object: a person // A special type of method. Human(int theHairColor, int theEyeColor, int theShoeSize) { hairColor = theHairColor; eyeColor = theEyeColor; shoeSize = theShoeSize; } // our walk function for humans, returns distance walked, takes //in number of steps int walk(int numSteps) { int distance = numSteps * shoeSize; return distance; } // our run funtion for humans, returns distance walked, takes in number of steps int run(int numSteps) { int distance = walk(numSteps) * 2; return distance; } } ```In order to create a human in our main program we would do the following: You will notice that you call methods of the class/object using "." method name on the actual object. ``` Human joe; // Declare the variable shawn to be an object of type //Human void setup() { joe = new Human(30,129,12); // Create the new human, run the constructor int distanceWalked = joe.walk(10); // Have joe walk, get the distance walked println("joe Walked: " + distanceWalked); int distanceRan = joe.run(10); // Have joe run println("joe ran: " + distanceRan); } ```Using Objects makes it very easy to create multiple versions of the same thing, each with its own variables. We can add a new Human called dan to illustrate: ``` Human joe; // Declare the variable joe to be an object of type //Human Human dan; void setup() { joe = new Human(30,129,12); // Create the new human, run the //constructor dan = new Human(80,90,9); int distanceWalked = joe.walk(10); // Have joe walk, get the //distance walked int dDistanceWalked = dan.walk(20); println("Joe Walked: " + distanceWalked + " and Dan walked: " + dDistanceWalked); int distanceRan = Joe.run(10); // Have Joe run println("Joe Ran: " + distanceRan); } ```One of the things I like about object oriented programming is that it means we get to have some of the fun that Physical Computing people get to have. It's fun to build things, and building objects in processing is a lot like building things in physical computing. In both situations you get to build objects that have inputs and outputs, react to outside interaction, and can generally do stuff. One advantage that we have is that our cost to build (after we buy the computer) is essentially \$0, once it's built correctly it will probably work forever, and we can build hundreds of objects with just a few extra lines of code. Physical Computing lets you build cool blinking things. We can too. BLINKING THING EXAMPLE HERE One last example: ``` // The name of our class class Ball { // our Class variables. int wWidth; int wHeight; int bSize; int x, y; int xDirection, yDirection; // Constructor. This gets called when we create a "new Ball" Ball(int windowWidth, int windowHeight, int ballSize) { wWidth = windowWidth; wHeight = windowHeight; bSize = ballSize; x = 1; y = 1; xDirection = 1; yDirection = 1; } // This is an Overloaded constructor Ball(int windowWidth, int windowHeight, int ballSize, int xPosition, int yPosition) { this(windowWidth, windowHeight, ballSize); x = xPosition; y = yPosition; } // Our method to determine current position of the ball. void compute() { if (x < wWidth && x > 0) { // Move along x axis x += xDirection; } else { // Change direction, from positive to negative and vice versa xDirection = xDirection * -1; x += xDirection; } if (y < wHeight && y > 0) { y += yDirection; } else { yDirection = yDirection * -1; y += yDirection; } } // This actually displays our ball, it gets called in the main draw function void display() { compute(); // first we run the computation ellipseMode(CENTER); ellipse(x,y,bSize,bSize); } } ```Here is what would be in the main Processing program: ``` Ball aBall, anotherBall; void setup() { size(500,500); aBall = new Ball(width,height,100); // Call the constructor of Ball to create a new Ball anotherBall = new Ball(width,height,5,100,2); // Same.. } void draw() { background(255); aBall.display(); // Call the display function/method on the aBall object. anotherBall.display(); // Call it on the anotherBall object. } ``` Bonus: Fonts and Text ``` PFont font; // Declare the variable (do outside of setup, just like normal variables) font = loadFont("arial12.vlw"); // Load the font (do in setup as it does this over the network (sloooo) // Make sure you create the font first (Tools: Create Font) textFont(font, 12); // Specify that the text you are going to draw should use that font and size text("My Name is Jane", x, y); // Draw the String "My Name is Jane" at specific x and y coordinates ```Font and Text Example Bonus: Displaying Images ``` PImage b; // Declare the variable (do outside of setup, just like normal variables) b = loadImage("someimage.jpg"); // Load the image into the variable (do in setup as it does this over the network (slooow) // Put the image file into the "data" folder (you may need to create this) of the project (Sketch: Show Sketch Folder) background(b); // Use the image to draw the background or image(b, x, y, width, height); // Draw the image at a specific x and y coordinates at a specific size ```