Alternating Circles and Squares Increasing by One Solved with For Loops Using JavaScript
How I Worked Through Fixing A JavaScript Problem in The CodeHS Curriculum
I am cracking the assignment of coding a program that can alternate between circles and squares on a 1000-millisecond timer increasing the shapes by one on each iteration with JavaScript using For Loops.
The For Loops are not working correctly. I am writing this during the actual coding session in which I am attempting to fix the errors.
var DELAY = 1000;
var CIRCLE_RADIUS = 25;
var SQUARE_SIZE = 50;
var BUFFER = 50;
var HIGH_X = getWidth() - BUFFER;
var LOW_X = BUFFER;
var HIGH_Y = getHeight() - BUFFER;
var LOW_Y = BUFFER;
var counter = 1;
var circle;
var square;
var numShapes = 1;
function start() {
setTimer(alternateAddOne, DELAY);
}
function alternateAddOne() {
for(var i = 0; i < numShapes; i++){
circle = new Circle(CIRCLE_RADIUS);
circle.setPosition(Randomizer.nextInt(LOW_X, HIGH_X),
Randomizer.nextInt(LOW_Y, HIGH_Y));
circle.setColor(Randomizer.nextColor());
add(circle);
}
if(numShapes % 2 == 0) {
for(var i = 0; i < numShapes; i++){
square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE);
square.setPosition(Randomizer.nextInt(LOW_X, HIGH_X),
Randomizer.nextInt(LOW_Y, HIGH_Y));
square.setColor(Randomizer.nextColor());
//counter += 1;
numShapes += 1;
add(circle);
add(square);
The code above only produces circles and they do not increase in number with each iteration of the timer.
My initial thought was an If Statement in the function “aleternateAddOne,” would create a square, but it does not seem to recognize the instruction I’ve given. I was able to correctly code the 50-pixel buffer, though I am unsure if it’s the solution.
I am sure a seasoned programmer can see my errors, but my hope in writing this out and sharing my next move will help me understand where I went wrong and learn more in my self-taught journey…
These are the instructions from Code HS Increasing Number of Shapes Challenge:
Write a program that alternates drawing circles (radius of 25) and squares (side length of 50) to the screen at random positions using a timer.
Increase the number of shapes being drawn by one on each iteration. (ie: Start by drawing 1 square to the screen. Then draw 2 circles followed by 3 squares, 4 circles, etc.)
All shapes should have a random color. They should fit on the canvas with a buffer of 50 pixels on each side (ie: no shapes should be within 50 pixels of the canvas borders.)
Hint: The modulus operator may be helpful when trying to alternate between shapes!
The highlighter portion is why I wrote the For Loop this way.
What I Tried to Correct The Code
First I tried moving the If statement to the top For Loop and changed my indentations. I made these changes after reading the MDN Web Docs on For Loops. My code wasn’t inside of the For Loops properly.
This did not work.
var DELAY = 1000;
var CIRCLE_RADIUS = 25;
var SQUARE_SIZE = 50;
var BUFFER = 50;
var HIGH_X = getWidth() - BUFFER;
var LOW_X = BUFFER;
var HIGH_Y = getHeight() - BUFFER;
var LOW_Y = BUFFER;
var counter = 1;
var circle;
var square;
var numShapes = 1;
function start() {
setTimer(alternateAddOne, DELAY);
}
function alternateAddOne() {
for(var i = 0; i < numShapes; i++){
if(numShapes % 2 != 0)
circle = new Circle(CIRCLE_RADIUS);
circle.setPosition(Randomizer.nextInt(LOW_X, HIGH_X),
Randomizer.nextInt(LOW_Y, HIGH_Y));
circle.setColor(Randomizer.nextColor());
add(circle);
}else{
for(var i = 0; i < numShapes; i++){
square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE);
square.setPosition(Randomizer.nextInt(LOW_X, HIGH_X),
Randomizer.nextInt(LOW_Y, HIGH_Y));
square.setColor(Randomizer.nextColor());
counter += 1;
numShapes += 1;
add(square);
}
}
I got this error and I didn’t know how to overcome it…
SyntaxError: Failed to execute 'appendChild' on 'Node': Unexpected token 'else'
at 31:9
But after another close look, I saw I forgot a bracket after the If Statement…
The result, however, was still the same. There were only single circles and no alternating squares on each iteration.
I Figured Out The Solution
I was going to split the function “alternateAddOne” into two separate functions, one for the circles and one for the squares.
But I decided to move the counter and the numShapes variables instead…
And it actually worked!!! I gave a really loud shout, to be honest.
I did find that my border was off a bit, I fixed it as much as I could.
This is the final code:
var DELAY = 1000;
var CIRCLE_RADIUS = 25;
var SQUARE_SIZE = 50;
var BUFFER = 50;
var HIGH_X = getWidth() - (BUFFER + BUFFER);
var LOW_X = BUFFER + BUFFER/2;
var HIGH_Y = getHeight() - (BUFFER + BUFFER);
var LOW_Y = BUFFER + BUFFER/2;
var counter = 1;
var circle;
var square;
var numShapes = 1;
function start() {
//The assignment did not call for a stop timer
setTimer(alternateAddOne, DELAY);
}
function alternateAddOne() {
//function for the circles
//circles will appear on the even count
for(var i = 0; i < numShapes; i++){
if(numShapes % 2 == 0) {
circle = new Circle(CIRCLE_RADIUS);
circle.setPosition(Randomizer.nextInt(LOW_X, HIGH_X),
Randomizer.nextInt(LOW_Y, HIGH_Y));
circle.setColor(Randomizer.nextColor());
add(circle);
} else {
//This is the code for the squares
//squares will appear on the odd count
for(var i = 0; i < numShapes; i++){
square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE);
square.setPosition(Randomizer.nextInt(LOW_X, HIGH_X),
Randomizer.nextInt(LOW_Y, HIGH_Y));
square.setColor(Randomizer.nextColor());
add(square);
}
}
}
counter += 1;
numShapes += 1;
}
Conclusion:
I don’t know if this is the best solution, but it works and it’s workable code.
I moved the counter and the numShapes variables because they seemed to be inside the second For Loop. I figured they could not increase/execute being inside of the For Loop.
I reasoned it would make more sense if the program first finished executing the For Loops, if, and else statements, and then increment the counter and numShapes variables. I hoped this would make the program work. And it did!
It took me 3 days a total of about 5 hours(this is a guess, I didn’t actually time the sessions over the three days).
