Anda di halaman 1dari 20

VOLUME 15.

06

Artsy
Smartsy
22 Offbeat
Apps to Code

Want to make your own apps?


You've come to the right place!
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.

HOW TO BITSBOX
Find a computer with a physical keyboard.
1

The coding part of Bitsbox isnt meant to be done on tablets just yet.

Open a web browser and go to bitsbox.com

Click Get Started.

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

ere's something that might surprise you:


Both of the guys who invented Bitsbox studied
ART in university! Scott was a painter and a
graphic designer, and Aidan did a bunch of jewelry and
metalsmithing, photography, and illustration.
Coding isn't just for hardcore computer programmers
and scientists. If you love to draw, if you're a dancer or a
musician, if you're a creative kid of any kindthe tech world
needs you most of all! Technology can make life easier, but
art makes life worth living.
To the studio!
Scott, Aidan, Anastasia & Jeff (the whole Bitsbox team)

Have fun!

GROWNUPS READ THIS!!


How can I run my apps
on a phone or a tablet?

Youll find the Grownup Guide for this issue


at bitsbox.com/grownups

Before you do these steps, install a QR reader app on your gadget.


Go here for a couple of suggestions: bitsbox.com/QRapps

In the Grownup Guide, youll find:

1 On a computer, open the Bitsbox app you built.


2 Click the sharing icon

in the corner of the screen.

3 Scan the QR code with your gadget.

ks
oo
!
It l this
e
lik

When you change the code on your computer,


the app on your gadget changes, too!

A
 n FAQ section about Bitsbox in general (and this issue in particular)
Descriptions of the coding concepts were using
Explanations of each app's code
S
 uggestions for extending the apps to make them even more fun

MINI APPS TO GET


YOU STARTED
2 4 7 0

ACHOO!

1 fill('yellow green')
2 stamp('splat3',700)
Gesundheit! Can you change the fill color to yellow?

7 7 8 0

1 7 7 3

ART CRITIC

Paint your name!


Start by typing in this code and running it:

Fun
you even
if
r
isn name
't A
li.

1 fill('paper2')
2 stamp('a paint',100,200)
3 stamp('l paint',200,200)
4 stamp('i paint',300,200)
Can you spell out your name instead?
You may have to add more lines of code.

1 text('Was that gross?',100,500)


2 text('Or was it art?',400,600)
Try changing the code to make the text say
something completely different.

5 7 7 5

ART WIll Blow Your mind

Now move your cursor across the tablet on your screen.


Do you see the little numbers?
They help you figure out where to place stamps.
Add another word below your name. Start typing another line of code:

