CODING FOR BEGINNERS - U3A Brisbane...Although we will continue coding in blocks, you can switch to...

CODING FOR BEGINNERSGREG TAYLOR AND DESLYN TAYLOR

Week 5

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

http://www.december.com/html/spec/colorhslhex10.html

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.

https://studio.code.org/users/sign_in

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.

https://studio.code.org/s/csp3/stage/7/puzzle/3


Creating functions:


Drawing with dots:




Stage 7, puzzle 10: The Full Turtle API


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



Stage 8, puzzle 7

Adding Parameters to Functions (add parameter to change size of starfish)



Stage 8, puzzle 8

Adding Parameters to Functions (control size of seagrass)



Stage 8, puzzle 9

Adding Parameters to Functions (control size of fish)



Stage 8, puzzle 10

Multiple Parameters (draw fish with colour passed as parameter)



Stage 9, puzzle 3

Practice with Loops



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

https://code.org/educate/applab

CODING FOR BEGINNERS - U3A Brisbane...Although we will continue coding in blocks, you can switch to...

Documents

Transcript of CODING FOR BEGINNERS - U3A Brisbane...Although we will continue coding in blocks, you can switch to...