Introduction� NOTE: �This is a real chapter

Processing Programming

Introduction

MAIN POINTS

1. Who is book for?
2. Who is Processing language aimed at?
3. Open source
4. Algorithm
5. Incremental development
6. Who developed Processing language?
7. Programming language it’s built on

A Few Definitions

• Processing is an open source programming language for coding within the context of the visual arts and electronic media.
• Incremental Development is a method of software development where the product is designed, implemented and tested incrementally (a little more is added each time) until the product is finished. It also involves modularity. E.g., space invaders
• Algorithm: Sequence of instructions that tell the computer what to do to solve a problem �(works like a recipe)

Don’t write down definitions, maybe just words.

Chapter 1�PIXELS

X & Y Coordinates

NOTE: �100 pixels equals approx. 1"

X axis +

+ Y axis

(0,0)

Coordinate Systems

Cartesian

Processing

Simple shapes

In order to “give a command” to tell it to draw a shape, we use built-in functions.

functionname(arguments);

​

Example of rectangle function showing parameters, then values.

rect(x, y, width, height);

rect(30, 40, 20, 50);

​

Examples: point, line, ellipse, rectangle, quad

​

More definitions

• Functions: modules of code that accomplish a specific task. Functions usually "take in" data, process it, and "return" a result.
• Variable: a placeholder value that can change, depending on conditions or information passed into the program.
• Parameter: a special kind of variable that is passed into a function. It specifies the type of data…
• Argument: the actual value that is passed into the function.

Don’t write down definitions. Maybe just words.

Do exercise on graph paper

Oops, the last number

should be 200

See specifics on next slide

Line(x1, y1, x2, y2);� line(20, 20, 180, 20);

Point(x, y);

strokeWeight(5);

point(50, 50);

point(0, 80);

​

rect(x, y, width, height);

rect(100, 100, 100, 100);

​

Same as rectangle but from the center

ellipse(25, 90, 50, 50);

TRY IT: ��Let's input your shapes from the graph paper into Processing!

​

Note: �Make screen size 200 x 200

Color

• Using grayscale colors:
• Color is defined with numbers ranging from 0-255.
• Based on binary numbers of only 0 & 1; 8 bits in each byte.
• Thus 2^8 is 256, meaning there are 256 combinations of 0’s and 1’s to represent black to white.

• In Processing, you can apply color as:
• fill()
• stroke()
• background()

TRY IT: �Create these rectangles in grayscale colors

Set screen size to 300. Then try to guess what the instructions would be for the following screenshot.

Textbook Exercise 1-4

Using full RGB colors:

• Primary colors for screen devices are include green rather than yellow.
• When combined, there is a possibility of 16,777,216 colors or 2^24. �
• Example of a function is�
• Get to know popular color combinations.

COLOR (continued):

background(0, 255,255);

QUESTION FOR YOU:

What is used to control transparency of colors?

• Another color system is hexadecimal
• Based on 16 number system: 0-9 and A-F
• Examples:

COLOR (continued):

background(#00FFFF);

fill(#FF0000);

stroke(#C80096);

• See TOOLS>Color Selector menu.

Challenge: Extension of Exercise 1-4

• Change your grayscale colors to primary.
• At end of sketch, change the stroke weight to be thicker.
• �…Next…
• Go to HELP> Reference and look up quad().
• Place a diamond shape (of any size) on top your squares.
• Fill diamond with a semi-transparent color.
• Run▶
• If time permits, go back and remove stroke from diamond

​

Quick Answer:

size(300, 300);

fill(0);

rect(0, 0, 150, 150);

fill(0,255,0);

rect(150, 0, 150, 150);

fill(255,0,0);

rect(0, 150, 150, 150);

fill(255,255,0);

rect(150, 150, 150, 150);

strokeWeight(6);

fill(150, 25, 175, 110);

quad(150, 75, 225, 150, 150, 225, 75,150);

Exercise 1-7 … a reminder

• Try to do all examples and exercises…
• Feel free to ask about them in class…

​

Other ideas for Chapters 1 & 2

I kept these simplistic, but you can go further if desired. The idea is just to get your bearings right regarding shapes and coordinates.

​

Even more ideas. These are windows.

I saw this collection of windows on a vector drawing site. I re-created them in Processing. Try one! It helps to get you acquainted with coordinates and sizing for sure.

Not to overwhelm, but even more …

I’ve only recreated one of these in Processing, but I know that each of them is doable. Try one if you’re so inspired.

• Official intro to the software.
• Downloading (You did already)
• Saving files; Location
• Saved in folder with same name; reason
• HELP/Reference
• Use comments generously
• Println() and Error in console help with debugging
• Textbook website

We’ve already touched on some of Chapter 2

Chapter 2 (Preview)