liquify/index.html at main · collidingScopes/liquify · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="dat.gui-master/build/dat.gui.min.js"></script>

  <!-- Google fonts
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
   -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!--
  <meta property="og:title" content="Hiroshi Nagai - animated painting" />
  <meta property="og:description" content="Create your own animated painting" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://collidingscopes.github.io/nagai/" />
  <meta property="og:image" content="https://collidingscopes.github.io/nagai/images/Shikoku.png">
  <meta property="og:image:type" content="image/png" >
  <meta property="og:image:width" content="866" >
  <meta property="og:image:height" content="825" >


  <link rel="icon" href="images/siteFavicon3.png">
  <link rel="apple-touch-icon" href="images/siteFavicon3.png">
    -->

</head>
<body>
<!--
Choose an image URL:
<input id="image-src" type="text" value="http://"><button id="load-image">Load image</button>
-->

<div id="toolDiv">
  <div id="gui"></div>
  <div id="canvasSizeTextBox"></div>

  <!--
  <select id="backgroundTypeInput" class="select-style userInput">
    <option value="colorGrid" selected="selected">Color Grid</option>
    <option value="image">Image</option>
  </select>


  <button id="reset">Clear canvas</button>
  <pre><span class="tableText">Brush Size</span><br><input class="input-number-noSpinners" type="range" id="brushSizeInput" value="50" min="5" max="500"></pre>
  <pre><span class="tableText">Smudge Size</span><br><input class="input-number-noSpinners" type="range" id="smudgeSizeInput" value="50" min="5" max="500"></pre>
  <pre><span class="tableText">Strength</span><br><input class="input-number-noSpinners" type="range" id="strengthInput" value="100" min="5" max="100"></pre>


  <pre><span class="tableText">Color Range</span><br><input class="input-number-noSpinners" type="range" id="colorRangeInput" value="100" min="0" max="255"></pre>
  <pre><span class="tableText">Grayscale Strength</span><br><input class="input-number-noSpinners" type="range" id="grayProbabilityInput" value="25" min="0" max="100"></pre>
  <pre><span class="tableText">Gradient Color1</span><br><input type="color" id="gradientColor1Input" value="#E1D6FF"/></pre>
  <pre><span class="tableText">Gradient Color2</span><br><input type="color" id="gradientColor2Input" value="#75B88C"/></pre>
  <pre><span class="tableText">Grad. Color Range</span><br><input class="input-number-noSpinners" type="range" id="gradientColorRangeInput" value="50" min="0" max="255"></pre>
  <pre><span class="tableText">Grad. Opacity</span><br><input class="input-number-noSpinners" type="range" id="gradientOpacityInput" value="3" min="1" max="3"></pre>
  <pre><span class="tableText">Grad. Pixel Size</span><br><input class="input-number-noSpinners" type="range" id="gradientPixelSizeInput" value="5" min="1" max="50"></pre>
  <pre><span class="tableText">Animation Loops</span><br><input class="input-number-noSpinners" type="range" id="animationLoopsInput" value="3" min="1" max="10"></pre>

  <button id="saveImageButton">Export Image</button>
  <button id="recordVideoButton">Export Video</button>

  -->

  <canvas id="canvas"></canvas>

  <label for="imageInput" class="custom-file-upload hidden">
    <i class="fa fa-cloud-upload hidden"></i> Select image
  </label>
  <input type="file" id="imageInput" accept="image/*" class="hidden">

  <img id="userImg" class="hidden" src="images/AnaBenet.jpg">

  <div id="videoRecordingMessageDiv" class="hidden sticky-bottom">
      Video recording underway. Press menu button or "v" to stop. The video will be saved to your downloads folder afterwards.
  </div>

</div>

<!--
<div class="output">
  <canvas id="canvas" width="500" height="335" class="placeholder">Canvas!</canvas>
  <img id="image" class="placeholder" src="legos.png" />

</div>
-->

</body>

<script src='perlin.js'></script>
<script src="liquify.js"></script>
<script src="mp4-muxer-main/build/mp4-muxer.js"></script>


</html>