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


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

http://static.kano.me/assets/hour-of-code/hoc-01.kcode

https://apps.kano.me/story/hoc_01


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


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


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



new color with HSV

hue

saturation

value

colorCount

When app starts


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








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


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



set item to 0 10random number from to

music SaxSticker: set to

if

do

>item 9

Sticker is clicked

When app starts


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



Draw: circle radius ÷randomness 4

When

Mouse: set cursor


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


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





Challenge 2: Simple paintapp starts

1 frames

RGB

When app starts


Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When app starts


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



new color with HSV

hue

saturation

value

colorCount

When app starts


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









When app starts



Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When



hue

saturation

value





if

do

>item 9

Sticker is clicked

When app starts



1Every frames

do Draw: fill color



+×

×


if

do

>distance 15

15Repeat times

Draw: move to x

y

Mouse: X position

Mouse: Y position


Draw: move by x

y



Draw: move by x

y




When

Mouse: set cursor


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



÷ 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


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


Challenge 3:Color rainbow




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


Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When app starts


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



new color with HSV

hue

saturation

value

colorCount

When app starts


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









When app starts



Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When



hue

saturation

value





if

do

>item 9

Sticker is clicked

When app starts



1Every frames

do Draw: fill color



+×

×


if

do

>distance 15

15Repeat times

Draw: move to x

y

Mouse: X position

Mouse: Y position


Draw: move by x

y



Draw: move by x

y




When

Mouse: set cursor


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



÷ 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;


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





Challenge 4: Ultimate spray paint1

2

3

4

app starts

1 frames

RGB

When app starts


Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When app starts


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



new color with HSV

hue

saturation

value

colorCount

When app starts


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









When app starts



Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When



hue

saturation

value





if

do

>item 9

Sticker is clicked

When app starts



1Every frames

do Draw: fill color



+×

×


if

do

>distance 15

15Repeat times

Draw: move to x

y

Mouse: X position

Mouse: Y position


Draw: move by x

y



Draw: move by x

y




When

Mouse: set cursor


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



÷ 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


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





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


Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When app starts


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



new color with HSV

hue

saturation

value

colorCount

When app starts


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









When app starts



Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When



hue

saturation

value





if

do

>item 9

Sticker is clicked

When app starts



1Every frames

do Draw: fill color



+×

×


if

do

>distance 15

15Repeat times

Draw: move to x

y

Mouse: X position

Mouse: Y position


Draw: move by x

y



Draw: move by x

y




When app starts



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



÷ 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


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.





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


Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When app starts


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



new color with HSV

hue

saturation

value

colorCount

When app starts


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









When app starts



Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When



hue

saturation

value





if

do

>item 9

Sticker is clicked

When app starts



1Every frames

do Draw: fill color



+×

×


if

do

>distance 15

15Repeat times

Draw: move to x

y

Mouse: X position

Mouse: Y position


Draw: move by x

y



Draw: move by x

y




When

Mouse: set cursor


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



÷ 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?


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





Challenge 7:Paint splatter

1

2

3

4

5

6

7

app starts

1 frames

RGB

When app starts


Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When app starts


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



new color with HSV

hue

saturation

value

colorCount

When app starts


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









When app starts



Draw: fill color

1Every frames

do Draw: move to x

y

Mouse: X position

Mouse: Y position


When



hue

saturation

value





if

do

>item 9

Sticker is clicked

When app starts



1Every frames

do Draw: fill color



+×

×


if

do

>distance 15

15Repeat times

Draw: move to x

y

Mouse: X position

Mouse: Y position


Draw: move by x

y



Draw: move by x

y




When

Mouse: set cursor


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



÷ 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.


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



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


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor


, y130 130Sticker: move to x


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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position





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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor





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.


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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




5

square root

×

Event Blocks


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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




5

square root

×

set item to 0 if

do

>


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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor





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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position





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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




5

square root

×

Parts & their blocks

Mouse: X speed

Mouse: Y speed


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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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 x

y

Draw: move by x

y


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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


Draw: fill color

1

Draw: stroke color

thickness

if

do



1Every frames

do

15Repeat times

Draw: ellipse width

height


Draw: line to x

y

Mouse: X position

Mouse: Y position

Mouse: set cursor




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.

street artist - kano · street artist kano hour of code 4 challenge 2: simple paint what they’ll...

Documents