COMP 1005Essence of

Computing
Lecture 2Getting Started with
Processing
 What you’ll learn today?

. Why & how to communicate with computer?

.

. Ask computer to do some operations

. Draw simple shapes
. Display images
. Follow mouse control
 How to tell computers to do some
operations?
. Computer does not understand human languages

Draw a What
rectangle languages
does
繪一個矩形 computer
understand?

矩形を描画する
 How to tell computers to do some
operations?
. Computers understand computer
languages / programming languages
. languages designed to communicate
instructions to computers
.

. To tell computers to do some operations, we

need to write some instructions (using a
certain programming language)
. This is called programming
. The list of instructions is called a computer
program
 Different programming languages

. Different programming languages do different things

Writing Managin
webpage g data
s
 Different programming languages

. Different programming languages do different things

Writing
Writing
webpage
applicatio
ns
s
 Different programming languages

. Different programming languages have different grammar /

syntax / rules to follow
 In this course…

.
We use a programming language called Python
with Processing
.

. Why Processing? What it does? Draw some

shapes
. Visual and Interactive
.
Display
Make a Produce a some
. Python-based images
shape game
.
move …
. Easy to learn and develop applications

Add visual Connect to Get data …

effects to an another from the
image computer web
…
Enable you to pick up
other languages
 What you’ll learn today?

. Why & how to communicate with computer?

.

. Use the Processing to ask the computer to do

some operations
. Draw simple shapes
. Display images
. Follow mouse control
 How to draw a shape?

. What shape to draw?

.

. rectangle
.

. Where to draw?
.

. What size to draw?

 Where to draw?Coordinate System

. We use the x (horizontal)

and y (vertical) coordinates
to locate a point
.

. Origin at top left corner (2, 1)

.

. Only positive values along x (7, 3)

and y axes
.

. A pair of (x, y) coordinates

locates a point
 Let’s try to locate some points

. Fill in the (x, y) positions of the points

(5,
(0, 0)
4)
(8,
6)
 Let’s try to locate some points

. Where are (3, 3), (4, 7) and (8, 2)?

(3, 3)
(8, 2)

(4, 7)
 How to draw a shape?

. What shape to draw?

. rectangle
.

. Where to draw?
. Top-left corner at (2, 1)
.

. What size to draw?

. width = 5
. height = 3
.

. Putting all together: rect(2, 1, 5, 3)

GETTING STARTED WITH
PROCESSING
Processing environment
Work flow of Processing
Grammar of the Processing
 The Processing environment
Start a New Open a Save a
sketch file file

Filename
Line number

1. You type here to ask the

computer to do some operations

2. Click this Run button, then 1. A new window will pop

the computer will do the out, what you asked the
operations as you instructed computer to do will be
displayed here

Message:
the computer may talk to you
here
Text
output
here
 Work Flow / Program Flow of
Processing
. Think about your dinner
1. Buy the food

2. Cook the food

Preparati
on
3. Put the food into your Repeati
mouth ng
steps
4. Chewing and swallowing

5. Full
 Work Flow / Program Flow of
Processing
. Every Processing program follows this work flow
1. Set window size

Setup
2. Other setup (Preparati
on)

3. Draw background Draw

(Repeating
drawing on
4. Draw something or do screen)
some operations

5. Stop
Program Flow of Processingsetup() and
draw()
. Different programming languages
have different grammar / syntax /
rules to follow
Gramma
r of the
Processi
ng

Let’s try
this
together!
!
Program Flow of Processingsetup() and
draw()
. Put different types of instructions
to different sections / functions
1. Set window size

2. Other setup

3. Draw background

4. Draw somethinge.g. draw a

rectangle
Program Flow of Processingsetup() and
draw()
. Don’t worry about def and ():
. Just treat them as grammar /
syntax
1. Set window .

size
. Remember to put instructions with
2. Other setup
indentation(4 spaces)
. Indentation is used to distinguish
blocks of code
3. Draw
background
4. Draw
somethinge.g.
draw a rectangle
Program Flow of Processingsetup() and
draw()
. Processing starts in setup(), the
instructions there will be done for
ONE time
1. Set window .

size . Then, Processing REPEATS the

2. Other setup instructions inside draw() until the
sketch window is closed

3. Draw
background

4. Draw
somethinge.g.
draw a rectangle
Program Flow of Processingsetup() and
draw()
. Now, let’s try the size function.
.

