Rainbow Hopper explainer

I need help with rainbow hopper

Hi,

Have you looked at the explainer page?

–Frankie

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

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

2 Likes

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

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

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
1 Like

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

1 Like

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

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

2 Likes

@Grasshopper_Ben I’ve had a go at reproducing Frankie’s code for two rows of boxes. The animation is not quite smooth, but that is perhaps due to lag in my connection.

Also, I’m guessing that Frankie meant to draw another set of seven boxes after location is reset to 0. Here is my code:




I tried figuring out where the grasshopper comes from. Is it correct that the jump function call includes the aesthetics of the grasshopper, and all of its attributes, while the boxes get drawn completely separate and independent of the grasshoppers’ movements?

1 Like


I need help plz

Hey there, try deleting location + (location = 30) and replace it with location = location * 30

Hope this helps!
Ben

1 Like

Thanks a lot for this

1 Like

Thank you so much. I completed this puzzle