diff --git a/client/lib/fizzy-noise.js b/client/lib/fizzy-noise.js index d91d2da2..20b6510f 100644 --- a/client/lib/fizzy-noise.js +++ b/client/lib/fizzy-noise.js @@ -1,181 +1,189 @@ // http://mrl.nyu.edu/~perlin/noise/ -var ImprovedNoise = function () { - - 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, - 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5, - 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119, - 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232, - 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249, - 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++ ) { - - p[ 256 + i ] = p[ i ]; +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, + 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, + 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, + 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, + 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, + 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, + 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 (let i = 0; i < 256; i++) { + p[256 + i] = p[i]; } - function fade( t ) { - - return t * t * t * ( t * ( t * 6 - 15 ) + 10 ); - + function fade(t) { + return t * t * t * (t * (t * 6 - 15) + 10); } - function lerp( t, a, b ) { - - return a + t * ( b - a ); - + function lerp(t, a, b) { + return a + t * (b - a); } - function grad( hash, x, y, z ) { - - var h = hash & 15; - var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z; - return ( ( h & 1 ) == 0 ? u : -u ) + ( ( h & 2 ) == 0 ? v : -v ); - + function grad(hash, x, y, z) { + const h = hash & 15; + const u = h < 8 ? x : y; const + 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 ); - - var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255; + const X = floorX & 255; const Y = floorY & 255; const + 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 ) ), - lerp( u, grad( p[ AB ], x, yMinus1, z ), - grad( p[ BB ], xMinus1, yMinus1, z ) ) ), - lerp( v, lerp( u, grad( p[ AA + 1 ], x, y, zMinus1 ), - grad( p[ BA + 1 ], xMinus1, y, z - 1 ) ), - lerp( u, grad( p[ AB + 1 ], x, yMinus1, zMinus1 ), - grad( p[ BB + 1 ], xMinus1, yMinus1, zMinus1 ) ) ) ); + return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), + grad(p[BA], xMinus1, y, z)), + lerp(u, grad(p[AB], x, yMinus1, z), + grad(p[BB], xMinus1, yMinus1, z))), + lerp(v, lerp(u, grad(p[AA + 1], x, y, zMinus1), + grad(p[BA + 1], xMinus1, y, z - 1)), + lerp(u, grad(p[AB + 1], x, yMinus1, zMinus1), + grad(p[BB + 1], xMinus1, yMinus1, zMinus1)))); + }, + }; +}; - } - } -} - -var currentRandom = Math.random; +const 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; - var nextInt = function() { - z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF; - w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF; - return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF; - }; + // from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c + let z = i1 || 362436069; let + 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; - return i < 0 ? 1 + i : i; - }; - this.nextInt = nextInt; + this.nextDouble = function () { + const i = nextInt() / 4294967296; + return i < 0 ? 1 + i : i; + }; + this.nextInt = nextInt; } -Marsaglia.createRandomized = function() { - var now = new Date(); - return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF); +Marsaglia.createRandomized = function () { + 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(); - var i, j; - // http://www.noisemachine.com/talk1/17b.html - // http://mrl.nyu.edu/~perlin/noise/ - // generate permutation - var 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; } - // copy to avoid taking mod in p[0]; - for(i=0;i<256;++i) { p[i + 256] = p[i]; } + const rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized(); + let i; let + j; + // http://www.noisemachine.com/talk1/17b.html + // http://mrl.nyu.edu/~perlin/noise/ + // generate permutation + const p = new Array(512); + for (i = 0; i < 256; ++i) { p[i] = i; } + 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 - var u = h<8 ? x : y, - v = h<4 ? y : h===12||h===14 ? x : z; - return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v); - } + function grad3d(i, x, y, z) { + const h = i & 15; // convert into 12 gradient directions + const u = h < 8 ? x : y; - function grad2d(i,x,y) { - var v = (i & 1) === 0 ? x : y; - return (i&2) === 0 ? -v : v; - } - function grad1d(i,x) { - return (i&1) === 0 ? -x : x; - } + const v = h < 4 ? y : h === 12 || h === 14 ? x : z; + return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v); + } - function lerp(t,a,b) { return a + t * (b - a); } + function grad2d(i, x, y) { + const v = (i & 1) === 0 ? x : y; + return (i & 2) === 0 ? -v : v; + } - this.noise3d = function(x, y, z) { - var X = Math.floor(x)&255, Y = Math.floor(y)&255, 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; - 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; - 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))), - lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z-1), grad3d(p[p10 + 1], x-1, y, z-1)), - lerp(fx, grad3d(p[p01 + 1], x, y-1, z-1), grad3d(p[p11 + 1], x-1, y-1,z-1)))); - }; + function grad1d(i, x) { + return (i & 1) === 0 ? -x : x; + } - this.noise2d = function(x, y) { - var X = Math.floor(x)&255, 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; - var p0 = p[X]+Y, 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))); - }; + function lerp(t, a, b) { return a + t * (b - a); } - this.noise1d = function(x) { - var X = Math.floor(x)&255; - x -= Math.floor(x); - var fx = (3-2*x)*x*x; - return lerp(fx, grad1d(p[X], x), grad1d(p[X+1], x-1)); - }; + this.noise3d = function (x, y, z) { + 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); + const fx = (3 - 2 * x) * x * x; const fy = (3 - 2 * y) * y * y; const + 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))), + lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z - 1), grad3d(p[p10 + 1], x - 1, y, z - 1)), + lerp(fx, grad3d(p[p01 + 1], x, y - 1, z - 1), grad3d(p[p11 + 1], x - 1, y - 1, z - 1)))); + }; + + this.noise2d = function (x, y) { + const X = Math.floor(x) & 255; const + Y = Math.floor(y) & 255; + x -= Math.floor(x); y -= Math.floor(y); + const fx = (3 - 2 * x) * x * x; const + 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) { + const X = Math.floor(x) & 255; + x -= Math.floor(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) { + if (noiseProfile.generator === undefined) { // caching - noiseProfile.generator = new PerlinNoise(noiseProfile.seed); - } - var generator = noiseProfile.generator; - var effect = 1, k = 1, sum = 0; - for(var i=0; i o2) v = o2; - return v; - }; + 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 () { + // Called every frame + this.render = function renderFrame() { + // What color is the pixel we're sitting on top of? + const c = getColor(this.x, this.y); - // What color is the pixel we're sitting on top of? - var c = getColor(this.x, this.y); + // Where should we move? + const angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength; + // var angle = -Math.PI/2; - // Where should we move? - var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength; - // var angle = -Math.PI/2; + // Are we within the boundaries of the image? + const onScreen = this.x > 0 && this.x < width + && this.y > 0 && this.y < height; - // Are we within the boundaries of the image? - var onScreen = this.x > 0 && this.x < width && - this.y > 0 && this.y < height; + const isBlack = c !== 'rgb(255,255,255)' && onScreen; - var isBlack = c != "rgb(255,255,255)" && onScreen; + // If we're on top of a black pixel, grow. + // If not, shrink. + if (isBlack) { + this.r += _this.growthSpeed; + } else { + this.r -= _this.growthSpeed; + } - // If we're on top of a black pixel, grow. - // If not, shrink. - if (isBlack) { - this.r += _this.growthSpeed; - } else { - this.r -= _this.growthSpeed; - } + // This velocity is used by the explode function. + this.vx *= 0.5; + this.vy *= 0.5; - // This velocity is used by the explode function. - this.vx *= 0.5; - this.vy *= 0.5; + // Change our position based on the flow field and our + // explode velocity. + this.x += Math.cos(angle) * _this.speed + this.vx; + this.y += -Math.sin(angle) * _this.speed + this.vy; - // Change our position based on the flow field and our - // explode velocity. - this.x += Math.cos(angle) * _this.speed + this.vx; - this.y += -Math.sin(angle) * _this.speed + this.vy; + if (this.r > _this.maxSize) { + this.r = _this.maxSize; + } else if (this.r < 0) { + this.r = 0; + this.x = Math.random() * width; + this.y = Math.random() * height; + return false; + } - if (this.r > _this.maxSize) { - this.r = _this.maxSize; - } else if (this.r < 0) { - this.r = 0; - this.x = Math.random() * width; - this.y = Math.random() * height; - return false; - } + // this.r = 3; + // debugger + // console.log(DAT.GUI.constrain(this.r, 0, _this.maxSize)); + // this.r = this.constrain(this.r, _this.minSize, _this.maxSize); - // this.r = 3; - // debugger - // console.log(DAT.GUI.constrain(this.r, 0, _this.maxSize)); - // this.r = this.constrain(this.r, _this.minSize, _this.maxSize); + // If we're tiny, keep moving around until we find a black + // pixel. + if (this.r <= 0) { + this.x = Math.random() * width; + this.y = Math.random() * height; + return false; // Don't draw! + } - // If we're tiny, keep moving around until we find a black - // pixel. - if (this.r <= 0) { - this.x = Math.random() * width; - this.y = Math.random() * height; - return; // Don't draw! - } + // If we're off the screen, go over to other side + if (this.x < 0) this.x = width; + if (this.x > width) this.x = 0; + if (this.y < 0) this.y = height; + if (this.y > height) this.y = 0; - // If we're off the screen, go over to other side - if(this.x < 0) this.x = width; - if(this.x > width) this.x = 0; - if(this.y < 0) this.y = height; - if(this.y > height) this.y = 0; - - // Draw the circle. - g.beginPath(); - // g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); - g.rect(this.x, this.y, this.r, this.r); - g.fill(); + // Draw the circle. + g.beginPath(); + // g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); + g.rect(this.x, this.y, this.r, this.r); + g.fill(); + return true; + }; } - - } - } -module.exports = fizzyText; \ No newline at end of file +module.exports = fizzyText; diff --git a/client/package.json b/client/package.json index e0a506b7..4206c981 100755 --- a/client/package.json +++ b/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", diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 99bcacc0..18d71bdb 100644 --- a/client/src/actions.jsx +++ b/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 }); diff --git a/client/src/main.jsx b/client/src/main.jsx index 975fb51e..69f3001c 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -46,4 +46,4 @@ const Main = () => ( preact.render(
, document.body); -fizzyText('cryps'); +fizzyText('cryps.gg'); diff --git a/client/src/socket.jsx b/client/src/socket.jsx index 6893f046..e7da8bcc 100644 --- a/client/src/socket.jsx +++ b/client/src/socket.jsx @@ -34,7 +34,7 @@ function createSocket(store) { account = login; store.dispatch(actions.setAccount(login)); console.log(account); - return send({ method: 'cryp_spawn', params: { name: 'drake' }}); + return send({ method: 'cryp_spawn', params: { name: 'drake' } }); } function crypSpawn(cryp) {