1 fill('paper2')
2 stamp('a paint',100,200)
3 stamp('l paint',200,200)
4 stamp('i paint',300,200)
5 stamp('r paint',

x
200
|

y
400-

1 stamp('brain').tap = explode
How about making a butterfly explode instead?

8 3 5 1

rocket launch

1 fill('desert sky')
2 stamp('rocket5').move(UP,800,2000)
3 sound('rocket')

Next, put your cursor where the next letter should go


and look at the numbers.
The 'x' number above the screen is around 200.
The 'y' number beside the screen is around 400.
Now add these numbers to your code:

1
2
3
4
5

fill('paper2')
stamp('a paint',100,200)
stamp('l paint',200,200)
stamp('i paint',300,200)
stamp('r paint',200,400)

Can you finish spelling out


the word "ROCKS" by adding
four more lines of code?

Check the back of this book for other stamps


you can launch!

Tap to add a numbered dot, then drag to


draw lines that connect them.

3 5 2 4

Goodbye picasso
Flush poor Picasso down the commode.

Not all
ideas are
good ideas.
1 fill('flush')
2 man = stamp('artist',400)
3 time = 2000
4
5 man.size(0,time)
6 man.rotate(720,time)

You control the speed.


The code commands on lines 5 and 6 both use the variable speed to
control how fast the toilet flushes. When speed = 2000, it takes 2000
milliseconds (2 seconds) for the size of Picasso to decrease to 0, and
for him to rotate 720 degrees (2 full turns).
Using a variable makes it easier to change this app's behavior.
Changing the value of speed on line 3 automatically affects the code
on lines 5 and 6. That's the power of using variables!

What else can you flush?


2

1 5 2

Make your own


puzzles!

CONNECT THE DOTS


1 number = 1
2 function tap() {
3
circle(x,y,5,'onyx')
4
text(number,x+10,y,30,'blue')
5
number = number + 1
6 }
7
8 function drag() {
9
circle(x,y,5,'sea green')
10 }

Experiment with the code on


line 9 to change the thickness
and color of your drawing tool.

Tap to add.
Drag to draw.
tap() and drag() are fun

Bitsbox commands that you


can use to build apps that
respond when users touch the
screen in different ways.

Open the sharing menu


on your screen to download
screenshots of your app!

3 4 7

Anything worth
saying is worth
saying big.

Write messages in the sky.

7 0 1 9

1 fill('sky blue')
2 text('marry me?',100,545,50,'white')
3 plane = stamp('skywriter',150,540)
4
5 function loop() {
6
plane.move(RIGHT,10)
7
plane.wrap()
8 }

That's a wrap
Line 7 features the .wrap
command. When the centerpoint of
the airplane stamp moves offscreen,
the app automatically "wraps" it
around to the other side. Neat, huh?

Can you change the message


that the airplane writes?

See spots run.

LOTS O' DOTS

This line
picks a
random
number
from 1 to
255.

1 function loop() {
2
r = random(255)
3
g = random(255)
4
b = random(255)
5
x = random(150,600)
6
y = random(1024)
7
size = random(10,30,50)
8
9
color(r,g,b)
10
circle(x,y,size,color)
11 }

Watch this app draw colorful


circles forever. And ever.

That's so random
This app uses the random command a lot. Using random
tells your app to pick a number on its own. It's like rolling
the diceyou never know what you're going to get.
This line
picks a
random
number
from 150
to 600.

Try changing the numbers on lines 5 and 6 to


restrict the circles to different parts of the screen.

Fate is my
curator.

6 7 2 4

1 fill('gilt frame')
2 art = []
3 art[1] = 'american gothic'
4 art[2] = 'the scream'
5 art[3] = 'mona lisa'
6
7 choice = art[random(3)]
8 stamp(choice)

Arrays are
numbered lists.

Art Museum

In coding terms, lists are


called arrays. In this app, art
is an array that contains three
elements which happen to be
famous paintings. Line 7 picks
one of these at random, and
line 8 stamps it on the screen.

This app decides which


painting to display.

Add another element to the array.


Don't forget to add 1 to the number on line 7!

1 9 9 9

People running this app on different gadgets can draw togetherlive!

drawn together
1 fill('gilt frame')
2
3 function drag() {
4
stamp('pig',x,y,50)
5
send(x,y)
6 }
7
8 function get(x,y) {
9
stamp('monster',x,y,50)
10 }

Because art
is a team sport.

Send and Get


This app uses the send() and get()
commands to make it possible for multiple people
to use it simultaneously (at the same time).

Change lines 4 and 9 to draw


with thinner "lines".

Visit bitsbox.com/howtoshare to learn how to share this app with other people!

2 6 8 1

With apologies
to Sir Elton.

5 6 8 9

tiny dancer

mad libs

Drag left and right to make your


ballerina boogie.

Tap the words and replace


them with your own.
Tap Show! to read the story.

1 song('faire')
2 fill('tinydancer')
3 girl = stamp('ballet7')
4
5 function touching() {
6
if (x < 150) { girl.change('ballet3') }
7
else if (x < 300) { girl.change('ballet4')
8
else if (x < 450) { girl.change('ballet5')
9
else if (x < 600) { girl.change('ballet6')
1
0
else
{ girl.change('ballet7')
1
1 }

}
}
}
}

Pick a different song to play from


the list on the back of this book.

Once upon
there was
_________
lived in __
Its name w
__________
One day, a
_________
along and
So _______
The end.

1 function ask() {
2
word = this.name
3
reply = prompt('I need a ' + word + '!')
4
text(reply,this.x,this.y,65,'blue')
5
this.hide()
6 }
7
8 stamp('feeling',200,892).tap = ask
9 stamp('noun',100,258)
.tap = ask
10 stamp('place',325,350) .tap = ask
11 stamp('name',100,530)
.tap = ask
12 stamp('animal',100,710) .tap = ask
13 stamp('verb',380,800)
.tap = ask
14
15 function show() {
16
fill('madlib')
17
this.hide()
18 }
19
20 stamp('show',670,970).tap = show

If you move right....


This app uses if and else if statements to display a different stamp
depending on where you're touching the screen. The x in lines 6 through 9
refers to the horizontal (side-to-side) position of your cursor (or finger) on
the screen: 0 is all the way left, and 768 is all the way right.

Keep it
clean, folks.

Tap to replace.
Bitsbox's .tap command is on
full display in this app.
It lets you tell a stamp what to
do when someone taps it.

5 9 6 4

NANO PIANO
Build your very own musical instrument.

1 fill('nano piano')
2
3 stamp('piano c',160,720).touch
4 stamp('piano d',235,720).touch
5 stamp('piano e',310,720).touch
6 stamp('piano f',385,720).touch
7 stamp('piano g',460,720).touch
8 stamp('piano a',535,720).touch
9 stamp('piano b',610,720).touch

=
=
=
=
=
=
=

sing
sing
sing
sing
sing
sing
sing

Some stamps can sing.


Each key on this piano is a different stamp, and each of these has its own,
embedded sound effect. When you tell one of these stamps to sing, it
plays its sound. Each of these keys plays a different musical note.
Another way to make a stamp play a sound when you tap it is
to use code like this:

stamp('chicken').tap = cluck
function cluck() {
sound('chicken')
}
This code is a lot longer, but it lets you associate any
sound with any stamp, which can be very rewarding.
And distracting.

Love music?

Check out the free


Sketch-a-Song app!
bitsbox.com/sketchasong
(our friends made it)

6 8 8 9

Music Machine

Mary had a little time,


so she learned to code.

This app plays songs you write as strings of notes.

1 output = text(' ',180,800,800)


2 song = 'edcdeeedddeggedcdeeeeddedc'
3
4 i = 0
5 function tap() {
6
note = song.charAt(i)
7
output.change(note)
8
sound(note)
9
i = i + 1
10 }

He's such a character.


This app introduces the .charAt() command, which is useful for
picking out a single char (a letter or number) from a longer string
of letters and numbers. In this case, .charAt() looks at song
and singles out whichever char is at position i.
Because i starts at 0 and increases by 1 every time you tap the
screen, this app goes through each char in song and displays
them one by one.

Can you modify


this app to send
a letter-by-letter
secret message
to a friend?

Visit bitsbox.com/howtoshare to learn how to share this app with other people!

How do you think this


artwork was created?

Computers
& keyboards.
Its called ASCII art and its been
around for decades.
People have used typewriters to create
artwork since the 1860s.
Printers used type to create artwork with
letters, numbers, and punctuation
as long ago as the 1600s.
There are a few types of ASCII art.
Short simple examples are called
emoticons; often, you have to turn
your head to see the image:

========|:-}
(ABRAHAM LINCOLN)

