little dots

client/lib/fizzy-noise.js

@@ -1,8 +1,7 @@
 // http://mrl.nyu.edu/~perlin/noise/
 
-var ImprovedNoise = function () {
+const ImprovedNoise = function () {
-
+    const p = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10,
-    var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
         23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87,
         174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211,
         133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208,
@@ -13,49 +12,46 @@ var ImprovedNoise = function () {
         14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205,
         93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180];
 
-    for ( var i = 0; i < 256 ; i++ ) {
+    for (let i = 0; i < 256; i++) {
-
         p[256 + i] = p[i];
-
     }
 
     function fade(t) {
-
         return t * t * t * (t * (t * 6 - 15) + 10);
-
     }
 
     function lerp(t, a, b) {
-
         return a + t * (b - a);
-
     }
 
     function grad(hash, x, y, z) {
-
+        const h = hash & 15;
-        var h = hash & 15;
+        const u = h < 8 ? x : y; const
-        var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
+            v = h < 4 ? y : h == 12 || h == 14 ? x : z;
         return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v);
-
     }
 
     return {
 
-        noise: function ( x, y, z ) {
+        noise(x, y, z) {
+            const floorX = Math.floor(x); const floorY = Math.floor(y); const
+                floorZ = Math.floor(z);
 
-            var floorX = Math.floor( x ), floorY = Math.floor( y ), floorZ = Math.floor( z );
+            const X = floorX & 255; const Y = floorY & 255; const
-
+                Z = floorZ & 255;
-            var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
 
             x -= floorX;
             y -= floorY;
             z -= floorZ;
 
-            var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
+            const xMinus1 = x - 1; const yMinus1 = y - 1; const
+                zMinus1 = z - 1;
 
-            var u = fade( x ), v = fade( y ), w = fade( z );
+            const u = fade(x); const v = fade(y); const
+                w = fade(z);
 
-            var A = p[ X ] + Y, AA = p[ A ] + Z, AB = p[ A + 1 ] + Z, B = p[ X + 1 ] + Y, BA = p[ B ] + Z, BB = p[ B + 1 ] + Z;
+            const A = p[X] + Y; const AA = p[A] + Z; const AB = p[A + 1] + Z; const B = p[X + 1] + Y; const BA = p[B] + Z; const
+                BB = p[B + 1] + Z;
 
             return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z),
                 grad(p[BA], xMinus1, y, z)),
@@ -65,56 +61,59 @@ var ImprovedNoise = function () {
                 grad(p[BA + 1], xMinus1, y, z - 1)),
             lerp(u, grad(p[AB + 1], x, yMinus1, zMinus1),
                 grad(p[BB + 1], xMinus1, yMinus1, zMinus1))));
+        },
+    };
+};
 
