2 files changed, 98 insertions(+), 77 deletions(-)

A dist/shader.frag
M src/main.js

@@ 0,0 1,60 @@
+// thanks to madbrain: https://www.shadertoy.com/view/3slfWB
+
+precision mediump float;
+
+varying vec2 vTextureCoord;
+uniform sampler2D uSampler;
+uniform float textureWidth;
+uniform float textureHeight;
+
+void main(void)
+{
+  // Normalized pixel coordinates (from 0 to 1)
+  vec2 uv = vTextureCoord;
+
+  vec2 rf = vec2(textureWidth, textureHeight); // Resolution
+  vec2 irf = 1.0 / rf; // Inversed resolution
+  // uv, floored to multiple of rf
+  vec2 uvf = floor(uv * rf) * irf;
+  vec2 uvi = (uv - uvf) * rf; // Distance from floor
+
+  // Each col is the color located at a point relative to uvf
+  // col , col2
+  // col3, col4
+  vec3 col  = texture2D(uSampler, vec2(uvf.x         , uvf.y       )).xyz;
+  vec3 col2 = texture2D(uSampler, vec2(uvf.x + irf.x , uvf.y       )).xyz;
+  vec3 col3 = texture2D(uSampler, vec2(uvf.x         , uvf.y + irf.y )).xyz;
+  vec3 col4 = texture2D(uSampler, vec2(uvf.x + irf.x , uvf.y + irf.y )).xyz;
+
+  vec3 cre; // Color result
+  vec3 dix;
+  vec3 diy;
+  vec3 blk;
+  if(uvi.x < 0.5 && uvi.y < 0.5)
+    cre = col , dix = col2, diy = col3, blk = col4;
+  else if(uvi.y < 0.5)
+    cre = col2, dix = col , diy = col4, blk = col3;
+  else if(uvi.x < 0.5)
+    cre = col3, dix = col4, diy = col , blk = col2;
+  else
+    cre = col4, dix = col3, diy = col2, blk = col ;
+
+  // The diamond distance from of the mid point
+  float diamond = abs(uvi.x-0.5) + abs(uvi.y-0.5);
+  if(diamond < .5) {
+    vec3 cdx = abs(dix - diy); // Color differce between dix and diy
+    float dism = cdx.x + cdx.y + cdx.z;
+    vec3 cdx2 = abs(cre - blk); // ???
+    float dism2 = cdx2.x + cdx2.y + cdx2.z;
+    if(dism < 0.1) {
+      if (dism2 < 0.1) {
+      } else {
+        cre = dix;
+
+      }
+    }
+  }
+
+  // Output to screen
+  gl_FragColor = vec4(cre, 1.0);
+}

@@ 7,7 7,7 @@ const width = 800, height = 800;
 
 var renderer = PIXI.autoDetectRenderer({
   resolution: 2,
-  width, height, background: '#fff',
+  width, height,
 })
 document.body.appendChild(renderer.view);
 renderer.view.style.width = width


@@ 16,94 16,55 @@ renderer.view.style.height = height
 const stage = new PIXI.Container()
 
 window.PIXI = PIXI
-// Load an image and create an object
-var logo = PIXI.Sprite.from('dist/bluebird.png');
-// Set it at the center of the screen
+
+var logo = PIXI.Sprite.from('dist/landscape.png');
 logo.x = width / 2;
 logo.y = height / 2;
-logo.width = width
-logo.height = height
-// Make sure the center point of the image is at its center, instead of the default top left
+logo.scale.x = logo.scale.y = 6
+
 logo.anchor.set(0.5);
 
-//thanks to madbrain: https://www.shadertoy.com/view/3slfWB
-var shaderCode = `
-precision mediump float;
-
-varying vec2 vTextureCoord;
-uniform sampler2D uSampler;
-uniform float textureWidth;
-uniform float textureHeight;
-
-void main(void)
-{
-    // Normalized pixel coordinates (from 0 to 1)
-    vec2 uv = vTextureCoord.xy;
-
-    float rf = 64.0; // Resolution - output is expected to be square
-    float irf = 1.0 / rf; // Inversed resolution
-    vec2 uvf = floor(uv * rf) * irf; // uv, floored to multiple of rf
-    vec2 uvi = (uv - uvf) * rf; // Distance from floor
-
-    // Each col is the color located at a point relative to uvf
-    // col , col2
-    // col3, col4
-    vec3 col  = texture2D(uSampler, vec2(uvf.x       , uvf.y       )).xyz;
-    vec3 col2 = texture2D(uSampler, vec2(uvf.x + irf , uvf.y       )).xyz;
-    vec3 col3 = texture2D(uSampler, vec2(uvf.x       , uvf.y + irf )).xyz;
-    vec3 col4 = texture2D(uSampler, vec2(uvf.x + irf , uvf.y + irf )).xyz;
-
-    vec3 cre; // Color result
-    vec3 dix;
-    vec3 diy;
-    vec3 blk;
-    if(uvi.x < 0.5 && uvi.y < 0.5)
-        cre = col , dix = col2, diy = col3, blk = col4;
-    else if(uvi.y < 0.5)
-        cre = col2, dix = col , diy = col4, blk = col3;
-    else if(uvi.x < 0.5)
-        cre = col3, dix = col4, diy = col , blk = col2;
-    else
-        cre = col4, dix = col3, diy = col2, blk = col ;
-
-    // The diamond distance from of the mid point
-    float diamond = abs(uvi.x-0.5) + abs(uvi.y-0.5);
-    if(diamond < .5) {
-        vec3 cdx = abs(dix - diy); // Color differce between dix and diy
-        float dism = cdx.x + cdx.y + cdx.z;
-        vec3 cdx2 = abs(cre - blk); // ???
-        float dism2 = cdx2.x + cdx2.y + cdx2.z;
-        if(dism < 0.1) {
-            if (dism2 < 0.1) {
-                // cre = vec3(1.0, 0.0, 0.0);
-            } else {
-                cre = dix;
-
-            }
-        }
-    }
-    // // Just point out the grid of cells
-    // if (abs(uvi.x) + abs(uvi.y) < .1) {
-    //     cre = vec3(1.0, 0.0, 0.0);
-    // }
-
-    // Output to screen
-    gl_FragColor = vec4(cre, 1.0);
+stage.addChild(logo);
+
+
+const state = {
+  pos: {
+    x: 0,
+    y: 0
+  }
 }
-`
+window.state = state
 
-//Create our Pixi filter using our custom shader code
-var simpleShader = new PIXI.Filter('', shaderCode);
-stage.filters = [simpleShader]
+let g = new PIXI.Graphics()
+g.beginFill(0xff0000)
+g.drawCircle(0, 0, 100)
 
+stage.addChild(g)
 
-// Add it to the screen
-stage.addChild(logo);
+let resolution = 6
+const uniform = {
+  textureWidth: width / resolution,
+  textureHeight: height / resolution,
+}
+fetch('./dist/shader.frag').then(r => r.text()).then(shaderCode => {
+
+  var simpleShader = new PIXI.Filter('', shaderCode, uniform);
+  stage.filters = [simpleShader]
+  animate()
+})
+stage.filterArea = renderer.screen
 
 function animate() {
   // start the timer for the next animation loop
   requestAnimationFrame(animate)
   // this is the main render call that makes pixi draw your container and its children.
   renderer.render(stage)
+  state.i += 1
+  g.x = state.pos.x
+  g.y = state.pos.y
 }
-animate()
+
+renderer.view.addEventListener('mousemove', e => {
+  state.pos.x = e.offsetX
+  state.pos.y = e.offsetY
+})