trippy background for the luls

client/src/scenes/background.js

@@ -0,0 +1,79 @@
+const Phaser = require('phaser');
+
+const CustomPipeline = new Phaser.Class({
+    Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
+    initialize: function CustomPipeline (game) {
+        Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
+            game,
+            renderer: game.renderer,
+            fragShader: `
+                precision mediump float;
+
+                uniform sampler2D uMainSampler;
+                uniform vec2 uResolution;
+                uniform float uTime;
+
+                varying vec2 outTexCoord;
+                varying vec4 outTint;
+
+                #define MAX_ITER 4
+
+                void main( void )
+                {
+                    vec2 v_texCoord = gl_FragCoord.xy / uResolution;
+
+                    vec2 p =  v_texCoord * 8.0 - vec2(20.0);
+                    vec2 i = p;
+                    float c = 1.0;
+                    float inten = .05;
+
+                    for (int n = 0; n < MAX_ITER; n++)
+                    {
+                        float t = uTime * (1.0 - (3.0 / float(n+1)));
+
+                        i = p + vec2(cos(t - i.x) + sin(t + i.y),
+                        sin(t - i.y) + cos(t + i.x));
+
+                        c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),
+                        p.y / (cos(i.y+t)/inten)));
+                    }
+
+                    c /= float(MAX_ITER);
+                    c = 1.5 - sqrt(c);
+
+                    vec4 texColor = vec4(0.01, 0.01, 0.01, 1.0);
+
+                    texColor.rgb *= (1.0 / (1.0 - (c + 0.05)));
+
+                    gl_FragColor = texColor;
+                }
+        `,
+        });
+    },
+});
+
+
+class Background extends Phaser.Scene {
+    constructor() {
+        super({ key: 'Background', active: true });
+        this.bgTime = 0.0;
+    }
+
+    create() {
+        const game = this.game;
+        this.customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline(game));
+        this.customPipeline.setFloat2('uResolution', 1600, 1000);
+
+        const sprite = this.add.sprite(0, 0);
+        sprite.setPipeline('Custom');
+        sprite.displayWidth = 3200;
+        sprite.displayHeight = 2000;
+    }
+
+    update() {
+        this.customPipeline.setFloat1('uTime', this.bgTime);
+        this.bgTime += 0.005;
+    }
+}
+
+module.exports = Background;

client/src/scenes/cryps.js

@@ -4,11 +4,12 @@ const Header = require('./header');
 const Menu = require('./menu');
 const Combat = require('./combat');
 const Zones = require('./zones');
+const Background = require('./background');
 
 function renderCryps() {
     const config = {
         type: Phaser.AUTO,
-        backgroundColor: '#181818',
+        // backgroundColor: '#181818',
         resolution: window.devicePixelRatio,
         // antialias: true,
         width: 1600,
@@ -21,9 +22,9 @@ function renderCryps() {
             },
         },
         scene: [
+            Background,
             Header,
-        ],
+        ], };
-    };
 
     const game = new Phaser.Game(config);
 

server/WORKLOG.md

@@ -10,7 +10,6 @@ strangle
 
 
 ## NOW
-
 * zones
   * differnt game types based on tag
   * open w/ item?