Projects

Silly eyes
Create your own app with a character whose eyes
follow the mouse pointer

Step 1 You will make

Design and create a silly eyes character 👀. The character’s large, silly eyes will follow the mouse pointer to bring
your character to life.

You will:
Make a project that is fun to play with
Create your own character
Code your project using sprites, scripts and loops
Get ideas 💭
Design and create a silly eye character 👀. The character’s large, silly eyes will follow the mouse pointer to bring
your character to life. To get more ideas, See inside example projects in the ‘Silly eyes — Examples’ Scratch studio:
https://scratch.mit.edu/studios/29029028
Step 2 Your character

Use your design skills to add a character sprite and suitable

backdrop.

Design means deciding on the way that a project looks and making decisions about what it does.

Open the starter project

Open the Silly eyes starter project (https://scratch.mit.edu/projects/582221984/editor). Scratch

will open in another browser tab.

Working offline
For information about how to set up Scratch for offline use, visit our ‘Getting started with Scratch’
guide (https://projects.raspberrypi.org/en/projects/getting-started-scratch/1).
⏱️Not much time? You can start from one of the examples (https://scratch.mit.edu/studios/29029
028).
Choose your sprite and backdrop

Choose: Add a sprite and a backdrop for your silly eyes project.
What does your character look like? A person 🧜🏽‍♀️, animal 🐶 or object 🧸.
Where do you want your character to live? Somewhere sensible 🏠 or silly 🎪.

Add a sprite from the Sprite Library

Click on Choose a Sprite to open the Sprite Library:

You can search for a sprite, or browse for one by category. Click on a sprite to add it to your project.

Add a backdrop from the Backdrop Library

Click on Choose a Backdrop in the bottom right-hand corner of the screen to open the Backdrop
Library:
You can search for a backdrop, or browse for one by category. Click on a backdrop to add it to your
project.

Create backdrops and sprites using shapes

You can create backdrops and costumes for sprites in the Paint editor, using just shapes.
Go to the Choose a Sprite or Choose a Backdrop menu and choose the Paint option:

Select which tool(s) to use to make the shape(s) that you

want:
Circle: Click on the Circle tool to draw a circle. Press and hold the Shift key on your keyboard to
draw a perfect circle.

Rectangle: Click on the Rectangle tool to draw a rectangle. Press and hold the Shift key to
draw a square.
 Triangle: Use the Rectangle tool to draw a rectangle or a square. Click on the Reshape tool and
select the corner that you want to remove. Click on the Delete tool to turn your shape into a
triangle.

You can use the Fill tool to change the colour of a shape:

You may need to use the Forward and Backward tools to move your shapes forward or backward so
that they are positioned correctly within your image:

You can select all the shapes and Group them together so that you can adjust them or move them as
one shape:
 Here is an example of a sprite created with the Circle and Rectangle tools:
Pig: See inside (https://scratch.mit.edu/projects/495903163/editor)
Remember to name the costumes and backdrops that you create in the Paint editor.
Get a surprise sprite
Not sure which sprite to choose? Go to the Choose a Sprite menu and choose the Surprise option to
add a surprise sprite to your project.

Tip: If you create your own sprite in the Paint editor, don’t add eyes yet, because they need to be
separate sprites.

Resize your sprite

In the Sprite pane, change the number in the Size property to a number that makes your character fill
the Stage.
Look at the Stage. You will see your large character and chosen backdrop.
Step 3 Make silly eyes

Make the silly eyes! Each eye needs to be a separate sprite so that it can move separately.

Draw an eyeball

Use the Paint option to create a new sprite.

The Paint editor will open, which will allow you to create your Eyeball sprite’s costume.

It is really important that:

The black pupil and coloured iris face to the right-hand side of the Eyeball costume
The Eyeball costume is centred
Choose: Draw an eyeball or start from a round sprite.

Draw an eyeball in the Paint editor

Select the Circle tool.

To draw a perfect circle, press and hold the Shift key on the keyboard while you draw with the Circle
tool. If you are using a tablet, try to get as close to a perfect circle as you can.
In this example, we set the Outline to black and the Fill colour of the eyeball to white:

Use the Fill and Outline colour choosers to choose colours. To make black, slide both the Saturation
and Brightness to 0. To make white, slide the Saturation to 0 and the Brightness to 100.
Make sure that the eyeball is centred — move it so that the blue cross in the costume lines up with the
grey crosshair in the Paint editor.

Draw a smaller perfect circle and position it on the right-hand side of the eyeball:
You could also draw circles inside circles, or use colour, to get different effects.
Turn a round costume into an eyeball
There are costumes in Scratch that you can edit to make silly eyes for your character.

Click on the Choose a Costume icon to see the library Scratch costumes.

Click on the costume you want to add to your sprite.

Use the Paint editor to change the costume. You could add circles, choose a different Fill colour, or
remove parts of the costume to turn it into a silly eye.
Make sure that the eyeball is centred — move it so that the blue cross in the costume lines up with the
grey crosshair in the Paint editor.
 Tip: The black pupil and coloured iris need to be positioned on the right-hand side of the costume so
that the Eyeball follows the mouse pointer.

Name your sprite Eyeball in the Sprite pane.

Drag the Eyeball sprite to position it on the Stage, and change its size to fit your character.

Now, make the eyeball look at the mouse-pointer so that the user can interact with your project.

User means the person using the project (not just making it), and user interaction is how the project reacts
to the user doing things such as moving the mouse and clicking on the screen.
Code your eyeball

Add a script to set the rotation style to all around to make the eyeball point towards the
mouse pointer forever.

Make a sprite point towards the mouse pointer

when clicked

set rotation style all around

forever

point towards mouse-pointer

Add another eyeball

To add another eye, right-click (or on a tablet, tap and hold) on the Eyeball sprite in the Sprite list and
choose duplicate.

Duplicate a sprite
Right-click (or on a tablet, tap and hold) on your first sprite in the Sprite list below the Stage:

Select duplicate. This will create a copy of your first sprite, with the suffix “2”:

Rename your sprite:

Your sprite’s name will change in the Sprite list:

Your second sprite has exactly the same code as your first sprite. Do not run the program until you
have started to change the second sprite’s code — you might not see the second sprite because it
might be positioned underneath the first sprite.

Test your silly eyes

Test: Click on the green flag and test your project. Do the silly eyes follow your mouse pointer as you
move the mouse around?

Tip: You don’t have to keep the mouse pointer on the Stage. The eyes will follow your mouse pointer as
you carry on coding in Scratch.
Debug: You might find some bugs in your project that you need to fix. Here are some common bugs:

The eyes do not move

Make sure that you have added the code to the Eyeball sprites and clicked on the green flag. Your
code will not run until you click on the green flag.

The eyes point away from the mouse

In the Eyeball costumes, check that the pupil is on the right-hand side (past the blue cross in the
middle of the costume).
The Eyeball sprites have the all around rotation style, so they can rotate in any direction.

When the Eyeballs rotate to point towards the mouse-pointer, the pupils will be closest to the
mouse pointer.

The eyes jump around the Stage

Check that the Eyeball costumes are centred. To centre a costume, drag the costume so that the
blue cross in the costume lines up with the grey crosshair in the Paint editor.
 The character is in front of the eyes
When you drag a sprite to position it on the Stage, it moves in front of the other sprites.
To get your character sprite to stay at the back, use:

when clicked

forever

go to back layer behind all other sprites

The character and the eyes follow the mouse pointer

Did you add the eyes as costumes for your character instead of as costumes for separate sprites?
You can fix that.
One way to fix it is to duplicate the character sprite and then rename the copy Eyeball. Then,
delete the Eyeball costumes from the character sprite, and delete the character costumes from the
Eyeball sprite. Then, you can duplicate the Eyeball sprite and name the copy Eyeball 2.

The code to point towards the mouse-pointer should be on the Eyeball sprites and not the
character sprite.

The character follows the mouse pointer (and the eyes do not)
You need to add the point towards code to the individual Eyeball sprites, not your character
sprite!

To copy the code, you can drag the code from the Code area for your character to the Eyeball sprites
in the Sprite list.
You will also need to delete the script from the character sprite. To do this, drag the script to the
Blocks menu.
You might find a bug that is not listed here. Can you work out how to fix it?
We love hearing about your bugs and how you fixed them. Use the Send feedback button at the bottom
of this page and tell us if you found a different bug in your project.
Step 4 Sprite effects

You can make your character sprite and silly eye sprites
change their Looks when you click on them.

Silly eye effects

Add a when this sprite clicked block to your Eyeball sprite.

Can you work out what code block you would put underneath to change your sprite’s eye colour when
you click on the Eyeball sprite?

Change graphic effects when the sprite is clicked

when this sprite clicked

change color effect by 25

If you want both eyeballs to have the same effect, you will need to copy your script to the Eyeball 2
sprite.

Copy code from one sprite to another

You can copy code from one sprite to another sprite in the Sprite list:

Both sprites will have the code blocks that you have copied. If you are moving the code from one
sprite to the other, you can delete the code from the first sprite after you have copied it to the other
sprite.
Character effects

Click on your character sprite in the Sprite list, then click on the Code tab.
Add the same script as you used to change the eye colour. Which graphic effects do you want to change
for your character?
Choose: Choose an effect in the drop-down menu within the change color effect by block.
Experiment with the numbers and effects until you have a change that you like.

Use graphic effects

Rooster effects: See inside (https://scratch.mit.edu/projects/435730522/editor)

The set color effect to and change color effect by blocks both have drop-down menus
in which you can choose from a range of different graphic effects that can be used to change your
sprite’s appearance:
color: from 0 to 199 (bigger numbers will wrap around, so 200 is the same as 0)
fisheye: 0 means no effect, bigger numbers cause a bigger ‘fisheye’ effect, and negative
numbers cause a reverse ‘fisheye’ effect
whirl: 0 means no effect, big numbers make a big whirl to the left, and big negative numbers
make a big whirl to the right
pixelate: 0 means no effect, and bigger numbers create more pixels
mosaic: 0 means no effect, and bigger or negative numbers affect the number of copies
brightness: 0 means no effect, numbers up to 100 make the sprite lighter, and negative
numbers down to -100 make the sprite darker
ghost: 0 means no effect, and numbers up to 100 make the sprite more transparent

Try to set the different effect values to see what each one does. Explore how different effect changes
make your sprite look.

set whirl effect to 100

set pixelate effect to 50

Tip: A color effect of 225 is the same as a color effect of 25, so you can keep changing the
colour. For other graphic effects, no other changes will be made after you reach the maximum or
minimum number for the effect.
 forever

change color effect by 25

wait 0.5 seconds

Use the clear graphic effects block to start again. Clicking on the green flag also clears all
graphic effects.

To set a graphic effect for a sprite when the project is started, place a set graphic effect to
block under a when green flag clicked block:

when clicked

set ghost effect to 25

Tip: You can also set and change graphic effects for the Stage.

An accessory
Now, add an accessory, such as a hat, that changes when you click on it — use the next costume block.
Choose: Add an accessory change or costume change of your choice.

Make a sprite change costume when clicked

Gobo with costume accessories: See inside (https://scratch.mit.edu/projects/496334057/edit
or)
Some sprites already have a choice of costumes.
You can add code to make a sprite’s costume change to the next costume when you click on the
sprite:

when this sprite clicked

next costume

If your sprite does not have a choice of costumes, or you want to add more, you can add any costume to
a sprite.

Add a costume to a sprite

Click on the Costumes tab and then on Choose a Costume to add any costume to the sprite from
the Costume Library:

You will need to position and resize the added costume in the Paint editor, to match the sprite’s other
costumes.
 Tip: If you position a sprite on the Stage and then change its costume, the sprite might appear to
‘jump’ or change size. You will need to position and resize the costumes in the Paint editor so that
they all appear in the right position on the Stage.

Test: Work on your sprites until they interact in the way that you want.
Tip: Try one change at a time and test what it does so that you can easily spot each change and undo
anything that you do not like.

Debug:
If you add code to the wrong sprite, you can fix that:

Copy code from one sprite to another

You can copy code from one sprite to another sprite in the Sprite list:

Both sprites will have the code blocks that you have copied. If you are moving the code from one
sprite to the other, you can delete the code from the first sprite after you have copied it to the other
sprite.
If you need to, you can reset the graphic effects:

I don't want these graphic effects

To reset the graphic effects at any time, click on the clear graphic effects block in the Looks
blocks menu. Clicking on the green flag also clears graphic effects.

clear graphic effects

Test: Test your project again, but this time, make it full-screen so that you can see how it will appear to
someone looking at it.

Run a Scratch project in full-screen mode

To run your project in full-screen mode in Scratch, go to the area above the Stage and click on the
icon with four arrows that point outwards. This is the Full Screen Control icon:

To exit full-screen mode, click on the Full Screen Control icon again. It will have four arrows that
point inwards.
By making your project full-screen, you are seeing what you have made from the perspective of a user who is
playing with your project. User interaction is important in digital making.
Upgrade your project
If you have time, you can upgrade your project.
Add Stage effects
Make your project do something when you click on the Stage.

Click on the Stage pane and then on the Code tab to add code to the Stage.

Choose: Choose what you want to change when the Stage is clicked.

Change graphic effects when the Stage is clicked

when stage clicked

change color effect by 25

Switch backdrop when the Stage is clicked

when stage clicked

next backdrop

Add more
You could also add:
More body parts
More sprites with silly eyes
More backdrops
More accessories, or add more costumes to your accessories

This Sporg character also has arms that point towards the mouse pointer.
Sporg: See inside (https://scratch.mit.edu/projects/495865892/editor)
If you add other body parts, you will need to centre them at the point that you want them to rotate from. For
example, an arm would rotate from the shoulder.

Centre your costumes

Sprites rotate around their centre. You can see if your sprite is centred by looking at the small grey crosshair
shown in the Paint editor:

If the crosshair is not at the centre of your costume, you can use the Select tool to highlight the full costume. A
cross will then show in the centre of your highlighted costume:

You can drag the highlighted costume so that the cross in the costume aligns with the crosshair:

Occasionally, you might want to choose a point to rotate around that is not the centre of the costume. In that
case, you can align your chosen costume rotation point with the crosshair in the Paint editor:
Get ideas

Each project in the ‘Silly eyes — Examples’ Scratch studio (https://scratch.mit.edu/studios/290290

28) has a See inside link, which you can use to open the project in the Scratch editor and look at the
code to get ideas and see how the project works.

Take a look at our ‘Silly eyes — Community’ Scratch studio (https://scratch.mit.edu/studios/29120

534) to see projects created by community members.

You can also look at the remixes for the Silly eyes starter project (https://scratch.mit.edu/projects/
582221984/remixes) to see what other creators have made.

Save your project

Share and play
If you are in a club, why not share your project with friends and peers?
You could also show your family how your project works.

If you have a Scratch account, you can share your project through Scratch. You can send a link to people you
know, and the whole Scratch community will be able to find your project and try it out.

Share your Scratch project

Please make sure that you do not share any personal information about yourself when sharing your Scratch
projects.

Give your Scratch project a name.

Click the Share button to make the project public.

If you like, you can add instructions in the Instructions box, to tell other people how to use your project.

You can also fill in the Notes and Credits box: if you have made an original project, you can write some
short comments, or if you have remixed a project, you can credit the original creator.

Click the Copy Link button to get the link to your project. You can send this link to other people by email or
text, or on social media.
 Scratch provides the ability to comment on your own and other people’s projects. If you do not want to allow
people to comment on your project, you should turn off commenting. To turn off commenting, set the slider
above the Comments box to Commenting off.

Why not invite your friends to create a project? Let them know how you had fun.
If you have a Scratch account, and have shared your ‘Silly eyes’ project, keep an eye out for comments that others
may make about your creation. Feedback is a great way to reflect on your work. Ignore any comments that are
unhelpful or irrelevant.

Comments and feedback in Scratch

Scratch provides the ability to comment on your own and other people’s projects. If you do not want to allow
people to comment on your project, you should turn off commenting. To turn off commenting, go to the Project
Page and set the slider above the Comments box to Commenting off:

If you are happy and feel safe to allow people to write comments on your project, you can leave the first
comment:

If you think a comment or project is mean, insulting, too violent, or otherwise inappropriate, click the Report
button to let the Scratch Team know about it. To report a comment, click the Report button above the
comment. To report a project, click the Report button on the Project Page:

Read the Scratch Community Guidelines (https://scratch.mit.edu/community_guidelines) so that you

know how you and others can maintain a friendly and creative community.

Inspire the Raspberry Pi Foundation community with your project!

To submit your project to our ‘Silly eyes — Community’ Scratch studio (https://scratch.mit.edu/studi
os/29120534), please complete this form (https://form.raspberrypi.org/f/community-project-sub
missions).
Community submissions

Take a look at these fabulous community projects from our ‘Silly eyes — Community’ Scratch studio (h
ttps://scratch.mit.edu/studios/29120534). Click on the backdrops, eyeballs and accessories to
interact with them:
Ladybug scare See inside (https://scratch.mit.edu/projects/517735755/editor)
Click on the backdrop:
Butterfly and bear See inside (https://scratch.mit.edu/projects/569624392/editor)
Click on the bear and butterfly:

Pixel dot See inside (https://scratch.mit.edu/projects/747156758/editor)

Click on the green flag to see everything pixelate:

You can also look at the remixes for the Silly eyes starter project (https://scratch.mit.edu/projects/
582221984/remixes) to see what other creators have made.
What next?
If you are following the Introduction to Scratch (https://projects.raspberrypi.org/en/pathways/scratch-intr
o) pathway, you can move on to the Surprise! animation (https://projects.raspberrypi.org/en/projects/surpri
se-animation) project. In this project, you will make an animation of a story with a surprise.

If you want to have more fun exploring Scratch, then you could try out any of these projects (https://projects.ra
spberrypi.org/en/projects?software%5B%5D=scratch&curriculum%5B%5D=%201).

Published by Raspberry Pi Foundation (https://www.raspberrypi.org) under a Creative Commons

license (https://creativecommons.org/licenses/by-sa/4.0/).
View project & license on GitHub (https://github.com/RaspberryPiLearning/silly-eyes)