-        }
+const currentRandom = Math.random;
-    }
-}
-
-var currentRandom = Math.random;
 
 // Pseudo-random generator
 function Marsaglia(i1, i2) {
     // from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
-  var z=i1 || 362436069, w= i2 || 521288629;
+    let z = i1 || 362436069; let
-  var nextInt = function() {
+        w = i2 || 521288629;
+    const nextInt = function () {
         z = (36969 * (z & 65535) + (z >>> 16)) & 0xFFFFFFFF;
         w = (18000 * (w & 65535) + (w >>> 16)) & 0xFFFFFFFF;
         return (((z & 0xFFFF) << 16) | (w & 0xFFFF)) & 0xFFFFFFFF;
     };
 
     this.nextDouble = function () {
-    var i = nextInt() / 4294967296;
+        const i = nextInt() / 4294967296;
         return i < 0 ? 1 + i : i;
     };
     this.nextInt = nextInt;
 }
 Marsaglia.createRandomized = function () {
-  var now = new Date();
+    const now = new Date();
     return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
 };
 
 // Noise functions and helpers
 function PerlinNoise(seed) {
-  var rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
+    const rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
-  var i, j;
+    let i; let
+        j;
     // http://www.noisemachine.com/talk1/17b.html
     // http://mrl.nyu.edu/~perlin/noise/
     // generate permutation
-  var p = new Array(512);
+    const p = new Array(512);
     for (i = 0; i < 256; ++i) { p[i] = i; }
-  for(i=0;i<256;++i) { var t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
+    for (i = 0; i < 256; ++i) { const t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
     // copy to avoid taking mod in p[0];
     for (i = 0; i < 256; ++i) { p[i + 256] = p[i]; }
 
     function grad3d(i, x, y, z) {
-    var h = i & 15; // convert into 12 gradient directions
+        const h = i & 15; // convert into 12 gradient directions
-    var u = h<8 ? x : y,
+        const u = h < 8 ? x : y;
-        v = h<4 ? y : h===12||h===14 ? x : z;
+
+
+        const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
         return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
     }
 
     function grad2d(i, x, y) {
-    var v = (i & 1) === 0 ? x : y;
+        const v = (i & 1) === 0 ? x : y;
         return (i & 2) === 0 ? -v : v;
     }
 
@@ -125,10 +124,13 @@ function PerlinNoise(seed) {
     function lerp(t, a, b) { return a + t * (b - a); }
 
     this.noise3d = function (x, y, z) {
-    var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
+        const X = Math.floor(x) & 255; const Y = Math.floor(y) & 255; const
+            Z = Math.floor(z) & 255;
         x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
-    var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y, fz = (3-2*z)*z*z;
+        const fx = (3 - 2 * x) * x * x; const fy = (3 - 2 * y) * y * y; const
-    var p0 = p[X]+Y, p00 = p[p0] + Z, p01 = p[p0 + 1] + Z, p1  = p[X + 1] + Y, p10 = p[p1] + Z, p11 = p[p1 + 1] + Z;
+            fz = (3 - 2 * z) * z * z;
+        const p0 = p[X] + Y; const p00 = p[p0] + Z; const p01 = p[p0 + 1] + Z; const p1  = p[X + 1] + Y; const p10 = p[p1] + Z; const
+            p11 = p[p1 + 1] + Z;
         return lerp(fz,
             lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x - 1, y, z)),
                 lerp(fx, grad3d(p[p01], x, y - 1, z), grad3d(p[p11], x - 1, y - 1, z))),
@@ -137,35 +139,41 @@ function PerlinNoise(seed) {
     };
 
     this.noise2d = function (x, y) {
-    var X = Math.floor(x)&255, Y = Math.floor(y)&255;
+        const X = Math.floor(x) & 255; const
+            Y = Math.floor(y) & 255;
         x -= Math.floor(x); y -= Math.floor(y);
-    var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y;
+        const fx = (3 - 2 * x) * x * x; const
-    var p0 = p[X]+Y, p1  = p[X + 1] + Y;
+            fy = (3 - 2 * y) * y * y;
+        const p0 = p[X] + Y; const
+            p1  = p[X + 1] + Y;
         return lerp(fy,
             lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x - 1, y)),
             lerp(fx, grad2d(p[p0 + 1], x, y - 1), grad2d(p[p1 + 1], x - 1, y - 1)));
     };
 
     this.noise1d = function (x) {
-    var X = Math.floor(x)&255;
+        const X = Math.floor(x) & 255;
         x -= Math.floor(x);
-    var fx = (3-2*x)*x*x;
+        const fx = (3 - 2 * x) * x * x;
         return lerp(fx, grad1d(p[X], x), grad1d(p[X + 1], x - 1));
     };
 }
 
 //  these are lifted from Processing.js
 // processing defaults
-var noiseProfile = { generator: undefined, octaves: 4, fallout: 0.5, seed: undefined};
+const noiseProfile = {
+    generator: undefined, octaves: 4, fallout: 0.5, seed: undefined,
+};
 
 module.exports = function noise(x, y, z) {
     if (noiseProfile.generator === undefined) {
     // caching
         noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
     }
-  var generator = noiseProfile.generator;
+    const generator = noiseProfile.generator;
-  var effect = 1, k = 1, sum = 0;
+    let effect = 1; let k = 1; let
-  for(var i=0; i<noiseProfile.octaves; ++i) {
+        sum = 0;
+    for (let i = 0; i < noiseProfile.octaves; ++i) {
         effect *= noiseProfile.fallout;
         switch (arguments.length) {
         case 1:

client/lib/fizzy-text.js

@@ -1,16 +1,15 @@
 const noise = require('./fizzy-noise');
 
 function fizzyText(message) {
-
+    const that = this;
-  var that = this;
 
     // These are the variables that we manipulate with gui-dat.
     // Notice they're all defined with "this". That makes them public.
     // Otherwise, gui-dat can't see them.
 
-  this.growthSpeed = 0.2;       // how fast do particles change size?
+    this.growthSpeed = 0.4;       // how fast do particles change size?
     this.minSize = 1;
-  this.maxSize = 6;          // how big can they get?
+    this.maxSize = 4;          // how big can they get?
     this.noiseStrength = 10;      // how turbulent is the flow?
     this.speed = 0.4;             // how fast do particles move?
     this.displayOutline = false;  // should we draw the message as a stroke?
@@ -18,25 +17,25 @@ function fizzyText(message) {
 
     // //////////////////////////////////////////////////////////////
 
-  var _this = this;
+    const _this = this;
 
-  var width = 550;
+    const width = 550;
-  var height = 200;
+    const height = 200;
-  var textAscent = 101;
+    const textAscent = 101;
-  var textOffsetLeft = 80;
+    const textOffsetLeft = 80;
-  var noiseScale = 300;
+    const noiseScale = 300;
-  var frameTime = 30;
+    const frameTime = 30;
 
-  var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
+    const colors = ['#000000', '#1A1A1A', '#163C50', '#205A79', '#2A78A2'];
 
     // This is the context we use to get a bitmap of text using
     // the getImageData function.
-  var r = document.createElement('canvas');
+    const r = document.createElement('canvas');
-  var s = r.getContext('2d');
+    const s = r.getContext('2d');
 
     // This is the context we actually use to draw.
-  var c = document.createElement('canvas');
+    const c = document.createElement('canvas');
-  var g = c.getContext('2d');
+    const g = c.getContext('2d');
 
     r.setAttribute('width', width);
     c.setAttribute('width', width);
@@ -47,78 +46,74 @@ function fizzyText(message) {
     document.getElementById('fizzytext').appendChild(c);
 
     // Stores bitmap image
-  var pixels = [];
+    let pixels = [];
 
     // Stores a list of particles
-  var particles = [];
+    const particles = [];
 
     // Set g.font to the same font as the bitmap canvas, incase we
     // want to draw some outlines.
-  s.font = g.font = "800 82px helvetica, arial, sans-serif";
+    s.font = g.font = '800 82px monospace, monospace';
 
     // Instantiate some particles
-  for (var i = 0; i < 1000; i++) {
+    for (let i = 0; i < 1000; i++) {
         particles.push(new Particle(Math.random() * width, Math.random() * height));
     }
 
     // This function creates a bitmap of pixels based on your message
     // It's called every time we change the message property.
-  var createBitmap = function (msg) {
+    const createBitmap = function (msg) {
-
+        s.fillStyle = '#fff';
-    s.fillStyle = "#fff";
         s.fillRect(0, 0, width, height);
 
-    s.fillStyle = "#222";
+        s.fillStyle = '#222';
         s.fillText(msg, textOffsetLeft, textAscent);
 
         // Pull reference
-    var imageData = s.getImageData(0, 0, width, height);
+        const imageData = s.getImageData(0, 0, width, height);
         pixels = imageData.data;
-
     };
 
     // Called once per frame, updates the animation.
-  var render = function () {
+    const render = function () {
-
         that.framesRendered++;
 
         g.clearRect(0, 0, width, height);
 
-    // if (_this.displayOutline) {
+        if (_this.displayOutline) {
-    //   g.globalCompositeOperation = "source-over";
+            g.globalCompositeOperation = 'source-over';
-    //   g.strokeStyle = "#000";
+            g.strokeStyle = '#000';
-    //   g.lineWidth = .5;
+            g.lineWidth = 0.5;
-    //   g.strokeText(message, textOffsetLeft, textAscent);
+            g.strokeText(message, textOffsetLeft, textAscent);
-    // }
+        }
 
-    g.globalCompositeOperation = "darker";
+        g.globalCompositeOperation = 'darker';
 
-    for (var i = 0; i < particles.length; i++) {
+        for (let i = 0; i < particles.length; i++) {
             g.fillStyle = colors[i % colors.length];
             particles[i].render();
         }
-
     };
 
     // Returns x, y coordinates for a given index in the pixel array.
-  var getPosition = function (i) {
+    const getPosition = function (i) {
         return {
             x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
-      y: Math.floor(i / (width * 4))
+            y: Math.floor(i / (width * 4)),
         };
     };
 
     // Returns a color for a given pixel in the pixel array.
-  var getColor = function (x, y) {
+    const getColor = function (x, y) {
-    var base = (Math.floor(y) * width + Math.floor(x)) * 4;
+        const base = (Math.floor(y) * width + Math.floor(x)) * 4;
-    var c = {
+        const c = {
             r: pixels[base + 0],
             g: pixels[base + 1],
             b: pixels[base + 2],
-      a: pixels[base + 3]
+            a: pixels[base + 3],
         };
 
-    return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
+        return `rgb(${c.r},${c.g},${c.b})`;
     };
 
     this.message = message;
@@ -127,7 +122,7 @@ function fizzyText(message) {
     var loop = function () {
         requestAnimationFrame(loop);
         render();
-  }
+    };
 
     // This calls the render function every 30 milliseconds.
     loop();
@@ -135,7 +130,6 @@ function fizzyText(message) {
     // This class is responsible for drawing and moving those little
     // colored dots.
     function Particle(x, y, c) {
-
     // Position
         this.x = x;
         this.y = y;
@@ -147,27 +141,26 @@ function fizzyText(message) {
         this.vx = 0;
         this.vy = 0;
 
-    this.constrain = function (v, o1, o2) {
+        this.constrain = function constrainFn(v, o1, o2) {
             if (v < o1) v = o1;
             else if (v > o2) v = o2;
             return v;
         };
 
         // Called every frame
-    this.render = function () {
+        this.render = function renderFrame() {
-
             // What color is the pixel we're sitting on top of?
-      var c = getColor(this.x, this.y);
+            const c = getColor(this.x, this.y);
 
             // Where should we move?
-      var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
+            const angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
             // var angle = -Math.PI/2;
 
             // Are we within the boundaries of the image?
-      var onScreen = this.x > 0 && this.x < width &&
+            const onScreen = this.x > 0 && this.x < width
-          this.y > 0 && this.y < height;
+          && this.y > 0 && this.y < height;
 
-      var isBlack = c != "rgb(255,255,255)" && onScreen;
+            const isBlack = c !== 'rgb(255,255,255)' && onScreen;
 
             // If we're on top of a black pixel, grow.
             // If not, shrink.
@@ -205,7 +198,7 @@ function fizzyText(message) {
             if (this.r <= 0) {
                 this.x = Math.random() * width;
                 this.y = Math.random() * height;
-        return; // Don't draw!
+                return false; // Don't draw!
             }
 
             // If we're off the screen, go over to other side
@@ -220,10 +213,9 @@ function fizzyText(message) {
             g.rect(this.x, this.y, this.r, this.r);
             g.fill();
 
+            return true;
+        };
     }
-
-  }
-
 }
 
 module.exports = fizzyText;

client/package.json

@@ -10,18 +10,18 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "babel-preset-react": "^6.24.1",
     "borc": "^2.0.3",
     "bulma-toast": "^1.2.0",
     "docco": "^0.7.0",
     "jdenticon": "^2.1.0",
-    "jest": "^18.0.0",
-    "parcel": "^1.9.7",
     "preact": "^8.3.1",
     "preact-redux": "^2.0.3",
     "redux": "^4.0.0"
   },
   "devDependencies": {
+    "parcel": "^1.9.7",
+    "jest": "^18.0.0",
+    "babel-preset-react": "^6.24.1",
     "eslint": "^5.6.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",

client/src/actions.jsx

@@ -1,3 +1,3 @@
 export const SET_ACCOUNT = 'SET_ACCOUNT';
 
-export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
+export const setAccount = value => ({ type: SET_ACCOUNT, value });

client/src/main.jsx

@@ -46,4 +46,4 @@ const Main = () => (
 
 preact.render(<Main />, document.body);
 
-fizzyText('cryps');
+fizzyText('cryps.gg');