Rainbow Hopper explainer

#22

I need help with rainbow hopper

#23

Hi,

Have you looked at the explainer page?

–Frankie

#24

How come the delay doesnt get longer if delay is 17 * 30 and then *60, *90…?

#25

The delay actually does get longer, the reason the animations seem to be evenly spaced is because they all start their delay timers at about the same time. When you run the code, each drawSquare() runs right after the previous one; the whole thing probably takes less than a millisecond.

red:    17*0   =  0ms
orange: 17*30  =  510ms
yellow: 17*60  = 1020ms
green:  17*90  = 1530ms
blue:   17*120 = 2040ms
indigo: 17*150 = 2550ms
violet: 17*180 = 3060ms

The “17” multiplier is used to get the delay close to 0.5 seconds per box. A more precise number would be 16.666…

–Frankie

#26

I Couldn’t get to write or tap the colors and blank space in the a draw square box please I Need Help. I Don’t Know What I Am doing Wrong

#27

Perhaps you deleted the color parameter inside the drawSquare() function declaration?

If you have function drawSquare(__) {, that means when you call the drawSquare() function, it won’t use any input. You want to have function drawSquare(color), so that you can send an input to the drawSquare() function call.

–Frankie

#28

So I’m messing with this code trying to put a second line of colors below the first. I have changed the ‘y’ but nothing happens. I can change the location to 210 and print a consecutive line but can’t get one below. I know this isn’t part of the exercise but it would be good information.

  • Thank you
#29

It’s awesome that you’re expanding on the puzzle : )

The code for the grasshopper animation is hidden, so you won’t be able to make that jump down a row within this puzzle. But it is possible to make boxes on a different row.

The main idea is you need to calculate what the 'x' and 'y' value for each box will be. Since each box is 30 pixels wide and tall, you increase x by 30 to get the space 1 to the right. Similarly, the space 1 box down would mean increasing 'y' by 30.

You can keep track of which row you’re on by making a new variable called row that starts as 0. And inside of the function, change ('y', 50) into ('y', 50 + row).

Then, when you want to change rows, you can increase the row value by 30 and set location (which is really just the ‘x’ coordinate) back to 0.

This will put the boxes where you want them, but they won’t pop up in the right order, this is because the delay is calculated using the location variable. What you want is to calculate the delay based on the number of boxes on the screen. Basically, count the number of boxes created and increase the delay based on that.

You can create a new variable called numBoxes and then inside the function, add 1 to it each time. Then to calculate the delay, use 17*numBoxes*30 instead of 17*location.

var location = 0;
var row = 0;
var numBoxes = 0;

function drawSquare(color) {
    svg.append('rect').transition().delay(17*numBoxes*30).attr('width',30).attr('height',30).attr('x',location).attr('y',50+row).attr('fill',color);
    jump();
    location = location + 30;
    numBoxes = numBoxes + 1;
}

drawSquare('red');
drawSquare('orange');
drawSquare('yellow');
drawSquare('green');
drawSquare('blue');
drawSquare('indigo');
drawSquare('violet');
row = row + 30;
location = 0;
drawSquare('red');

–Frankie

#30

Can someone explain me the difference between this kind jump( location = location + 30) and
jump ()
location = location + 30 ?
Thanks !

#31

Hey there,

jump();
location = location + 30;

This calls the jump() function. When the function is complete, the next line updates the location variable to be 30 more than whatever it was previously. For example, if location had the value 50, this would translate to location = 50 + 30, which means location has a new value of 80.

jump(location = location + 30);

When calling a function, arguments for the function are placed inside the parentheses. Arguments give functions extra information that they need to run properly. For example, in the code drawBox('red'), 'red' tells drawBox what color box to draw.

jump(location = location + 30) would produce an error, as the parentheses of a function call is not the correct place to update a variable.

Hope this helps! Let me know if you have any questions.
-Ben

1 Like