Each component has 3 levels:
English Description tells you the main idea of the component.
Pseudocode tells you the steps to code the component.
Type What You See (TWYS) shows you the actual code.
Instructions
Challenges
Notes
-
Type What You See
var draw = function() { background(120, 240, 51); fill(0, 0, 0); ellipse(mouseX, mouseY, 50, 50); };1. var draw = function() { 2. background(120, 240, 51); 3. fill(0, 0, 0); 4. ellipse(mouseX, mouseY, 50, 50); 5. };Line 1 is the basic draw function. Everything between this line and line 5 is in a function that animates the screen. It loops 60 times a second and draws the entire canvas every time.
1. var draw = function() { 2. background(120, 240, 51); 3. fill(0, 0, 0); 4. ellipse(mouseX, mouseY, 50, 50); 5. };Line 2 colours the background by mixing colours. The first number is how much red to mix, the second number is how much green to mix, and the third number is how much blue to mix. The range is from 0 to 255. 0 is the darkest, and 255 is the lightest.
1. var draw = function() { 2. background(120, 240, 51); 3. fill(0, 0, 0); 4. ellipse(mouseX, mouseY, 50, 50); 5. };Line 3 picks a colour to use when drawing things. In this case, (0, 0, 0) means no colour at all, which means black.
1. var draw = function() { 2. background(120, 240, 51); 3. fill(0, 0, 0); 4. ellipse(mouseX, mouseY, 50, 50); 5. };Line 4 is a command to draw a shape that takes 4 parameters. In this case, the shape is an ellipse, which is a circle. The first two parameters show where on the screen the shape is, first left to right and then top to bottom. The range for both is 0 to 400. The second two parameters give you the width and then the height of the object.
1. var draw = function() { 2. background(120, 240, 51); 3. fill(0, 0, 0); 4. ellipse(mouseX, mouseY, 50, 50); 5. };Line 5 closes off the function from line 1. Always remember to have closing brackets for every function.
Project Description
Create a mouse-controlled circle.
Component 1: Mouse-Controlled Ball
English Description
Pseudocode
Instructions
Challenges
Notes
Change The Colours
100 Points
1 Star
Try changing both the colour of the ball and the background colour.
Create A Second Ball
100 Points
1 Star
Have the second ball appear separately from the first ball.
Turn The Ball Into A Smiley Face
300 Points
3 Stars
All parts of the smiley face should follow the user's mouse.
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
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.
No feedback on this project yet.
Your code
Solution code
You can now use Python and p5.js functions in the IDE. Here is an example:
noStroke()
def draw():
background(255, 155, 10)
ellipse(mouseX, mouseY, 50, 50)There are a few issues that we know about:
- getImage currently does not work.
- User events require an event argument. Eg,
def mousePressed(e) - 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 success@hatchcoding.com
Project Points Earned
Great work!
Your creativity points will be awarded once your project is re-evaluated!
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!
You've completed your project!
Project Points Earned
Hatch Coaches will give you feedback soon.