How to resolve the algorithm Koch curve step by step in the JavaScript programming language
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