介绍

科赫曲线（英语：Koch curve）是一种分形。其形态似雪花，又称科赫雪花（Koch snowflake）、科赫星（Koch star）、科赫岛（Koch island）或雪花曲线（Snowflake curve）。

给定线段 AB，科赫曲线可以由以下步骤生成：

• 将线段分成三等份（AC,CD,DB）。
• 以 CD 为底，向外（内外随意）画一个等边三角形 DMC。
• 将线段 CD 移去。
• 分别对 AC,CM,MD,DB 重复 1~3。

科赫雪花是以等边三角形三边生成的科赫曲线组成的。科赫雪花的面积是 $\frac{2\sqrt{3}(s^2)}{5}$，其中$s$ 是原来三角形的边长。每条科赫曲线的长度是无限大，它是连续而无处可微的曲线。

实现

JavaScript

/**
 * The Koch snowflake is a fractal curve and one of the earliest fractals to have been described.
 *
 * The Koch snowflake can be built up iteratively, in a sequence of stages. The first stage is an equilateral triangle,
 * and each successive stage is formed by adding outward bends to each side of the previous stage, making smaller
 * equilateral triangles. This can be achieved through the following steps for each line:
 * 1. divide the line segment into three segments of equal length.
 * 2. draw an equilateral triangle that has the middle segment from step 1 as its base and points outward.
 * 3. remove the line segment that is the base of the triangle from step 2.
 *
 * (description adapted from https://en.wikipedia.org/wiki/Koch_snowflake)
 * (for a more detailed explanation and an implementation in the Processing language, see
 * https://natureofcode.com/book/chapter-8-fractals/ #84-the-koch-curve-and-the-arraylist-technique).
 */

/** Class to handle the vector calculations. */
export class Vector2 {
  constructor (x, y) {
    this.x = x
    this.y = y
  }

  /**
   * Vector addition
   *
   * @param vector The vector to be added.
   * @returns The sum-vector.
   */
  add (vector) {
    const x = this.x + vector.x
    const y = this.y + vector.y
    return new Vector2(x, y)
  }

  /**
   * Vector subtraction
   *
   * @param vector The vector to be subtracted.
   * @returns The difference-vector.
   */
  subtract (vector) {
    const x = this.x - vector.x
    const y = this.y - vector.y
    return new Vector2(x, y)
  }

  /**
   * Vector scalar multiplication
   *
   * @param scalar The factor by which to multiply the vector.
   * @returns The scaled vector.
   */
  multiply (scalar) {
    const x = this.x * scalar
    const y = this.y * scalar
    return new Vector2(x, y)
  }

  /**
   * Vector rotation (see https://en.wikipedia.org/wiki/Rotation_matrix)
   *
   * @param angleInDegrees The angle by which to rotate the vector.
   * @returns The rotated vector.
   */
  rotate (angleInDegrees) {
    const radians = angleInDegrees * Math.PI / 180
    const ca = Math.cos(radians)
    const sa = Math.sin(radians)
    const x = ca * this.x - sa * this.y
    const y = sa * this.x + ca * this.y
    return new Vector2(x, y)
  }
}

/**
 * Go through the number of iterations determined by the argument "steps".
 *
 * Be careful with high values (above 5) since the time to calculate increases exponentially.
 *
 * @param initialVectors The vectors composing the shape to which the algorithm is applied.
 * @param steps The number of iterations.
 * @returns The transformed vectors after the iteration-steps.
 */
export function iterate (initialVectors, steps) {
  let vectors = initialVectors
  for (let i = 0; i < steps; i++) {
    vectors = iterationStep(vectors)
  }

  return vectors
}

/**
 * Loops through each pair of adjacent vectors.
 *
 * Each line between two adjacent vectors is divided into 4 segments by adding 3 additional vectors in-between the
 * original two vectors. The vector in the middle is constructed through a 60 degree rotation so it is bent outwards.
 *
 * @param vectors The vectors composing the shape to which the algorithm is applied.
 * @returns The transformed vectors after the iteration-step.
 */
function iterationStep (vectors) {
  const newVectors = []
  for (let i = 0; i < vectors.length - 1; i++) {
    const startVector = vectors[i]
    const endVector = vectors[i + 1]
    newVectors.push(startVector)
    const differenceVector = endVector.subtract(startVector).multiply(1 / 3)
    newVectors.push(startVector.add(differenceVector))
    newVectors.push(startVector.add(differenceVector).add(differenceVector.rotate(60)))
    newVectors.push(startVector.add(differenceVector.multiply(2)))
  }

  newVectors.push(vectors[vectors.length - 1])
  return newVectors
}

测试

import { Vector2, iterate } from './KochSnowflake'

/**
 * Method to render the Koch snowflake to a canvas.
 *
 * @param canvasWidth The width of the canvas.
 * @param steps The number of iterations.
 * @returns The canvas of the rendered Koch snowflake.
 */
function getKochSnowflake (canvasWidth = 600, steps = 5) {
  if (canvasWidth <= 0) {
    throw new Error('canvasWidth should be greater than zero')
  }

  const offsetX = canvasWidth / 10.0
  const offsetY = canvasWidth / 3.7
  const vector1 = new Vector2(offsetX, offsetY)
  const vector2 = new Vector2(canvasWidth / 2, Math.sin(Math.PI / 3) * canvasWidth * 0.8 + offsetY)
  const vector3 = new Vector2(canvasWidth - offsetX, offsetY)
  const initialVectors = []
  initialVectors.push(vector1)
  initialVectors.push(vector2)
  initialVectors.push(vector3)
  initialVectors.push(vector1)
  const vectors = iterate(initialVectors, steps)
  return drawToCanvas(vectors, canvasWidth, canvasWidth)
}

/**
 * Utility-method to render the Koch snowflake to a canvas.
 *
 * @param vectors The vectors defining the edges to be rendered.
 * @param canvasWidth The width of the canvas.
 * @param canvasHeight The height of the canvas.
 * @returns The canvas of the rendered edges.
 */
function drawToCanvas (vectors, canvasWidth, canvasHeight) {
  const canvas = document.createElement('canvas')
  canvas.width = canvasWidth
  canvas.height = canvasHeight

  // Draw the edges
  const ctx = canvas.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(vectors[0].x, vectors[0].y)
  for (let i = 1; i < vectors.length; i++) {
    ctx.lineTo(vectors[i].x, vectors[i].y)
  }
  ctx.stroke()

  return canvas
}

// plot the results if the script is executed in a browser with a window-object
if (typeof window !== 'undefined') {
  const canvas = getKochSnowflake()
  document.body.append(canvas)
}

扩展

• “科赫雪花” 是什么？为什么它的面积有限，周长却无限大？

参考

• Koch snowflake - Wikipedia (opens new window)
• 科赫曲线 - 维基百科，自由的百科全书 (opens new window)