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.
Create a mouse-controlled circle.
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.
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.
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:
def mousePressed(e)
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
What part of the project are you stuck on?