SKE Computer Science Course 2013

SKE Computer Science Course 2013

Worksheet 1. Intro to HTML-Canvas JavaScript Syntax

[CBPrice. 15-06-13]

Color Coding for this Worksheet
Information
Instructed Learning
Inquiry based Learning
Challenges
Homework

Purpose

(a) To learn some basic syntax of JavaScript using HTML-Canvas to create some interesting art-works.
(b) To obtain resources to support your learning.
(c) To learn how to annotate your code by adding comments at suitable places.

Resources

Download and unzip the folder “Session1” from the website to a location of your choice. I suggest you use a memory stick, since any data you place on the computer (C-drive, Desktop, MyDocuments etc.) will be wiped when you log off.

Activities

1 / Drawing a Rectangle on the Canvas.
(a) Open up the file Canvas01.html in Chrome. You should see a white canvas with a note underneath telling you that this canvas is displaying the results of the JavaScript file “JScript01.js”. Resize the browser window so it occupies half of your screen and move it to the right.
(b) Now open up the JavaScript file JScript01.js using NotePad++ and rescale it so that it occupies the left half of your screen.
(c) Look for the line “// Add your code here”. Underneath this type in the following JS code to draw a rectangle:
gc.rect(100,100,50,50);
gc.fill();
Save your JS file (File > Save) and refresh your browser window. A black square should appear at a certain position with a certain size.
(d) Change the first number 100 in the code to 200. Save, and refresh your browser window.
What happens? What does this number mean?
(e) Temporarily remove the second line of your code by adding a couple of forward slashes like this
//gc.fill();
Save and refresh. The square has gone. Why? Well the first line of code has defined the square but has not painted (filled) it in. That’s the job of the second line of code. Remove the forward slashes and get your black square back.
2 / Drawing a Rectangle on the Canvas (ctd).
(a) Now experiment changing the second number in the rect list. What changes does this have?
(b) Repeat for the third and fourth numbers in this list.
(c) Write down in Simple English what these numbers do.
3 / Adding Color to the Rectangle
(a) Let’s see how to change the color of the rectangle. Add the following line of code just before the fill line:
gc.fillStyle = "yellow";
and the square should go yellow.
(b) Guess some other values for the color and try them out. Remember to enclose the name of the color in speech marks.
(c) You may wish to Google the various HTML color names and try these out.
4 / Drawing more than one Rectangle.
Let’s find out how to draw several rectangles on the canvas. Your code from the previous activity may look like this
gc.rect(200,100,50,50);
gc.fillStyle = "yellow";
gc.fill();
(a) Copy these three lines of code and paste them underneath. Now change the x and y positions of your second square. Save and refresh. You should get two red squares. Good.
(b) Now try to change the color of the second square to red. You will end up with two red squares?
Why? Well, when we draw more than one shape we need to re-initialise the graphics machine. We can do this using the line of code gc.beginPath();Let’s see how.
(c) Add this line to your code where you start to draw both shapes. For example, code for your first shape should look like this
gc.beginPath();
gc.rect(200,100,50,50);
gc.fillStyle = "yellow";
gc.fill();
Now you should get a yellow square and also a red square.
(d) Now add comments into your code where you feel appropriate, to remind you what is happening. Start each line of comment with //
5. / Creative Challenge. Produce an Interesting Composition of Four Squares.
Please collaborate on this challenge. The challenge is simple, to write code to create an artwork comprising four squares. You know how to specify the location, size and color of these squares. Your task is to decide how to arrange these four squares on the canvas. Will you choose a symmetrical arrangement or haphazard? Will your squares overlap or not? Which colors work best together? That’s for you to investigate.
In your Journal, you should record the results of your investigations, some indication of how you collaborated and also a reflection on your final canvas.
6. / Introduction to Variables.
Open up the file Canvas02.html in Chrome. You should see a white canvas with a note underneath telling you that this canvas is displaying the results of the JavaScript file “JScript02.js”. Resize the browser window so it occupies half of your screen and move it to the right. Now open up the JavaScript file JScript02.js using NotePad++ and rescale it so that it occupies the left half of your screen.
Look at the code which draws the rectangle. Previously it looked like this
gc.rect(200,100,50,50);
where all the parameters were given actual numbers. In this code template we have replaced the two numbers 50 with “variables” (width and height), numbers we can set in our code. The above line is changed to look like this,
gc.rect(200,100,width,height);
(a) Read the code, and find out where the variables “width” and “height” have been declared and where they have been assigned values
(b) Read the code so you feel confident in understanding what each and every line does. Please collaborate here!
(c) Now change the values assigned to the variables and see what happens.
7. / More Variables
Now let’s create two extra variables which will be used to locate the rectangle on the canvas.
(a) Choose names for your variables which make sense so that when you read your code again in a year’s time you will remember what it does. I will use xPos and yPos. You choose something else.
(b) Declare your variables. Where? Good practice is “up top” near other declarations.
(c) Assign your variables to some useful values. Save and refresh. Change the values of your variables and check that the variables are working OK.
(d) Again, add comments to your code.
8. / Loops
Here we are going to revisit the question of drawing four squares, but now we are going to use the “for loop” construct. Here’s what it looks like, this loop will loop for 5 times, when “count” has the values 0,1,2,3,4.
for(var count = 0; count<5; count++) {
// Your code here
}
Note the curly brackets and the comment line. You must replace this line, and add other lines within the curly brackets. For example, if you wish to draw 4 squares next to each other you will need to increase the xPos of each square. Here’s how you could do it
xPos = 70*count;
(a) Open up the file Canvas03.html in Chrome. You should see a white canvas with a note underneath telling you that this canvas is displaying the results of the JavaScript file “JScript03.js”. Resize the browser window so it occupies half of your screen and move it to the right. Now open up the JavaScript file JScript03.js using NotePad++ and rescale it so that it occupies the left half of your screen.
(b) Read the code until you understand what each line does.
(c) Now let’s draw four squares in a line. Comment out the lines that draw the square, then add code for the for loop as shown above.
(d) Now add the line of code to change xPos as shown above, and add the lines of code which draw the squares inside the loop.
Save your code!
9. / Investigating loops
Use the results of the previous example to do the following
(a) Draw a vertical line of squares
(b) Draw a horizontal line of squares where the size increases a little.
10. / The “if-statement”
This programming construct enables us to change the value of a variable when some condition is met. For example, continuing on from activity 8, let’s handle the following problem:
“IF the square count is less than 3 then color the square red ELSE color it green”
The syntax for this is as follows
if(count < 3) {
gc.fillStyle = "red";
} else {
gc.fillStyle = "green";
}
Make sure you understand how this construct agrees with the simple English description presented in italics above.
(a) So, open up your answer to activity 8 and decide where to add the above code.
(b) Save your solution and now change your code to solve this problem
“IF the square count is less than 3 then the square should have height 50 ELSE the square should have height 100”
(c) Save your solution and now change your code to solve this problem
“Draw 7 squares of equal size, the first two are yellow, the remainder are green”
(d) Finally attack this problem
“Draw 7 squares of equal size, the first two are yellow, the next two are yellow and the remainder are red”
(e) Add comments to your code and Save all your work.
11. / Writing a Challenge for your fellow students
Here you are asked to write a short challenge for your peers. This challenge should make use of
- variables
- a for-loop which changes a shape variable (size, location, color, or a mix of these)
- drawing an interesting pattern of shapes
To do this you should
(a) Think of an interesting challenge
(b) Solve the challenge for yourself
(c) Write out a challenge task guiding your student to solve the challenge
(d) Work with your peer to check and debug their solution to the challenge
12. / Writing a more challenging Challenge
As above, but now you need also to include an if-statement
13. / Drawing Lines
The syntax for drawing lines is straightforward. First you must move your drawing brush to the start of the line, and then you need to specify the end of the line. This is accomplished by the following functions
gc.moveTo(xStart,yEnd);
gc.lineTo(xEnd,yEnd);
where the meaning of the parameters xStart, yStart and xEnd, yEnd should be clear. After this you need to actually draw the line using this function call
gc.stroke();
but before you do anything, you need to set up the width and the color of your brush like this
gc.lineWidth = 10;
gc.strokeStyle = "red";
and finally you must start your block of code with the initialisation
gc.beginPath();
(a) Assemble the above code snippets to draw a horizontal line. You may like to open up a fresh Canvas01 and JScript01 template. Remember to declare and assign values to any variables you need (there are 4).
(b) Now add to your code to draw both a horizontal and a vertical line.
14. / Drawing Circles
The approach here is similar to drawing lines, but the moveTo and lineTo functions are replaced with a single function call
gc.arc(xPos,yPos,radius,startAngle,endAngle);
The parameters here are self-explanatory with the exception of the last two. To draw a circle we put a 0 for the startAngle and 2.0*Math.PI for the endAngle. Your tutor will explain the math!
(a) Modify your line drawing code to draw one circle.
(b) Try using the gc.fill() function call to fill in the circle. You should use a different color for the circle line and the fill so you can see the difference.
(c) Produce a line of circles (without explicitly drawing each circle)
15. / Write some challenges for your peers
Following the guidance in activity 11 set a challenge involving the following elements
- the canvas should contain at least some lines and circles
- the code must involve both at least one for-loop and one if-statement.
HW / You should work on your portfolio and be expected to show it to your tutor during the next session.