Learning Processing (eBook)

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

Daniel Shiffman (Autor)

eBook Download: PDF | EPUB

2015 | 2. Auflage
564 Seiten
Elsevier Science (Verlag)
978-0-12-394792-5 (ISBN)

Infos

This book teaches the basic building blocks of programming needed to create cutting-edge graphics applications including interactive art, live video processing, and data visualization.

A unique lab-style manual, this book gives graphic and web designers, artists, illustrators, and anyone interested in learning to code a jumpstart on working with the Processing programming environment by providing instruction on the basic principles of the language, followed by careful explanations of advanced techniques.

From algorithmic design to data visualization, to computer vision and 3D graphics, this book teaches object-oriented programming from the ground up within the fascinating context of interactive visual media and creative coding. It is also supported by a companion website (learningprocessing.com), which includes all examples running in the browser using HTML5 canvas and p5.js, downloadable versions of all source code, answers to select chapter exercises, and over twenty hours of companion video lessons.

• 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

---

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

Textauszug

1

Pixels

A journey of a thousand miles begins with a single step.

—Lao-tzu

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, each visual program will involve setting pixels. The simplest way to get started in understanding how this works is to learn to draw primitive shapes. This is not unlike how you learn to draw in elementary school, only here you do so with code instead of crayons.

I’ll start with the four primitive shapes shown in Figure 1-4.

Figure 1-4

For each shape, ask yourself what information is required to specify the location and size (and later color) of that shape and learn how Processing expects to receive that information. In each of the diagrams below (Figure 1-5 through Figure 1-11), assume a window with a width of ten pixels and height of ten pixels. This isn’t particularly realistic since when you really start coding you will most likely work with much larger windows (ten by ten pixels is barely a few millimeters of screen space). Nevertheless, for demonstration purposes, it’s nice to work with smaller numbers in order to present the pixels as they might appear on graph paper (for now) to better illustrate the inner workings of each line of code.

Figure 1-5

A point is the easiest of the shapes and a good place to start. To draw a point, you only need an (x,y) coordinate as shown in Figure 1-5. A line isn’t terribly difficult either. A line requires two points, as shown in Figure 1-6.

Figure 1-6

Once you arrive at drawing a rectangle, things become a bit more complicated. In Processing, a rectangle is specified by the coordinate for the top left corner of the rectangle, as well as its width and height (see Figure 1-7).

Figure 1-7

However, a second way to draw a rectangle involves specifying the centerpoint, along with width and height as shown in Figure 1-8. If you prefer this method, you first indicate that you want to use the CENTER mode before the instruction for the rectangle itself. Note that Processing is case-sensitive. Incidentally, the default mode is CORNER, which is how I began as illustrated in Figure 1-7.

Figure 1-8

Finally, you can also draw a rectangle with two points (the top left corner and the bottom right corner). The mode here is CORNERS (see Figure 1-9).

Figure 1-9

Once you have become comfortable with the concept of drawing a rectangle, an ellipse is a snap. In fact, it’s identical to rect() with the difference being that an ellipse is drawn where the bounding box1 (as shown in Figure 1-10) of the rectangle would be. The default mode for ellipse() is CENTER, rather than CORNER as with rect(). See Figure 1-11.

Figure 1-10

Figure 1-11

It’s important to acknowledge that in Figure 1-11, the ellipses do not look particularly circular. Processing has a built-in methodology for selecting which pixels should be used to create a circular shape. Zoomed in like this, you get a bunch of squares in a circle-like pattern, but zoomed out on a computer screen, you get a nice round ellipse. Later, you will see that Processing gives you the power to develop your own algorithms for coloring in individual pixels (in fact, you can probably already imagine how you might do this using point() over and over again), but for now, it’s best to let ellipse() do the hard work.

Certainly, point, line, ellipse, and rectangle are not the only shapes available in the Processing library of functions. In Chapter 2, you will see how the Processing reference provides a full list of available drawing functions along with documentation of the required arguments, sample syntax, and imagery. For now, as an exercise, you might try to imagine what arguments are required for some other shapes (Figure 1-12): triangle(), arc(), quad(), curve().

Figure 1-12

Exercise 1-2

Using the blank graph below, draw the primitive shapes specified by the code.

line(0, 0, 9, 6);

point(0, 2);

point(0, 4);

rectMode(CORNER);

rect(5, 0, 4, 3);

ellipseMode(CENTER);

ellipse(3, 7, 4, 4);

Exercise 1-3

Reverse engineer a list of primitive shape drawing instructions for the diagram below.

___________________________

___________________________

___________________________

___________________________

___________________________

1-3 Grayscale color

As you learned in Section 1-2 on page 5, the primary building block for placing shapes onscreen is a pixel coordinate. You politely instructed the computer to draw a shape at a specific location with a specific size. Nevertheless, a fundamental element was missing — color.

In the digital world,...

Produkt-Details

• Erscheint lt. Verlag: 9.9.2015
• Sprache: englisch
• Themenwelt: Mathematik / Informatik ► Informatik ► Grafik / Design
• Themenwelt: Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge
• Themenwelt: Mathematik / Informatik ► Informatik ► Software Entwicklung
• ISBN-10: 0-12-394792-8 / 0123947928
• ISBN-13: 978-0-12-394792-5 / 9780123947925