How to resolve the algorithm Koch curve step by step in the JavaScript programming language

Published on 12 May 2024 09:40 PM

How to resolve the algorithm Koch curve step by step in the JavaScript programming language

Table of Contents

Problem Statement

Draw a Koch curve. See details: Koch curve

Let's start with the solution:

Step by Step solution about How to resolve the algorithm Koch curve step by step in the JavaScript programming language

Overview

The provided JavaScript code defines several functions to generate Koch fractals, specifically Koch curves and Koch snowflakes. Koch fractals are geometric shapes with repeating patterns at different scales, resulting in intricate and self-similar designs.

Koch Snowflake

The kochSnowflake function takes an integer n representing the order of the snowflake, and two points a and b defining an equilateral triangle base. It generates a list of points representing the vertices of the Koch snowflake of order n.

Koch Curve

The kochCurve function takes the same parameters as kochSnowflake and generates a Koch curve of order n between the points ab and xy.

Equilateral Apex

The equilateralApex function takes two points p and q and returns the coordinates of the point that completes an equilateral triangle with p and q as the base.

Rotated Point and Vector

The rotatedPoint and rotatedVector functions rotate a point or vector by a specified angle theta around a given origin.

Mid-Third of Line

The midThirdOfLine function takes two points ab and xy and returns the coordinates of the second point of the three equal segments of the line between ab and xy.

SVG Generation

The svgFromPoints function takes a list of points and an integer w and generates an SVG string that can be rendered as a scalable vector graphic showing the Koch fractal defined by the points.

Helper Functions

The code also includes several helper functions for arithmetic operations, such as add, concat, zip, and zipWith.

Main Function

The main function uses the kochSnowflake function to generate a Koch snowflake of order 4 and displays it as an SVG in the console.

Source code in the javascript programming language

(() => {
    'use strict';

    // kochSnowflake :: Int -> (Float, Float) -> (Float, Float)
    //                      -> [(Float, Float)]
    const kochSnowflake = n => a => b => {
        // List of points on a Koch snowflake of order n, derived
        // from an equilateral triangle with base a b.
        const points = [a, equilateralApex(a)(b), b];
        return concat(
            zipWith(kochCurve(n))(points)(
                points.slice(1).concat([points[0]])
            )
        );
    };


    // koch :: Int -> (Float, Float) -> (Float, Float)
    //             -> [(Float, Float)]
    const kochCurve = n => ab => xy => {
        // A Koch curve of order N, starting at the point
        // (a, b), and ending at the point (x, y).
        const go = n => ([ab, xy]) =>
            0 !== n ? (() => {
                const [mp, mq] = midThirdOfLine(ab)(xy);
                const points = [
                    ab,
                    mp,
                    equilateralApex(mp)(mq),
                    mq,
                    xy
                ];
                return zip(points)(points.slice(1))
                    .flatMap(go(n - 1))
            })() : [xy];
        return [ab].concat(go(n)([ab, xy]));
    };


    // equilateralApex :: (Float, Float) -> (Float, Float) -> (Float, Float)
    const equilateralApex = p => q =>
        rotatedPoint(Math.PI / 3)(p)(q);


    // rotatedPoint :: Float -> (Float, Float) ->
    //        (Float, Float) -> (Float, Float)
    const rotatedPoint = theta => ([ox, oy]) => ([a, b]) => {
        // The point ab rotated theta radians
        // around the origin xy.
        const [dx, dy] = rotatedVector(theta)(
            [a - ox, oy - b]
        );
        return [ox + dx, oy - dy];
    };


    // rotatedVector :: Float -> (Float, Float) -> (Float, Float)
    const rotatedVector = theta => ([x, y]) =>
        // The vector xy rotated by theta radians.
        [
            x * Math.cos(theta) - y * Math.sin(theta),
            x * Math.sin(theta) + y * Math.cos(theta)
        ];


    // midThirdOfLine :: (Float, Float) -> (Float, Float)
    //                 -> ((Float, Float), (Float, Float))
    const midThirdOfLine = ab => xy => {
        // Second of three equal segments of
        // the line between ab and xy.
        const
            vector = zipWith(dx => x => (dx - x) / 3)(xy)(ab),
            f = zipWith(add)(vector),
            p = f(ab);
        return [p, f(p)];
    };


    // TEST -----------------------------------------------
    // main :: IO ()
    const main = () =>
        // SVG showing a Koch snowflake of order 4.
        console.log(
            svgFromPoints(1024)(
                kochSnowflake(5)(
                    [200, 600]
                )([800, 600])
            )
        );

    // SVG ----------------------------------------------

    // svgFromPoints :: Int -> [(Int, Int)] -> String
    const svgFromPoints = w => ps => [
        '<svg xmlns="http://www.w3.org/2000/svg"',
        `width="500" height="500" viewBox="5 5 ${w} ${w}">`,
        `<path d="M${
        ps.flatMap(p => p.map(n => n.toFixed(2))).join(' ')
    }" `,
        'stroke-width="2" stroke="red" fill="transparent"/>',
        '</svg>'
    ].join('\n');


    // GENERIC --------------------------------------------

    // add :: Num -> Num -> Num
    const add = a => b => a + b;

    // concat :: [[a]] -> [a]
    const concat = xs => [].concat.apply([], xs);

    // zip :: [a] -> [b] -> [(a, b)]
    const zip = xs => ys =>
        xs.slice(
            0, Math.min(xs.length, ys.length)
        ).map((x, i) => [x, ys[i]]);


    // zipWith :: (a -> b -> c) -> [a] -> [b] -> [c]
    const zipWith = f => xs => ys =>
        xs.slice(
            0, Math.min(xs.length, ys.length)
        ).map((x, i) => f(x)(ys[i]));

    // MAIN ---
    return main();
})();


  

You may also check:How to resolve the algorithm Simple windowed application step by step in the JavaScript programming language
You may also check:How to resolve the algorithm Ackermann function step by step in the JavaScript programming language
You may also check:How to resolve the algorithm Cistercian numerals step by step in the JavaScript programming language
You may also check:How to resolve the algorithm Stack traces step by step in the JavaScript programming language
You may also check:How to resolve the algorithm Solve the no connection puzzle step by step in the JavaScript programming language