Java程序辅导

Design Programming
DECO2011
Rob Saunders
web: http://www.arch.usyd.edu.au/~rob
e-mail: rob@arch.usyd.edu.au
office: Room 274, Wilkinson Building
Introduction to 
Computer 
Programming
What is Computer 
Programming?
Computer programming is the process of 
describing all of the steps that a computer 
must perform to complete a task
What is Computer 
Programming?
Unfortunately, computers are REALLY DUMB
What is Computer 
Programming?
Describing the steps that a computer must 
perform requires much more detail than it 
would to describe the steps to another person
Making Toast
Imagine trying to describe how to make toast 
to a robot with a computer for a brain...
1. Locate a loaf of bread
2. Take one slice of bread from the loaf
3. Locate a toaster
4. Insert slice of bread in toaster
5. Turn on the toaster
6. Push down the slider on toaster
7. Wait until the toast pops up
8. Remove the piece of toast from the toaster
Making Toast
• The order of the steps to perform is just as 
important as the steps themselves
• e.g. the toaster must be turned on before the slider is 
pushed down
• The steps rely upon some material to work 
with, e.g. a loaf of bread
• The robot can call upon other devices to do 
some of the work, e.g. the toaster
Computer Speak
• Algorithm
• A sequence of steps that a computer must perform to 
accomplish a task
• Instruction
• A very small step that a computer is capable of 
performing
• Program
• An implementation of an algorithm as a sequence of 
instructions
Computer Speak
• Data
• The material that a computer program works with in 
order to perform a task
• Function
• A piece of a computer program that can perform a 
useful sub-task
Algorithms
Some Simple Types of 
Steps in an Algorithm
• Statements
• A combination of instructions that perform an action
• e.g. insert slice of bread in toaster
• Sequences
• A list of statements to be performed in order
• e.g. insert slide of bread in toaster; turn on the toaster
Some Other Types of 
Steps in an Algorithm
• Conditionals
• A way to choose between alternative sequences
• e.g. if loaf is unsliced then locate knife; use knife to cut slice of bread
• Loops
• A sequence of instructions that is repeated
• e.g. while number of slices of bread is less than slots in toaster
Making More Toast
1. Locate a loaf of bread
2. Locate a toaster
3. While number of slices of bread is less than slots in toaster
1. If loaf is unsliced
1. Locate a knife
2. Use knife to cut slice of bread
2. Take one slice of bread from the loaf
4. Insert slice(s) of bread in toaster
5. Turn on the toaster
6. Push down the slider on toaster
7. Wait until the toast pops up
8. Remove the piece(s) of toast from the toaster
9. Repeat steps 1-9 until enough toast is made
The Types of Steps in the 
Toast-Making Algorithm
1. Locate a loaf of bread
2. Locate a toaster
3. While number of slices of bread is less than slots in toaster
1. If loaf is unsliced
1. Locate a knife
2. Use knife to cut slice of bread
4. Take one slice of bread from the loaf
5. Insert slice(s) of bread in toaster
6. Turn on the toaster
7. Push down the slider on toaster
8. Wait until the toast pops up
9. Remove the piece(s) of toast from the toaster
10. Repeat steps 1-9 until enough toast is made
Data
Loop
Conditional
Sequence
Function
Function
Loop
Statement
Statement
Flow Charts
• Flow charts are another 
way that we can express 
an algorithm
• Flow charts provide a 
graphical representation of 
an algorithm
• Some systems use flow 
charts to write whole 
programs, e.g. Max/MSP
Locate Bread
Locate Toaster
Unsliced 
Loaf?
Take 1 Slice Cut Slice
Slices < 
Slots
Insert Bread
Turn On
Push Slider
Wait for Toast
Remove Toast
More 
Toast?
Start
Locate Knife
End
Developing a Computer 
Program
How to Develop a 
Computer Program
• Specify the problem
• What is the problem that needs to be solved?
• Determine a solution
• How would you solve the problem yourself?
• Design an algorithm
• Write down the steps or create a flow chart.
How to Develop a 
Computer Program
• Write a computer program
• Express the algorithm in a programming language.
• Execute the computer program
• Compile and run the program on a computer
• Test the computer program
• Test the the program works with some sample data.
Developing a Simple 
Program
The Problem
Add together all the numbers between 0 and 81
Developing a Simple 
Program
The Solution
0 = 0
(0) + 1 = 1
(0 + 1) + 2 = 1 + 2 = 3
(0 + 1 + 2) + 3 = 3 + 3 = 6
...
(0 + 1 + 2 + ... + 80) + 81 = ??
Developing a Simple 
Program
The Algorithm
1. TOTAL = 0
2. NUMBER = 0
3. While NUMBER is less than or equal to 81
1. Add NUMBER to TOTAL
2. Add one to NUMBER
4. The solution is TOTAL
Developing a Simple 
Program
The Program
int TOTAL = 0;
int NUMBER = 0;
while (NUMBER <= 81)
{
TOTAL = TOTAL + NUMBER;
NUMBER = NUMBER + 1;
}
print(“0 + 1 + 2 + ... + 80 + 81 = ” + TOTAL);
Introduction to 
Processing
What is Processing?
• Processing is a programming language and 
development environment designed for 
creative people (like you!)
• The Processing programming language is a 
modified version of Java that is easier to learn
• The Processing development environment has 
been designed to be very simple to use
The Processing 
Development Env.
Toolbar
Run
Stop
New
Load
Save
Export
Program
Editor
Output
Panel
Menubar
Display
Window
Tab bar
Sketches
• Processing refers to a program and its 
associated data files as a “sketch”
• All sketches can be accessed from the File 
menu item “File > Sketchbook”
• All new sketches get an automatically 
generated name, e.g. “sketch_060307a”
• You can rename a sketch using the arrow 
button in the tab bar and choosing “Rename” 
Publishing Sketches
• Select menu item “File > Export to web” or 
click on the export icon in the toolbar
• Processing will generate a number of files in a 
new folder called “applet” that include a 
simple webpage, the compiled program and 
data files, and the program’s source code
• The sketch can be published by simply 
uploading the applet directory to a website
Installing Processing on 
Your Home Computer
• Download Processing
• http://processing.org/download/index.html
• Download the Standard version for your operating 
system, e.g. Windows XP / Mac OS X
• Install Processing
• Use the supplied installer to install the software on 
your home computer
Getting Help with 
Processing
• Built-in Help
• The Processing development environment comes with 
some help files you can access from the Help menu
• On-line Help
• The Processing website: http://processing.org/ 
• Help files on topics related to the Processing language
• Examples of programs written using Processing
• Forums where people share helpful advice, hints & tips
Drawing in Processing
Drawing a Line
Source code:
size(100, 100);
background(0);
stroke(255);
line(10, 10, 90, 90);
Drawing a Line
size(100, 100);
background(0);
stroke(255);
line(10, 10, 90, 90);
Set the background colour of the display window to black
Set the foreground (pen) colour to white
Draw a line from (10, 10) to (90, 90)
Set the size of the display window to 100 x 100 pixels
Drawing a Line
line(10, 10, 90, 90);
Function 
name
Parameters
Statement 
End
Co-ordinate Systems
• 2D co-ordinate systems
• (x, y) → screen position
• 3D co-ordinate systems
• (x, y, z) → screen position
Drawing Lines in 3D
Processing also supports the drawing of lines in 
2D and 3D co-ordinate spaces
line(x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2)
Strokes and Fills
Strokes control the appearance 
of the lines in drawn shapes
Fills control the appearance of 
the interiors of drawn shapes
Different Strokes
noStroke()
Don’t draw any lines around shapes
stroke(grey)
stroke(grey, alpha)
Draw grey lines around shapes (optional transparency)
stroke(color)
Draw coloured lines around shapes using a color value
stroke(value1, value2, value3)
stroke(value1, value2, value3, alpha)
Draw coloured lines around shapes (optional transparency)
Different Fills
noFill()
Don’t fill the interiors of shapes
fill(gray)
fill(gray, alpha)
Fill interiors of shapes with grey (optional transparency)
fill(color)
Fill interiors of shapes using a color value
fill(value1, value2, value3)
fill(value1, value2, value3, alpha)
Fill interiors of shapes with colour (optional transparency)
Example Sketch 1
Source code:
size(100, 100);
background(0);
stroke(255);
line(40, 50, 70, 35);
line(20, 30, 50, 15);
line(70, 35, 50, 15);
line(40, 50, 20, 30);
line(40, 50, 50, 70);
line(70, 35, 50, 70);
line(20, 30, 50, 70);
Example Sketch 1a
Source code:
size(100, 100);
background(0);
stroke(255);
line(40, 50, 70, 35);
line(20, 30, 50, 15);
line(70, 35, 50, 15);
line(40, 50, 20, 30);
stroke(255, 0, 0);
line(40, 50, 50, 70);
line(70, 35, 50, 70);
line(20, 30, 50, 70);
Drawing Curved Lines
Bezier Splines
bezier(x1, y1, x2, y2, x3, y3, x4, y4);
Catmull-Rom splines
curve(x1, y1, x2, y2, x3, y3, x4, y4);
Example Sketch 2
Source code:
size(100, 100);
background(0);
stroke(255, 0, 0, 191); 
line(85, 20, 10, 10); 
line(90, 90, 15, 80); 
stroke(255); 
bezier(85, 20, 10, 10,
       90, 90, 15, 80); 
