VOLUME 15.12

How to Bitsbox

With Bitsbox, you can code real apps that work on gadgets like phones and tablets. All you need is a computer with internet and a working brain.

1

Find a computer with a physical keyboard.

2

Open a web browser and go to bitsbox.com

3

Click Get Started.

The coding part of Bitsbox isn’t meant to be done on tablets just yet.

We recommend Chrome, Firefox, Safari, or Internet Explorer 11.

Have fun!

How can I run my apps on a real phone? Before you do these steps, install a QR reader app on your gadget. Go here for a couple of suggestions: bitsbox.com/QRapps

1

On a computer, open the Bitsbox app you built.

2

Click the sharing icon

in the corner of the screen.

3 Scan the on-screen QR code with your gadget. s like It look

this!

When you change the code on your computer, the app on your gadget changes, too! 2

Have you ever wished you had super powers? Maybe the ability to fly? Shoot lasers from your eyes? Spin your own spider web? In this month's Bitsbox, you'll do all of those things and more, because you DO have a rare and powerful talent.

Coding is a super power. It lets you make fantastic things, right out of your imagination. Excelsior!

Aidan, Scott, Anastasia, Jeff, Emma, & Alexandra

Mini apps to get you started… 3

6

2

Super Dog

5

1 fill('sky') 2 stamp('superdog') Can you put in 'supercat' instead?

5

6

9

8

Secret Thoughts

1 fill('think') 2 text('Ouch. Wedgie.') Can you change what he's thinking?

8

0

2

8

Nemesis

1 n = stamp('nemesis') 2 n.tap = pow Tap the bad guy to see what happens. Can you change pow to splash?

3

7

1

1

Super Punch!

1 function tap() { 2 stamp('fist',x,y) 3 } 4 Try adding this on line 4: fill('brick wall') 3

x

500

p o h S l o To 1

9 4 0

y

with s 4 and 5 ng! e n li n o belo paces e blank s tools where they h t e c la p Re the to place numbers

You have a very real s up e r p o w e r .

It's called making stuff.

4

346

egboard') p ' ( l l i f ) 1 ',150,512 w a s ' ( p m a ) 2 st ',370,730 h c n e r w ' ( ) 3 stamp 500, , ' r e m m a h (' ) 4 stamp , ', s r e i l p ' ( 5 stamp

HINT

While the tab you're codin g, m let that ap on your scre ove your cu e pear te r ll you w n. The x and sor over y numb hat num ers bers to type.

6

7

8

9

4

Card Studio Make a n

ice card f o

r someon e you lov e.

1 holida y = 'newy ear' 2 to = ' The Best Coder' 3 from = '- The Bi tsbox Tea 4 m' 5 fill(h oliday) 6 text(t o,175,100 ,'hand',7 7 text(f 0,'cyan') rom,100,9 50,'hand' ,70,'cyan ')

Make mor e cards with these fills

birthday birthday2

birthday3

christmas

christmas

diwali

2

And when you're done coding, go make a real card!

halloween

halloween

h a n u k ka h

kwanzaa

new year new year2

2

new year3 new year4 solstice st patrick s

thanksgiv

ing valentines

hare /howtos to m o .c x o sb pp Visit bit ail this a m how to e ut ! to learn care abo u o y e n someo

5

7

0

5

4

1 words = ['bang','boom','oops','wow'] 2 colors = ['red','purple','green'] 3 stamp('stripes') 4 5 function tap() { 6 fill(random(colors)) 7 stamp(random(words)) 8 }

LIST PICKER The random() function can pick from a list. In this case, we're using it to grab a random color and word. Can you add more colors?

6

2

3

0 9

e too much of a goo v a h d th an c ing. u o Y

Ta p t h e screen to m ak me strong e !

1 stamp('muscleman') 2 power = 120 3 b = stamp('bicep',572,640,power) 4 5 function tap() { 6 power = power + 10 7 if (power == 200) { 8 b.pop() 9 } else { 10 b.size(power) 11 } 12 }

THE POWER OF IF This app uses if and else to decide what happens to poor Max. Every time you tap, his power increases by 10. If it gets to 200, watch out! His muscle pops.

Can you add a funny sound effect? HINT: sound('splat') 7

r e g n i l s b e W 7

8

4

2

TYPE THIS CODE:

Talk about a super power! Spiders build webs that are mathematical marvels. They do it with careful repetition. Perfect for an app!

8

1 fill('blurry grass') 2 s = stamp('spider') 3 4 walk = 20 5 turn = 30 6 grow = 3 7 8 function touching() { 9 s.rotate(RIGHT,turn) 1 0 s.move(UP,walk) 1 1 line(s.x,s.y) 1 2 walk = walk + grow 1 3 }

* We know that the spider on this page (a Greenbottle Blue Tarantula) doesn’t spin a web like this one, but she’s so pretty we had to feature her. Apologies to our arachnologist friends : )

