Learning processing second edition pdf free download

Add to cart. Sales tax will be calculated at check-out. Resources Textbook Support for Instructors. Free Global Shipping. Description Learning Processing, Second Edition, is a friendly start-up guide to Processing, a free, open-source alternative to expensive software and daunting programming languages. Requiring no previous experience, this book is for the true programming beginner. It teaches the basic building blocks of programming needed to create cutting-edge graphics applications including interactive art, live video processing, and data visualization.

Step-by-step examples, thorough explanations, hands-on exercises, and sample code, supports your learning curve. A unique lab-style manual, the book gives graphic and web designers, artists, and illustrators of all stripes a jumpstart on working with the Processing programming environment by providing instruction on the basic principles of the language, followed by careful explanations of select advanced techniques.

The book has been developed with a supportive learning experience at its core. From algorithms and data mining to rendering and debugging, it teaches object-oriented programming from the ground up within the fascinating context of interactive visual media. It teaches the basic building blocks of programming needed to create cutting-edge graphics applications including interactive art, live video processing, and data visualization.

Step-by-step examples, thorough explanations, hands-on exercises, and sample code, supports your learning curve. A unique lab-style manual, the book gives graphic and web designers, artists, and illustrators of all stripes a jumpstart on working with the Processing programming environment by providing instruction on the basic principles of the language, followed by careful explanations of select advanced techniques.

The book has been developed with a supportive learning experience at its core. From algorithms and data mining to rendering and debugging, it teaches object-oriented programming from the ground up within the fascinating context of interactive visual media. This book is ideal for graphic designers and visual artists without programming background who want to learn programming. It will also appeal to students taking college and graduate courses in interactive media or visual computing, and for self-study.

Learn algorithms for solving classic computer science problems with this concise guide covering everything from fundamental …. The free, open-source Processing programming language environment was created at MIT for people who want to …. Skip to main content. Yes, bells are ringing. When speed is positive Zoog moves to the right, when speed is negative Zoog moves to the left. Now that we have our variables, we can move on to the rest of the code.

Assuming setup sets the size of the window, we can go directly to examining the steps required inside of draw. We can also refer to Zoog as a ball in this instance since we are just going to draw a circle.

Now, in order for the ball to move, the value of its x location should change each cycle through draw. In order for it to turn around, we need a conditional statement. Or more formally. If x is greater than width, reverse speed. Conditionals 75 Reversing the Polarity of a Number When we want to reverse the polarity of a number, we mean that we want a positive number to become negative and a negative number to become positive.

This is achieved by multiplying by —1. If x is greater than width or if x is less than zero, reverse speed. Example puts it all together. Can you implement additional features, such as changing the size or color of the ball based on certain conditions? Can you make the ball speed up or slow down in addition to changing direction? For example, just as a square moves from left to right, a color can go from less red to more red. Example takes the same bouncing ball algorithm and applies it to changing color.

Start by incrementing c1. Start by decrementing c2. When this happens, just like with the bouncing ball, the direction is reversed. For example, consider a rectangle that follows the edges of a window. State 1: top to bottom. State 2: right to left. State 3: bottom to top. We can use a variable to keep track of the state number and adjust the x, y coordinate of the rectangle according to the state.

If, while the state is 0, it reaches the right side of the window, change the state to 1. Repeat this same logic for all states! And in fact, armed with variables and conditionals, you are now ready for this moment. The bouncing ball sketch taught us that an object moves by altering its location according to speed.

When you drop a pen, the force of gravity from the earth which is overwhelmingly larger than the pen causes the pen to accelerate toward the ground. Acceleration increases or decreases speed. In other words, acceleration is the rate of change of speed. And speed is the rate of change of location. We use a relatively small number 0. Try changing this number to 2. Exercise Continue with your design and add some of the functionality demonstrated in this chapter. Can you make it bounce off all edges of the window?

Here is a simple version with Zoog. Identical logic is applied to the y direction as well. I mean, what is iteration? Seriously, what is iteration?

Iteration is the generative process of repeating a set of rules or steps over and over again. It is a fundamental concept in computer programming and we will soon come to discover that it makes our lives as coders quite delightful. For the moment, think about legs. Lots and lots of legs on our little Zoog. If we had only read Chapter 1 of this book, we would probably write some code as in Example Sure, the code accomplishes this, however, having learned variables in Chapter 4, we can make some substantial improvements and eliminate the hard-coded values.