. Put the following inside setup().

1. Set window size(500, 300)
size .

2. Other setup . Don’t forget indentation

.

. Now, try and change the numbers,

3. Draw
500 and 300. What are they for??
background

4. Draw
somethinge.g.
draw a rectangle Note: a function call is like a
command for Processing to execute.
Program Flow of Processingsetup() and
draw()
. Now, let’s try the background
function.
.

1. Set window . Put the following inside draw().

size background(200, 100, 0)
2. Other setup .

. Now, try and change the numbers.

What are they for??
.

3. Draw
background
. Try the following two sets of
numbers. Any difference???
4. Draw . background(500, 500, 500)
somethinge.g. . background(255, 255, 255)
draw a rectangle
Program Flow of Processingsetup() and
draw()
. Now, let’s try the rect function.
.

. Put the following inside draw().

1. Set window rect(50, 100, 250, 150)
size .

2. Other setup . Now, try and change the first two

numbers. What are they for??
.

3. Draw . Now, try and change the last two

background
numbers. What are they for??
4. Draw
somethinge.g.
draw a rectangle
 Program Flow of ProcessingLet’s try
setup() and draw()

. To set window size, we use

.
size( width of ,
height of
size(500, 500) .
) the the window
.
window
2. Other setup . To draw background, we use
.

.
background(Amount ,
Amount Amount,
of Red of of Blue
) Green
background(200, 100, .

0) . To draw a rectangle, we use

rect(50, 100, 250,
150) x-
rect(coordinate ,
y-
coordinate width, of height,
)
of top-left
corner
of top-left
corner
rectangl of
e rectangl
e
 Program Flow of ProcessingHow setup()
and draw() work?

. How does the program work?

. Order of execution
size(500, 500) . 1a
1
a
2. Other setup

5
background(200, 100, 0
0) 0
rect(50, 100, 250,
150)

5
0
0
 Program Flow of ProcessingHow setup()
and draw() work?

. How does the program work?

. Order of execution
size(500, 500) . 1a
1
. 2a
a
2. Other setup

background(200, 100,
2
0)
a
rect(50, 100, 250,
150)
 Program Flow of ProcessingHow setup()
and draw() work?

. How does the program work?

. Order of execution
size(500, 500) . 1a
1
. 2a, 2b
a
2. Other setup

background(200, 100, 2
0) a
rect(50, 100, 250,
150) 2
b
 Program Flow of ProcessingHow setup()
and draw() work?

. How does the program work?

. Order of execution
size(500, 500) . 1a
1
. 2a, 2b, 2a
a
2. Other setup

background(200, 100,
2
0)
a
rect(50, 100, 250,
150)
 Program Flow of ProcessingHow setup()
and draw() work?

. How does the program work?

. Order of execution
size(500, 500) . 1a
1
. 2a, 2b, 2a, 2b
a
2. Other setup

background(200, 100, 2
0) a
rect(50, 100, 250,
150) 2
b
 Program Flow of ProcessingHow setup()
and draw() work?

. How does the program work?

. Order of execution
size(500, 500) . 1a
. 2a, 2b, 2a, 2b, …
2. Other setup

background(200, 100,
0)
rect(50, 100, 250,
150)

The computer is running too fast that you can

just see the result after finishing step 2b (the
final rectangle), but not the process of steps
1a and 2a
 Program Flow of ProcessingHow setup()
and draw() work?

. How does the program work?

. Order of execution
size(500, 500) . 1a
1 . 2a, 2b, 2a, 2b, …
a
2. Other setup

background(200, 100,
0) 2 Instructions put inside
a draw() will be repeated
rect(50, 100, 250,
150) 2 AGAIN, AGAIN, and AGAIN,
b …
 Grammar / Syntax of the
Processing language

. mind the spelling

def setup():
size(500, 500)
. Do not spell the keyword
def draw(): wrong
background(200,100,0)
rect(50,100,250,150)
 Grammar / Syntax of the
Processing language

. mind the spelling

def setup():
size(500, 500)
. Do not spell the keyword
def draw(): wrong
background(200,100,0) .

rect(50,100,250,150) . parenthesis ( )
. Put all the information inside
 Grammar / Syntax of the
Processing language

. mind the spelling

def setup():
size(500, 500)
. Do not spell the keyword
def draw(): wrong
background(200,100,0) .

rect(50,100,250,150) . parenthesis ( )
. Put all the information inside
.

