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 Ball

    100 Points
    1
    Change the ball to your own image
    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?

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 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 challenge!

Points Earned

Hatch Coaches will give you feedback soon.

Check your code so that it’s exactly the same as the example

Save My Progress

Make what you like and help me Hatch

Awesome Job! Now you get to customize to what YOU choose.

+100 Points

Let's change Hold a Ball to
Hold !

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

        

You've completed your first challenge!

+100 Points

Hatch Coaches will give you feedback soon.

imageMode(CENTER); var img = getImage("IMAGE_CODE"); var draw = function() { background(255, 255, 255); image(img, mouseX, mouseY, 150, 150); };