Note that for each leg drawn, only the x value changes. All other variables stay the same but they could change if we wanted them to! Add spacing so the next leg appears 10 pixels to the right. And what if we wanted to draw legs? For every leg, we need two lines of code. To avoid this dire, carpal-tunnel inducing problem, we want to be able to say something like: Draw one line one hundred times. Aha, only one line of code! A loop structure is similar in syntax to a conditional Loops 83 see Chapter 5.

However, instead of asking a yes or no question to determine whether a block of code should be executed one time, our code will ask a yes or no question to determine how many times the block of code should be repeated. This is known as iteration. For one thing, the only loop you really need is while. The for loop, as we will see, is simply a convenient alternative, a great shorthand for simple counting operations.

Do-while, however, is rarely used not one example in this book requires it and so we will ignore it. If the test evaluates to true, the instructions enclosed in curly brackets are executed; if it is false, we continue on to the next line of code.

See Figure 6. Assuming the following variables. We then enclose all of the code for the class inside curly brackets after the name declaration. Class names are traditionally capitalized to distinguish them from variable names, which traditionally are lowercase. These variables are often referred to as instance variables since each instance of an object contains this set of variables.

It is where you give the instructions on how to set up the object. These are done in the same way as described in Chapter 7, with a return type, name, arguments, and a body of code. This code for a class exists as its own block and can be placed anywhere outside of setup and draw. Include a function called sleep or make up your own function. Follow the syntax of the Car example. There are no right or wrong answers in terms of the actual code itself; it is the structure that is important.

Car myCar; Step 1. Declare an object. Initialize object. Call methods on the object. Declaring an object variable. Declaring a variable that holds onto an object is quite similar. This is because they store multiple pieces of information: data and functionality. Primitives only store data. Initializing an object. Again, you may recall from Chapter 4 that in order to initialize a variable i.

An object is made with the new operator. What we are really doing here is initializing a Car object. When you initialize a primitive variable, such as an integer, you just set it equal to a number.

But an object may contain multiple pieces of data. If you forget to initialize an object, Processing will give it the value null. Not zero. Not negative one. Utter nothingness. See the Appendix for more details. Using an object Once we have successfully declared and initialized an object variable, we can use it. Using an object involves calling functions that are built into that object.

A human object can eat, a car can drive, a dog can bark. Calling a method inside of an object is accomplished via dot syntax: variableName. Exercise Assume the existence of a Human class. You want to write the code to declare a Human object as well as call the function sleep on that human object. Operate the car object in draw by calling object methods using the dots syntax. Technically speaking, the order does not matter, as long as the blocks of code contained within curly brackets remain intact.

The Car class could go above setup or it could even go between setup and draw. Though any placement is technically correct, when programming, it is nice to place things where they make the most logical sense to our human brains, the bottom of the code being a good starting point. In your Processing window, look for the arrow inside a square in the top right-hand corner. Although you can pick any name you like, it is probably a good idea to name the tab after the class you intend to put there.

Toggling between the tabs is simple, just click on the tab name itself, as shown in Figure 8. Also, it should be noted that when a new tab is created, a new. The program has both an objectExample. Try to get the Car example to run without any errors.

Nonetheless, there is a rather serious problem with the above code. What if we wanted to write a program with two car objects? However, if you study the Car class, you will notice that these two cars will be identical: each one will be colored white, start in the middle of the screen, and have a speed of 1.

In English, the above reads: Make a new car. We want to instead say: Make a new red car, at location 0,10 with a speed of 1. So that we could also say: Make a new blue car, at location 0, with a speed of 2. We can do this by placing arguments inside of the constructor method. Please do not blame yourself. But for now, it may feel painful. See Figure 8. In the examples, they have one purpose only, to initialize the variables inside of an object. This allows us to make a variety of objects using the same constructor.

You might also just write the word temp in your argument names to remind you of what is going on c vs. You will also see programmers use an underscore c vs. You can name these whatever you want, of course. However, it is advisable to choose a name that makes sense to you, and also to stay consistent. We can now take a look at the same program with multiple object instances, each with unique properties. No matter how many cookies we make, only one cookie cutter is needed. Include two instances of a Ball object.

