Basic Computer Programming (Processing) Computer Programming... · Computer Literacy Basic Computer

download Basic Computer Programming (Processing) Computer Programming... · Computer Literacy Basic Computer

of 19

  • date post

    21-Aug-2018
  • Category

    Documents

  • view

    243
  • download

    9

Embed Size (px)

Transcript of Basic Computer Programming (Processing) Computer Programming... · Computer Literacy Basic Computer

  • 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