https://dwtkns.com/posts/scripts/glslFlow.js

1window.Flow = function() {
2
3 function Flow(targetCanvas, imageArray, shaders, device, passedUniforms) {
4    // console.log(targetCanvas, imageArray, shaders);
5
6    var that = this;
7    var hx = util.hex2vec4;
8
9    var canvas   = this.canvas   = targetCanvas,
10        igloo    = this.igloo    = new Igloo(targetCanvas),
11        gl       = this.gl       = igloo.gl,
12        quad     = this.quad     = igloo.array(Igloo.QUAD2),    // create array buffer
13        program  = this.program  = igloo.program(shaders.vertex, shaders.fragment),   
14        textures = this.textures = [];
15  
16    // var intensity = device.isMobile ? 2.0 : 1.0;
17
18    var colors = {
19     "white":   hx('#fff'),
20     "black":   hx('#000'),
21     "red":     hx('#f00'),
22     
23     "orange":  [1.0, 0.3, 0.0, 1.0],
24     "orange2": [0.91, 0.514, 0.188, 1.0],
25     "orange3": [0.933, 0.2, 0, 1.0],
26
27     "yellow":  [1.0, 0.7, 0.0, 1.0],
28
29     "piiink":  [0.953, 0.0941, 0.282, 1.0],
30     "red2":    [0.949, 0.11, 0.188, 1.0],
31
32     "cyan":    [0.165, 0.949, 0.878, 1.0],
33     "cyan2":   [0.38, 0.74, 0.71, 1.0],
34     "purply":  [0.31, 0.318, 0.91, 1.0],
35     "green":   [0.31, 0.91, 0.318, 1.0],
36     "green2":  [0.45, 0.76, 0.53, 1.0],
37
38      "headerBlue":      hx('#a9bbc2'),//[0.773, 0.89, 0.996, 1.0],
39      "headerBlueDesat": hx('#668B99')//[0.52, 0.706, 0.88, 1.0]
40      
41    }
42
43    _.each(imageArray, function(image, i) {
44      var texture = igloo.texture(image); // image, format, wrap, filter
45      textures.push(texture);
46    });
47    
48    // i guess all textures have to be initialized before binding any of them?
49    _.each(textures, function(texture, i) {
50      texture.bind(i);
51      program.use()
52        .uniformi('u_tex'+i, i)
53        .uniform('u_tex'+i+'_dims', imageArray[i].dims)
54    });
55
56    _.each(colors, function(color, name) {
57      program.use().uniform(name, color);
58    });
59
60    _.each(passedUniforms, function(value, name) {
61      program.use().uniform(name, value);
62    });
63
64    program.use()
65      .uniform('u_resolution', [canvas.width, canvas.height])
66      // .uniform('u_intensity', intensity)
67      .attrib('points', quad, 2);
68
69    this.startTime = Date.now();
70    this.elapsed   = 0;
71  }
72
73  Flow.prototype.draw = function() {
74    var now = Date.now();
75    this.elapsed = now - this.startTime;
76
77    this.program.use()
78      .uniform('u_time',this.elapsed/1000)
79      .draw(this.igloo.gl.TRIANGLE_STRIP, Igloo.QUAD2.length / 2);
80  };
81  
82  Flow.prototype.resize = function() {
83    var w = this.canvas.width,
84        h = this.canvas.height;
85
86    // update gl rendering viewport size (otherwise canvas size changes but draw area does not)
87    this.gl.viewport(0, 0, w, h); // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/viewport
88
89    // update uniform passed to frag shader (not really using much)
90    this.program.use().uniform('u_resolution', [w, h]); 
91  };
92
93  Flow.prototype.reset = function() {};
94
95  return Flow;
96
97}();