gen-city/demo/src/index.ts at main · neki-dev/gen-city · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { City, CityGenerationMode, NodeType } from '../../src/index';
import { randomRange } from '../../src/utils';

import { ui } from './interface';

const ctx = ui.screen.getContext('2d') as CanvasRenderingContext2D;
const tileSize = 4;

function generateAndRenderCity() {
  // PREPARE

  const city = new City({
    width: Number(ui.inputs.worldWidth?.value),
    height: Number(ui.inputs.worldHeight?.value),
  });

  ui.screen.width = city.width * tileSize;
  ui.screen.height = city.height * tileSize;
  ctx.lineWidth = tileSize;
  ctx.textAlign = 'center';

  // DRAW

  function drawPaths() {
    ctx.clearRect(0, 0, ui.screen.width, ui.screen.height);

    ctx.beginPath();
    city.getAllPaths().forEach((path) => {
      const positions = path.getPositions();
      ctx.moveTo(
        positions.beg.x * tileSize + tileSize / 2,
        positions.beg.y * tileSize + tileSize / 2,
      );
      ctx.lineTo(
        positions.end.x * tileSize + tileSize / 2,
        positions.end.y * tileSize + tileSize / 2,
      );
    });
    ctx.stroke();
  }

  function drawBuildings() {
    city.getAllBuildings().forEach((building) => {
      const ton = 100 + randomRange(0, 5) * 10;
      ctx.fillStyle = `rgba(${ton}, ${ton}, ${ton})`;
      ctx.fillRect(
        building.position.x * tileSize,
        building.position.y * tileSize,
        building.width * tileSize,
        building.height * tileSize,
      );
    });
  }

  function drawNodes() {
    city.getAllNodes().forEach((node) => {
      switch (node.getType()) {
        case NodeType.CROSS: {
          ctx.fillStyle = 'red';
          break;
        }
        case NodeType.TURN: {
          ctx.fillStyle = 'orange';
          break;
        }
        case NodeType.END: {
          ctx.fillStyle = 'blue';
          break;
        }
      }
      ctx.fillRect(
        node.position.x * tileSize,
        node.position.y * tileSize,
        tileSize,
        tileSize,
      );
    });
  }

  // GENERATE

  city
    .generate({
      mode: ui.inputs.seedMode?.checked
        ? CityGenerationMode.SEED
        : CityGenerationMode.RUNTIME,
      streetMinLength: Number(ui.inputs.streetMinLength?.value),
      buildingMinSize: Number(ui.inputs.buildingMinSize?.value),
      buildingMaxSize: Number(ui.inputs.buildingMaxSize?.value),
      buildingMinSpace: Number(ui.inputs.buildingMinSpace?.value),
      buildingMaxSpace: Number(ui.inputs.buildingMaxSpace?.value),
      buildingOffset: Number(ui.inputs.buildingOffset?.value),
      probabilityIntersection: Number(ui.inputs.probabilityIntersection?.value),
      probabilityTurn: Number(ui.inputs.probabilityTurn?.value),
      probabilityStreetEnd: Number(ui.inputs.probabilityStreetEnd?.value),
    })
    .then(() => {
      if (ui.inputs.seedMode?.checked) {
        console.log('SEED =', city.getSeed());
      }

      drawPaths();
      drawBuildings();

      if (ui.inputs.nodeDisplay?.checked) {
        drawNodes();
      }
    });
}

ui.buttons.generate?.addEventListener('click', generateAndRenderCity);
generateAndRenderCity();