Street Artist - Kano · Street Artist Kano Hour of Code 4 Challenge 2: Simple paint What they’ll...
Transcript of Street Artist - Kano · Street Artist Kano Hour of Code 4 Challenge 2: Simple paint What they’ll...
Street Artist Kano Hour of Code 1
Teacher support materialsHour of Code 2017
Street Artist
Street Artist Kano Hour of Code 2
Challenge 1: WarmupWhat they’ll makeA 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 every frame, then add random numbers to bring it to life.
Key concepts introduced• Simple code drawing• The animation loop• Random numbers
GO TO CHALLENGE FINISHED FILE
Street Artist Kano Hour of Code 3
Challenge 1: WarmupWhen app starts
Draw: background color
1Every frames
do Draw: fill color
Draw: move to random point
Draw: circle radius 0 20random number from to
new color with RGB
% red
% green
% blue
0 100random number from to
0 100random number from to
When app starts
70Draw: set transparency to
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20Draw: circle radius
When app starts
Draw: background color
set colorCount to
Every frames
do 1
0
colorCount +=
Draw: fill color
Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: ellipse width
height
1 30random number from to
1 30random number from to
new color with HSV
hue
saturation
value
colorCount
When app starts
Draw: background color
0set colorCount to
1Every frames
do 0.1colorCount +=
new color with HSV
hue
saturation
value
colorCount
Draw: fill color
Mouse: X position
Mouse: Y position
Draw: move to x
y
1
Draw: stroke color
thickness
Draw: move by x
y
-30 30random number from to
-30 30random number from to
10Draw: set transparency to
Draw: circle radius 30 60random number from to
30Draw: set transparency to
Draw: circle radius 0 20random number from to
100Draw: set transparency to
1Draw: circle radius
When app starts
music TrumpetSticker: set to
Sticker: set size to %130
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: circle radius 0 20random number from to
When
Sticker: move to x , y0 450random number from to 0 325random number from to
Draw: fill color new color with HSV
hue
saturation
value
0 35random number from to
music TrumpetSticker: set to
set item to 0 10random number from to
music SaxSticker: set to
if
do
>item 9
Sticker is clicked
When app starts
Draw: background color
other PaintbrushMouse: set cursor
1Every frames
do Draw: fill color
Mouse: Y speed Mouse: Y speed
set distance to square root
+×
×
Mouse: X speed Mouse: X speed
if
do
>distance 15
15Repeat times
Draw: move to x
y
Mouse: X position
Mouse: Y position
0 25set randomness to random number from to
Draw: move by x
y
÷Mouse: X speed randomness
÷Mouse: Y speed randomness
Draw: move by x
y
-5 5random number from to
-5 5random number from to
Draw: circle radius ÷randomness 4
When
Mouse: set cursor
Draw: background color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20
Draw: stroke color
thickness
new color with HSV
hue
saturation
value
Mouse: X position
Draw: line to x
y
+Mouse: X speed Mouse: X position
+Mouse: Y speed Mouse: Y position
÷ 5
7÷
÷ 7
12
34
5
6
7
1
2
3
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’ category can also be attached.
This block loops the code inside it. It can be set to run code every second, millisecond, or frame. The app calls 60 frames per second, making it perfect for animation.
4
5
6
7
Here the fill color is set by adding a block with mixes RGB (red, green, blue) color with % red, % green, and % blue. The RGB color space directly relates to how pixels function by setting the brightness of individual red, green and blue components.
These two lines generate a random number for the green and blue values. Every time this loop runs, a different number between 1 and 100 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)
Finally in the loop, this line of code draws a circle, and sets the radius to a random number between 0 and 20.
Like most computer graphics, drawing in Kano Code is a three step process. You set the fill color and line style, then move the pen to the right place, then draw a shape or a line. The pen position and color can be set in any order, but must be set before the shape is drawn.
global.when(‘start’, function() { devices.get(‘normal’).setBackgroundColor(‘#37474F’); time.every(1, ‘frames’, function() { devices.get(‘normal’).modules.setters.color( colour.create( ‘rgb’, 0, math.random(0, 100), math.random(0, 100) ) ); devices.get(‘normal’).modules.space.moveToRandom(); devices.get(‘normal’).modules.shapes.circle( math.random(0, 20) ); });});
12
34
5
6
7
Street Artist Kano Hour of Code 4
Challenge 2: Simple paintWhat they’ll makeA simple paint effect controlled by the mouse.
The ‘simple paint’ challenge introduces the mouse part, and uses coordinates to draw circles under the mouse cursor.
Key concepts introduced• The mouse part• X and Y coordinates on the canvas• Drawing using the mouse
GO TO CHALLENGE FINISHED FILE
Street Artist Kano Hour of Code 5
Challenge 2: Simple paintapp starts
1 frames
RGB
When app starts
70Draw: set transparency to
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20Draw: circle radius
When app starts
Draw: background color
set colorCount to
Every frames
do 1
0
colorCount +=
Draw: fill color
Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: ellipse width
height
1 30random number from to
1 30random number from to
new color with HSV
hue
saturation
value
colorCount
When app starts
Draw: background color
0set colorCount to
1Every frames
do 0.1colorCount +=
new color with HSV
hue
saturation
value
colorCount
Draw: fill color
Mouse: X position
Mouse: Y position
Draw: move to x
y
1
Draw: stroke color
thickness
Draw: move by x
y
-30 30random number from to
-30 30random number from to
10Draw: set transparency to
Draw: circle radius 30 60random number from to
30Draw: set transparency to
Draw: circle radius 0 20random number from to
100Draw: set transparency to
1Draw: circle radius
When app starts
music TrumpetSticker: set to
Sticker: set size to %130
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: circle radius 0 20random number from to
When
Sticker: move to x , y0 450random number from to 0 325random number from to
Draw: fill color new color with HSV
hue
saturation
value
0 35random number from to
music TrumpetSticker: set to
set item to 0 10random number from to
music SaxSticker: set to
if
do
>item 9
Sticker is clicked
When app starts
Draw: background color
other PaintbrushMouse: set cursor
1Every frames
do Draw: fill color
Mouse: Y speed Mouse: Y speed
set distance to square root
+×
×
Mouse: X speed Mouse: X speed
if
do
>distance 15
15Repeat times
Draw: move to x
y
Mouse: X position
Mouse: Y position
0 25set randomness to random number from to
Draw: move by x
y
÷Mouse: X speed randomness
÷Mouse: Y speed randomness
Draw: move by x
y
-5 5random number from to
-5 5random number from to
Draw: circle radius ÷randomness 4
When
Mouse: set cursor
Draw: background color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20
Draw: stroke color
thickness
new color with HSV
hue
saturation
value
Mouse: X position
Draw: line to x
y
+Mouse: X speed Mouse: X position
+Mouse: Y speed Mouse: Y position
÷ 5
7÷
÷ 7
12
3
4
5
6
1
2
3
An event is fired when the app starts, which triggers the code in this block to run.
Like fill color or stroke style, setting the transparency will affect the opacity 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 transparency and fill color are set outside the code loop. This means they’re only set once when the app starts, and not updated every loop. This makes the code more efficient.
This block loops the code inside it. It can be set to run code every second, millisecond, or frame. The app calls 60 frames per second, making it perfect for animation.
Before drawing anything, 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 y positions to the mouse x and y positions every frame (60 times a second) will make sure that you always draw under the mouse cursor.
This line draws a circle with a radius of 20. In this example, it will be purple and have a transparency of 70%.
4
5
6
Parts in Kano Code“Parts” are an easy way to add functionality 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’).setTransparency(70); devices.get(‘normal’).modules.setters.color(‘#7B1FA2’); time.every(1, ‘frames’, function() { devices.get(‘normal’).modules.space.moveTo( devices.get(‘mouse’).getX() devices.get(‘mouse’).getY() ); devices.get(‘normal’).modules.shapes.circle(20); });});
12
34
5
6
Street Artist Kano Hour of Code 6
What they’ll makeA paintbrush that cycles 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.
Key concepts introduced• Setting and getting variables• Incrementing a variable in a loop• Using a variable to create a color
GO TO CHALLENGE FINISHED FILE
Challenge 3:Color rainbow
Street Artist Kano Hour of Code 7
Challenge 3: Color rainbow
1
2
3
4
5
6
VariablesThis challenge declares (or “sets”) a variable, then increases its value by 1 every 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 very common in most programming languages! Look for the blocks which “set” 1 and “get” 4 variables.
var colorCount;
global.when(‘start’, function() { devices.get(‘normal’).setBackgroundColor(‘#263238’); colorCount = 0; time.every(1, ‘frames’, function() { colorCount += 1; devices.get(‘normal’).modules.setters.color( colour.create(‘hsv’, colorCount, 100, 100) ); devices.get(‘normal’).modules.space.moveTo( devices.get(‘mouse’).getX(), devices.get(‘mouse’).getY() ); devices.get(‘normal’).modules.shapes.ellipse( math.random(1, 30), math.random(1, 30) ); });});
1
1
2
3 4
5
6
app starts
1 frames
RGB
When app starts
70Draw: set transparency to
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20Draw: circle radius
When app starts
Draw: background color
set colorCount to
1Every frames
do 1
0
colorCount +=
Draw: fill color
Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: ellipse width
height
1 30random number from to
1 30random number from to
new color with HSV
hue
saturation
value
colorCount
When app starts
Draw: background color
0set colorCount to
1Every frames
do 0.1colorCount +=
new color with HSV
hue
saturation
value
colorCount
Draw: fill color
Mouse: X position
Mouse: Y position
Draw: move to x
y
1
Draw: stroke color
thickness
Draw: move by x
y
-30 30random number from to
-30 30random number from to
10Draw: set transparency to
Draw: circle radius 30 60random number from to
30Draw: set transparency to
Draw: circle radius 0 20random number from to
100Draw: set transparency to
1Draw: circle radius
When app starts
music TrumpetSticker: set to
Sticker: set size to %130
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: circle radius 0 20random number from to
When
Sticker: move to x , y0 450random number from to 0 325random number from to
Draw: fill color new color with HSV
hue
saturation
value
0 35random number from to
music TrumpetSticker: set to
set item to 0 10random number from to
music SaxSticker: set to
if
do
>item 9
Sticker is clicked
When app starts
Draw: background color
other PaintbrushMouse: set cursor
1Every frames
do Draw: fill color
Mouse: Y speed Mouse: Y speed
set distance to square root
+×
×
Mouse: X speed Mouse: X speed
if
do
>distance 15
15Repeat times
Draw: move to x
y
Mouse: X position
Mouse: Y position
0 25set randomness to random number from to
Draw: move by x
y
÷Mouse: X speed randomness
÷Mouse: Y speed randomness
Draw: move by x
y
-5 5random number from to
-5 5random number from to
Draw: circle radius ÷randomness 4
When
Mouse: set cursor
Draw: background color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20
Draw: stroke color
thickness
new color with HSV
hue
saturation
value
Mouse: X position
Draw: line to x
y
+Mouse: X speed Mouse: X position
+Mouse: Y speed Mouse: Y position
÷ 5
7÷
÷ 7
1
23
4
5
6
When the app starts, this line of code runs. It creates a new variable and sets its value to 0.
Inside the ‘every 1 frame’ loop (which runs 60 times a second), the value of the variable is increased by 1.
This time the color is mixed using HSV, which stands for hue, saturation, value. It’s a very useful way of changing colors, especially when you want to cycle through a set of bright, fully saturated colors.
This block returns the value currently stored in the variable. Each frame, this number will go up by one, creating a constantly 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.
Finally, we draw an ellipse with random widths and heights to make the paintbrush more fun!
This line of code adds 1 to the value stored in the variable.It’s the same as writing:
Except it’s shorter.
colorCount += 1;
myVariable = myVariable + 1;
Street Artist Kano Hour of Code 8
Challenge 4:Ultimate spray paintWhat they’ll makeA glittering rainbow spray paint effect!
Building on the code from challenge 3, students add a ‘moveBy’ command to randomise the pen position around the mouse; and use transparency and repetition to complete the spray paint effect.
Key concepts introduced• Using moveBy vs moveTo so set the pen position• Using transparency with code drawing• Drawing multiple shapes in sequence
GO TO CHALLENGE FINISHED FILE
Street Artist Kano Hour of Code 9
Challenge 4: Ultimate spray paint1
2
3
4
app starts
1 frames
RGB
When app starts
70Draw: set transparency to
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20Draw: circle radius
When app starts
Draw: background color
set colorCount to
Every frames
do 1
0
colorCount +=
Draw: fill color
Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: ellipse width
height
1 30random number from to
1 30random number from to
new color with HSV
hue
saturation
value
colorCount
When app starts
Draw: background color
0set colorCount to
1Every frames
do 0.1colorCount +=
new color with HSV
hue
saturation
value
colorCount
Draw: fill color
Mouse: X position
Mouse: Y position
Draw: move to x
y
1
Draw: stroke color
thickness
Draw: move by x
y
-30 30random number from to
-30 30random number from to
10Draw: set transparency to
Draw: circle radius 30 60random number from to
30Draw: set transparency to
Draw: circle radius 0 20random number from to
100Draw: set transparency to
1Draw: circle radius
When app starts
music TrumpetSticker: set to
Sticker: set size to %130
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: circle radius 0 20random number from to
When
Sticker: move to x , y0 450random number from to 0 325random number from to
Draw: fill color new color with HSV
hue
saturation
value
0 35random number from to
music TrumpetSticker: set to
set item to 0 10random number from to
music SaxSticker: set to
if
do
>item 9
Sticker is clicked
When app starts
Draw: background color
other PaintbrushMouse: set cursor
1Every frames
do Draw: fill color
Mouse: Y speed Mouse: Y speed
set distance to square root
+×
×
Mouse: X speed Mouse: X speed
if
do
>distance 15
15Repeat times
Draw: move to x
y
Mouse: X position
Mouse: Y position
0 25set randomness to random number from to
Draw: move by x
y
÷Mouse: X speed randomness
÷Mouse: Y speed randomness
Draw: move by x
y
-5 5random number from to
-5 5random number from to
Draw: circle radius ÷randomness 4
When
Mouse: set cursor
Draw: background color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20
Draw: stroke color
thickness
new color with HSV
hue
saturation
value
Mouse: X position
Draw: line to x
y
+Mouse: X speed Mouse: X position
+Mouse: Y speed Mouse: Y position
÷ 5
7÷
÷ 7
1
2
3
4
This challenge builds on challenge 3. See the challenge 3 sheet for info on these blocks.
This blocks sets the stroke style (color and thickness). The stroke style is used when drawing lines, or as a border on any shapes that are drawn. If you want to remove the stroke, set the thickness to 0.
This is a ‘move by’ block. Unlike the ‘move to’ block, it moves the drawing pen from it’s current position by a set number of pixels up and down. It move between -30 and 30 pixels on each axis:
These blocks change the drawing transparency and draw a circle three times, without moving the pen between them:
Repeating this kind of randomisation creates some great patterns!
It draws a circle with a radius of between 20 and 60 pixels
Next, it draws another circle with a radius of between 0 and 20 pixels
Finally, it draws a 1px circle in the middle.
30-30
-30
30y
x
pen starting position
possible penend positions
Street Artist Kano Hour of Code 10
Challenge 5:Brush strokesWhat they’ll makeA 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.
Key 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
Street Artist Kano Hour of Code 11
Challenge 5:Brush strokes
1
2
3
4
5
global.when(‘start’, function() { devices.get(‘mouse’).setCursor( assets.getSticker(‘other’, ‘other-paintbrush’) ); devices.get(‘normal’).setBackgroundColor(‘#263238’); time.every(1, ‘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() / 5, 100, 100), 20 ); devices.get(‘normal’).modules.paths.lineTo( devices.get(‘mouse’).getXSpeed() + devices.get(‘mouse’).getX(), devices.get(‘mouse’).getYSpeed() + devices.get(‘mouse’).getY() ); });});
1
2
3
54
app starts
1 frames
RGB
When app starts
70Draw: set transparency to
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20Draw: circle radius
When app starts
Draw: background color
set colorCount to
Every frames
do 1
0
colorCount +=
Draw: fill color
Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: ellipse width
height
1 30random number from to
1 30random number from to
new color with HSV
hue
saturation
value
colorCount
When app starts
Draw: background color
0set colorCount to
1Every frames
do 0.1colorCount +=
new color with HSV
hue
saturation
value
colorCount
Draw: fill color
Mouse: X position
Mouse: Y position
Draw: move to x
y
1
Draw: stroke color
thickness
Draw: move by x
y
-30 30random number from to
-30 30random number from to
10Draw: set transparency to
Draw: circle radius 30 60random number from to
30Draw: set transparency to
Draw: circle radius 0 20random number from to
100Draw: set transparency to
1Draw: circle radius
When app starts
music TrumpetSticker: set to
Sticker: set size to %130
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: circle radius 0 20random number from to
When
Sticker: move to x , y0 450random number from to 0 325random number from to
Draw: fill color new color with HSV
hue
saturation
value
0 35random number from to
music TrumpetSticker: set to
set item to 0 10random number from to
music SaxSticker: set to
if
do
>item 9
Sticker is clicked
When app starts
Draw: background color
other PaintbrushMouse: set cursor
1Every frames
do Draw: fill color
Mouse: Y speed Mouse: Y speed
set distance to square root
+×
×
Mouse: X speed Mouse: X speed
if
do
>distance 15
15Repeat times
Draw: move to x
y
Mouse: X position
Mouse: Y position
0 25set randomness to random number from to
Draw: move by x
y
÷Mouse: X speed randomness
÷Mouse: Y speed randomness
Draw: move by x
y
-5 5random number from to
-5 5random number from to
Draw: circle radius ÷randomness 4
When app starts
other PaintbrushMouse: set cursor
Draw: background color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20
Draw: stroke color
thickness
new color with HSV
hue
saturation
value
Mouse: X position
Draw: line to x
y
+Mouse: X speed Mouse: X position
+Mouse: Y speed Mouse: Y position
÷ 5
7÷
÷ 7
1
2
3
4 5
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 style block was used in challenge 3 to create thin white outlines. In this creation, we’re going to draw lots of lines, so the stroke thickness is set to 20.
The color of the stroke is set with a HSV (Hue, Saturation, Value) block. The saturation and value inputs are left empty, creating bright, fully 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 y coordinate inputs.
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 perfectly. As the speed and angle changes, the brush strokes become more erratic.
Mouse moving in a curve
Mouse moving in a straight line
Street Artist Kano Hour of Code 12
Challenge 6:The stickering gameWhat they’ll makeA probability game using street art stickers.
Players mouse the mouse to click on the sticker as fast as possible. Each time they click there’s a 1 in 10 chance they win.
Key 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
Street Artist Kano Hour of Code 13
Challenge 6:The stickering game
1
2
3
4
5var item;
devices.get(‘sticker’).when(‘clicked’, function() { devices.get(‘sticker’).setXY( math.random(0, 450) - 1, math.random(0, 325) - 1 ); devices.get(‘normal’).modules.setters.color( colour.create(‘hsv’, math.random(0, 35), 100, 100) ); devices.get(‘sticker’).setSticker(assets.getSticker(‘music’, ‘music-trumpet’)); item = math.random(0, 10); if (item > 9) { devices.get(‘sticker’).setSticker(assets.getSticker(‘music’, ‘music-sax’)); }});
1
2
3
5
4
app starts
1 frames
RGB
When app starts
70Draw: set transparency to
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20Draw: circle radius
When app starts
Draw: background color
set colorCount to
Every frames
do 1
0
colorCount +=
Draw: fill color
Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: ellipse width
height
1 30random number from to
1 30random number from to
new color with HSV
hue
saturation
value
colorCount
When app starts
Draw: background color
0set colorCount to
1Every frames
do 0.1colorCount +=
new color with HSV
hue
saturation
value
colorCount
Draw: fill color
Mouse: X position
Mouse: Y position
Draw: move to x
y
1
Draw: stroke color
thickness
Draw: move by x
y
-30 30random number from to
-30 30random number from to
10Draw: set transparency to
Draw: circle radius 30 60random number from to
30Draw: set transparency to
Draw: circle radius 0 20random number from to
100Draw: set transparency to
1Draw: circle radius
When app starts
music TrumpetSticker: set to
Sticker: set size to %130
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: circle radius 0 20random number from to
When
Sticker: move to x , y0 450random number from to 0 325random number from to
Draw: fill color new color with HSV
hue
saturation
value
0 35random number from to
music TrumpetSticker: set to
set item to 0 10random number from to
music SaxSticker: set to
if
do
>item 9
Sticker is clicked
When app starts
Draw: background color
other PaintbrushMouse: set cursor
1Every frames
do Draw: fill color
Mouse: Y speed Mouse: Y speed
set distance to square root
+×
×
Mouse: X speed Mouse: X speed
if
do
>distance 15
15Repeat times
Draw: move to x
y
Mouse: X position
Mouse: Y position
0 25set randomness to random number from to
Draw: move by x
y
÷Mouse: X speed randomness
÷Mouse: Y speed randomness
Draw: move by x
y
-5 5random number from to
-5 5random number from to
Draw: circle radius ÷randomness 4
When
Mouse: set cursor
Draw: background color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20
Draw: stroke color
thickness
new color with HSV
hue
saturation
value
Mouse: X position
Draw: line to x
y
+Mouse: X speed Mouse: X position
+Mouse: Y speed Mouse: Y position
÷ 5
7÷
÷ 7
1
2
3
4
5
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 you make in this event block, you’ll need to click the sticker to run the code!
Every 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 category, the second picks the image from that category. In this challenge, its set to the same image each time the player clicks on the sticker. This ensures that the game resets after a ‘win’ event.
These lines of code generate a random number between 1 and 10, then check to see if it’s greater than 9. This kind of logic is used in all dice games!
Finally, if the random number is greater than 9, the sticker is changed to show that the player has won!
There are two blocks of code in this game. The block inside ‘when app starts’ is a recap of the content from challenges 2 and 3. The game component is coded inside the ‘when sticker is clicked’ event, shown here.
How to play the gameYou’ll need a stopwatch to play. Start the watch and click on the sticker. How quickly can you get the sticker to change?
Extension activities• Code a stopwatch into the game.• Code a score counter to count how many times the sticker is clicked.• Create a count down timer. How many times can you click the sticker in 10
seconds?
Street Artist Kano Hour of Code 14
Challenge 7:Paint splatterWhat they’ll makeA Jackson Pollock paint splatter effect based on the mouse speed.
This challenge uses some trigonometry to calculate the mouse distance, saves the result into a variable, and uses that number to draw lots of little paint circles.
Key concepts introduced• Building up complex algorithms from simple math blocks• Using logic gates to only draw when the mouse is moving• Using the repeat block to draw lots of circles
GO TO CHALLENGE FINISHED FILE
Street Artist Kano Hour of Code 15
Challenge 7:Paint splatter
1
2
3
4
5
6
7
app starts
1 frames
RGB
When app starts
70Draw: set transparency to
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20Draw: circle radius
When app starts
Draw: background color
set colorCount to
Every frames
do 1
0
colorCount +=
Draw: fill color
Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: ellipse width
height
1 30random number from to
1 30random number from to
new color with HSV
hue
saturation
value
colorCount
When app starts
Draw: background color
0set colorCount to
1Every frames
do 0.1colorCount +=
new color with HSV
hue
saturation
value
colorCount
Draw: fill color
Mouse: X position
Mouse: Y position
Draw: move to x
y
1
Draw: stroke color
thickness
Draw: move by x
y
-30 30random number from to
-30 30random number from to
10Draw: set transparency to
Draw: circle radius 30 60random number from to
30Draw: set transparency to
Draw: circle radius 0 20random number from to
100Draw: set transparency to
1Draw: circle radius
When app starts
music TrumpetSticker: set to
Sticker: set size to %130
Draw: fill color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
Draw: circle radius 0 20random number from to
When
Sticker: move to x , y0 450random number from to 0 325random number from to
Draw: fill color new color with HSV
hue
saturation
value
0 35random number from to
music TrumpetSticker: set to
set item to 0 10random number from to
music SaxSticker: set to
if
do
>item 9
Sticker is clicked
When app starts
Draw: background color
other PaintbrushMouse: set cursor
1Every frames
do Draw: fill color
Mouse: Y speed Mouse: Y speed
set distance to square root
+×
×
Mouse: X speed Mouse: X speed
if
do
>distance 15
15Repeat times
Draw: move to x
y
Mouse: X position
Mouse: Y position
0 25set randomness to random number from to
Draw: move by x
y
÷Mouse: X speed randomness
÷Mouse: Y speed randomness
Draw: move by x
y
-5 5random number from to
-5 5random number from to
Draw: circle radius ÷randomness 4
When
Mouse: set cursor
Draw: background color
1Every frames
do Draw: move to x
y
Mouse: X position
Mouse: Y position
20
Draw: stroke color
thickness
new color with HSV
hue
saturation
value
Mouse: X position
Draw: line to x
y
+Mouse: X speed Mouse: X position
+Mouse: Y speed Mouse: Y position
÷ 5
7÷
÷ 7
1
2
3
4
5
6
7
OK. We know. This line is pretty advanced! This little piece of trigonometry is working out how far the mouse has moved in the last frame.
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 15px. If it has, its code runs.
This block repeats its code 15 times. Because it’s nested inside the every 1 frame block, this means we draw 15 circles 60 times a second. 900 little circles per second should create a nice paint effect!
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 away from the mouse, in a straight line with where the mouse is currently moving.
Now the pen is the right distance from the mouse, we move it by a random amount in any direction to make it more organic and paint like.
Finally, we draw a circle. Using the randomness value means the circles will be smaller the further they are from the mouse cursor.
distance x (dx)
distance travelled√dx² + dy²
distance y (dy)
There are two blocks of code in this game. The block inside ‘when app starts’ is a recap of the content from challenges 2 and 3. The game component is coded inside the ‘when sticker is clicked’ event, shown here.
Street Artist Kano Hour of Code 16
new color with RGB
% red
% green
% blue
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to random point
Draw: move to x
y
Draw: move by x
y
Draw: background color
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Draw blocks
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
other PaintbrushMouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Mouse blocks
Street Artist block glossary
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Event Blocks
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Logic blocks
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Loop blocks
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Variable blocks
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
0 100random number from to
5
square root
×
Math blocks
These are the blocks used in the Street Artist challenge set. More detail about each is available on the following pages.
Street Artist Kano Hour of Code 17
Both of these blocks loop code, but they have very different effects.
The every 1 frames block repeats the code inside it 60 times a second. Running code over and over again is very useful for things like animations and games. If you’re creating a countdown timer, you might want to run your code every 1 second. If you’re making an animation, try making it run every 1 frame.
Code in the repeat block runs a set number of times. Using the ‘repeat 10 times’ block has the same effect as writing out your code 10 times, but it’s much quicker to do, and it takes up less space! Code runs very fast, so if you draw a circle 10 times, you’ll see all 10 circles appear at once.
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Loop Blocks
An ‘event’ is triggered when something happens in your app. Maybe a button is clicked, or some data updates, or maybe it’s just the app starting.
Place your code inside the event block to run it when that event happens.
Most of the time, you’ll be coding inside the ‘When app starts’ event. The app is automatically restarted whenever the code changes. You can manually restart it with the ‘restart’ button under the canvas.
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Event Blocks
Street Artist Kano Hour of Code 18
You can think of variables as tiny buckets for storing one piece of data while the app is running. You can call variables anything you like.
You set (or ‘declare’) a variable using this block.
And get back (or ‘return’) the value of the variable using this block.
You can also use this math block to add or subtract from the value of a variable.
Variable Blocks
Use logic blocks in your code to make decisions about which code to run. When you use an if block, you combine it with another statement which will evaluate to true or false. The code in the If block is only run when the statement is true.
Like this:
(If the value of the variable item is greater than 9, then run the code. Otherwise, skip over the block.)
Logic Blocks
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Variable blocks
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
set item to 0 if
do
>
Street Artist Kano Hour of Code 19
The math blocks do all the things you’d expect them to (like add, subtract, divide and multiply). Just plug two numbers or variables into the gaps, and set the symbol (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 try also includes blocks for more advanced operations. Challenge seven uses the square root block for some trigonometry.
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
0 100random number from to
5
square root
×
Math Blocks
Each time a ‘part’ is added to a Kano Code creation, a new block tray is added too.
Challenges 2 – 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 commonly used in a ‘Every 1 frame’ loop to create interactive creations.
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 styled and animated with code. These blocks change which picture the sticker shows, change its size, and set its position on the canvas.
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
other PaintbrushMouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Parts & their blocks
Mouse: X speed
Mouse: Y speed
Street Artist Kano Hour of Code 20
new color with RGB
% red
% green
% blue
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
Drawing with code
Advanced color
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
Draw: background color
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
1. StyleBefore drawing a shape, set the style of the pen with fill color; stroke color and thickness; and transparency.
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to random point
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
2. Move the penMove the pen to the coordinates you 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 by’.
RGB
new color with HSV
hue
saturation
value
set colorCount to 0
1colorCount +=
colorCount
Draw: move to x
y
Draw: move by x
y
70Draw: set transparency to
Draw: fill color
1
Draw: stroke color
thickness
if
do
>item 9When app starts
When Sticker is clicked
1Every frames
do
15Repeat times
Draw: ellipse width
height
1Draw: circle radius
Draw: line to x
y
Mouse: X position
Mouse: Y position
Mouse: set cursor
Sticker: set size to %130
, y130 130Sticker: move to x
music TrumpetSticker: set to
5
square root
×
3. Shapes & linesWith the style and position set, now you can draw your shape. There are lots of shapes in Kano Code, but the Street Artist challenges use circles, ellipses and lines.
These blocks let you mix up a color using RGB (red, green, blue) or HSV (hue, saturation, value).
Drawing with code is a three step process.