Want another spider app? CREATE A NEW APP WITH THIS NUMBER:

THIS IS WHAT IT MEANS: 1 2 3 4 5 6 7 8 9 10 11 12 13

Fill the screen with a nice, blurry background.

5

1

3

7

CHALLENGE Stamp a spider in the center of your screen.

Make a spider in the center of the screen, and name her s.

BONUS 1 Wherever you tap, stamp a fly which slowly shrinks until it disappears.

Create a variable for how many pixels s will walk each step.

BONUS 2 Move the spider to each new fly.

Create a variable for how many degrees she'll turn each step. Create a variable for how much her spiral grows each step. SOUNDS: 'bop'

Run this code as long as I’m touching the screen: Rotate s to her right by the number of degrees in turn. Move s up (forward) by the number of pixels in walk.

'bug' 'squish' 'red sky'

'spider2'

'fly2'

Draw a line of web to s's current x, y position. Increase the number of pixels she'll walk in her next step. The closing } ends the function.

THAT’S A VERY ADVANCED ARACHNID!

HUNGRY SPIDER: 7133

Experiment with changing the numbers on lines 4, 5, and 6 to change the web's shape:

Need a helping hand? Create a new app with this number to get some help!

- A turn of 60 degrees makes a 6-sided web - A turn of 90 degrees makes a square web!

9

Take a break from coding, draw your super-self here, and color the superheroes at right.

10

e ak m to y. o k er e s h er n th p su es i e th sag ag es Dr m

4

0

1

7

t h

r e ir t W

g i lF

12

HE'S SO AIM-IABLE!

The .aim() command on line 7 "aims" the hero stamp at a position on the screen. In this case, that position is x, y, which is wherever your finger (or your cursor) happens to be touching the screen.

Sometimes it's good to have your head in the clouds.

1 fill('mountains') 2 hero = stamp('hero') 3 4 function drag() { 5 stamp('cloud4',x,y).size(0,5000) 6 hero.move(x,y,100) 7 hero.aim(x,y) 8 hero.front() 9 }

Can you draw in the sky with something besides a cloud?

6

0 9

2

Kitty Rescue

If it weren't for cats, superheroes would be out of business.

Drag your brave heroine to save the frightened feline from the burning building! 1 fill('buildings') 2 stamp('fire',70,400) 3 hero = stamp('hero2',600,850) 4 cat = stamp('kitten3',200,250) 5 6 function touching() { 7 hero.move(x,y,100) 8 if (hero.hits(cat)) { 9 cat.move(hero.x,hero.y) 1 0 } 1 1 } 1 2 1 3 function untouch() { 1 4 cat.move(DOWN,1000,1000) 1 5 }

MOVE THAT MEOW Line 9 shows how you can make one stamp follow another. Every

Can you add a cat sound to the game?

time the loop runs, the cat moves to the hero's x and y position.

13

2

7

3

The future of the world depends on YOU.

6

DANGER ROOM Want to graduate from battle school? First you better blast those bots. 1 fill('danger room') 2 3 function blast(bot) { 4 if (bot.hits(x,y)) { 5 bot.explode() 6 } 7 } 8 9 function tap() { 10 r = line(376,1024,x,y,15,'red') 11 find('drone3').forEach(blast) 12 r.hide() 13 } 14 15 function loop() { 16 if (random(20) == 20) { 17 bot = stamp('drone3',0,600,20) 18 a = random(-500,1500) 19 b = random(3000,6000) 20 bot.move(1900,a,b).size(800,b) 21 } 22 } 14

THAT'S LOOPY Code inside the loop function happens 20 times every second. The if statement that starts on on line 16 says "about one time every 20 loops, make a new drone."

Fiddle with the numbers on line 10 to change your laser’s location and size!

7

9

9

5

Tap to end up anywhere. 1 fill('teleporter') 2 stamp('time suit',390,800) 3 4 places = ['egypt','savannah','iceberg', 5 'planet3','nebula','concert'] 6 7 function tap() { 8 b = stamp('flare2',-500,512) 9 b.rotate(1000,1000) 10 b.move(EAST,2200,1000) 11 delay(teleport,500) 12 } 13 14 function teleport() { 15 fill(random(places)) 16 }

RS: E L E R AV E R G S T N TI O E I C E B N E T AT TH H C U T TO ’ N O D

A SLIGHT DELAY Line 11 shows how the delay() command works. Every time you tap, the teleport() function happens 500 milliseconds (half a second) after that.

15

4

0 9

4

Adorableness is the ultimate super power.

Panda Hero Help the baby panda protect his home from the giant, scary beachballs! First, panda cub gets an umbrella. 1 fill('bamboo') 2 hero = stamp('cub',380,820,250) 3 4 function touching() { 5 hero.rotate(0) 6 hero.change('cub2') 7 } 8 9 function untouch() { 1 0 hero.change('cub') 1 1 }

16

