In my teaching career and during my time at SparkFun, I’ve used Processing to make computational thinking approachable, and this book is the culmination of that work. Many of the projects you’ll create here come directly from my experience teaching middle school technology classes. Others come from my experience running workshops for a wide variety of participants, from young children to seasoned web developers. But all of them will teach you something and hopefully inspire you to dig more deeply in to making.
WHY START MAKING WITH PROCESSING?
Processing was developed to make it easy for anyone to create interactive art, so by design, it makes programming accessible for the masses. That alone makes Processing a great place to start your journey into DIY, but there’s another good reason: Processing has a close connection to Arduino. The programming language and development environment for the Arduino platform are based on Processing, so when you’re ready to transition from software to hardware, you’ll feel right at home.
Early in my endeavors to learn and teach programming, I started my students out with Arduino. I quickly found, however, that learning how to build circuits and program at the same time was overwhelming for students who had no experience with either. I needed to separate the two issues and let my students focus on each independently. That’s when I met Jeff Branson, who works in the SparkFun Department of Education. We got to talking about Processing, and he ran a 45-minute workshop in my classroom right before spring break. By the end, he had my students running code like the examples you’ll see in the first two projects of this book.
My students and I were hooked, and I think you will be, too.
WHO THIS BOOK IS FOR
This book is for anyone interested in making dynamic, interactive art and learning to program along the way. It’s designed with beginners in mind, so you definitely don’t need to have a background in computer science. You just have to want to make something awesome, and badly enough to get some simple code working. This book will teach you basic programming, but it’s focused on making something cool in an approachable way.
If you’re driven to learn on your own, this book will be extra fun for you. You’ll finish with a portfolio of interesting, creative, and useful Processing applications that you can incorporate into your everyday life—a web page, your phone, and even print. I’ll walk you through experiences, tools, and concepts that will be useful across a number of disciplines and applications, including art and engineering. For example, it wouldn’t be hard to combine a few of these projects into a program that collects data from the Web and visualizes it as part of an interactive art installation.
In the end, this book is for doers and makers. It’s for those who like getting their hands dirty, who love to explore through creating both physically and digitally. It’s for those who are curious about programming but might be a little intimidated by the math or the science of it. In fact, if you have read this far without putting the book down, you’ll do well getting through it.
A NOTE TO TEACHERS
First and foremost, I love you and thank you for doing what you do. In a lot of ways, I designed this book to emulate the experience my students and I had of learning Processing through doing. You could easily use each chapter as a project for your class. The instructional content for each chapter is written to be detailed and concise enough that you can hand it to a student on its own. I’ve also designed the projects to be open-ended so that each student’s project should come out differently and can be personalized. The projects introduce new concepts on a need-to-know basis, which is great for someone just starting out with programming. It filters the background noise and allows you to focus on what is important: making a cool project, for yourself and with your students.
WHAT’S IN THIS BOOK
This book is project-driven, and each project walks you through building example sketches that demonstrate specific Processing concepts and functions, complete with diagrams and screenshots to help you learn more effectively. Once you understand those concepts, you can tackle the larger project for the chapter. Each project aims to offer a good balance of direct instruction and plenty of opportunities to inject your own personal flair and personality. I want your projects to look and feel different from any other reader’s.
Following that approach, this book is broken into 14 projects:
• Project 0: Getting Started with Processing shows you how to install Processing and helps you write your first program to draw a simple line.
• Project 1: Pixel Art teaches you how to draw actual shapes in Processing. You’ll draw rectangles and translate some graph-paper pixel art to the computer screen.
• Project 2: Holiday Card gives you more basic drawing practice. You’ll draw ellipses and triangles, play with stroke weight, and make a digital snowman.
• Project 3: A First Dynamic Sketch covers the if() statement, a basic building block in programming, and explains how you can use it to move shapes around in your sketches.
• Project 4: Interactive Time-Based Art shows you how to use the clock and calendar in your computer to control a drawing’s color and position over time, and introduces the idea of rotating and scaling shapes.
• Project 5: Enter the Matrix teaches you to manipulate entire groups of shapes as if they were a single image, and covers how to translate multiple shapes across the screen at the same time.
• Project 6: Image Processing with a Collage teaches you how to use photographs and other image files in Processing to make a photo collage, add some pretty cool filters, and do some simple photo manipulation. In this project, I also give you a brief introduction to object-oriented programming.
• Project 7: Playing with Text introduces drawing text in a Processing sketch. I cover how to use fonts, change the font size in your program, and create a dashboard that displays your mouse position in the sketch window.
• Project 8: Two Drawing Programs explores more ways users can interact with your Processing sketches. You’ll create a pair of simple paint programs that let you use your mouse to draw pictures freehand, either in random or controllable colors.
• Project 9: A Maze Game shows you how to make a video game in Processing! You’ll make a simple maze-navigating game and learn how to replace your keyboard with a custom controller built on the wonderful MaKey MaKey board.
• Project 10: Manipulating Movies and Capturing Video shows you how to put your webcam to good use with Processing to build a photo booth. This will be your first foray into libraries in Processing, and you’ll get a deeper look at object-oriented programming.
• Project 11: Audio Processing with Minim teaches you how to add, record, and trigger different sounds in Processing sketches, as well as access all of the amazing background data that comes with MP3 files.
• Project 12: Building a Weather Dashboard with JSON Data levels up your skills as you use the Web to find and extract data in JSON format to build a simple weather dashboard application and keep its information up to date.
• Project 13: Using Sensors with Processing and Arduino gives you another taste of using hardware with Processing. You’ll gather sensor data with an Arduino, send that data to Processing over a serial connection, and graph it. At the end, I’ll show you how to control an RGB LED on an Arduino with Processing.
NOTE
Several of the projects in this book are based on SparkFun’s HotSheets, single-page projects meant to help you get started with new technologies. You can check out these and other SparkFun tutorials at https://learn.sparkfun.com/resources/
These projects focus not on teaching every programming concept, but on the concepts you need to create something beautiful and cool. That doesn’t mean you won’t learn some programming along the way: I just explain any necessary programming concepts contextually on a need-to-know basis. My hope is that having a concrete application for what you’re learning will help that knowledge sink in. The projects are numbered because they build on one another in terms of complexity and your understanding, but you should feel free to circle back and take another swing at a or apply more advanced concepts to previous projects. Throughout the book, I point out particularly good opportunities to go back and hack previous projects with your newfound skills, but I hope you’ll revisit any project you like, as much as you want, at any time.
For each step of the way, I’m there to help you. I explain what’s going on in the code, how everything comes together, and even some of the pitfalls within a given project. At the end of each project is a “Taking It Further” section to encourage you to explore that project’s theme on your own and personalize the project. Sometimes, I’ll ask you to take the concept in a whole new direction; other times, I’ll just discuss how you can improve what you already have.
As you work through this book, I highly encourage you to visit the official Processing forums at Processing.org and share your own projects through OpenProcessing.org, because the Processing community is full of wonderful people and inspiring projects. Processing was my first major experience with the open source community, after Arduino. It floored me that I could jump on a forum and find example code and discussions about problems or ideas just like mine, and I’m sure you’ll find the community just as welcoming.
The first time I posted to OpenProcessing.org to share programs, I received comments on my code and it was forked. That was a powerful moment: it was so cool to know that someone liked my code enough to think it useful! You’ll have similar moments, and as you learn and gain experience with different tools and plug-ins for Processing, you can even give back to the community by writing your own libraries.
On top of that, it’s fun to find others using Processing to create both beautiful art (like museum installations or insane data visualizations) and utilitarian projects (like control systems, user interfaces, and mapping applications). Whatever they’re working on, everyone I encounter is just as excited that I’m using Processing as I am that they are. In my time working at SparkFun so far, I’ve found a number of companies that use Processing for everything from creative endeavors to sensitive control and feedback systems. You never know what you’ll find!
ONLINE RESOURCES
If you get stuck on something or you’re just looking for a concrete example to compare to your project, you can find all of the example code from the book at https://nostarch.com/sparkfunprocessing/ for download. The programs are organized into folders by project, so you can find all the source code easily. Within each folder, you’ll find the sketches for any output shown in that project. (For example, if you wanted to open the sketch for Figure 2-10, you’d download the source code, open the Project 2 folder, open the fig_2_10 folder, and open fig_2_10.pde in Processing.) When a sketch includes external files such as images, sounds, and so on, you can find them in a data folder within the sketch’s folder, too.
Now, grab your artist’s hat and your engineer’s hat, because for the rest of this book, you’ll learn to think like both. Get ready to program a masterpiece!