Lesson One: The Beginning Processing Installing Processing Menu Options Writing Code Errors The Processing Reference (and website) The “Play” button Your first sketch Installing You will need to have processing.
Download ReportTranscript Lesson One: The Beginning Processing Installing Processing Menu Options Writing Code Errors The Processing Reference (and website) The “Play” button Your first sketch Installing You will need to have processing.
Slide 1
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 2
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 3
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 4
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 5
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 6
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 7
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 8
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 9
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 10
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 11
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 12
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 13
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 14
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 15
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 16
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 17
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 18
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 19
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 20
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 21
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 22
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 2
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 3
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 4
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 5
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 6
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 7
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 8
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 9
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 10
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 11
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 12
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 13
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 14
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 15
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 16
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 17
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 18
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 19
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 20
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 21
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22
Slide 22
Lesson One: The Beginning
Processing
Installing Processing
Menu Options
Writing Code
Errors
The Processing Reference (and website)
The “Play” button
Your first sketch
Installing
You will need to have processing downloaded to your USB and not the
lab machines.
Finding the files
Website: www. processing.org – click Download
Version 1.5.1 is the most stable
Download the ‘standard’ version to USB
Unzip , or open and extract files
Let it choose defaults (location…)
Installs Java SDK automatically and examples
Puts Java files in a folder under Processing
Works with XP and Vista
Learning Processing: Slides by Don Smith
2
Sketch Menu Options
Processing has an ‘PDE’ “Processing Development Environment” called Sketch
File: New, Open, Quit, Examples!
Edit: Copy, Paste, Select, Indent, Comment…
Sketch: Run, Stop, Show Sketch folder…
Tools: Auto format, Color chooser…
Help: Getting Started, Reference, Find in Reference…
Learning Processing: Slides by Don Smith
3
PDE
Menu
Toolbar
Sketch Tabs
Display
Window
Text Editor
Message Line
Text Area
Current Line#
To run: Menu Sketch, Run, Ctrl-R or Toolbar Run button
You either get a display window (all’s well) or an error in Message Area
Learning Processing: Slides by Don Smith
4
Toolbar buttons
Learning Processing: Slides by Don Smith
5
Getting Started
Help menu, Getting Started goes to processing website and
explains:
Processing Development Environment (PDE)
All menu options, hot keys
Sketchbook
Tabs, Multiple Files, and Classes
Coordinates
Programming Modes
Rendering Modes
Learning Processing: Slides by Don Smith
6
Sketch Files and Folders…
Processing programs are called “Sketches”
The folder where you store your sketches is called your
‘Sketchbook’
Sketch stores files under where Processing was installed
May not be where you want.
Use File, Save As to select a folder on your flash drive
Processing remembers where you last saved
Each sketch has it’s own folder
File extension ‘PDE’ is a Processing Development Environment file
Double click on PDE file to open Sketch for that folder
Learning Processing: Slides by Don Smith
7
Where are your files?
Choose File,
Preferences
Select new location for default
Not flash drive (not always there)
Learning Processing: Slides by Don Smith
8
Your First Program
Open a new sketch
Default name is based on date/time
In the Text window, type:
// My first Program
Print(“Hello World by me”);
rect(10, 10, 50, 50);
One comment and two lines of code
Run it… If no errors,
What is in the Message/Text Area?
What is in the Display window?
Learning Processing: Slides by Don Smith
9
Errors
The brown line tells you what is wrong
Editor window: The line with the error is highlighted
RECT should be lower case (rect)
Note: Processing only shows one error at a time
Learning Processing: Slides by Don Smith
10
Help, Find In Reference
Double click key word (highlights in yellow)
Menu: Help, Find in Reference: (or Ctrl-Shift-F)
Does not work if word is mis-spelled
Normally goes directly to detailed page (local)
Usually provides an example
Learning Processing: Slides by Don Smith
11
Saving options
You can save sketch as a .pde file: by using save or save as
//My first program
print (“Hello world by Me");
rect (10,10, 50,50);
You can save the sketch as an applet by using export
This will create a folder containing
.html file
.pde file
.js java script file
Learning Processing: Slides by Don Smith
12
Why Processing
The focus of this class is to learn computer programming not to focus on a
specific application, so why processing?
•
Processing allows for immediate feedback through visual and graphical
means
•
Processing is real programming. It has all the fundamentals and core
concepts that all languages have.
•
Everything you learn here can be transferred to other languages: Java,
C++, MEL etc
•
Processing is great for both Learning and Producing.
•
Processing is super fun!
Learning Processing: Slides by Don Smith
13
Coding in Processing
In Processing there are three kinds of statements we can write
1.) Function Calls:
Our first sketches will basically be a series of function calls. The functions will take
arguments that allow the function to create the shapes or complete the commands
we ask it to do. Some functions do not take arguments.
Example:
background(150);
smooth(); // no argument
fill (0);
lineWeight (3);
line (50, 100, 300, 400)
2.) Assignment Operations: Assign values to variables
3.) Control Structures: loops (aka. Iterations)
Learning Processing: Slides by Don Smith
14
Coding in Processing
What have we seen so far?
•
So far we have been writing a series of function calls that draw shapes,
points, or lines to the screen.
•
Some examples are:
•
background (255);
•
rect(200, 100, 50,100);
•
ellipse (50, 100, 30, 30);
•
point(60, 30);
•
etc
function name = “background”,
arguments/ parameters are held inside (parenthesis)
ends with a semi colon.
What processing is actually doing with the parameters is hidden from us. All we see is the
final visual element drawn on the screen.
No worries, we will write our own functions soon enough.
Learning Processing: Slides by Don Smith
15
Coding in Processing
Here are some of the common functions calls we have used so far.
Let’s review what they do.
•
background (150):
•
stroke(3);
•
fill(0);
•
noFill();
•
noStroke();
•
point(250,250);
•
line(0,0, 100,160);
•
rectMode(CENTER);
•
rect(0, 0, 50, 100);
•
ellipseMode(CORNERS);
•
ellipse(50, 50, 200, 100);
A full list of functions available are found at the processing.org/reference
Learning Processing: Slides by Don Smith
16
Coding in Processing
There are also some reserved words or “keywords” that processing
will color in its editor.
You can display text information to the message window by using
these functions:
println(); This will print a string to the message window or can also print
values in a variable. This is very helpful for trouble shooting.
example:
size (300, 500);
println ("what's up Doc?");
println ("The width of this window is " + width + " pixels");
println ("The height of this window is " + height + " pixels");
Learning Processing: Slides by Don Smith
17
Commenting in Processing
Commenting code is also a very important habit to get into.
Comments can be added by using the “//” two forward slashes for a single line of comments
Example:
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
For a multi lines of comments enclose them with the “/*” & “*/” forward slash, Asterisk
Example:
/* This sketch will draw
two basic shapes
side by side on the canvas */
// This will draw a circle
ellipse(80, 50, 30, 30);
// This will draw a rectangle
rect (0, 0, 50, 75);
Learning Processing: Slides by Don Smith
18
Processing is case sensitive
Processing is case sensitive
One of the early frustrations in learning computer programming is
syntax. Capitalization will make a word acceptable or unacceptable.
Example:
Ellipse (50, 50, 30, 40);
Example
Size(500, 300);
Example
printLn(height);
Example:
println(Height);
19
Processing practice
Now let’s put all the things we have learned into practice.
Write the code to create the following image:
define canvas size of 500px x 500px
draw a snowman with the following attributes
Head, middle and base spheres
Buttons down front
2 eyes
Top hat
Right and left arms
add any additional elements to the scene you want.
Use comments to separate out parts of the snowman code.
For example: // this is the head, // this is the right arm etc.
Also, consider making the parts of the snowman based off of a common reference point.
For example, The middle sphere is 75% of the base sphere, The head Sphere is 25% of
the base sphere. The Hat height is two heads tall and one head wide.
This kind of thinking will make things easier later, when we work with variables.
20
Summary
Processing requires (runs on) Java
You can download both at the same time and install easily
Processing provides a simple IDE(Integrated Development Environment)
Called PDE (Processing development Environment)
Sketches can be saved and copied
Defaults to saving in your ‘install’ folder
Use Save As to copy to flash drive
Processing provides help
Reference (all keywords)
Find In Reference (help on one thing)
Finds the first error and highlights the line above
It only takes a little practice to get the hang of Processing. Make sure to
understand these basics and it will avoid confusion down the road.
Learning Processing: Slides by Don Smith
21
Assignment
Take some time now to review some of the ways Processing is being used
by looking at the Processing website Feed:
Under File in the main PDE menu click on “example” and a huge
assortment of example code will be given to you to run. Check them all out.
It’s fascinating.
From those examples, choose three examples that you really like and be
ready to share with the class.
Learning Processing: Slides by Don Smith
22