1. Learning to code beyond block style coding.
Processing
Learning to code beyond block style coding.
The Next Step.

2. What is Processing?
Processing is an open source programming language and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks.
Processing is aimed at artists, musicians, hobbyist and high school students rather than programmers.
Java (a commonly used programming language) is a fairly complicated language involving OOP (object-oriented programming) concepts.
Processing is a great starting point and/or gives the ability to program without the complexity and large span of Java.

3. Processing is for writing software to make images, animations, and interactions.
Processing is a flexible software sketchbook and a language for leaning how to code with in the context of the visual arts. The idea is to write a line of code and then watch an image show up on the screen. Then you can add a few more lines of code, and you have an animation. This is sometimes called sketching with code. Processing offers a way to learn programming though creating interactive graphics.

4. Sketching and Prototyping.
Sketching is a way of thinking on paper. This is usually done before you start to write your code. It is a good idea to know what you want you code to look like, in order to identify all of the pieces needed in the code. Ideas for animations are usually sketched out as a story board with notations. Next is a cyclical process of drawing, coding, testing, and improving.
When creating a sketch with processing, you will need to sketch out your ideas by hand first. This will help you visualize what you want to happen on the screen after entering code.

5. Rules of Processing.
For beginners it should be easy to create a basic image. Especially after working through this tutorial. More advanced users can advance their animation skills or even build creatures which interact with other creatures. I will only expect you to create sketches that range in you own ability. (with growth and advancement of course.)
A few rules come with a more advanced creation:
Each creation starts with a setUp() method.
Variables are declared by type.
Each creature must implement the move() and draw() methods.
Animations can be timed with frames or actual time.
Have fun, break the rules, and build something new and amazing.

6. Processing- Variables
Computer Science

7. Variables
The concept of a variable is a powerful programming idea. It’s called a variable because – now pay attention – it varies.
A variable is a symbolic name for information. The variable's name represents what information the variable contains. They are called variables because they represent information that can change, but the operations on the variable remain the same.
The variable stores a value in memory, so that it can be used more than one time and/or later in a program. The reason that we use variables is to avoid repeating the same thing in code over and over.

8. Variables include:
a Type
a Name
a Value
a Scope
a Life time
a Location(in Memory)

9. Variable – A type
The type represents what "kind" of data is stored with the variable.
In C, Java, ActionScript, Processing, etc., the type of a variable must be explicitly declared when the name is created.
Some common types of variables include:
int; (integer value)32,767 max
double; (integer or decimal value)10^308 max
short; (small numbers between minus 32,768 and plus 32,767.)

10. Variable - A Name:
The name is Symbolic . It represents the "title" of the information that is being stored with the variable.
The name is perhaps the most important property to the programmer, because this is how we "access" the variable. Every variable must have a unique name!
Legal Variable Names:
Start with a letter
Use _ (underscore) for clarity
Can use numbers
Don't use special symbols
Don't have spaces
Have meaningful Names
Good variable names tell you, your teammates, and your teacher or boss what information is "stored" inside that variable. They should make sense to a non computer programmer.
For example:
int g=-9.81; this is a bad name. What does g stand for?
int gravity=-9.81; this is a good name. We know exactly what the variable represents.

11. Variable – A Value
A variable, by its very name, changes over time. Thus, if the variable is jims_age and is assigned the value 21. At another point, jims_age may be assigned the value 27.
Variables start with a Type (declaration) such as int or double, have a variable name, then are set equal to its initial value, and end with a semicolon.
For example:
int age = 18;
Default Values
Most of the time, when you "create a variable" you are primarily defining the variables name and type. Often (and the best programming practice) you will want to provide an initial value to be associated with that variable name. If you forget to assign an initial value, then various rules "kick in" depending on the language and type.

12. Variable- A Scope
Good programs are "chopped" into small self contained sections (called functions) much like a good novel is broken into chapters, and a good chapter is broken into paragraphs, etc. A variable that is seen and used in one function is NOT available in another section. Because of this, the same variable name can be used in another function and take on the same name without changing the other functions variables. If you want to use one variable in more than one function you can declare/initialize the variable at the top, outside of the functions.

13. Variable- A Life Time:
The life time of a variable is strongly related to the scope of the variable. When a program begins, variables "come to life" when the program reaches the line of code where they are "declared". Variables "die" when the program leaves the "Scope" of the variable.

14. Variable – A Location (in Memory)
Luckily, we don't have to worry too much about where in the computer hardware the variable is stored. The computer does this for you.

15. Vocabulary: "Access" a variable. "Assign" a value to a variable.
To access a variable is to "read" (or assign) the information inside the variable.
To access a variable, you simply type its name.
For example: total_age = jims_age + jens_age;
"Assign" a value to a variable.
When you assign a value to a variable, you replace the old value with the new one. The old value is gone forever. You can, and often do, replace the old value of a variable based on the current value of the variable.
For example:
int age = 10;
age = 12;
The variable age started with a value of 10 and then was changed/"Assigned" to a value of 12.

16. More Vocabulary "Declare"a variable. "Initialize" a variable.
To declare a variable is to create the variable.
"Initialize" a variable.
Initilizing a variable is another way to say, "declare a variable", but further, implies giving it a base value.
For example, if you are plotting something on the X/Y axes, and we want to start at zero for X, we would say("x=0;"). Thus we have "initialized" the x variable to the value of 0.
"Stored" in a variable.
The information "stored" in a variable, is the last piece of information assigned to the variable name. After assigning into a variable, all previous information is lost.
Note, we often use the statement "store the value 5 in X" to mean the same as "assign the value 5 to X".

17. Drawing with Processing
Coordinate System and Drawing Shapes
Drawing on a computer is like drawing on graph paper.
With minor changes.
Take out a piece of graph paper and draw two points. Connect those two points with a line.

18. Lines
The shortest distance between the two points will be a straight line, and this is where we begin, with two points on that graph paper.
Let's say these two points are located at A(1,0) and B(4,5). If you wanted to direct a friend of yours to draw that same line, you would have to say, "draw a line from the point one-zero to the point four-five."
Well, for the moment, imagine your friend is 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 extra verbiage.)
Here, the instruction will look like this:
line(1,0,4,5);

19. line(1,0,4,5);
Even without having studied the syntax of writing code, the above statement should make a fair amount of sense. We are providing a command (which we will refer to as a "function") for the machine to follow entitled "line".
A computer screen is a grid of light elements called pixels. Each pixel has a position defined by its coordinates.
In processing the x and y coordinates are similar to a coordinate plane.
The x-coordinate represents horizontal distance and the y-coordinate represents the vertical distance.

20. However, the x-coordinate represents the distance from the left edge of the display window and the y-coordinate is the distance from the top edge. Each being positive numbers. The top left corner represents the location (0,0). The coordinate of pixels are written (x,y).

21. Simple Shapes lines(x1, y1, x2, y2);
triangles(x1, y1, x2 , y2, x3, y3);
quad(x1, y1, x2, y2, x3, y3, x4, y4);
rect(x, y, width, height);
ellipse(x, y, width, height);
arc(x, y, width, height, start, stop); start represents the starting angle and stop represents where the angle stops.

22. Can you create this image?
Now let's look at what some code with shapes in more realistic setting, with window dimensions of 200 by 200. Note the use of the size() function to specify the width and height of the window. 
void setup( ) {
size (200, 200); // set size of frame
background( ? ); //set background color }
void draw( ) { // draw the image ……
(shape code goes here)