Question

Instructions

Please modify your 4.2.5 Growing Circle activity on CodeHS and then submit it here.

Your circle should start being as big as the width of the screen and should decrease in size until it disappears.

Here is the code i have in growing circle so far
/* Constants */
var START_RADIUS = 1;
var INCREMENT = 1;
var CHANGE_COLORS_AT = 10;
var circle;

function start(){
circle = new Circle(START_RADIUS);
circle.setPosition(getWidth() / 2, getHeight() / 2);
add(circle);

setTimer(drawer, 50);

}

function drawer(){

circle.setRadius(circle.getRadius() + INCREMENT);

if((circle.getRadius() % CHANGE_COLORS_AT)== 0){
circle.setColor(Randomizer.nextColor());
}
if((circle.getRadius() * 2) > getHeight()){
stopTimer(drawer);
}
}

Answer 1

The circle's starting radius should be set to the screen width, and INCREMENT changed to -1 to shrink the circle. Modify the drawer function to stop animating and remove the circle when the radius is zero or less.

Step-by-step explanation:

The question relates to making modifications to a JavaScript program that uses graphics commands on the CodeHS platform. The program involves animating a circle that changes size. Currently, the code causes the circle to grow, but the student wants the circle to start at the width of the screen and shrink down to nothing.

To achieve this, the starting radius of the circle should be set to the width of the screen. The drawer function should then decrease the circle's radius by the INCREMENT value on each call until the radius is zero or less. Here's the modified code that addresses the task:

/* Constants */
var START_RADIUS = getWidth(); // Starting radius as wide as the screen
var INCREMENT = -1; // Negative increment to shrink the circle
var circle;
function start(){
circle = new Circle(START_RADIUS);
circle.setPosition(getWidth() / 2, getHeight() / 2);
add(circle);
setTimer(drawer, 50);
}
function drawer(){
circle.setRadius(circle.getRadius() + INCREMENT);
if(circle.getRadius() <= 0){
stopTimer(drawer);
remove(circle); // Optionally remove circle from canvas
}
}

The START_RADIUS is initialized with getWidth() to match the width of the screen. The INCREMENT is set to -1 to decrease the size of the circle each time drawer is called. The drawer function now checks if the radius is less than or equal to zero to stop the timer and optionally remove the circle from the canvas.