Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 1 of 19

Basic Computer Programming (Processing)

Contents

1. Basic Concepts (Page 2)

2. Processing (Page 2)

3. Statements and Comments (Page 6)

4. Variables (Page 7)

5. Setup and Draw (Page 8)

6. Data Types (Page 9)

7. Mouse Function (Page 10)

8. Keyboard Function (Page 12)

9. Conditionals (Page 13)

10. Relational Operators (Page 14)

11. Logical Operators (Page 14)

12. Looping (Page 16)

13. Functions (Page 17)

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 2 of 19

Basic Concepts

A computer program is a sequence of instructions, written to perform a specified task.

Programmers are people who write the programs.

Programming language is a computer language used to create programs. Different

programming languages have their own sets of rules called syntax. A program is wrong if

syntax errors are found.

Source code of a program refers to the human-readable text written with a suitable computer

language. Source code is often transformed into lower-level machine code understood by the

computer.

Executable file contains the machine code and it be executed on a suitable platform. Usually,

execute file has an exe file extension.

What is the meaning of open-source? What is the advantage of it?

Processing

Processing is a programming language initially created to teach computer programming

fundamentals. Processing can be found in https://processing.org/. Download and extract it.

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 3 of 19

Open the folder and execute the processing.exe program.

Remarks: Alternatively, you can download the program and the source codes of all examples

in http://www.plk83.edu.hk/cy/processing

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 4 of 19

Activity 1

1. Open Processing.

2. Type the following: ellipse (50, 50, 80, 80);

3. Click the RUN button.

What is the output of the program?

____________________________

4. Save the program. Name it as Activity1. Hence, a new folder is created.

5. Close Processing.

6. Open the Activity1 folder and open the file

Activity1.pde.

7. Click File Export Application.

8. Choose the Windows platform.

9. Open the folder application.windows32 inside the

Activity1 folder and find the file Activity1.exe.

What is the name of source code file? ____________________________

What is the name of the executable file? ____________________________

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 5 of 19

In the above program, ellipse is a function with 4 arguments inside the brackets.

ellipse (a, b, c, d) a: x-coordinate of the ellipse

b: y-coordinate of the ellipse

c: width of the ellipse

d: height of the ellipse

Try to modify the values of the four arguments and observe the output of the program.

Where is the origin of the coordinate system? ____________________________

Activity 2

Study the following functions.

size (w, h) w: width of the display window

h: height of the display window

point (x, y) x: x-coordinate of the point

y: y-coordinate of the

line (x1, y1, x2, y2) x1: x-coordinate of the first point

y1: y-coordinate of the first point

x2: x-coordinate of the second point

y2: y-coordinate of the second point

triangle (x1, y1, x2, y2, x3, y3)

quad (x1, y1, x2, y2, x3, y3, x4, y4)

rect (a, b, c, d) a: x-coordinate of the rectangle

b: y-coordinate of the rectangle

c: width of the rectangle

d: height of the rectangle

Write a program to output the following.

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 6 of 19

Activity 3

Visit https://processing.org/reference/ and learn three more functions: background, stroke and

fill.

Design a colourful logo.

Statements and Comments

Statements are the elements that make up programs. The ";" (semi-colon) symbol is used to

end statements.

Comments are used for making notes to help people better understand programs. A comment

begins with two forward slashes ("//").

Example 1

// The size function is a statement that tells the computer how large to make the window.

size (640, 360);

// The background function is a statement that tells the computer

// which color (or gray value) to make the background of the display window

background (204, 153, 0);

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 7 of 19

Variables

Variables are used for storing values. The values of the variables can be changed in the program.

No space is allowed in the variable name.

Example 2

size (400, 400);

line (30, 40, 30, 340); //First stroke

line (30, 190, 130, 190); // Horizontal stroke

line (130, 40, 130, 340); // Last stroke

The coordinates of the upper L.H.S. corner of the letter H are (30, 40), the width is 100 and

the height is 300.

It is tedious to change the position of the letter H in the program as we have to change many

numbers in the program.

In the following program, two variables are used to represent the coordinates of the upper

L.H.S. corner and it is easier to change the position of the letter H.

Example 3

size (400, 400);

int x = 30; // x-coordinate of the upper L.H.S. corner

int y = 40; // y-coordinate of the upper L.H.S. corner

line (x, y, x, y + 300);

line (x, y + 150, x + 100, y + 150);

line (x + 100, y, x + 100, y + 300);

Activity 4

Add two more variables in the last program such that you can easily control the height and the

width of the letter H.

Try to modify the values of the variables to produce the letter H with different sizes and

positions.

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 8 of 19

Setup and Draw

The code inside setup () runs once when the program is started.

The code inside the draw () function runs continuously from top to bottom until the program

is stopped.

Example4

int x = 0; // Initial x-coordinate

int y = 0; // Initial y-coordinate

void setup () {

size (400, 300);

background (0, 255, 0); // Green colour background

frameRate (10); // 10 frames per second

}

void draw () {

x = x + 1; // Increase the value of x-coordinate

y = y + 1; // Increase the value of y-coordinate

point (x, y); // Draw a point

}

Activity 5

Design a program to show a point initially at the center of the window. The point become a

circle and the size is increasing.

(Hint: The center of the window is (width / 2, height / 2).)

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 9 of 19

Data Types

Different data types can be used to store different kinds of data.

Data Type Description Example

int Integer. int a = 4;

float A number with decimal place. float b = 5.2;

boolean A Boolean variable has only two

possible values: true or false.

boolean pass = true;

char A single character.

A pair of single quotes is used to

specify the value of the variable.

Example 5

size (200, 100);

char letter = 'A';

String words = "Hello Friends!";

background(0); // Set background to black

textSize (14);

text (letter, 20, 30);

text (words, 20, 70);

String A sequence of characters. S

must be capitalized.

A pair of double quotes is used to

specify the value of the variable.

Activity 6

Complete the followings.

Variable Data Type

1. Age ____________________

2. Name ____________________

3. Sex ____________________

4. Class ____________________

5. Average_mark ____________________

6. Married ____________________

Computer Literacy Basic Computer Programming (Processing)

__________________________________________________________________________________________

Page 10 of 19

Mouse Functions

The coordinates of the previous mouse pointer are stored in the variables pmouseX and

pmouseY.

The coordinates of the current mo