Snowflakes on the ice-help (javascript)

1

I am having a problem with my code. It runs well, does the line fractal, does the first side of the hexagonal flake, turns 60 degrees, but then it goes on forever. The next side doesn’t stop, it just continues till I hit the edge of the map.

Here's my code. 
function degreesToRadians(degrees) {
    return Math.PI / 180 * degrees;
}
this.line= function(start,end){
    var full = Vector.subtract(end, start);
    var distance = full.magnitude();
    if (distance < 4) {
        this.toggleFlowers(false);
        this.moveXY(start.x, start.y);
        this.toggleFlowers(true);
        this.moveXY(end.x, end.y);
        return;
    }
    var half = Vector.divide(full, 2);
    var A = Vector.add(half, start);
    var rotate = Vector.rotate(half, degreesToRadians(90));
    rotate = Vector.multiply(rotate, 2 / 3);
    var B = Vector.add(rotate, A);
    this.line(start, A);
    this.line(A, B);
    this.line(B, A);
    this.line(A, end);
};

this.flake = function(start, end) {
    var a = start;
    var b = end;
    for (var i=0;i<6;++i){
        var side = Vector.subtract(b,a);
        this.line(a, b);
            var rotate = Vector.rotate(side,degreesToRadians(60));
            var magnitude = rotate.magnitude();
            a=this.pos;
            b=Vector.limit(rotate,12);  
    }
};

var whiteXs = [new Vector(12, 10), new Vector(60, 10)];
var redXs = [new Vector(64, 52), new Vector(52, 52)];
this.toggleFlowers(false);
this.moveXY(12,10);
this.toggleFlowers(true);
this.setFlowerColor("blue");
this.line(whiteXs[0],whiteXs[1]);
this.toggleFlowers(false);
this.moveXY(64,52);
this.toggleFlowers(true);
this.setFlowerColor("purple");
this.flake(redXs[0],redXs[1]);
2

Personally, I am not a big fan of either the forum policy on not supplying code (as that is how most learning happens, thus the reason they supply you with starter code in most of the levels), nor these flower drawing levels.

I will suggest that it is my ignorance with the math involved that leads to my frustration. But I would also like to point out that all of the flower levels “come out of no where” both in terms of theme, as well as concepts covered. Everything else in codecombat is a general step by step progression, and then up pops a flower level.

Perhaps if there was a more in depth guide, or video to walk me through the mathematical concepts involved… I appreciate the work it must have taken to make the level, as well as the desire to help teach… but there is a gap between the programming concepts already covered and the math needed to complete the flower levels that I have to brute force my way through…

Sorry for the rant @Paul_Lum, so without just showing my code solution… I’ll try to give you the hints needed to get there.

In the this.flake function, after drawing your first line segment by calling this.line, the first step is to get a vector that is rotated from the location you are at (which is currently var b) the vector you need rotated must be the same as the one you just drew with this.line(a,b) ; how wonderful that the author has already give that vector (pre - rotation) to you with the var side… which isn’t used when you get the fresh code. (But in the original code it is before the loop, I had to move it under the loop to calculate each time, and you already have it moved into the loop as well)

Do a this.say(String(side)); to see what it is, then compare it to redXs[0] and redXs[1].
Side={x: -12, y:0, z:0} redXs[0]={x:64, y:52} redXs[1]={x:52, y:52}
Can you see how the var side is the result of a vector.subtract? Or how redXs[0] + side = redXs[1]? Or the inverse redXs[1] - side = redXs[0]?

Next put a this.say(String(rotate)); after your rotation calculation it should give you {x: -6, y:-10.39, z:0}
Where would your avatar end up if he was -6 on the X, and -10.39 on the Y from where he is currently?

You don’t need to calculate magnitude, although I understand why you did, as I went down that same path.

First set a to where you are currently (which is b), as that will be your new starting point. In your code above you are doing basically the same thing with the “a=this.pos” line. Then you need to figure out how to set b to be “the product of the var rotate and your current position”

You can use a Vector.subtract {52,52,0} - {6,10.39,0} = {46, 41.61,0} to set you var b (or new end point).

Now that you have that first rotation coded, each iteration through the for loop will give you the next correct start(a) and end(b) points for the next iteration.