Tutorial3
Learning Objectives:
- Input: textbox
- Global Variables and Assignment operators
- Math operations
- Exercises
Essential Questions
- How can algebra be applied to coding?
- How can I better organize my computer code?
Try some sample code
Part I - Input: textbox
Up until now all of our code was written to be shown on the screen. It is time for us to get some interaction with the user/player of our program. We can take information from the user by using a textbox. You may have recalled that we are using other programmer's functions to write our code. Those function are located in a file called "p5.min.js". If you look in your "index.html" file you will find a reference for it there. The textbox functions are located in a file called "p5.dom.js" which we must now include if we want to use the code there. See the index.html file below.
<!DOCTYPE html>
<html>
<head>
<script src="p5.min.js"></script>
<script src="p5.dom.js"></script>
<!--optional parts of p5.js, move below each one you want to use below line 8
<script src="p5.sound.js"></script>
-->
<script src="sketch.js"></script>
</head>
<body>
<h1>CPG3C Tutorial 3</h1>
</body>
</html>
A textbox input has a few different pieces. The first part of textbox code is written in function setup and looks like the code below. myname is a variable (more details on variables later) and is assigned the contents of a textbox. A textbox may be positioned by referencing the variable and executing a function position. The two parameters of the position function are an x and y value. These x and y values are a little different as they are referenced from the top left corner of the window and not the canvas.
function setup()
{
//create a drawing service 500px wide, 500px tall
createCanvas(500,300);
myname = createInput();
myname.position(100,70);
}
Resizing your input boxes
function setup()
{
//create a drawing service 500px wide, 500px tall
createCanvas(500,300);
myname = createInput();
myname.position(100,70);
myname.size(100,25); // gives the textbox a size of 100px x 25px
}
Part II - Global Variables and Assignment Operators
Global Variables
In the previous part we mentioned a myname variable. In fact we need some way to indicate that myname is a variable. We will create myname as a global variable which is done at the beginning of the program. See the example below:
// Global Variables
// define myname as a global variable
var myname;
function setup()
{
// assign myname to a textbox
myname = createInput();
// reposition the textbox assigned to myname
myname.position(100,70);
}
function draw()
{
// some code
}
Assignment Operator
Any time you see the equal sign (=), your must read it as "is assigned" so if you read the following line of code from left to right it would read "my name is assigned createInput"
myname = createInput();
The reason we read it as "is assigned" is to avoid the confusion with an equivalent comparison. Furthermore "is assigned" better describes the true functionality of a variable. In the previous lesson we looked at parameter variables taking on values from function draw. We can use the assignment operator to directly modify any existing values of a variable.
It is also good practice to initialize a variable with a value before it is used. We normally perform this step in function setup. Again function setup is the preparation work neccessary to start the program.
After a variable is initialized it may also be re-assigned a different value. A re-assignment is similar to replacing the value inside a variable.
Part III - Math Operations
There are four math operations we can make addition(+), subtraction(-), multiplication(*), division(/). We can perform math operations on any combination of variables or constants.
E.g. 1: x / 7;
E.g. 2: 5 + 9;
E.g. 3: water - potassium + 3;
E.g. 4: m * x + b;
When we perform a math operation it is normal for us to assign (store) the resulting value into a variable.
E.g. 1: y = m * x + b; // store the result of m * x + b
// into the variable y
E.g. 2: sum = 4 / 3; // store the result of 4 / 3 into
//the variable sum
NOTE: we do not assign values into a constant.
The computer will also perform the arithmetic operations with respect to an order of operations and it works as follows. BMDAS - Bracket, Multiplication or Division, Addition or Subtraction. Furthermore the computer will process the information from left to right.
E.g. 9 * 4 / 2 - 1 - 2 - 3 * 2 // result would be 9
E.g. 1 + 1 + 1 * 2 // result would be 4
Part IV - Exercises
Remix your code and name your files as Tutorial3Exercise1, Tutorial3Exercise2 etc.
Exercise 1: Create two textboxes that will take in 2 input values. Label the textboxes, "value 1" and "value 2". Your program will compute the values and show the sum as it's result. Please also provide an appropriate message like "The sum of ? and ? is ?"
| Exercise 1 | 1 mark | 1 mark | 1 mark |
|---|---|---|---|
| Completion Grade | one working textbox | a second working textbox | correct output of sum |
Exercise 2: Create seven textboxes that will take in the grade of seven courses. Label your textboxes, "course 1", "course 2" etc. Your program will compute the average grade of the seven courses (NOT the GPA).
| Exercise 2 | 1 mark | 1 mark | 1 mark |
|---|---|---|---|
| Completion Grade | 7 working textboxes | proper labelling of all textboxes | proper computation and output of the average of grades |
Exercise 3: Create a textbox and take in a HKD value. Label your textbox "HKD". Your job is to convert the HKD value into a corresponding American Dollar value. Search for the conversion rate online.
| Exercise 3 | 1 mark | 1 mark |
|---|---|---|
| Completion Grade | Create of textbox to take in HKD value | Correct output and conversion value into USD |
Exercise 4: Create three textboxes. Label the first box "burger cost", "fries cost", "drink cost". Your program will sum the cost and add a 10% service charge. Report the subtotal (sum of items), 10% service charge amount and the Grand total (sum of service charge and subtotal).
| Exercise 4 | 1 mark | 1 mark | 1 mark |
|---|---|---|---|
| Completion Grade | 3 textboxes created | label for all 3 textboxes | correct sum, service charge and grand total reported. The student must show all 3 |
Additional Coding Requirements
| Ongoing Assessment | Below Standard (1) | Slightly Below Standard (3) | Meets Standard (5) |
|---|---|---|---|
| Proper Use of Functions | Code fails to demonstrate proper use of functions or parameters. | Code demonstrates proper use of function but not the use of parameters. Objects are drawn in a fixed location. | Code demonstrates proper use of functions and parameters such that the object can be easily duplicated. |
| Proper Use of Comments | Comments do not exist | Comments are either too long or vague and does not clearly encapsulate what is happening in the code ahead. | Comments are short concise and describe the code ahead. A comment appears at the beginning of each block of code and in additional places where necessary. |