Example Sketch 2a
Source code:
size(100, 100);
background(0);
stroke(255, 0, 0, 191); 
line(85, 20, 10, 10); 
line(90, 90, 15, 80); 
stroke(255); 
bezier(10, 10, 85, 20,
       90, 90, 15, 80); 
Drawing Shapes
Processing has a number of primitive shape 
drawing operators, including:
triangle(x1, y1, x2, y2, x3, y3)
rect(x, y, width, height)
ellipse(x, y, width, height)
Example Sketch 3
Source code:
size(100, 100);
background(0);
rectMode(CENTER);
noStroke();
fill(0, 255, 0);
rect(50, 50, 10, 10);
fill(0, 0, 255);
rect(50, 50, 50, 50);
This program has code to draw two 
rectangles. Why can we only see one?
Example Sketch 3a
Source code:
size(100, 100);
background(0);
rectMode(CENTER);
noStroke();
fill(0, 0, 255);
rect(50, 50, 50, 50);
fill(0, 255, 0);
rect(50, 50, 10, 10);
Why does this work? The rectangles 
must be drawn in the correct order.
Drawing Modes
Rectangles and ellipses can be drawn with their 
origin in the top-left corner, or in the center of 
the shape
rectMode(CORNER)
rectMode(CENTER)
ellipseMode(CORNER)
ellipseMode(CENTER)
Example Sketch 4
Source code:
size(100, 100);
background(0);
stroke(255);
fill(255, 0, 0);
ellipseMode(CENTER); 
ellipse(35, 35, 50, 50); 
fill(0, 255, 0);
ellipseMode(CORNER); 
ellipse(35, 35, 50, 50);
point(35, 35); 
Lab Assignment
Lab Assignment
• Create a sketchbook folder
• Go to your UNIX home and create a new folder called 
“sketchbook” that will hold all you sketches as you 
work on them
Lab Assignment
• Create a “portfolio” in your personal web 
space where you will publish your sketches
• Create a new folder in your web space folder called 
“DECO2011”
• Create a new file called “index.html” inside the folder 
“DECO2011”
Lab Assignment
• Develop a static sketch
• Develop a series of sketches using the basic drawing 
functions that Processing provides
• Choose one of your sketches and try to develop it 
further than the others
• Publish your static sketches to your online portfolio