He's so happy, he does somersaults! 1 2 1 3 function tap() { 1 4 hero.move(x,hero.y,500) 1 5 sound('kiss',20) 1 6 if (x > hero.x) { 1 7 hero.rotate(RIGHT,360,500) 1 8 } else { 1 9 hero.rotate(LEFT,360,500) 2 0 } 2 1 }

Then beachballs fall from the sky… 2 2 2 3 score = 0 2 4 gravity = 1 2 5 sb = text(score,350,100,100) 2 6 function tally() {} 2 7 2 8 function fall(ball) { 2 9 ball.drop = ball.drop + gravity 3 0 ball.move(SOUTH,ball.drop) 3 1 ball.move(EAST,ball.drift) 3 2 if (ball.hits('cub2')) { 3 3 sound('conga drum',20) 3 4 ball.drop = -30 3 5 ball.drift = (ball.x - hero.x)/5 3 6 } 3 7 tally(ball) 3 8 } 3 9 4 0 function loop() { 4 1 if (random(60) == 60) { 4 2 b = stamp('ball2',random(768),0) 4 3 b.drop = random(10) 4 4 b.drift = 0 4 5 } 4 6 find('ball2').forEach(fall) 4 7 sb.change(score) 4 8 }

CODING ONWARD

Can you add a victory screen after you've blocked 10 beachballs?

…And panda cub has to save them! 4 9 5 0 function tally(ball) { 5 1 if (ball.y > 900) { 5 2 find('ball2').forEach(pop) 5 3 head = stamp('sad panda',375,1300) 5 4 head.move(UP,500,1000) 5 5 sound('bear') 5 6 loop = null 5 7 } 5 8 if (offscreen(ball)) { 5 9 ball.hide() 6 0 score = score + 1 6 1 sound('bug') 6 2 } 6 3 } 6 4 song('east')

17

8

0 6

4

Wood, Water, Fire

sf

xtinguishe

FINISH THIS APP!

er

The test() function looks at your choice and the computer’s choice, and writes a message on the screen. If they’re both fire, it’s a tie.

at

od

re

e

da

o

burns wo

wo

Fi

re

wat

1 function test(you,them) { 2 if (you == 'elf fire' && them == 'coin fire') { 3 text('TIE!',470,770) 4 } 5 } 6 7 function choose() { 8 this.move(374,500,500) 9 this.size(500,500) 10 this.front() 11 enemy = random('coin fire','coin wood','coin water') 12 stamp(enemy,375,900).size(250,500) 13 test(this.name,enemy) 14 } 15 16 stamp('elf fire',150,150).tap = choose 17 stamp('elf water',375,150).tap = choose 18 stamp('elf wood',625,150).tap = choose

ire

Play this version of “Rock, Paper, Scissors” against the computer!

bsorbs w

But what about other scenarios? You need to add more if statements to the test() function. Can you add an if statement for each of the 8 other possible outcomes? Need help? Create a new app number 7604 to see the answer!

18

Creative Coding Challenges Try coding these apps yourself! CREATE A NEW APP WITH THIS NUMBER:

4

8

5

CREATE A NEW APP WITH THIS NUMBER:

8

1

9

1

4

SPACE PATROL

METEOR SHOWER

CHALLENGE Stamp an astronaut in the center of the screen.

CHALLENGE Make it look like shooting stars are flying across your screen—forever!

BONUS 1 Add an outer space background and play a nice song.

HINT: Look at the code in the loop() function in Danger Room on page 14!

BONUS 2 Make the astronaut fly around the screen when you drag.

BONUS Add a cool sound effect that plays every time a new shooting star appears.

HINT: Look at FlightWriter on page 12!

'astronaut'

'ufo2'

'matrix'

'glug'

'space'

'nebula'

'flare'

'alien4'

'pop'

Need a helping hand? Create new apps with these numbers to get some ideas!

'jetkid'

SOUNDS:

SPACE PATROL: 1555 METEOR SHOWER: 1866

'stars'

SONGS: 'explosions'

19

Use these stamps ball2

boom

bang

fist

fly2

flare2

kitten3

muscle man

nemesis

building

hammer

oops

( & sounds & fills & songs) to make any app your own! Just don’t forget to put single quotes around them in your code, like this: stamp('alpaca')

cub

cloud 4

hero

pliers

cub2

hero2

hero3

sad panda

saw

sound('goat')

fill('big ben')

drone3

Songs

hero4

crash

greensleeves

drum pursuit

runaway

deck the halls

snow

feast

tension

grass

unrelenting

spider2

fills Sounds applause

parrot

bird3

droid fly

cloud2

stop looking

splotch

piano a

unicorn

jetkid

birthday

blurry city

buildings

christmas

hanukkah

kwanzaa

pegboard

planet3

danger room halloween

solstice

teleporter

Morestuff stuffonline! online! More ©2  015 Bitsbox. All rights reserved. Designed and printed in the U.S.A.

bitsbox.com

song('sax')

Look for more when you’re coding at bitsbox.com!