Triangulilo/index.html at master · gllms/Triangulilo · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Triangulilo</title>
  <link rel="icon" href="./favicon.ico" />
  <link rel="shortcut icon" type="image/x-icon" href="./flavicon.ico" />
  <meta property="og:title" content="Triangulilo" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://gllms.github.io/Triangulilo/" />
  <meta property="og:image" content="https://gllms.github.io/Triangulilo/img/Triangulilo.png" />
  <meta property="og:description" content="An online low poly wallpaper generator" />
  <link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="toolbar">
    <div id="options">
      <label for="width">Width (px):</label>
      <input type="number" name="width" id="width" value="1920" min="100" step="1" oninput="updateWidth(this)" />
      <label for="height">Height (px):</label>
      <input type="number" name="height" id="height" value="1080" min="100" step="1" oninput="updateHeight(this)" />
      <label for="scale">Scale (%):</label>
      <input type="number" name="scale" id="scale" value="10" min="1" oninput="updateScale(this)" />
      <label for="variance">Noise:</label>
      <input type="number" name="variance" id="variance" value="100" min="0" oninput="updateVariance(this)" />
      <label for="variancescale">Noise Scale:</label>
      <input type="number" name="variancescale" id="variancescale" value="100" min="0"
        oninput="updateVarianceScale(this)" />
      <label for="seed">Seed:</label>
      <input type="text" name="seed" id="seed" value="" oninput="updateSeed(this)" />
    </div>
    <div id="colour">
      <button onclick="addColour()" title="Add color stop">+</button>
      <input type="color" value="#FFFF00" id="colourInput" oninput="updateColour()" />
      <button onclick="removeColour()" title="Remove color stop">–</button>
    </div>
    <br />
    <a href="" id="saveButton" download="wallpaper.jpg" onclick="saveImage(this)">SAVE</a>
  </div>
  <canvas id="result" width="1920" height="1080"></canvas>
  <canvas id="sampler" width="1920" height="1080"></canvas>

  <div class="dot active" id="dotStart" dotindex="dotStart" style="background: #FFFF00; display: none"></div>
  <div class="dot" id="dotEnd" dotindex="dotEnd" style="background: #F0006C; display: none"></div>

  <script src="https://cdn.jsdelivr.net/gh/jwagner/simplex-noise.js/simplex-noise.js"></script>
  <script src="script.js"></script>
</body>

</html>