 |
| Moving Eyes! Hi !
In this tutorial you will be able to take a face pic of your choice and make its eyes follow the mouse.
Get Started by clicking the "Start" button now!
|
Moving Eyes!
Hi !
In this tutorial you will be able to take a face pic of your choice and make its eyes follow the mouse.
Get Started by clicking the "Start" button now!
Choose A Face
Choose any face from the ones shown below, or upload your own.
--OR--
Upload Image
Mark The Eyes
Drag the two ovals onto the eyes of the face.
Make sure they are at the exact positions on the eyes.
Transparent Eyes
Cool! The eyes have now been highlighted with a purple color.
In the next steps you get to write some code to adjust the sizes and the angles of the eyes!
Click "Next Step" when you're ready!
Adjust the Angles of the Eyes
Do the angles of the eyes need adjusting?
If you think so, simply write these code lines in the code editor below and click the Run button.
Tinker with the angle values as much as you want till the eyes are positioned just the way you want them.
Adjust the Sizes of the Eyes
Do you want bigger or smaller eyes?
Type in these code lines to change the width and height of the eyes.
Use positive numbers to increase the sizes and use negative numbers to reduce the sizes of the eyes.
Select Your Eyes
Click on the eye of your choice to select it.
The chosen eyes will appear on the face.
Rotate the Eyes!
It's time to animate the eyes!
This line of code makes the eyes go round and round.
Type it in and run it below to test it out.
Eyes Following the Mouse!
You're almost there!
Now let's write some code to make the eyes follow the mouse.
This line of code makes the eyes follow the mouse.
Run it and see the magic!
Add A Message
How about making your face say a line when the mouse is clicked?
This line of code displays a line of text when the mouse is pressed.
Customise the "Say" line in the code to get the face to say the message of your choice.
Set size and color of the message
How about making your face say a line when the mouse is clicked?
This line of code displays a line of text when the mouse is pressed.
Done!
Congratulations!
You have just created your own custom animation!
Let everyone know by sharing your masterpiece with the world!
Submit your animation in the gallery by clicking the button below:
Submit To Gallery
Finished
X
Please wait while we submit your entry.
X
Oops!
You typed in something wrong.
Refer the correct lines and try again!
X
Please complete this step before proceeding to the next one.