tsprowl.github.io/project2.html at master · tsprowl/tsprowl.github.io · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!doctype html>
<html lang='en'>
  <head>
    <style>body{ margin:0; background:black }</style>
  </head>
  <body>
    <canvas id='gl'></canvas>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.0.7/dist/tweakpane.min.js"></script>
  <!-- vertex shader, as simple as possible -->
  <script id='vertex' type='x-shader/x-vertex'>
    attribute vec2 a_position;

    void main() {
      gl_Position = vec4( a_position, 0, 1 );
    }
  </script>

  <!-- fragment shader -->
  <script id='fragment' type='x-shader/x-fragment'>
    #ifdef GL_ES
    precision mediump float;
    #endif

    uniform float time;

    // contains resolution of our canvas, in pixels
    uniform vec2 resolution;

    // uniform pointing to our opengl texture
    uniform sampler2D uSampler;

    // controller uniforms
    uniform float redMod;
    uniform float blueMod;
    uniform float greenMod;
    uniform float crunchMod;
    uniform bool invertedMod;


    float random(in vec2 st){
        return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
    }

    float noise (in vec2 st){
        vec2 i = floor(st);
        vec2 f = fract(st);

        // Four corners in 2D of a tile
        float a = random(i);
        float b = random(i + vec2(1.0, 0.0));
        float c = random(i + vec2(0.0, 1.0));
        float d = random(i + vec2(1.0, 1.0));

        vec2 u = f * f * (3.0 - 2.0 * f);

        return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
    }

    #define OCTAVES 8
    float fbm (in vec2 st){
        // Initial values
        float value = 0.0;
        float amplitude = 0.5;
        float frequency = 2.0;

        // Loop time
        for (int i = 0; i < OCTAVES; i++){
            value += amplitude * noise(st * frequency);
            st *= 2.0;
            amplitude *= 0.5;
        }

        return value;
    }

    void main() {
      // gl_FragCoord is measured in pixels, but texture2D expects
      // normalized coordinates (between 0–1). If we divide gl_FragCoord
      // by our resolution, we'll get a normalized position value

      vec2 pos = gl_FragCoord.xy / resolution.xy;
      pos.x *= resolution.x/resolution.y;

      // just get rgb from the texture to invert.
      vec3 color = texture2D( uSampler, pos ).rgb;

      color.r += redMod;
      color.g += blueMod;
      color.b += greenMod;

      color += fbm(pos*crunchMod);

      if (invertedMod == false){
        gl_FragColor = vec4(color, 1. );
      }
      else gl_FragColor = vec4(1. - color, 1. );
    }
  </script>

  <script type='text/javascript'>
    // kinda global variables... upvalues to each closure of each function in this script tag
    let gl, uTime, uRes, drawProgram, videoTexture

    const size = 768
    window.onload = function() {
      const canvas = document.getElementById( 'gl' )
      gl = canvas.getContext( 'webgl' )
      canvas.width = canvas.height = size

      const PARAMS = {
          red: 0,
          blue: 0,
          green: 0,
          crunch: 0,
          inverted: false
      };

      const pane = new Tweakpane.Pane();

      const redval = pane.addInput(
          PARAMS, 'red',
          {min: -1.0, max: 1.0, step: 0.01}
      );
      const blueval = pane.addInput(
          PARAMS, 'blue',
          {min: -1.0, max: 1.0, step: 0.01}
      );
      const greenval = pane.addInput(
          PARAMS, 'green',
          {min: -1.0, max: 1.0, step: 0.01}
      );
      pane.addSeparator();
      const crunch = pane.addInput(
          PARAMS, 'crunch',
          {min: 0.0, max: 100.0, step: 0.1}
      )
      const invertToggle = pane.addInput(PARAMS, 'inverted');

      redval.on("change", (ev)=>{
          gl.uniform1f(gl.getUniformLocation(drawProgram, "redMod"), ev.value);
      })

      blueval.on("change", (ev)=>{
          gl.uniform1f(gl.getUniformLocation(drawProgram, "blueMod"), ev.value);
      })

      greenval.on("change", (ev)=>{
          gl.uniform1f(gl.getUniformLocation(drawProgram, "greenMod"), ev.value);
      })

      crunch.on("change", (ev)=>{
          gl.uniform1f(gl.getUniformLocation(drawProgram, "crunchMod"), ev.value);
      })

      invertToggle.on("change", (ev)=>{
          gl.uniform1f(gl.getUniformLocation(drawProgram, "invertedMod"), ev.value);
      })


      // define drawing area of webgl canvas. bottom corner, width / height
      // XXX can't remember why we need the *2!
      gl.viewport( 0,0,gl.drawingBufferWidth*2, gl.drawingBufferHeight*2 )

      // create a buffer object to store vertices
      const buffer = gl.createBuffer()

      // point buffer at graphic context's ARRAY_BUFFER
      gl.bindBuffer( gl.ARRAY_BUFFER, buffer )

      // create two triangles (three vertices each) that fill entire canvas,
      // with coordinates measured from -1 to 1.
      const triangles = new Float32Array([
        -1, -1,
         1, -1,
        -1,  1,
        -1,  1,
         1, -1,
         1,  1
      ])

      // initialize memory for buffer and populate it. Give
      // open gl hint contents will not change dynamically.
      gl.bufferData( gl.ARRAY_BUFFER, triangles, gl.STATIC_DRAW )

      // create vertex shader
      let shaderScript = document.getElementById('vertex')
      let shaderSource = shaderScript.text
      // create shader object
      const vertexShader = gl.createShader( gl.VERTEX_SHADER )
      // define source text for our shader
      gl.shaderSource( vertexShader, shaderSource )
      // compile shader
      gl.compileShader( vertexShader )

      // create fragment shader
      shaderScript = document.getElementById('fragment')
      shaderSource = shaderScript.text
      const fragmentShader = gl.createShader( gl.FRAGMENT_SHADER )
      gl.shaderSource( fragmentShader, shaderSource )
      gl.compileShader( fragmentShader )

      // create shader program, which links vertex and fragment shaders
      drawProgram = gl.createProgram()
      gl.attachShader( drawProgram, vertexShader )
      gl.attachShader( drawProgram, fragmentShader )
      // report any errors in the fragment shader
      console.log( gl.getShaderInfoLog( fragmentShader ) )
      gl.linkProgram( drawProgram )
      gl.useProgram( drawProgram )

      /* ALL ATTRIBUTE/UNIFORM INITIALIZATION MUST COME AFTER
      CREATING/LINKING/USING THE SHADER PROGAM */

      // find a pointer to the uniform "time" in our fragment shader
      uTime = gl.getUniformLocation( drawProgram, 'time' )
      uRes = gl.getUniformLocation( drawProgram, 'resolution' )
      // send uniform values for uRes up to gpu
      gl.uniform2f( uRes, size, size )

      // get position attribute location in shader
      var position = gl.getAttribLocation( drawProgram, 'a_position' )
      // enable the attribute
      gl.enableVertexAttribArray( position )
      // this will point to the vertices in the last bound array buffer.
      // In this example, we only use one array buffer, where we're storing
      // our vertices
      gl.vertexAttribPointer( position, 2, gl.FLOAT, false, 0,0 )

      video = getVideo()
    }

    function getVideo() {
      const video = document.createElement('video');

      // request video stream
      navigator.mediaDevices.getUserMedia({
        video:true
      }).then( stream => {
        // this block happens when the video stream has been successfully requested
        video.srcObject = stream
        video.play()
        makeTexture()
      })

      return video
    }

    function makeTexture() {
      // create an OpenGL texture object
      videoTexture = gl.createTexture()

      // this tells OpenGL which texture object to use for subsequent operations
      gl.bindTexture( gl.TEXTURE_2D, videoTexture )

      // since canvas draws from the top and shaders draw from the bottom, we
      // have to flip our canvas when using it as a shader.
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

      // how to map when texture element is more than one pixel
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR )
      // how to map when texture element is less than one pixel
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR )

      // you must have these properties defined for the video texture to
      // work correctly at non-power-of-2 sizes
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE )
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE )

      render()
    }

    // keep track of time via incremental frame counter
    let time = 0
    function render() {
      // schedules render to be called the next time the video card requests
      // a frame of video
      window.requestAnimationFrame( render )

      // update time on CPU and GPU
      time++
      gl.uniform1f( uTime, time )

      gl.texImage2D(
        gl.TEXTURE_2D,    // target: you will always want gl.TEXTURE_2D
        0,                // level of detail: 0 is the base
        gl.RGBA, gl.RGBA, // color formats
        gl.UNSIGNED_BYTE, // type: the type of texture data; 0-255
        video             // pixel source: could also be video or image
      )

      // draw triangles using the array buffer from index 0 to 6 (6 is count)
      gl.drawArrays( gl.TRIANGLES, 0, 6 )
    }
  </script>

</html>