@}-;-
(A ROSE)

(\_/)
(=.=)
()_()
(A BUNNY RABBIT)

This article was contributed by our friend


Tim Slavin of Kids, Code, and Computer
Science Magazine. Thanks, Tim!
Read an extended version at:
KidsCodeCS.com/create-ascii-art

ABOUT THIS IMAGE


The background image on this page is an ASCII version of a famous
woodblock print called The Great Wave Off Kanagawa by a Japanese
artist named Katsushika Hokusai. This ASCII version was created with
software written by Dr. Ian Parberry of the University of North Texas.

Check out his webpage: larc.unt.edu/ian/

Want to create your own ASCII art? Here's how:


1

Open a new file in any text editing


software. Notepad, TextEdit, Google
Docs, Word, and Pages are some text
editors you might choose.

Choose the font Courier (or any


other monospaced fontwhere every
character is exactly the same width).

Press the spacebar on your keyboard


30 or 40 times.

Copy and paste your row of blank


spaces to create 20, 30, or more
rows of blank spaces.

Place your cursor anywhere in


a blank space and type a letter,
number, or symbol.

Keep typing to keep drawing!

HELPFUL HINTS

Delete blank spaces after you


add a character to keep your
rows even.

Use thin letters like I for light


areas where you want lots of
white to come through.

Use fat letters like M and W


for dark areas of your image.

Other letters like E, F, and R


