little dots
This commit is contained in:
ntr
parent
830797c145
commit
96ebe07e39
@ -1,181 +1,189 @@
|
|||||||
// http://mrl.nyu.edu/~perlin/noise/
|
// 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,
|
||||||
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,
|
||||||
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,
|
||||||
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,
|
||||||
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,
|
||||||
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,
|
||||||
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,
|
||||||
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,
|
||||||
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];
|
||||||
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 ];
|
|
||||||
|
|
||||||
|
for (let i = 0; i < 256; i++) {
|
||||||
|
p[256 + i] = p[i];
|
||||||
}
|
}
|
||||||
|
|
||||||
function fade( t ) {
|
function fade(t) {
|
||||||
|
return t * t * t * (t * (t * 6 - 15) + 10);
|
||||||
return t * t * t * ( t * ( t * 6 - 15 ) + 10 );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function lerp( t, a, b ) {
|
function lerp(t, a, b) {
|
||||||
|
return a + t * (b - a);
|
||||||
return a + t * ( b - a );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function grad( hash, x, y, z ) {
|
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 ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
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;
|
x -= floorX;
|
||||||
y -= floorY;
|
y -= floorY;
|
||||||
z -= floorZ;
|
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 ),
|
return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z),
|
||||||
grad( p[ BA ], xMinus1, y, z ) ),
|
grad(p[BA], xMinus1, y, z)),
|
||||||
lerp( u, grad( p[ AB ], x, yMinus1, z ),
|
lerp(u, grad(p[AB], x, yMinus1, z),
|
||||||
grad( p[ BB ], xMinus1, yMinus1, z ) ) ),
|
grad(p[BB], xMinus1, yMinus1, z))),
|
||||||
lerp( v, lerp( u, grad( p[ AA + 1 ], x, y, zMinus1 ),
|
lerp(v, lerp(u, grad(p[AA + 1], x, y, zMinus1),
|
||||||
grad( p[ BA + 1 ], xMinus1, y, z - 1 ) ),
|
grad(p[BA + 1], xMinus1, y, z - 1)),
|
||||||
lerp( u, grad( p[ AB + 1 ], x, yMinus1, zMinus1 ),
|
lerp(u, grad(p[AB + 1], x, yMinus1, zMinus1),
|
||||||
grad( p[ BB + 1 ], xMinus1, yMinus1, zMinus1 ) ) ) );
|
grad(p[BB + 1], xMinus1, yMinus1, zMinus1))));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
}
|
const currentRandom = Math.random;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var currentRandom = Math.random;
|
|
||||||
|
|
||||||
// Pseudo-random generator
|
// Pseudo-random generator
|
||||||
function Marsaglia(i1, i2) {
|
function Marsaglia(i1, i2) {
|
||||||
// from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
|
// 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;
|
||||||
z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF;
|
const nextInt = function () {
|
||||||
w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF;
|
z = (36969 * (z & 65535) + (z >>> 16)) & 0xFFFFFFFF;
|
||||||
return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF;
|
w = (18000 * (w & 65535) + (w >>> 16)) & 0xFFFFFFFF;
|
||||||
};
|
return (((z & 0xFFFF) << 16) | (w & 0xFFFF)) & 0xFFFFFFFF;
|
||||||
|
};
|
||||||
|
|
||||||
this.nextDouble = function() {
|
this.nextDouble = function () {
|
||||||
var i = nextInt() / 4294967296;
|
const i = nextInt() / 4294967296;
|
||||||
return i < 0 ? 1 + i : i;
|
return i < 0 ? 1 + i : i;
|
||||||
};
|
};
|
||||||
this.nextInt = nextInt;
|
this.nextInt = nextInt;
|
||||||
}
|
}
|
||||||
Marsaglia.createRandomized = function() {
|
Marsaglia.createRandomized = function () {
|
||||||
var now = new Date();
|
const now = new Date();
|
||||||
return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
|
return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Noise functions and helpers
|
// Noise functions and helpers
|
||||||
function PerlinNoise(seed) {
|
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
|
||||||
// http://www.noisemachine.com/talk1/17b.html
|
j;
|
||||||
// http://mrl.nyu.edu/~perlin/noise/
|
// http://www.noisemachine.com/talk1/17b.html
|
||||||
// generate permutation
|
// http://mrl.nyu.edu/~perlin/noise/
|
||||||
var p = new Array(512);
|
// generate permutation
|
||||||
for(i=0;i<256;++i) { p[i] = i; }
|
const p = new Array(512);
|
||||||
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) { p[i] = i; }
|
||||||
// copy to avoid taking mod in p[0];
|
for (i = 0; i < 256; ++i) { const t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
|
||||||
for(i=0;i<256;++i) { p[i + 256] = p[i]; }
|
// 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) {
|
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;
|
|
||||||
return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
|
|
||||||
}
|
|
||||||
|
|
||||||
function grad2d(i,x,y) {
|
|
||||||
var v = (i & 1) === 0 ? x : y;
|
|
||||||
return (i&2) === 0 ? -v : v;
|
|
||||||
}
|
|
||||||
|
|
||||||
function grad1d(i,x) {
|
const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
|
||||||
return (i&1) === 0 ? -x : x;
|
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) {
|
function grad1d(i, x) {
|
||||||
var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
|
return (i & 1) === 0 ? -x : x;
|
||||||
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))));
|
|
||||||
};
|
|
||||||
|
|
||||||
this.noise2d = function(x, y) {
|
function lerp(t, a, b) { return a + t * (b - a); }
|
||||||
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)));
|
|
||||||
};
|
|
||||||
|
|
||||||
this.noise1d = function(x) {
|
this.noise3d = function (x, y, z) {
|
||||||
var X = Math.floor(x)&255;
|
const X = Math.floor(x) & 255; const Y = Math.floor(y) & 255; const
|
||||||
x -= Math.floor(x);
|
Z = Math.floor(z) & 255;
|
||||||
var fx = (3-2*x)*x*x;
|
x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
|
||||||
return lerp(fx, grad1d(p[X], x), grad1d(p[X+1], x-1));
|
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
|
// these are lifted from Processing.js
|
||||||
// processing defaults
|
// 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) {
|
module.exports = function noise(x, y, z) {
|
||||||
if(noiseProfile.generator === undefined) {
|
if (noiseProfile.generator === undefined) {
|
||||||
// caching
|
// caching
|
||||||
noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
|
noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
|
||||||
}
|
|
||||||
var generator = noiseProfile.generator;
|
|
||||||
var effect = 1, k = 1, sum = 0;
|
|
||||||
for(var i=0; i<noiseProfile.octaves; ++i) {
|
|
||||||
effect *= noiseProfile.fallout;
|
|
||||||
switch (arguments.length) {
|
|
||||||
case 1:
|
|
||||||
sum += effect * (1 + generator.noise1d(k*x))/2; break;
|
|
||||||
case 2:
|
|
||||||
sum += effect * (1 + generator.noise2d(k*x, k*y))/2; break;
|
|
||||||
case 3:
|
|
||||||
sum += effect * (1 + generator.noise3d(k*x, k*y, k*z))/2; break;
|
|
||||||
}
|
}
|
||||||
k *= 2;
|
const generator = noiseProfile.generator;
|
||||||
}
|
let effect = 1; let k = 1; let
|
||||||
return sum;
|
sum = 0;
|
||||||
|
for (let i = 0; i < noiseProfile.octaves; ++i) {
|
||||||
|
effect *= noiseProfile.fallout;
|
||||||
|
switch (arguments.length) {
|
||||||
|
case 1:
|
||||||
|
sum += effect * (1 + generator.noise1d(k * x)) / 2; break;
|
||||||
|
case 2:
|
||||||
|
sum += effect * (1 + generator.noise2d(k * x, k * y)) / 2; break;
|
||||||
|
case 3:
|
||||||
|
sum += effect * (1 + generator.noise3d(k * x, k * y, k * z)) / 2; break;
|
||||||
|
}
|
||||||
|
k *= 2;
|
||||||
|
}
|
||||||
|
return sum;
|
||||||
};
|
};
|
||||||
@ -1,229 +1,221 @@
|
|||||||
const noise = require('./fizzy-noise');
|
const noise = require('./fizzy-noise');
|
||||||
|
|
||||||
function fizzyText(message) {
|
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.
|
||||||
|
|
||||||
// These are the variables that we manipulate with gui-dat.
|
this.growthSpeed = 0.4; // how fast do particles change size?
|
||||||
// Notice they're all defined with "this". That makes them public.
|
this.minSize = 1;
|
||||||
// Otherwise, gui-dat can't see them.
|
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?
|
||||||
|
this.framesRendered = 0;
|
||||||
|
|
||||||
this.growthSpeed = 0.2; // how fast do particles change size?
|
// //////////////////////////////////////////////////////////////
|
||||||
this.minSize = 1;
|
|
||||||
this.maxSize = 6; // 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?
|
|
||||||
this.framesRendered = 0;
|
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////
|
const _this = this;
|
||||||
|
|
||||||
var _this = this;
|
const width = 550;
|
||||||
|
const height = 200;
|
||||||
|
const textAscent = 101;
|
||||||
|
const textOffsetLeft = 80;
|
||||||
|
const noiseScale = 300;
|
||||||
|
const frameTime = 30;
|
||||||
|
|
||||||
var width = 550;
|
const colors = ['#000000', '#1A1A1A', '#163C50', '#205A79', '#2A78A2'];
|
||||||
var height = 200;
|
|
||||||
var textAscent = 101;
|
|
||||||
var textOffsetLeft = 80;
|
|
||||||
var noiseScale = 300;
|
|
||||||
var frameTime = 30;
|
|
||||||
|
|
||||||
var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
|
// This is the context we use to get a bitmap of text using
|
||||||
|
// the getImageData function.
|
||||||
|
const r = document.createElement('canvas');
|
||||||
|
const s = r.getContext('2d');
|
||||||
|
|
||||||
// This is the context we use to get a bitmap of text using
|
// This is the context we actually use to draw.
|
||||||
// the getImageData function.
|
const c = document.createElement('canvas');
|
||||||
var r = document.createElement('canvas');
|
const g = c.getContext('2d');
|
||||||
var s = r.getContext('2d');
|
|
||||||
|
|
||||||
// This is the context we actually use to draw.
|
r.setAttribute('width', width);
|
||||||
var c = document.createElement('canvas');
|
c.setAttribute('width', width);
|
||||||
var g = c.getContext('2d');
|
r.setAttribute('height', height);
|
||||||
|
c.setAttribute('height', height);
|
||||||
|
|
||||||
r.setAttribute('width', width);
|
// Add our demo to the HTML
|
||||||
c.setAttribute('width', width);
|
document.getElementById('fizzytext').appendChild(c);
|
||||||
r.setAttribute('height', height);
|
|
||||||
c.setAttribute('height', height);
|
|
||||||
|
|
||||||
// Add our demo to the HTML
|
// Stores bitmap image
|
||||||
document.getElementById('fizzytext').appendChild(c);
|
let pixels = [];
|
||||||
|
|
||||||
// Stores bitmap image
|
// Stores a list of particles
|
||||||
var pixels = [];
|
const particles = [];
|
||||||
|
|
||||||
// Stores a list of particles
|
// Set g.font to the same font as the bitmap canvas, incase we
|
||||||
var particles = [];
|
// want to draw some outlines.
|
||||||
|
s.font = g.font = '800 82px monospace, monospace';
|
||||||
|
|
||||||
// Set g.font to the same font as the bitmap canvas, incase we
|
// Instantiate some particles
|
||||||
// want to draw some outlines.
|
for (let i = 0; i < 1000; i++) {
|
||||||
s.font = g.font = "800 82px helvetica, arial, sans-serif";
|
particles.push(new Particle(Math.random() * width, Math.random() * height));
|
||||||
|
|
||||||
// Instantiate some particles
|
|
||||||
for (var 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) {
|
|
||||||
|
|
||||||
s.fillStyle = "#fff";
|
|
||||||
s.fillRect(0, 0, width, height);
|
|
||||||
|
|
||||||
s.fillStyle = "#222";
|
|
||||||
s.fillText(msg, textOffsetLeft, textAscent);
|
|
||||||
|
|
||||||
// Pull reference
|
|
||||||
var imageData = s.getImageData(0, 0, width, height);
|
|
||||||
pixels = imageData.data;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// Called once per frame, updates the animation.
|
|
||||||
var render = function () {
|
|
||||||
|
|
||||||
that.framesRendered ++;
|
|
||||||
|
|
||||||
g.clearRect(0, 0, width, height);
|
|
||||||
|
|
||||||
// if (_this.displayOutline) {
|
|
||||||
// g.globalCompositeOperation = "source-over";
|
|
||||||
// g.strokeStyle = "#000";
|
|
||||||
// g.lineWidth = .5;
|
|
||||||
// g.strokeText(message, textOffsetLeft, textAscent);
|
|
||||||
// }
|
|
||||||
|
|
||||||
g.globalCompositeOperation = "darker";
|
|
||||||
|
|
||||||
for (var i = 0; i < particles.length; i++) {
|
|
||||||
g.fillStyle = colors[i % colors.length];
|
|
||||||
particles[i].render();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
// This function creates a bitmap of pixels based on your message
|
||||||
|
// It's called every time we change the message property.
|
||||||
|
const createBitmap = function (msg) {
|
||||||
|
s.fillStyle = '#fff';
|
||||||
|
s.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
// Returns x, y coordinates for a given index in the pixel array.
|
s.fillStyle = '#222';
|
||||||
var getPosition = function (i) {
|
s.fillText(msg, textOffsetLeft, textAscent);
|
||||||
return {
|
|
||||||
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
|
|
||||||
y: Math.floor(i / (width * 4))
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// Returns a color for a given pixel in the pixel array.
|
// Pull reference
|
||||||
var getColor = function (x, y) {
|
const imageData = s.getImageData(0, 0, width, height);
|
||||||
var base = (Math.floor(y) * width + Math.floor(x)) * 4;
|
pixels = imageData.data;
|
||||||
var c = {
|
|
||||||
r: pixels[base + 0],
|
|
||||||
g: pixels[base + 1],
|
|
||||||
b: pixels[base + 2],
|
|
||||||
a: pixels[base + 3]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
|
// Called once per frame, updates the animation.
|
||||||
};
|
const render = function () {
|
||||||
|
that.framesRendered++;
|
||||||
|
|
||||||
this.message = message;
|
g.clearRect(0, 0, width, height);
|
||||||
createBitmap(message);
|
|
||||||
|
|
||||||
var loop = function() {
|
if (_this.displayOutline) {
|
||||||
requestAnimationFrame(loop);
|
g.globalCompositeOperation = 'source-over';
|
||||||
render();
|
g.strokeStyle = '#000';
|
||||||
}
|
g.lineWidth = 0.5;
|
||||||
|
g.strokeText(message, textOffsetLeft, textAscent);
|
||||||
|
}
|
||||||
|
|
||||||
// This calls the render function every 30 milliseconds.
|
g.globalCompositeOperation = 'darker';
|
||||||
loop();
|
|
||||||
|
|
||||||
// This class is responsible for drawing and moving those little
|
for (let i = 0; i < particles.length; i++) {
|
||||||
// colored dots.
|
g.fillStyle = colors[i % colors.length];
|
||||||
function Particle(x, y, c) {
|
particles[i].render();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Returns x, y coordinates for a given index in the pixel array.
|
||||||
|
const getPosition = function (i) {
|
||||||
|
return {
|
||||||
|
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
|
||||||
|
y: Math.floor(i / (width * 4)),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Returns a color for a given pixel in the pixel array.
|
||||||
|
const getColor = function (x, y) {
|
||||||
|
const base = (Math.floor(y) * width + Math.floor(x)) * 4;
|
||||||
|
const c = {
|
||||||
|
r: pixels[base + 0],
|
||||||
|
g: pixels[base + 1],
|
||||||
|
b: pixels[base + 2],
|
||||||
|
a: pixels[base + 3],
|
||||||
|
};
|
||||||
|
|
||||||
|
return `rgb(${c.r},${c.g},${c.b})`;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.message = message;
|
||||||
|
createBitmap(message);
|
||||||
|
|
||||||
|
var loop = function () {
|
||||||
|
requestAnimationFrame(loop);
|
||||||
|
render();
|
||||||
|
};
|
||||||
|
|
||||||
|
// This calls the render function every 30 milliseconds.
|
||||||
|
loop();
|
||||||
|
|
||||||
|
// This class is responsible for drawing and moving those little
|
||||||
|
// colored dots.
|
||||||
|
function Particle(x, y, c) {
|
||||||
// Position
|
// Position
|
||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
this.y = y;
|
||||||
|
|
||||||
// Size of particle
|
// Size of particle
|
||||||
this.r = 1;
|
this.r = 1;
|
||||||
|
|
||||||
// This velocity is used by the explode function.
|
// This velocity is used by the explode function.
|
||||||
this.vx = 0;
|
this.vx = 0;
|
||||||
this.vy = 0;
|
this.vy = 0;
|
||||||
|
|
||||||
this.constrain = function (v, o1, o2) {
|
this.constrain = function constrainFn(v, o1, o2) {
|
||||||
if (v < o1) v = o1;
|
if (v < o1) v = o1;
|
||||||
else if (v > o2) v = o2;
|
else if (v > o2) v = o2;
|
||||||
return v;
|
return v;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Called every frame
|
// Called every frame
|
||||||
this.render = function () {
|
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?
|
// Where should we move?
|
||||||
var c = getColor(this.x, this.y);
|
const angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
|
||||||
|
// var angle = -Math.PI/2;
|
||||||
|
|
||||||
// Where should we move?
|
// Are we within the boundaries of the image?
|
||||||
var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
|
const onScreen = this.x > 0 && this.x < width
|
||||||
// var angle = -Math.PI/2;
|
&& this.y > 0 && this.y < height;
|
||||||
|
|
||||||
// Are we within the boundaries of the image?
|
const isBlack = c !== 'rgb(255,255,255)' && onScreen;
|
||||||
var onScreen = this.x > 0 && this.x < width &&
|
|
||||||
this.y > 0 && this.y < height;
|
|
||||||
|
|
||||||
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.
|
// This velocity is used by the explode function.
|
||||||
// If not, shrink.
|
this.vx *= 0.5;
|
||||||
if (isBlack) {
|
this.vy *= 0.5;
|
||||||
this.r += _this.growthSpeed;
|
|
||||||
} else {
|
|
||||||
this.r -= _this.growthSpeed;
|
|
||||||
}
|
|
||||||
|
|
||||||
// This velocity is used by the explode function.
|
// Change our position based on the flow field and our
|
||||||
this.vx *= 0.5;
|
// explode velocity.
|
||||||
this.vy *= 0.5;
|
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
|
if (this.r > _this.maxSize) {
|
||||||
// explode velocity.
|
this.r = _this.maxSize;
|
||||||
this.x += Math.cos(angle) * _this.speed + this.vx;
|
} else if (this.r < 0) {
|
||||||
this.y += -Math.sin(angle) * _this.speed + this.vy;
|
this.r = 0;
|
||||||
|
this.x = Math.random() * width;
|
||||||
|
this.y = Math.random() * height;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.r > _this.maxSize) {
|
// this.r = 3;
|
||||||
this.r = _this.maxSize;
|
// debugger
|
||||||
} else if (this.r < 0) {
|
// console.log(DAT.GUI.constrain(this.r, 0, _this.maxSize));
|
||||||
this.r = 0;
|
// this.r = this.constrain(this.r, _this.minSize, _this.maxSize);
|
||||||
this.x = Math.random() * width;
|
|
||||||
this.y = Math.random() * height;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// this.r = 3;
|
// If we're tiny, keep moving around until we find a black
|
||||||
// debugger
|
// pixel.
|
||||||
// console.log(DAT.GUI.constrain(this.r, 0, _this.maxSize));
|
if (this.r <= 0) {
|
||||||
// this.r = this.constrain(this.r, _this.minSize, _this.maxSize);
|
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
|
// If we're off the screen, go over to other side
|
||||||
// pixel.
|
if (this.x < 0) this.x = width;
|
||||||
if (this.r <= 0) {
|
if (this.x > width) this.x = 0;
|
||||||
this.x = Math.random() * width;
|
if (this.y < 0) this.y = height;
|
||||||
this.y = Math.random() * height;
|
if (this.y > height) this.y = 0;
|
||||||
return; // Don't draw!
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we're off the screen, go over to other side
|
// Draw the circle.
|
||||||
if(this.x < 0) this.x = width;
|
g.beginPath();
|
||||||
if(this.x > width) this.x = 0;
|
// g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
|
||||||
if(this.y < 0) this.y = height;
|
g.rect(this.x, this.y, this.r, this.r);
|
||||||
if(this.y > height) this.y = 0;
|
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;
|
module.exports = fizzyText;
|
||||||
@ -10,18 +10,18 @@
|
|||||||
"author": "",
|
"author": "",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"babel-preset-react": "^6.24.1",
|
|
||||||
"borc": "^2.0.3",
|
"borc": "^2.0.3",
|
||||||
"bulma-toast": "^1.2.0",
|
"bulma-toast": "^1.2.0",
|
||||||
"docco": "^0.7.0",
|
"docco": "^0.7.0",
|
||||||
"jdenticon": "^2.1.0",
|
"jdenticon": "^2.1.0",
|
||||||
"jest": "^18.0.0",
|
|
||||||
"parcel": "^1.9.7",
|
|
||||||
"preact": "^8.3.1",
|
"preact": "^8.3.1",
|
||||||
"preact-redux": "^2.0.3",
|
"preact-redux": "^2.0.3",
|
||||||
"redux": "^4.0.0"
|
"redux": "^4.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"parcel": "^1.9.7",
|
||||||
|
"jest": "^18.0.0",
|
||||||
|
"babel-preset-react": "^6.24.1",
|
||||||
"eslint": "^5.6.0",
|
"eslint": "^5.6.0",
|
||||||
"eslint-config-airbnb": "^17.1.0",
|
"eslint-config-airbnb": "^17.1.0",
|
||||||
"eslint-plugin-import": "^2.14.0",
|
"eslint-plugin-import": "^2.14.0",
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
export const SET_ACCOUNT = 'SET_ACCOUNT';
|
export const SET_ACCOUNT = 'SET_ACCOUNT';
|
||||||
|
|
||||||
export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
|
export const setAccount = value => ({ type: SET_ACCOUNT, value });
|
||||||
|
|||||||
@ -46,4 +46,4 @@ const Main = () => (
|
|||||||
|
|
||||||
preact.render(<Main />, document.body);
|
preact.render(<Main />, document.body);
|
||||||
|
|
||||||
fizzyText('cryps');
|
fizzyText('cryps.gg');
|
||||||
|
|||||||
@ -34,7 +34,7 @@ function createSocket(store) {
|
|||||||
account = login;
|
account = login;
|
||||||
store.dispatch(actions.setAccount(login));
|
store.dispatch(actions.setAccount(login));
|
||||||
console.log(account);
|
console.log(account);
|
||||||
return send({ method: 'cryp_spawn', params: { name: 'drake' }});
|
return send({ method: 'cryp_spawn', params: { name: 'drake' } });
|
||||||
}
|
}
|
||||||
|
|
||||||
function crypSpawn(cryp) {
|
function crypSpawn(cryp) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user