Learning Processing
eBook - ePub

Learning Processing

A Beginner's Guide to Programming Images, Animation, and Interaction

Daniel Shiffman

Share book
  1. 564 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

Learning Processing

A Beginner's Guide to Programming Images, Animation, and Interaction

Daniel Shiffman

Book details
Book preview
Table of contents

About This Book

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.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.

  • A friendly start-up guide to Processing, a free, open-source alternative to expensive software and daunting programming languages
  • No previous experience required—this book is for the true programming beginner!
  • Step-by-step examples, thorough explanations, hands-on exercises, and sample code supports your learning curve

Frequently asked questions

How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Learning Processing an online PDF/ePUB?
Yes, you can access Learning Processing by Daniel Shiffman in PDF and/or ePUB format, as well as other popular books in Computer Science & Computer Graphics. We have over one million books available in our catalogue for you to explore.


Lesson 1
The Beginning


A journey of a thousand miles begins with a single step.
In this chapter:
Specifying pixel coordinates
Basic shapes: point, line, rectangle, ellipse
Color: grayscale, RGB
Color: alpha transparency
Note that you are not doing any programming yet in this chapter! You are just dipping your feet in the water and getting comfortable with the idea of creating onscreen graphics with text-based commands, that is, “code”!

1-1 Graph paper

This book will teach you how to program in the context of computational media, and it will use the development environment Processing (http://www.processing.org) as the basis for all discussion and examples. But before any of this becomes relevant or interesting, you must first channel your eighth-grade self, pull out a piece of graph paper, and draw a line. The shortest distance between two points is a good old fashioned line, and this is where you will begin, with two points on that graph paper.
Figure 1-1 shows a line between point A (1,0) and point B (4,5). If you wanted to direct a friend of yours to draw that same line, you would say “draw a line from the point one-zero to the point four-five, please.” Well, for the moment, imagine your friend was a computer and you wanted to instruct this digital pal to display that same line on its screen. The same command applies (only this time you can skip the pleasantries and you will be required to employ a precise formatting). Here, the instruction will look like this:
Figure 1-1
line(1, 0, 4, 5);
Congratulations, you have written your first line of computer code! I’ll will get to the precise formatting of the above later, but for now, even without knowing too much, it should make a fair amount of sense. I am providing a command (which I will refer to as a function) named line for the machine to follow. In addition, I am specifying some arguments for how that line should be drawn, from point A (1,0) to point B (4,5). If you think of that line of code as a sentence, the function is a verb and the arguments are the objects of the sentence. The code sentence also ends with a semicolon instead of a period.
Figure 1-2
The key here is to realize that the computer screen is nothing more than a fancier piece of graph paper. Each pixel of the screen is a coordinate — two numbers, an x (horizontal) and a y (vertical) — that determine the location of a point in space. And it’s your job to specify what shapes and colors should appear at these pixel coordinates.
Nevertheless, there is a catch here. The graph paper from eighth grade (Cartesian coordinate system) placed (0,0) in the center with the y-axis pointing up and the x-axis pointing to the right (in the positive direction, negative down and to the left). The coordinate system for pixels in a computer window, however, is reversed along the y-axis. (0,0) can be found at the top left with the positive direction to the right horizontally and down vertically. See Figure 1-3.
Figure 1-3
Exercise 1-1
Looking at how I wrote the instruction for line — line(1, 0, 4, 5); — how would you guess you would write an instruction to draw a rectangle? A circle? A triangle? Write out the instructions in English and then translate it into code.
English: ___________________________
Code: ___________________________
English: ___________________________
Code: ___________________________
English: ___________________________
Code: ___________________________
Come back later and see how your guesses matched up with how Processing actually works.

1-2 Simple shapes

The vast majority of the programming examples in this book will be visual in nature. You may ultimately learn to develop interactive games, algorithmic art pieces, animated logo designs, and (insert your own category here) with Processing, but at its core, e...

Table of contents