The original example is included here for your reference with a framework to help you get started. The examples in this chapter all use just one class and make, at most, two or three objects from that class. Nevertheless, there are no actual limitations. A Processing sketch can include as many classes as you feel like writing.

If you were programming the Space Invaders game, for example, you might create a Spaceship class, an Enemy class, and a Bullet class, using an object for each entity in your game. And since classes are made up of data, an object can therefore contain other objects! Moving on to a PlaceSetting class, you would likely include variables for both a Fork object and a Spoon object inside that class itself.

This is perfectly reasonable and quite common in object-oriented programming. In the Space Invaders game example, if the spaceship shoots the bullet at the enemy, we would probably want to write a function inside the Enemy class to determine if the Enemy had been hit by the bullet.

With objects, this is not the case, and the result is a bit more intuitive. This is known as pass by reference since instead of a copy, a reference to the actual object itself is passed into the function.

As we move forward through this book and our examples become more advanced, we will begin to see examples that use multiple objects, pass objects into functions, and more. The next chapter, in fact, focuses on how to make lists of objects.

And Chapter 10 walks through the development of a project that includes multiple classes. For now, as we close out the chapter with Zoog, we will stick with just one class. Objects allow you to organize the concepts inside of a software application into Objects modular, reusable packages. You will see this again and again throughout the course of this book. However, it is not always convenient or necessary to start out every project using object-orientation, especially while you are learning.

For any Processing project you want to make, my advice is to take a step-by-step approach. You do not need to start out writing classes for everything you want to try to do. Nail down the logic of what you want to do as well as how you want it to look.

This is exactly what we have been doing with cosmonaut Zoog from Chapter 1 until now. Now that we have something, we can take the time to refactor by making Zoog into an object. And so it is time to take the plunge and make a Zoog class. Our little Zoog is almost all grown up. All of the variables and all of the functions from Example are now incorporated into the Zoog class with setup and draw containing barely any code. Zoog is given initial properties via the constructor.

Can you vary their appearance? Consider adding color as a Zoog variable. Objects Lesson Three Project Step 1. Take your Lesson Two Project and reorganize the code using functions. Reorganize the code one step further using a class and an object variable.

Car myCar1; Car myCar2; This was indeed an exciting moment in the development of our lives as computer programmers. It is likely you are contemplating a somewhat obvious question. How could I take this further and write a program with car objects? It will not be a pleasant endeavor.

I am certainly not about to leave you any workbook space in this book to practice. An array will allow us to take these lines of code and put them into one line. Instead of having variables, an array is one thing that contains a list of variables. Any time a program requires multiple instances of similar data, it might be time to use an array.

Exercise Looking at all of the sketches you have created so far, do any merit the use of an array? From Chapter 4, you may recall that a variable is a named pointer to a location in memory where data is stored. In other words, variables allow programs to keep track of information over a period of time. An array is exactly the same, only instead of pointing to one singular piece of information, an array points to multiple pieces. See Figure 9. A list, it should be noted, is useful for two important reasons.

Number one, the list keeps track of the elements in the list themselves. This is a crucial point since in many programs, the order of information is just as important as the information itself. In an array, each element of the list has a unique index, an integer value that designates its position in the list element 1, element 2, etc.

In all cases, the name of the array refers to the list as a whole, while each element is accessed via its position. Notice how in Figure 9. Numbering the elements starting at 0 also makes many array operations the process of executing a line of code for every element of the list a great deal more convenient. As we continue through several examples, you will begin to believe in the power of counting from zero.

Arrays Exercise If you have an array with 1, elements, what is the range of index values for that array? We can have arrays of any data type, and we will soon see how we can make an array of objects.

A list of 10 integers can never go to It is not. To do this, we use the new operator, in a similar manner as we did in calling the constructor of an object. See array declaration in Figure 9. We write this statement as follows: the new operator, followed by the data type, followed by the size of the array enclosed in brackets. This size must be an integer.

Not only did we successfully declare the existence of an array, but we have given it a size and allocated physical memory for the stored data. A major piece is missing, however: the data stored in the array itself!