give you an in-between option
for filling in spaces.

8 2 7 7

slingshot graffiti

Make art by lobbing paint at the wall.

1 fill('brick wall')
2 a = 382
3 b = 700
4 targety = 0
5 stamp('slingshot',a,890)
6 ammo = stamp('balloon',a,b,120)
7
8 line('red',20)
9 band1 = line(300,b,a,720)
10 band2 = line(468,b,a,720)
11
12 function drag() {
13
band1.hide()
14
band2.hide()
15
band1 = line(300,b,x,y)
16
band2 = line(468,b,x,y)
17
ammo.move(x,y)
18 }
19
20 function shoot(x,y) {
21
targetx = (3 * a) - (2 * x)
22
targety = (3 * b) - (2 * y)
23
ammo.move(targetx,targety,300)
24 }

10

Code hooliganism
at its best.

25
26 function untouch() {
27
band1.hide()
28
band2.hide()
29
band1 = line(300,b,a,720)
30
band2 = line(468,b,a,720)
31
shoot(x,y)
32 }
33
34 function loop() {
35
if (ammo.y <= targety) {
36
splat = random('splat','splat2','splat3')
37
stamp(splat,ammo.x,ammo.y,200)
38
ammo.move(a,b)
39
}
40 }

What else can you lob?

How
untouching
Line 26 uses the Bitsbox
function untouch() to shoot
the balloon. untouch()
happens whenever you lift
your finger (or cursor) off the screen.

4 0 1 3
Math is
beautiful.

1 fill('black')
2 line('lime',3)
3
4 a = 5
5 b = 10
6 c = 15
7 d = 5
8
9 i = 1
10 function loop() {
11
if (i > 1000) {
12
loop = null
13
}
14
x = (Math.sin(c*i) - Math.sin(d*i))*200
15
y = (Math.cos(a*i) - Math.cos(b*i))*250
16
line(384 + x, 512 + y)
17
i = i + 1
18 }

Fiddle with numbers to create


your own amazing images.

Terrific trigonometry
This code uses some advanced math to do its work. You can radically
change the image by changing the values of the variables a, b, c, and d.
Try these, and feel free to experiment with your own:
a b c d

a b c d

10

1 8
1 8

10

20 80 20 80

20 10 20 10

1 80
1 40

20 10 20 5

1 80
1 80

5 10 15 10

11

2 0 7 1

Bugswatter

We won't tell
PETA if you
don't.

Help Bugswatter rid this 3D printer of bugs.


Careful not to touch the water!

1 fill('circuit')
2 hero = stamp('robot3',120)
3 score = 0
4
5 function spawn() {
6
goal = stamp('bug2',150).move()
7
stamp('water',random(50,150)).move()
8 }
9
10 spawn()
11
12 function drag() {
13
hero.move(x,y)
14 }

15
16 function loop() {
17
if (hero.hits(goal)) {
18
score = score + 1
19
goal.pop()
20
spawn()
21
}
22
if (hero.hits('water')) {
23
reset('sadrobot')
24
loop = null
25
text('You scored ' + score,260,950)
26
}
27 }

Where'd he go?
Lines 6 and 7 both end with .move(). But move where?
When you use the .move command without putting anything between
the parentheses, you're telling it to move to a random position on the
screen. It's a nice coding shortcut, and it works with .rotate, too!

12

How can you make this game


harder or easier?

8 6 7 6

The future is here,


and it smells
like melted
plastic.

Tap tap tap to print a 3D object.

1 fill('3d printer')
2 toy = stamp('munny',250)
3 cover = stamp('whitebox',250)
4 printer = stamp('extruder',300,600)
5
6 speed = 5
7 function tap() {
8 cover.move(UP,speed)
9 printer.move(512,printer.y)
1
0 printer.move(UP,speed)
1
1 printer.move(LEFT,250,500)
1
2 }

Under the cover.


This app uses a sneaky trick to make it look like the object is being
printed one layer at a time. See line 3? cover is a simple, white
rectangle that hides the object behind it. Line 8 moves the cover UP
every time you tap.

Try 3D printing other stuff!


13

1 5 3

Munny draw

Paint on Munny.
Enjoy.
Repeat.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

'big munny'
'color box' 750 980
'spectrum' 378
'white'
20

950

What's that color?


