Instructions

Welcome to Khan Academy + CoderDojo!

Get set up! Go to the Khan Academy website: https://www.khanacademy.org/cs Click on new program (If you have an account, log in. If not, no worries.)

Drawing – 30 min

Instruction: • Watch mentor demo the drawing commands • Play with lines and shapes: o Play with size and positioning – drag it! o Code:  Draw a bezier curve  ellipse(x, y, width, height) Draw an ellipse  line(x1, y1, x2, y2) Draw a line  point(x, y) Draw a point  rect(x, y, width, height) Draw a rectangle  triangle(x1, y1, x2, y2, x3, y3) Draw a triangle • Play with Fill / Stroke • Note: capitalization matters! Semicolons too! • Code o fill(red, green, blue) Set the fill color for shapes o noFill() Turn off fill for shapes. o noStroke() Turn off outlines for shapes o stroke(red, green, blue) Set the outline color for shapes o strokeWeight(size) • Set a background color o background(red, green, blue) Set the background color o color(red, green, blue) Store all three color components in one variable • Play with overlapping of code to make some shape come in front of others.

Make This! Challenge – 15 min:

• Challenge 1: o Click here: o http://www.khanacademy.org/cs/drawing-demo-challenge-1-prompt/1541038466 o Make it into the picture we have: o Should look like this by the end o http://www.khanacademy.org/cs/drawing-demo-challenge-1-solution/1541146483 o Save it as demo solution 1 when you are done. Or copy the code into Notepad if you are not logged in. • Challenge 2: o Make any character with shapes – Face, Eyes, Mouth. o Requirements – use three different shapes, use three different colors. o Color background • Examples: o http://www.khanacademy.org/cs/winston/823977317 o http://www.khanacademy.org/cs/paul-frank-monkey/1000178956 o http://www.khanacademy.org/cs/silly-pinguin/1156504170 o Hint: Use the documentation for help: o http://www.khanacademy.org/cs/docs

Introduction to Variables – 20 Minutes

• Names a Variable: var name = number o Change the size of eyes. o Change size of body o Change position • http://www.khanacademy.org/cs/section-2-variables/1541110625

• Challenge:

o Make the entire character move. o Need to tie all X positions to one variable and all Y positions to one variable. o http://www.khanacademy.org/cs/section-3-animation-one-direction/1540944644 • Introduce random variable • Challenge: o Randomize everything! • Other resources: • Practice using variables o http://sandcastle.khanacademy.org/media/castles/jeresig:cs-exercises/exercises/cs_variables_1.html • Example: http://www.khanacademy.org/cs/winston-coderdojo-part-21/1355580688

Break! – 10 min

Animation Step 1 – 25 Minutes

• Frame Rate – how fast the computer presses restart: frameRate(10); • Draw loop o var draw = function() { o http://www.khanacademy.org/cs/section-3-animation/1541400394 • Play with putting different variables into the draw loop. • Play with frameRate

• Challenge:

o Make character move in one direction o Instead of random number, we want a direction. Which number should we change to make guy go to the left? o http://www.khanacademy.org/cs/section-3-animation-challenge/1541200948

Animation Step 2 – 25 Minutes

• Draw a wall somewhere. • Make character move toward wall. • If Statements o Character change directions when hit wall. o https://www.khanacademy.org/cs/section-4-if-statement/1541323643 • Key press o Winston change direction if you press a key.  keyIsPressed && keyCode === RIGHT o http://www.khanacademy.org/cs/pong-level-2/1376893644

Challenges:

o Character stands still. Only move if you press a key. o Character move up and down as well as left and right. o Draw a floor and make character bounce left and right.