Procedurally generated infinite landscape with primitives and colors, inspired by {Shan, Shui} and created by Charming.js.

• Try it: https://landscape.bairui.dev/
• Github: https://github.com/pearmini/infinite-landscape

Style Reference

Wang Ximeng’s A Thousand Li of Rivers and Mountains.(千里江山图）

Tool: Charming.js

A JavaScript library for generative art based on SVG which I’m currently working on.

• Easier for complex interaction such as drag, zoom and graphics picking.
• More visual features, such as gradient.
• Better Performance: incremental rendering.

Challenges

• Composition**:** continuous positions and shapes for mountains and plains.
• Implement a diff algorithm.

function draw() {
  // Generates data with Noise functions.
  const mountains = generate(startX, endX);
  const plains = generate(startX, endX);
  
  // Maps data to scene.
  const scene = cm.svg("svg", {
    width,
    height,
    children: [
      cm.svg("path", mountains, {
        d: ({x, y, x1, y1, x2, y2}) => `M${x},${y}L${x1},${y1}L${x2},${y2}Z`,
        fill: (_, i) => `url(#${key}-gradient-${i})`,
        stroke: "#000",
      }),
      cm.svg("path", plains, {
        d: ({x, y, x1, y1, x2, y2}) => `M${x},${y}L${x1},${y1}L${x2},${y2}Z`,
        fill: (_, i) => `url(#${key}-gradient-${i})`,
        stroke: "#000",
      }),
    ],
  });
  
  // Diffs and renders and returned 
  return scene;
}

What’s more?

• More creature? More natural?
• Interactivity and Animation? Click a mountain to grow a tree? (Reference)
• Sound?