Javascript logo Try Hatch: Hold a Ball

Instructions

Challenges

Notes

    Project Description

    Create a mouse-controlled circle.

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

Instructions

Challenges

Notes

    Change The Colours

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

    Create A Second Ball

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

    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
    Submit

    Add A Semitransparent Background

    800 Points
    8 Stars
    Give the ball a motion blur by adding in a semi-transparent background!
    Get a Hint
    Submit

Instructions

Challenges

Notes

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.

Saved

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

var draw = function() {
    background(120, 240, 51);
    fill(0, 0, 0);
    ellipse(mouseX, mouseY, 50, 50);
};

How to Use:

Step 1. Type ALL your code.

Step 2. RED text shows places where you made a mistake.

Step 3. GREEN text shows lines of code you haven't yet typed in.

Step 4. When your code lines up perfectly, a green "Submit Project" button will appear.

Project Points Earned

Okay, let’s see what you have learned:

/3

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?

Do you need some help?

Free 1:1 Live Coaching Session


About this meeting

  • 1. Learn how to use Hatch Coding
  • 2. Solve individual coding problems
  • 3. Explore the Project Library (350+ themes, 100s of projects)

Go through the tutorial


What is in the tutorial

  • 1. Introduces you to Hatch Platform
  • 2. Learn how to start coding right away
  • 3. Access to a video to help you through the first project

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

A Certified Hatch Coach walks you through how to use the Hatch platform!

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.

Hints

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 first project!
Now let's finish a challenge to make the project your own!

Project Points Earned

Hatch Coaches will give you feedback soon.

You've completed your first challenge!

Points Earned

Hatch Coaches will give you feedback soon.