. commas ,
. To separate information
 Grammar / Syntax of the
Processing language

. mind the spelling

def setup():
size(500, 500)
. Do not spell the keyword
def draw(): wrong
background(200,100,0) .

rect(50,100,250,150) . parenthesis ( )
. Put all the information inside
.

. commas ,
. To separate information
.

. indentation
. To put instructions in blocks
 Complicat
ed

Need
many
instructio
ns
HOW TO DRAW A ROBOT?
Use image instead of drawing
 4 steps to use an image

0. Save your program

.

. Start a new sketch and

save the file (e.g.
myRobot.pyde)
 4 steps to use an image

1. Prepare an image
. Inside the sketch folder,
create a new folder and
name it as “data”
. Prepare an image and put it
inside the “data” folder
Make sure the “data” folder is at the
same level with the program file
 4 steps to use an image

1. Create a space to store the image

and give it a name (e.g. img) to refer
to the image throughout the program
2.
global
3.
img
4.

5. Load the image by specifying the

filename, pay attention to the file
type
img =
6.
loadImage("robot.png")
7.

8.

9. Display the image, at position (x, y),

with size (width, height)
image(img, 0, 0, 250,
250)
 Let’s try using an image

. Now, try changing the first two

numbers. What would happen?
.

. How about changing the last

two numbers. What would
happen?
.

. Try to display the image at

different positions with
different size
 Class Practice 1

. Add a background image

. Hint: follow the 4 steps
. Which image (background or
robot) should be displayed
first?
Exercise Exercise

1.

1. How can we use the size

(width & height) of the
window to scale the
background image to fit inside
the window???
. Note: do not need to
change the other parts of
the program even if the
window size is changed.
. Hint: find out the answer at
http://py.processing.org/reference
(see
Save width & height)
your program
using filename lecture2

Submit on BU Moodle
 Why don’t we draw
with Paint or
Photoshop? Why we use
Processing?

INTERACTIVE DRAWINGS
Making drawings move
Why the robot is not moving?
. The robot image is displayed at
a fixed position every time
draw() repeats

Repeat
2

Repeat
3
Let’s try making the robot follow
mouse
. This is to display the robot
image at the mouse’s position
.

. mouseX and mouseY are

keywords indicating the
horizontal and vertical
positions of the mouse cursor
.

. Let’s replace the fixed position

with the mouse’s position
How does the robot follow mouse?
. The robot image is displayed at
a the current mouse’s position
every time draw() repeats

Repeat 1
Mouse’s
50 100 position is (50,
100)
How does the robot follow mouse?
. The robot image is displayed at
a the current mouse’s position
every time draw() repeats

Repeat 2
Mouse’s
250 250 position is
(250, 250)
How does the robot follow mouse?
. The robot image is displayed at
a the current mouse’s position
every time draw() repeats

Repeat 3
Mouse’s
450 200 position is
(450, 200)
 Class Exercise 2

. Can you make the robot move only horizontally or

only vertically?
 SummaryHow to communicate with
computer?
. Programming is to write some instructions to tell computers
to do some operations
.

. Different programming languages do different things and

have different grammar
.

. The programming language we use in this course is Python

with Processing
SummaryGetting started with
Processing (2,
1)

.
We use a pair of (x, y) coordinates to (7,
locate a point in Processing 3)
.

.
Program Flow of Processing
.
Starts in setup(), the instructions there is done
for ONE time
.
Then goes to draw(), the instructions there will
REPEAT AGAIN, AGAIN, and AGAIN until the
sketch window is closed
.

.
Grammar of the Processing language
.
Mind the spelling
.
Put all the information inside parenthesis ( )
.
Use commas , to separate information
.
Use indentation to put instructions into blocks
.

.
mouseX and mouseY are keywords
indicating the horizontal and vertical
positions of the mouse cursor
Summary4 steps to use an image

1. Put the image is

inside the “data” 2. Give a name to the space
which stores the image
folder

3. Specify the filename of the

image to load, note the file
type

4. Display the
image
at position (x, y),
with size (width,
height)
 References

. Learning Python visually: Creative Coding with

Processing.py.Tristan Bunn.Published 2021, No Starch
Press.
. Getting Started with Processing.py: Making
Interactive Graphics with Processing’s Python Mode
Casey Reas and Ben Fry.Published 2016, O'Reilly Media.
. Web: http://processing.org/