Any color can be made by mixing precise amounts of red, green, and blue
light. Lines 16 and 17 use the look command to change the color you're
using to paint. look returns (delivers) three numbers which represent the
amount of red, green, and blue in the color of the pixel you tapped.

Open the sharing menu


on your screen to download
screenshots of your app!

14

6 6 8 9

Mr. Munny head

Dress up Munny
with the magic of code.
1
2
3
4
5
6
7
8

'aqua'
'big munny'
'glasses3' 395 375 500
'smile'
'hair10' 375 200 600

Everything's funnier
with a mustache.
Here are a bunch of
decorations you can use:

beard3

beard2

hair9

eye2

eye4

hair8

hat2

hair7

hair10

glasses6

hair3

glasses3

hat7

hair12

hat15

nose4

mustache6

nose3

eyeball

mustache3

mustache5

hat6

tie3

lips

15

Cheese, glorious cheese.


48
49 cheese = stamp('cheese',500,500)
50 cheese.startY = 500
51 function boost() {
52
scroll(cheese)
53
if (speed < 0 && hero.hits(cheese)) {
54
speed = power * 2
55
score = score + 1000
56
}
57 }

34
35 function loop() {
36
score = score + 10
37
speed = speed - gravity
38
altitude = altitude + speed
39
find('cat2').forEach(scroll)
40
if (speed < 0 && hero.hits('cat2')) {
41
speed = power
42
}
43
boost()
44
if (speed < -100) {
45
death()
46
}
47 }

What happens when


you miss a jump? Death.
58
59 function death() {
60
text('You died.',100,500,120)
61
text('But hey, you scored ' + score,100,600,50)
62
loop = null
63
touching = null
64
hero.move(DOWN,350,300)
65 }

CODING ONWARD
Can you add a live scoreboard that
shows your score as you're playing?
16

4 3 0 3

kitty jump
Bounce your mouse from kitty to kitty to kitty.

Type in one section of code at a time, then click the


green run button after each. The game gets better
with every new section you add.
Create cat platforms
(catforms?) and add the mouse.
1 fill('watercolor')
2 y = 0
3
4 function platform() {
5
y = y + 300
6
p = stamp('cat2',random(800),y,150)
7
p.startY = y
8 }
9 repeat(platform, 8)
10
11 agility = 20
12 hero = stamp('mouse2',385,750,100)
13 function touching() {
14
if (x > hero.x) { hero.move(RIGHT,agility) }
15
if (x < hero.x) { hero.move(LEFT,agility) }
16 }

Make the world keep


moving downwards. Gravity!
17
18 altitude = 0
19 power = 50
20 gravity = 4
21 speed = power
22 score = 0
23
24 function boost() {}
25 function death() {}
26
27 function scroll(block) {
28
block.move(block.x,block.startY+altitude)
29
if (block.y > 1100) {
30
block.startY = block.startY - random(1200,1400)
31
block.move(random(800),block.y)
32
}
33 }

Ever
upwards!

17

STAMPS

Use these stamps (& fills & songs & sounds) to make any app your own!
Just dont forget to put single quotes around them in your code, like this:
stamp('horse')

fill('waves')

song('bamboo')

sound('cowbell')

SONGS
achievement
bacon

balloon

baseball 2

baseball bat

brain

cat 2

cake

creeper

dumptruck

football

bamboo
carmen
castle
danube

fries

frontloader

hand 2

horse

mouse 2

munny

pie

sand

salad

skeleton

falling
gritty
lovebirds
punk

softdrink

soup

splat

student

FILLS

skull 4

tea

swimming
pool

umbrella 2

whistle

More stuff
online!

SOUNDS
3d printer

nano
hoverland
piano

swimmer 5

air hockey

zap
shiny
messenger
black
tennis
nebula
court

brick wall

watercolor
gears

gilt frame

waves
disco

2015 Bitsbox. All rights reserved. Designed and printed in the U.S.A. bitsbox.com

alarm

cowbell

popcoin

wilhelm

alert

crow

roar

wind

ballgame

dolphin

sheep

wolf

batter

duck

splat

woodchop

beam

helicoptor

thunder

zap

boom

klaxon

tiger

bop

laugh

warp

cow3

pig

whoosh

Look for more when


youre coding at
bitsbox.com!