Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
Hexadecimal colour chart
http://www.december.com/html/spec/colorhslhex10.html
Useful for selecting a suitable colour for a background, font etc.
Each colour “chip” shows the hex digits (in 3 red, green, blue pairs)
e.g. colour #CCEEFF
CC = red level
EE = green level
FF = blue level
This week, we will learn 4 different ways to set the colour of an object.
// Set the color using the name of a color in a string.
penColor("cyan");
// Set the color using the hex value of a color in a string.
penColor("#7fff00");
// Set the color using the rgb value of a color in a string.
penColor("rgb(127, 255, 0)");
// Set the color using a rgba value of a color in a string.
// The last value is the amount of transparency, a percentage between 0.0 and 1.0 (known as alpha)
penColor("rgba(127, 255, 0, 0.5)");
First, we need to sign in to code.org using the email address and password that
you should have registered.
https://studio.code.org/users/sign_inWe are using the “Turtle graphics”
concept, which is a key element of the
AppLab development platform.
The phone “canvas” uses a coordinate
system measured in pixels.
The top left corner has coordinates
x:0, y:0.
The bottom right corner has coordinates
x:319, y:449
i.e. the canvas is 320 pixels wide and 450
pixels high.
Although we will continue coding in blocks, you can switch to the underlying
Javascript code by clicking on “Show Text” at the right of the workspace.
Example. This is the code for exercise 10/3:
for (var i = 0; i < 72; i++) {
drawSquare(100);
turnRight(5);
}
// Draw a Square of the given size
function drawSquare(size){
moveForward(size);
turnRight(90);
moveForward(size);
turnRight(90);
moveForward(size);
turnRight(90);
moveForward(size);
turnRight(90);
}
Key concepts for this week:
Parameters used in commands, e.g. moveForward(100);
Positioning the turtle at a specific location on screen, e.g. moveTo(210,195);
Pen commands: dots, arcs, penUp, penDown.
Creating functions, including variable parameters, e.g. size.
Multiple Parameters.
Looping (“for loop”).
Note” Example answers for the exercises shown here are included in the
separate answers.txt file.
Creating functions:
https://studio.code.org/s/csp3/stage/5/puzzle/4
Drawing with dots:
https://studio.code.org/s/csp3/stage/7/puzzle/5
Stage 7, puzzle 10: The Full Turtle API
https://studio.code.org/s/csp3/stage/7/puzzle/10
These are all of the
commands available to do
drawing operations
using the turtle graphics
element of the AppLab
platform.
Stage 8, puzzle 6
Creating Functions with Parameters
https://studio.code.org/s/csp3/stage/8/puzzle/6
Stage 8, puzzle 7
Adding Parameters to Functions (add parameter to change size of starfish)
https://studio.code.org/s/csp3/stage/8/puzzle/7
Stage 8, puzzle 8
Adding Parameters to Functions (control size of seagrass)
https://studio.code.org/s/csp3/stage/8/puzzle/8
Stage 8, puzzle 9
Adding Parameters to Functions (control size of fish)
https://studio.code.org/s/csp3/stage/8/puzzle/9
Stage 8, puzzle 10
Multiple Parameters (draw fish with colour passed as parameter)
https://studio.code.org/s/csp3/stage/8/puzzle/10
Stage 9, puzzle 3
Practice with Loops
https://studio.code.org/s/csp3/stage/9/puzzle/3
Sharing an app.
The turtle graphics exercises are part of AppLab, and can be shared by
with others by clicking on the Share button.
All of these apps are actually created as web pages, but you don’t need
to worry about the underlying HTML code.
Next steps
Once you are comfortable with the drawing exercises we will move on to the
full AppLab development platform.
https://code.org/educate/applab