Fractalization level help needed


#1

I just don’t get it…
I powered my way through the other flower/fractals levels, even as much to understand it enough to help explain it to someone else…
But I am just lost and frustrated at this point… any help/pointers would be welcome.

Code and screenshot below…

// Check the guide for the description of the problem
// Here are some functions to help draw the curves.

function degreesToRadians(degrees) {
    // All vector operations require working in radians rather than degrees.
    return Math.PI / 180 * degrees;
}    

this.koch = function(start, end) {
    // This function will draw a Koch Curve between two Vector positions
    //this.say(String(end) + " " + String(start));
    // Start by creating a vector from start to end using Vector.subtract.
    var full = Vector.subtract(end, start);
    
    // Use the magnitude of the vector to check for the stop condition.
    var distance = full.magnitude();
    if (distance < 4 ) {
        // Move into position and draw the line, don't forget to toggle flowers properly.
        this.toggleFlowers(false);
        this.moveXY(start.x, start.y);
        this.toggleFlowers(true);
        this.moveXY(end.x, end.y);
        return;
    }
    
    // Need to draw 4 shorter Koch curves with sides 1/3 the length.
    // We will calculate the 3 intermediate points, A, B, & C.
    
    // We just need the point that is one-third of the full Vector from the start Vector.
    var third = Vector.multiply(full, 1 / 3);
    var A = Vector.add(start, third);
    
    // This one needs to be rotated 60 degrees from A but the same length.  Use rotate and add to get B.
    var rotate = Vector.rotate(third, degreesToRadians(60));
    //rotate = Vector.multiply(rotate, 1);
    var B = Vector.add(rotate, A);

    // This point works out to adding another third to A.
    // ?? Do what ??
    //B = Vector.add(third, A);

    
    // Now we can draw the 4 curves connecting start, A, B, C, and end.
    this.koch(start, A);
    this.koch(A, B);
    this.koch(B, A);
    this.koch(A, end);
};

var whiteXs = [new Vector(6, 6), new Vector(74, 6), new Vector(74, 61), new Vector(6, 61)];

this.setFlowerColor("blue");
this.koch(whiteXs[0],whiteXs[1]);
this.koch(whiteXs[1],whiteXs[2]);
this.koch(whiteXs[2],whiteXs[3]);
this.koch(whiteXs[3],whiteXs[0]);


#2

The base case looks right (though it should be distance < 3).

You may want to play around with getting the angles right by setting the base case to something like distance < 68/3 so you have a curve that’s made up of just four lines, which is simpler to work with.

(Note: below I use π/3 radians in place of 60 degrees. You can use this in code with Math.PI / 3.)

  • The first intermediate point (“A”) is the third vector (no rotation) added to the start point.
  • The second intermediate point (“B”) is the third vector rotated π/3 radians clockwise added to the first intermediate point,
  • The third intermediate point (“C”) is the third vector rotated π/3 radians counterclockwise (or -π/3 radians) added to the second intermediate point.