Arrays 9. The syntax for this is the name of the array, followed by the index value enclosed in brackets. Initialize each spot in the array with a Zoog object via its index. In fact, neither initialization method has really solved the problem posed at the beginning of the chapter. Imagine initializing each element individually with a list of or gasp 1, or gasp gasp!

The solution to all of our woes involves a means for iterating through the elements of the array. Ding ding ding. Hopefully a loud bell is ringing in your head. If you are lost, revisit Chapter 6. B Initialize every element of that array with a random number between 0 and Part A we already know how to do.

We have, nonetheless, taken a big leap forward. By using a variable n to describe an index in the array, we can now employ a while loop to initialize every n element. We can exploit the same technique for any type of array operation we might like to do beyond simply initializing the elements. For example, we could take the array and double the value of each element we will use i from now on instead of n as it is more commonly used by programmers.

Striving to be better programmers, we should always question the existence of a hard-coded number. In this case, what if we wanted to change the array to have 2, elements? If our program was very long with many array operations, we would have to make this change everywhere throughout our code. Fortunately for us, Processing gives us a nice means for accessing the size of an array dynamically, using the dot syntax we learned for objects in Chapter 8.

This will involve resetting every value to 0. Skip the last value in the array. The solution requires an array, which will serve to store the history of mouse locations. We will use two arrays, one to store horizontal mouse locations, and one for vertical. First, we declare the two arrays. The length of the array is 50, meaning index values range from 0— The the last spot is index 49, or the length of the array minus one.

Arrays Now comes the hard part. We want to keep only the last 50 mouse locations. By storing the current mouse location at the end of the array, we are overwriting what was previously stored there.

If the mouse is at 10,10 during one frame and 15,15 during another, we want to put 10,10 in the second to last spot and 15,15 in the last spot. The solution is to shift all of the elements of the array down one spot before updating the current location. This is shown in Figure 9. We can do this by looping through the array and setting each element index i to the value of element i plus one. Note we must stop at the second to last value since for element 49 there is no element 50 49 plus 1.

For each element of the xpos array and ypos array, draw an ellipse at the corresponding values stored in the array. This is accomplished by using the counting variable i to evaluate color and size. For an advanced problem, create a Point class that stores an x and y coordinate as part of the sketch.

Each snake object will have an array of Point objects, instead of two separate arrays of x and y values. This involves arrays of objects, covered in the next section. I still have not fully answered the question. How can we write a program with car objects?

One of the nicest features of combining object-oriented programming with arrays is the simplicity of transitioning a program from one object to 10 objects to 10, objects.

In fact, if we have been careful, we will not have to change the Car class whatsoever. A class does not care how many objects are made from it.

Nothing else anywhere has to change! A rectangle appears in the window and is one color when the mouse is on top and another color when the mouse is not. Even though there are 10 stripes, each one individually responds to the mouse by having its own rollover function. Is it greater than the left edge and less than the right edge? When designing your classes, it is often convenient to use a boolean variable to keep track of properties of an object that resemble a switch.

For example, a Car object could be running or not running. Zoog could be happy or not happy. The Stripe object can check and determine if any x,y coordinate is contained within its rectangle. Perhaps later, we will want the Stripe to turn white when another object, rather than the mouse, is over it. The button class should register when a mouse is pressed over the button and change color. Before writing the main program, sketch out the Button class.

I lied. Well, sort of. See, earlier in this chapter, I made a very big point of emphasizing that once you set the size of an array, you can never change that size.

And I stand by those statements. Technically speaking, when you allocate 10 spots in an array, you have told Processing exactly how much space in memory you intend to use. They are: shorten , concat , subset , append , splice , and expand. In addition, there are functions for changing the order in an array, such as sort and reverse.

Details about all of these functions can be found in the reference. This example which includes an answer to Exercise starts with an array of one object. Each time the mouse is pressed, a new object is created and appended to the end of the original array. Whatever the length of that array, update and display all of the objects. Here, the function, append adds an element to the end of the array. You have to reassign the result of the append function to the original array.

This is known as casting. In the same way that we generated the Car array or Stripe array example, we can simply copy the exact Zoog class created in Example and implement an array.

Try adding it back in as an exercise. Take the Class you made in Lesson Three and make an array of objects from that class.

