Do these now. Follow the rules in the first document.
TASK: Make a spin-off of this project "box and ribbon".
TASK: Add a comment with your name at the top.
TASK: Save the project..
TASK: Define a function called drawBox which contains all the existing lines of code which draw the coloured box.
TASK: Define two parameters in the function, to allow the caller to specify the box's position.
TASK: Call your new function once, to draw a box at position 100, 200.
TASK: Change your code to use a loop to draw three boxes in a row, using the following positions:
- x=100, y=200
- x=200, y=200
- x=300, y=200
Note that the y value of each box does not change.
You MUST use a loop for this task.
TASK: Tidy and indent your code correctly, according to what you remember from "writing clean code".
Now, your image should look something like this:
Continue with the following bonus tasks if you have time. Do them in order.
BONUS TASK: paste the following function definition randomColor() into your project, at the top:
var randomColor = function(){
var color1 = color(144,213,188);
var color2 = color(240,133,15);
var color3 = color(249,205,29);
var list = [color1, color2, color3];
return list[floor(random(list.length))];
};
You do NOT need to understand this code.
You will NOT need to edit this code.
BONUS TASK: make drawBox use random colours! Edit the drawBox function.
Instead of passing 3 parameters (r,g,b), you must pass only the value returned from a call to randomColor().
This means that each element of each box should now have a random colour.
BONUS TASK: Instead of 1 row of boxes, make 3 rows of boxes.
You must use a nested loop to do this.
The rows should be at y=100, y=200, y=300.
Now your image should be laid out like this (though the colours will be different):
