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