Can you make the objects react to the mouse? For example, could you make each object jiggle more the closer it is to the mouse? How many objects can you make before the sketch runs too slow? Where are we going? Our friend Zoog had a nice run. Zoog taught us the basics of the shape drawing libraries in Processing.

It is a good story, and one that treated us well. Nonetheless, it is highly unlikely that all of the programming projects you intend to do after reading this book will involve a collection of alien creatures jiggling around the screen if they do, you are one lucky programmer!

What we need to do is pause for a moment and consider what we have learned and how it can apply to what you want to do. What is your idea and how can variables, conditionals, loops, functions, objects, and arrays help you?

Zoog would jiggle and only jiggle. And Zoog was usually all alone, never interacting with other alien creatures along the way. Certainly, we could have taken these early examples further, but it was important at the time to stick with basic functionality so that we could really learn the fundamentals. In the real world, software projects usually involve many moving parts. You, the programmer, will start with an overall vision, but must learn how to break it down into individual parts to successfully execute that vision.

We will start with an idea. Sadly, there is no such thing. Ultimately, you will have to make your own way. However, just as we picked a simple creature for learning the fundamentals, knowing we will not really be programming creatures all of our lives, we can attempt to make a generic choice, one that will hopefully serve for learning about the process of developing larger projects.

Our choice will be a simple game with interactivity, multiple objects, and a goal. The focus will not be on good game design, but rather on good software design. How do you go from thought to code? How do you implement your own algorithm to realize your ideas?

We will see how a larger project divides into four mini-projects and attack them one by one, ultimately bringing all parts together to execute the original idea.

We will continue to emphasize object-oriented programming, and each one of these parts will be developed using a class. Our Process 1. Idea—Start with an idea. Parts—Break the idea down into smaller parts.

Algorithm Pseudocode—For each part, work out the algorithm for that part in pseudocode. Algorithm Code—Implement that algorithm with code. Objects—Take the data and functionality associated with that algorithm and build it into a class. Integration—Take all the classes from Step 2 and integrate them into one larger algorithm. An algorithm is a procedure or formula for solving a problem.

In computer programming, an algorithm is the sequence of steps required to perform a task. Every single example we have created so far in this book involved an algorithm. Place four boneless chicken breasts in a baking dish.

Spread mustard evenly over chicken. The above is a nice algorithm for cooking mustard chicken. Clearly we are not going to write a Processing program to cook chicken. Nevertheless, if we did, the above pseudocode might turn into the following code. Increase the value of I by 1. The solution is now the number saved in SUM. Example Catcher Cont. In Processing, we know we can calculate the distance between two points using the dist function see Chapter 7.

We also have access to the radius of each circle the variable r inside each object. The diagram in Figure Our job now is to write a function that returns true or false based on the above statement.

A ball object should know how to test if it is intersecting another ball object. An object can have a function that takes another object as an argument. This is one way to have objects communicate. In this case they are checking to see if they intersect. After the ball is displayed, the color is reset back to a darker gray.

Processing has the functions hour , second , minute , month , day , and year to deal with time. We could conceivably use the second function to determine how much time has passed. However, this is not terribly convenient, since second rolls over from 60 to 0 at the end of every minute. First of all, millis , which returns the number of milliseconds since a sketch started, allows for a great deal more precision.

Secondly, millis never rolls back to zero, so asking for the milliseconds at one moment and subtracting it from the milliseconds at a later moment will always result in the amount of time passed. Five seconds is 5, ms, so it is as easy as checking if the result of the millis function is greater than 5, This step will restart the timer.

Example translates this into code. A timer must know the time at which it started savedTime and how long it needs to run totalTime. The work of the timer is farmed out to this method. We have created a catcher, we know how to test for intersection, and we have completed the timer object. Ultimately, we want an array of Raindrop objects falling from the top of the window to the bottom.

Since this step involves creating an array of objects that move, it is useful to approach this fourth part as a series of even smaller steps, subparts of Part 4, thinking again of the individual elements and behaviors we will need. Part 4 Subparts: Part 4. A single moving raindrop. Part 4. An array of raindrop objects. Flexible number of raindrops appearing one at a time. Fancier raindrop appearance.

Translating into code we have Part 4.