Street Artist Teacher support materials Hour of Code 2017

Transcription

1 Street Artist Street Artist Teacher support materials Hour of Code 07 Kano Hour of Code

2 Street Artist Kano Hour of Code Challenge : Warmup What the ll make A random circle drawer that fills the screen with color. The first Street Artist challenge is a speed run through some of the core concepts students will be exploring in this Hour of Code. Use an animation loop to draw circles ever frame, then add random numbers to bring it to life. Ke concepts introduced Simple code drawing The animation loop Random numbers GO TO CHALLENGE FINISHED FILE

3 When app starts Draw: background color Ever frames do Draw: fill color new color with RGB % red % green % blue 0 to 00 0 to 00 Challenge : Warmup Street Artist Kano Hour of Code An event is fired when the app starts, which triggers the code in this block to run. Sets the background color of the canvas. Clicking the color square opens up the color picker, although other blocks from the color categor can also be attached. Draw: move to random point 6 Draw: circle radius 0 to 0 7 This block loops the code inside it. It can be set to run code ever second, millisecond, or frame. The app calls 60 frames per second, making it perfect for animation. Like most computer graphics, drawing in Kano Code is a three step process. You set the fill color and line stle, then move the pen to the right place, then draw a shape or a line. The pen position and color can be set in an order, but must be set before the shape is drawn. global.when( start, function() { devices.get( normal ).setbackgroundcolor( #77F time.ever(, frames, function() { devices.get( normal ).modules.setters.color( colour.create( rgb, 0, math.random(0, 00), math.random(0, 00) ) 6 devices.get( normal ).modules.space.movetorandom( devices.get( normal ).modules.shapes.circle( math.random(0, 0) 7 } } 6 7 Here the fill color is set b adding a block with mixes RGB (red, green, blue) color with % red, % green, and % blue. The RGB color space directl relates to how pixels function b setting the brightness of individual red, green and blue components. These two lines generate a random number for the green and blue values. Ever time this loop runs, a different number between and 00 will be generated, creating random colors mixing green and blue. This moves the pen to a random point on the canvas (where the app drawing is output) Finall in the loop, this line of code draws a circle, and sets the radius to a random number between 0 and 0.

4 Street Artist Kano Hour of Code Challenge : Simple paint What the ll make A simple paint effect controlled b the mouse. The simple paint challenge introduces the mouse part, and uses coordinates to draw circles under the mouse cursor. Ke concepts introduced The mouse part X and Y coordinates on the canvas Drawing using the mouse GO TO CHALLENGE FINISHED FILE

5 Street Artist Kano Hour of Code When app starts Draw: set transparenc to 70 Challenge : Simple paint Draw: fill color Ever frames do Draw: move to x Draw: circle radius Mouse: X position Mouse: Y position 0 6 Parts in Kano Code Parts are an eas wa to add functionalit to a creation. Adding a part unlocks code blocks that can be used in a creation. This challenge uses the mouse part, which unlocks blocks to use mouse events (like clicking), or the mouse position. global.when( start, function() { devices.get( normal ).settransparenc(70 devices.get( normal ).modules.setters.color( #7BFA time.ever(, frames, function() { devices.get( normal ).modules.space.moveto( devices.get( mouse ).getx() devices.get( mouse ).gety() devices.get( normal ).modules.shapes.circle(0 6 } } 6 An event is fired when the app starts, which triggers the code in this block to run. Like fill color or stroke stle, setting the transparenc will affect the opacit of all shapes or lines that are drawn in subsequent lines of code. Sets the fill color with a simple color picker. Note that the transparenc and fill color are set outside the code loop. This means the re onl set once when the app starts, and not updated ever loop. This makes the code more efficient. This block loops the code inside it. It can be set to run code ever second, millisecond, or frame. The app calls 60 frames per second, making it perfect for animation. Before drawing anthing, remember to move the pen to the right place! Here, the pen position is being set to the mouse coordinates. Matching the pen x and positions to the mouse x and positions ever frame (60 times a second) will make sure that ou alwas draw under the mouse cursor. This line draws a circle with a radius of 0. In this example, it will be purple and have a transparenc of 70%.

6 Street Artist Kano Hour of Code 6 Challenge : Color rainbow What the ll make A paintbrush that ccles through colors, and changes shape as it paints. This challenge builds the previous exercises and adds a variable. Students declare the variable, increment its value in a loop, and use the value to set the painting color. Ke concepts introduced Setting and getting variables Incrementing a variable in a loop Using a variable to create a color GO TO CHALLENGE FINISHED FILE

7 When app starts Street Artist Kano Hour of Code 7 Draw: background color set colorcount to 0 Challenge : Color rainbow Ever frames do colorcount += Draw: fill color new color with HSV hue saturation colorcount Variables This challenge declares (or sets ) a variable, then increases its value b ever frame. It then uses the value stored in the variable to change the fill color of the pen. This structure of declaring a variable outside a loop, then changing it and using it inside a loop is ver common in most programming languages! Look for the blocks which set and get variables. Draw: move to x Draw: ellipse width value Mouse: X position Mouse: Y position to 0 6 When the app starts, this line of code runs. It creates a new variable and sets its value to 0. Inside the ever frame loop (which runs 60 times a second), the value of the variable is increased b. height to 0 colorcount += ; This line of code adds to the value stored in the variable. It s the same as writing: mvariable = mvariable + ; var colorcount; Except it s shorter. global.when( start, function() { devices.get( normal ).setbackgroundcolor( #68 colorcount = 0; time.ever(, frames, function() { colorcount += ; devices.get( normal ).modules.setters.color( colour.create( hsv, colorcount, 00, 00) devices.get( normal ).modules.space.moveto( devices.get( mouse ).getx(), devices.get( mouse ).gety() devices.get( normal ).modules.shapes.ellipse( } } math.random(, 0), math.random(, 0) 6 6 This time the color is mixed using HSV, which stands for hue, saturation, value. It s a ver useful wa of changing colors, especiall when ou want to ccle through a set of bright, full saturated colors. This block returns the value currentl stored in the variable. Each frame, this number will go up b one, creating a constantl changing paint color, creating a rainbow brush effect. Just like in the last challenge, this block matches the pen position to the mouse cursor position. Finall, we draw an ellipse with random widths and heights to make the paintbrush more fun!

8 Street Artist Kano Hour of Code 8 Challenge : Ultimate spra paint What the ll make A glittering rainbow spra paint effect! Building on the code from challenge, students add a moveb command to randomise the pen position around the mouse; and use transparenc and repetition to complete the spra paint effect. Ke concepts introduced Using moveb vs moveto so set the pen position Using transparenc with code drawing Drawing multiple shapes in sequence GO TO CHALLENGE FINISHED FILE

9 Street Artist Kano Hour of Code 9 Challenge : Ultimate spra paint When app starts Draw: background color set colorcount to Ever frames do colorcount += Draw: fill color 0 0. new color with HSV hue colorcount This challenge builds on challenge. See the challenge sheet for info on these blocks. This blocks sets the stroke stle (color and thickness). The stroke stle is used when drawing lines, or as a border on an shapes that are drawn. If ou want to remove the stroke, set the thickness to 0. This is a move b block. Unlike the move to block, it moves the drawing pen from it s current position b a set number of pixels up and down. It move between -0 and 0 pixels on each axis: saturation value -0 Draw: move to x Draw: stroke color thickness Mouse: X position Mouse: Y position -0 0 x 0 pen starting position possible pen end positions Draw: move b x Draw: set transparenc to 0-0 to 0-0 to 0 These blocks change the drawing transparenc and draw a circle three times, without moving the pen between them: It draws a circle with a radius of between 0 and 60 pixels Next, it draws another circle with a radius of between 0 and 0 pixels Finall, it draws a px circle in the middle. Draw: circle radius 0 to 60 Draw: set transparenc to 0 Draw: circle radius 0 to 0 Draw: set transparenc to 00 Draw: circle radius Repeating this kind of randomisation creates some great patterns!

10 Street Artist Kano Hour of Code 0 Challenge : Brush strokes What the ll make A ribbon effect based on the mouse speed and direction. Using the draw line, the mouse speed, and some simple math blocks, students can create a brush stroke effect which paints short or long strokes based on the speed of the mouse. In this creation, the colors change based on the mouse X coordinate. Ke concepts introduced Using mouse speed and position together The line to command in a drawing loop Mouse position used to set a color GO TO CHALLENGE FINISHED FILE

11 Street Artist Kano Hour of Code When app starts Mouse: set cursor other Draw: background color Ever frames Paintbrush Challenge : Brush strokes do Draw: move to x Mouse: X position Mouse: Y position Draw: stroke color new color with HSV hue saturation value Mouse: X position thickness 0 Draw: line to x Mouse: X speed + Mouse: X position Mouse: Y speed + Mouse: Y position This block can be a lot of fun. It sets the mouse cursor while it s over the canvas. There are lots of options to pick from, but here we re using a paintbrush. The stroke stle block was used in challenge to create thin white outlines. In this creation, we re going to draw lots of lines, so the stroke thickness is set to 0. The color of the stroke is set with a HSV (Hue, Saturation, Value) block. The saturation and value inputs are left empt, creating bright, full saturated colors. The hue is set based on the mouse X position, creating an interesting rainbow effect once the mouse has been drawing for a while (see image on previous page). The line to block draws a line from the current drawing pen position to the x and coordinate inputs. global.when( start, function() { devices.get( mouse ).setcursor( assets.getsticker( other, other-paintbrush ) devices.get( normal ).setbackgroundcolor( #68 time.ever(, frames, function() { devices.get( normal ).modules.space.moveto( devices.get( mouse ).getx(), devices.get( mouse ).gety() } } devices.get( normal ).modules.setters.stroke( colour.create( hsv, devices.get( mouse ).getx() /, 00, 00), 0 devices.get( normal ).modules.paths.lineto( devices.get( mouse ).getxspeed() + devices.get( mouse ).getx(), devices.get( mouse ).getyspeed() + devices.get( mouse ).gety() The X and Y to coordinates are the mouse current position + the distance it travelled in the last frame. This means if the mouse travels in a straight line at a consistent speed the strokes will line up perfectl. As the speed and angle changes, the brush strokes become more erratic. Mouse moving in a curve Mouse moving in a straight line

12 Street Artist Kano Hour of Code Challenge 6: The stickering game What the ll make A probabilit game using street art stickers. Plaers mouse the mouse to click on the sticker as fast as possible. Each time the click there s a in 0 chance the win. Ke concepts introduced Using stickers: click events, moving the sticker, setting the sticker image. Using if logic with random numbers to decide when the game is over. GO TO CHALLENGE FINISHED FILE

13 Street Artist Kano Hour of Code When Sticker is clicked Sticker: move to x 0 to 0, 0 to Challenge 6: The stickering game Draw: fill color new color with HSV hue saturation 0 to There are two blocks of code in this game. The block inside when app starts is a recap of the content from challenges and. The game component is coded inside the when sticker is clicked event, shown here. Sticker: set to music Trumpet value set item to 0 to 0 do if Sticker: set to item > 9 music Sax The code inside this event runs when the sticker is clicked. This simple interaction is the core of this game. Remember that to see changes ou make in this event block, ou ll need to click the sticker to run the code! Ever time the sticker is clicked, it gets moved to a random position on the canvas. This block sets the sticker image. The first drop down selects a categor, the second picks the image from that categor. In this challenge, its set to the same image each time the plaer clicks on the sticker. This ensures that the game resets after a win event. These lines of code generate a random number between and 0, then check to see if it s greater than 9. This kind of logic is used in all dice games! var item; devices.get( sticker ).when( clicked, function() { devices.get( sticker ).setxy( math.random(0, 0) -, math.random(0, ) - devices.get( normal ).modules.setters.color( colour.create( hsv, math.random(0, ), 00, 00) devices.get( sticker ).setsticker(assets.getsticker( music, musictrumpet ) item = math.random(0, 0 if (item > 9) { devices.get( sticker ).setsticker(assets.getsticker( music, musicsax ) } } Finall, if the random number is greater than 9, the sticker is changed to show that the plaer has won! How to pla the game You ll need a stopwatch to pla. Start the watch and click on the sticker. How quickl can ou get the sticker to change? Extension activities Code a stopwatch into the game. Code a score counter to count how man times the sticker is clicked. Create a count down timer. How man times can ou click the sticker in 0 seconds?

14 Street Artist Kano Hour of Code Challenge 7: Paint splatter What the ll make A Jackson Pollock paint splatter effect based on the mouse speed. This challenge uses some trigonometr to calculate the mouse distance, saves the result into a variable, and uses that number to draw lots of little paint circles. Ke concepts introduced Building up complex algorithms from simple math blocks Using logic gates to onl draw when the mouse is moving Using the repeat block to draw lots of circles GO TO CHALLENGE FINISHED FILE

15 Street Artist Kano Hour of Code When app starts Draw: background color Mouse: set cursor other Paintbrush Challenge 7: Paint splatter Ever do frames Draw: fill color set distance to square root do if Repeat > distance times + Mouse: X speed Mouse: Y speed Mouse: X speed Mouse: Y speed There are two blocks of code in this game. The block inside when app starts is a recap of the content from challenges and. The game component is coded inside the when sticker is clicked event, shown here. OK. We know. This line is prett advanced! This little piece of trigonometr is working out how far the mouse has moved in the last frame. distance travelled dx² + d² distance (d) Draw: move to x Mouse: X position Mouse: Y position set randomness to 0 to Draw: move b x Mouse: X speed Mouse: Y speed randomness randomness 7 7 distance x (dx) Now that we know how far the mouse has moved, we can decide whether we want to draw or not. This logic statement checks to see if the mouse has travelled more than px. If it has, its code runs. This block repeats its code times. Because it s nested inside the ever frame block, this means we draw circles 60 times a second. 900 little circles per second should create a nice paint effect! Draw: move b x - to - to Draw: circle radius randomness 7 6 We save a random number into a variable called randomness. It gets used a few times on the next couple of lines. The drawing pen is at the mouse cursor, but to create a paint throwing effect, we want to place it further awa from the mouse, in a straight line with where the mouse is currentl moving. 6 Now the pen is the right distance from the mouse, we move it b a random amount in an direction to make it more organic and paint like. 7 Finall, we draw a circle. Using the randomness value means the circles will be smaller the further the are from the mouse cursor.

16 Street Artist Kano Hour of Code 6 Street Artist block glossar These are the blocks used in the Street Artist challenge set. More detail about each is available on the following pages. Draw blocks Mouse blocks Draw: move to random point Draw: background color Draw: circle radius new color with RGB Mouse: set cursor other Paintbrush % red Draw: move to x Draw: move b x Draw: fill color Draw: stroke color thickness Draw: set transparenc to 70 Draw: ellipse width height Draw: line to x % green % blue new color with HSV hue saturation Mouse: X position Mouse: Y position value Event Blocks Loop blocks Variable blocks Logic blocks Math blocks When app starts Ever frames set colorcount to 0 if item > 9 do colorcount do When Sticker is clicked Repeat times colorcount += 0 to 00 square root

17 Street Artist Kano Hour of Code 7 Loop Blocks Event Blocks Ever frames do Repeat times Both of these blocks loop code, but the have ver different effects. The ever frames block repeats the code inside it 60 times a second. Running code over and over again is ver useful for things like animations and games. If ou re creating a countdown timer, ou might want to run our code ever second. If ou re making an animation, tr making it run ever frame. Code in the repeat block runs a set number of times. Using the repeat 0 times block has the same effect as writing out our code 0 times, but it s much quicker to do, and it takes up less space! Code runs ver fast, so if ou draw a circle 0 times, ou ll see all 0 circles appear at once. When app starts When Sticker is clicked An event is triggered when something happens in our app. Mabe a button is clicked, or some data updates, or mabe it s just the app starting. Place our code inside the event block to run it when that event happens. Most of the time, ou ll be coding inside the When app starts event. The app is automaticall restarted whenever the code changes. You can manuall restart it with the restart button under the canvas.

18 Variable blocks Street Artist Kano Hour of Code 8 Variable Blocks You can think of variables as tin buckets for storing one piece of data while the app is running. You can call variables anthing ou like. set item to 0 if colorcount You set (or declare ) a variable using this block. set colorcount to 0 And get back (or return ) the value of the variable using this block. colorcount You can also use this math block to add or subtract from the value of a variable. do > Logic Blocks Use logic blocks in our code to make decisions about which code to run. When ou use an if block, ou combine it with another statement which will evaluate to true or false. The code in the If block is onl run when the statement is true. Like this: do if item > 9 (If the value of the variable item is greater than 9, then run the code. Otherwise, skip over the block.) colorcount +=

19 Street Artist Kano Hour of Code 9 Math Blocks square root 0 to 00 The math blocks do all the things ou d expect them to (like add, subtract, divide and multipl). Just plug two numbers or variables into the gaps, and set the smbol (or operator) in the drop down. The random number block returns a number between two values. Lots of the Street Artist challenges use these to add some randomness when repeating simple drawing operations. The math tr also includes blocks for more advanced operations. Challenge seven uses the square root block for some trigonometr. Mouse: set cursor other Paintbrush Parts & their blocks Mouse: X position Mouse: Y position Mouse: X speed Mouse: Y speed Each time a part is added to a Kano Code creation, a new block tra is added too. Challenges 7 use the mouse part. The mouse X and Y position blocks retun the mouse co-ordinates when the code is run. These are most commonl used in a Ever frame loop to create interactive creations. Sticker: set to Sticker: set size to % 0 Sticker: move to x music Trumpet 0, 0 The mouse X and Y speed return the change in position between the previous and current frame. It s useful for drawing shapes based on how fast the mouse is moving, or for working out whether the mouse is moving at all. Stickers are a set of premade images that can be stled and animated with code. These blocks change which picture the sticker shows, change its size, and set its position on the canvas.

20 Street Artist Kano Hour of Code 0 Drawing with code Drawing with code is a three step process.. Stle Before drawing a shape, set the stle of the pen with fill color; stroke color and thickness; and transparenc.. Move the pen Move the pen to the coordinates ou want to begin drawing. You can move to a random point with move to random point, to a specific position with move to, or move the pen from its current position with move b.. Shapes & lines With the stle and position set, now ou can draw our shape. There are lots of shapes in Kano Code, but the Street Artist challenges use circles, ellipses and lines. Draw: background color Draw: move to random point Draw: circle radius Draw: fill color Draw: move to x Draw: ellipse width Draw: stroke color height thickness Draw: move b x Draw: line to x Draw: set transparenc to 70 Advanced color These blocks let ou mix up a color using RGB (red, green, blue) or HSV (hue, saturation, value). new color with RGB % red % green % blue new color with HSV hue saturation value