Animation and Games CodeHS Part 1
This deck covers key concepts and code snippets from the Animation and Games CodeHS Part 1 module, focusing on timers, drawing functions, and code reusability.
In the following code: var ball; function start(){ ball = new Circle(20); add(ball); setTimer(draw, 20); } function draw(){ ball.move(2, 2); } When will the function draw be called?
Key Terms
9.1.5 Crazy Ball
var RADIUS = 100;
var circle;
function start(){
circle = new Circle(RADIUS);
circle.setPosition(getWidth()/2, getHeight()/2);
add(ci...
9.2.5: Growing Circle
This program creates a circle that grows continuously at the center of the canvas. The circle starts with a radius of 1 ...
Related Flashcard Decks
Study Tips
- Press F to enter focus mode for distraction-free studying
- Review cards regularly to improve retention
- Try to recall the answer before flipping the card
- Share this deck with friends to study together
| Term | Definition |
|---|---|
In the following code:
var ball;
function start(){
ball = new Circle(20);
add(ball);
setTimer(draw, 20);
}
function draw(){
ball.move(2, 2);
}
When will the function draw be called? | Every 20 milliseconds |
Which statement will call a function animate every 50 milliseconds? | setTimer(animate, 50); |
9.1.5 Crazy Ball | var RADIUS = 100; |
What does this program do?
function drawCircle(x, y, radius, color){
var circle = new Circle(radius);
circle.setPosition(x, y);
circle.setColor(color);
add(circle);
}
function start(){
setTimer(draw, 50);
}
function draw(){
var color = Randomizer.nextColor();
var centerX = getWidth()/2;
var centerY = getHeight()/2;
var radius = 100;
drawCircle(centerX, centerY, radius, color);
} | Draws several randomly colored circles at the center of the canvas by drawing 1 every 50 milliseconds. |
Which statement would stop the timer in the following program?
function drawCircle(x, y, radius, color){
var circle = new Circle(radius);
circle.setPosition(x, y);
circle.setColor(color);
add(circle);
}
function start(){
setTimer(draw, 50);
}
function draw(){
var color = Randomizer.nextColor();
var centerX = getWidth()/2;
var centerY = getHeight()/2;
var radius = 100;
drawCircle(centerX, centerY, radius, color);
} | stopTimer(draw); |
9.2.5: Growing Circle | This program creates a circle that grows continuously at the center of the canvas. The circle starts with a radius of 1 and increases by 1 each timer tick. A counter keeps track of the growth, and every 10 units of radius, the circle changes to a random color. The growth continues until the radius reaches a maximum of 240, at which point the timer stops. This creates a visually dynamic effect of a circle expanding and changing colors smoothly on the screen. |
9.2.6: Paint splatter | This program creates a paint splatter effect on the canvas. Every 500 milliseconds, the splatter function runs and chooses a random color. It then draws 20 circles of random sizes between 5 and 25 pixels at random positions across the screen. Each circle is filled with the chosen color, producing a scattered, colorful “paint splatter” effect. The timer repeatedly calls this function, gradually filling the canvas with overlapping, vibrant circles to simulate splattered paint. |
Why do we want our code to be "reusable"? | All of the above |
How can we make our code reusable? | All of the above |
Which function has better reusability? | function drawRectangle(x, y, width, height, color){ |