Javascript logo Try Hatch: Hold a Ball




    Project Description

    Create a mouse-controlled circle.

    Component 1: Mouse-Controlled Ball
    English Description
  1. Type What You See
    var draw = function() {
        background(120, 240, 51);
        fill(0, 0, 0);
        ellipse(mouseX, mouseY, 50, 50);




    Change The Colours

    100 Points
    1 Star
    Try changing both the colour of the ball and the background colour.
    Get a Hint

    Create A Second Ball

    100 Points
    1 Star
    Have the second ball appear separately from the first ball.
    Get a Hint

    Turn The Ball Into A Smiley Face

    300 Points
    3 Stars
    All parts of the smiley face should follow the user's mouse.
    Get a Hint




Write down your thoughts and plans, use it as a scratch pad for unsaved work. Your teacher will be able to see what you write here.


Canvas is not supported in your browser.

A finished Try Hatch: Hold a Ball example

This project was added to your portfolio. Would you like to go see it?

This project was marked as finished, but is not listed in your portfolio.

This project was added to your portfolio. Would you like to go see it?

This project was marked as finished, but is not listed in your portfolio.

Are you sure you want to delete this project? You cannot undo this action.

You must enter at least 30 characters of code before you can mark your project as finished.

Your code

Solution code

You can now use Python and p5.js functions in the IDE. Here is an example:

def draw():
    background(255, 155, 10)
    ellipse(mouseX, mouseY, 50, 50)

There are a few issues that we know about:

  1. getImage currently does not work.
  2. User events require an event argument. Eg, def mousePressed(e)
  3. Some python builtins override the p5 builtins

Features like project screen shots, canvas tools, Python documentation and Type What You See instructions will be added very soon.

If you have any issues or would like to report a bug please contact us at

Project Points Earned

Okay, let’s see what you have learned:


Great work!

Your creativity points will be awarded once your project is re-evaluated!

Ready to pick your next project?

Go to Dashboard

What part of the project are you stuck on?

We've sent this project to the Hatch Team for feedback.
In the meantime here's 4 more projects you can try!

Back To Project Library

This is your Integrated Development Environment (IDE). This is where you will get instructions for your project and code it.

Click on the highlighted code in Type What You See to get an explanation of the code. Click the Do More Research button to go to the Hatch Reference Manual for more help.

The Explain Code button in Type What You See gives you a more detailed explanation for each line of code and what it does.

The Research button takes you to the Hatch Reference Manual for coding help.

The Images button takes you to a collection of images you can use in your project.

In the middle is the text editor where you type the code. Each line of code is numbered. When there is an error in your code like a typo, missing semicolon ; , or bracket () { }, a red box with an X or a yellow triangle with an ! will show up.

There are 3 buttons in the top right corner.

Example: Shows an example of what the finished project should look like.

Feedback: Where replies and comments from coaches can be read.

Help: Send a message to a coach if you have a question or need help on your project.

All projects are automatically saved. You can also click the Save button.

The Take a Screenshot button takes a photo of your project to show in your project library.

When you are done your project, click the I’m Done button to submit it. A coach will then mark and give feedback on your project.

What are Challenges?

Challenges let you be more creative with the project and make it your own. When you complete a project, you get challenge points that can help you level up.

Stars and Points

The number of stars represents how hard a challenge is. The harder the challenge, the more points you will get.


If you’d like some help with starting a challenge, click the Get a Hint button and you will see a hint appear.

Submitting a Challenge

After you’ve finished the challenge, click Submit to send it off for a coach to review it.

You've completed your project!

Project Points Earned

Hatch Coaches will give you feedback soon.

You've completed your challenge!

Points Earned

Hatch Coaches will give you feedback soon.