Fantastic Frontier Roblox Wiki
Register
mNo edit summary
mNo edit summary
Line 1: Line 1:
 
$(function() {
 
$(function() {
  +
console.log("has page:", $("body").hasClass("page-Flying_Clown"));
setTimeout(function() {
 
// Restrict to certain article. TO-DO: Edit to page-Kenneths_Paroxysm_Flower_Helmet.
+
// Restrict to certain article. TO-DO: Edit to page-Kenneths_Paroxysm_Flower_Helmet.
if ($("body").hasClass("page-Flying_Clown")) {
+
if ($("body").hasClass("page-Flying_Clown")) {
+
// Globals
'use strict';
+
var $window = $(window)
+
, random = Math.random
$(function() {
+
, cos = Math.cos
// Globals
+
, sin = Math.sin
var $window = $(window)
+
, PI = Math.PI
, random = Math.random
+
, PI2 = PI * 2
, cos = Math.cos
+
, timer = undefined
, sin = Math.sin
+
, frame = undefined
, PI = Math.PI
+
, confetti = [];
  +
, PI2 = PI * 2
 
 
// Settings
, timer = undefined
 
, frame = undefined
+
var particles = 150
, confetti = [];
+
, spread = 40
+
, sizeMin = 3
// Settings
+
, sizeMax = 12 - sizeMin
var particles = 150
+
, eccentricity = 10
, spread = 40
+
, deviation = 100
, sizeMin = 3
+
, dxThetaMin = -.1
, sizeMax = 12 - sizeMin
+
, dxThetaMax = -dxThetaMin - dxThetaMin
, eccentricity = 10
+
, dyMin = .13
, deviation = 100
+
, dyMax = .18
, dxThetaMin = -.1
+
, dThetaMin = .4
, dxThetaMax = -dxThetaMin - dxThetaMin
+
, dThetaMax = .7 - dThetaMin;
  +
, dyMin = .13
 
, dyMax = .18
+
var colorThemes = [
, dThetaMin = .4
+
function() {
, dThetaMax = .7 - dThetaMin;
+
return color(200 * random()|0, 200 * random()|0, 200 * random()|0);
+
}, function() {
var colorThemes = [
+
var black = 200 * random()|0; return color(200, black, black);
function() {
+
}, function() {
return color(200 * random()|0, 200 * random()|0, 200 * random()|0);
+
var black = 200 * random()|0; return color(black, 200, black);
}, function() {
+
}, function() {
var black = 200 * random()|0; return color(200, black, black);
+
var black = 200 * random()|0; return color(black, black, 200);
}, function() {
+
}, function() {
var black = 200 * random()|0; return color(black, 200, black);
+
return color(200, 100, 200 * random()|0);
}, function() {
+
}, function() {
var black = 200 * random()|0; return color(black, black, 200);
+
return color(200 * random()|0, 200, 200);
}, function() {
+
}, function() {
return color(200, 100, 200 * random()|0);
+
var black = 256 * random()|0; return color(black, black, black);
}, function() {
+
}, function() {
return color(200 * random()|0, 200, 200);
+
return colorThemes[random() < .5 ? 1 : 2]();
}, function() {
+
}, function() {
 
return colorThemes[random() < .5 ? 3 : 5]();
var black = 256 * random()|0; return color(black, black, black);
 
}, function() {
+
}, function() {
return colorThemes[random() < .5 ? 1 : 2]();
+
return colorThemes[random() < .5 ? 2 : 4]();
}, function() {
+
}
 
];
return colorThemes[random() < .5 ? 3 : 5]();
 
}, function() {
+
function color(r, g, b) {
return colorThemes[random() < .5 ? 2 : 4]();
+
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
+
}
];
+
 
// Cosine interpolation
function color(r, g, b) {
+
function interpolation(a, b, t) {
return 'rgb(' + r + ',' + g + ',' + b + ')';
 
}
+
return (1-cos(PI*t))/2 * (b-a) + a;
+
}
  +
// Cosine interpolation
 
  +
// Create a 1D Maximal Poisson Disc over [0, 1]
function interpolation(a, b, t) {
 
  +
var radius = 1/eccentricity, radius2 = radius+radius;
return (1-cos(PI*t))/2 * (b-a) + a;
 
}
+
function createPoisson() {
 
// domain is the set of points which are still available to pick from
 
// Create a 1D Maximal Poisson Disc over [0, 1]
+
// D = union{ [d_i, d_i+1] | i is even }
var radius = 1/eccentricity, radius2 = radius+radius;
+
var domain = [radius, 1-radius], measure = 1-radius2, spline = [0, 1];
function createPoisson() {
+
while (measure) {
  +
var dart = measure * random(), i, l, interval, a, b, c, d;
// domain is the set of points which are still available to pick from
 
  +
// D = union{ [d_i, d_i+1] | i is even }
 
 
// Find where dart lies
var domain = [radius, 1-radius], measure = 1-radius2, spline = [0, 1];
 
while (measure) {
+
for (i = 0, l = domain.length, measure = 0; i < l; i += 2) {
var dart = measure * random(), i, l, interval, a, b, c, d;
+
a = domain[i], b = domain[i+1], interval = b-a;
+
if (dart < measure+interval) {
// Find where dart lies
+
spline.push(dart += a-measure);
 
break;
for (i = 0, l = domain.length, measure = 0; i < l; i += 2) {
 
 
}
a = domain[i], b = domain[i+1], interval = b-a;
 
if (dart < measure+interval) {
+
measure += interval;
 
}
spline.push(dart += a-measure);
 
break;
+
c = dart-radius, d = dart+radius;
  +
}
 
measure += interval;
+
// Update the domain
}
+
for (i = domain.length-1; i > 0; i -= 2) {
c = dart-radius, d = dart+radius;
+
l = i-1, a = domain[l], b = domain[i];
+
// c---d c---d Do nothing
// Update the domain
+
// c-----d c-----d Move interior
for (i = domain.length-1; i > 0; i -= 2) {
+
// c--------------d Delete interval
l = i-1, a = domain[l], b = domain[i];
+
// c--d Split interval
// c---d c---d Do nothing
+
// a------b
// c-----d c-----d Move interior
+
if (a >= c && a < d)
// c--------------d Delete interval
+
if (b > d) domain[l] = d; // Move interior (Left case)
// c--d Split interval
+
else domain.splice(l, 2); // Delete interval
// a------b
+
else if (a < c && b > c)
if (a >= c && a < d)
+
if (b <= d) domain[i] = c; // Move interior (Right case)
if (b > d) domain[l] = d; // Move interior (Left case)
+
else domain.splice(i, 0, c, d); // Split interval
 
}
else domain.splice(l, 2); // Delete interval
 
  +
else if (a < c && b > c)
 
 
// Re-measure the domain
if (b <= d) domain[i] = c; // Move interior (Right case)
 
else domain.splice(i, 0, c, d); // Split interval
+
for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
}
+
measure += domain[i+1]-domain[i];
+
}
  +
// Re-measure the domain
 
 
return spline.sort();
for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
 
 
}
measure += domain[i+1]-domain[i];
 
}
+
+
// Create the overarching container
return spline.sort();
+
var container = document.createElement('div');
 
container.style.position = 'fixed';
}
 
+
container.style.top = '0';
 
container.style.left = '0';
// Create the overarching container
 
 
container.style.width = '100%';
var container = document.createElement('div');
 
container.style.position = 'fixed';
+
container.style.height = '0';
container.style.top = '0';
+
container.style.overflow = 'visible';
container.style.left = '0';
+
container.style.zIndex = '9999';
  +
container.style.width = '100%';
 
 
// Confetto constructor
container.style.height = '0';
 
 
function Confetto(theme) {
container.style.overflow = 'visible';
 
container.style.zIndex = '9999';
+
this.frame = 0;
 
this.outer = document.createElement('div');
 
  +
this.inner = document.createElement('div');
// Confetto constructor
 
function Confetto(theme) {
+
this.outer.appendChild(this.inner);
  +
this.frame = 0;
 
this.outer = document.createElement('div');
+
var outerStyle = this.outer.style, innerStyle = this.inner.style;
this.inner = document.createElement('div');
+
outerStyle.position = 'absolute';
 
outerStyle.width = (sizeMin + sizeMax * random()) + 'px';
this.outer.appendChild(this.inner);
 
 
outerStyle.height = (sizeMin + sizeMax * random()) + 'px';
 
  +
innerStyle.width = '100%';
var outerStyle = this.outer.style, innerStyle = this.inner.style;
 
outerStyle.position = 'absolute';
+
innerStyle.height = '100%';
  +
innerStyle.backgroundColor = theme();
outerStyle.width = (sizeMin + sizeMax * random()) + 'px';
 
  +
outerStyle.height = (sizeMin + sizeMax * random()) + 'px';
 
innerStyle.width = '100%';
+
outerStyle.perspective = '50px';
innerStyle.height = '100%';
+
outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)';
innerStyle.backgroundColor = theme();
+
this.axis = 'rotate3D(' +
+
cos(360 * random()) + ',' +
outerStyle.perspective = '50px';
+
cos(360 * random()) + ',0,';
outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)';
+
this.theta = 360 * random();
this.axis = 'rotate3D(' +
+
this.dTheta = dThetaMin + dThetaMax * random();
cos(360 * random()) + ',' +
+
innerStyle.transform = this.axis + this.theta + 'deg)';
  +
cos(360 * random()) + ',0,';
 
this.theta = 360 * random();
+
this.x = $window.width() * random();
this.dTheta = dThetaMin + dThetaMax * random();
+
this.y = -deviation;
innerStyle.transform = this.axis + this.theta + 'deg)';
+
this.dx = sin(dxThetaMin + dxThetaMax * random());
+
this.dy = dyMin + dyMax * random();
this.x = $window.width() * random();
+
outerStyle.left = this.x + 'px';
this.y = -deviation;
+
outerStyle.top = this.y + 'px';
  +
this.dx = sin(dxThetaMin + dxThetaMax * random());
 
 
// Create the periodic spline
this.dy = dyMin + dyMax * random();
 
outerStyle.left = this.x + 'px';
+
this.splineX = createPoisson();
outerStyle.top = this.y + 'px';
+
this.splineY = [];
 
for (var i = 1, l = this.splineX.length-1; i < l; ++i)
 
 
this.splineY[i] = deviation * random();
// Create the periodic spline
 
this.splineX = createPoisson();
+
this.splineY[0] = this.splineY[l] = deviation * random();
  +
this.splineY = [];
 
 
this.update = function(height, delta) {
for (var i = 1, l = this.splineX.length-1; i < l; ++i)
 
this.splineY[i] = deviation * random();
+
this.frame += delta;
this.splineY[0] = this.splineY[l] = deviation * random();
+
this.x += this.dx * delta;
+
this.y += this.dy * delta;
this.update = function(height, delta) {
+
this.theta += this.dTheta * delta;
  +
this.frame += delta;
 
this.x += this.dx * delta;
+
// Compute spline and convert to polar
this.y += this.dy * delta;
+
var phi = this.frame % 7777 / 7777, i = 0, j = 1;
this.theta += this.dTheta * delta;
+
while (phi >= this.splineX[j]) i = j++;
+
var rho = interpolation(
// Compute spline and convert to polar
+
this.splineY[i],
var phi = this.frame % 7777 / 7777, i = 0, j = 1;
+
this.splineY[j],
while (phi >= this.splineX[j]) i = j++;
+
(phi-this.splineX[i]) / (this.splineX[j]-this.splineX[i])
var rho = interpolation(
+
);
this.splineY[i],
+
phi *= PI2;
  +
this.splineY[j],
 
(phi-this.splineX[i]) / (this.splineX[j]-this.splineX[i])
+
outerStyle.left = this.x + rho * cos(phi) + 'px';
);
+
outerStyle.top = this.y + rho * sin(phi) + 'px';
phi *= PI2;
+
innerStyle.transform = this.axis + this.theta + 'deg)';
+
return this.y > height+deviation;
 
};
outerStyle.left = this.x + rho * cos(phi) + 'px';
 
  +
}
outerStyle.top = this.y + rho * sin(phi) + 'px';
 
  +
innerStyle.transform = this.axis + this.theta + 'deg)';
 
 
function poof() {
return this.y > height+deviation;
 
};
+
if (!frame) {
}
+
// Append the container
+
document.body.appendChild(container);
  +
function poof() {
 
if (!frame) {
+
// Add confetti
// Append the container
+
var theme = colorThemes[0]
document.body.appendChild(container);
+
, count = 0;
+
(function addConfetto() {
// Add confetti
+
var confetto = new Confetto(theme);
var theme = colorThemes[0]
+
confetti.push(confetto);
, count = 0;
+
container.appendChild(confetto.outer);
(function addConfetto() {
+
timer = setTimeout(addConfetto, spread * random());
var confetto = new Confetto(theme);
+
})(0);
  +
confetti.push(confetto);
 
 
// Start the loop
container.appendChild(confetto.outer);
 
timer = setTimeout(addConfetto, spread * random());
+
var prev = undefined;
})(0);
+
requestAnimationFrame(function loop(timestamp) {
+
var delta = prev ? timestamp - prev : 0;
// Start the loop
+
prev = timestamp;
var prev = undefined;
+
var height = $window.height();
  +
requestAnimationFrame(function loop(timestamp) {
 
var delta = prev ? timestamp - prev : 0;
+
for (var i = confetti.length-1; i >= 0; --i) {
prev = timestamp;
+
if (confetti[i].update(height, delta)) {
var height = $window.height();
+
container.removeChild(confetti[i].outer);
+
confetti.splice(i, 1);
for (var i = confetti.length-1; i >= 0; --i) {
 
if (confetti[i].update(height, delta)) {
 
container.removeChild(confetti[i].outer);
 
confetti.splice(i, 1);
 
}
 
}
 
 
if (timer || confetti.length)
 
return frame = requestAnimationFrame(loop);
 
 
// Cleanup
 
document.body.removeChild(container);
 
frame = undefined;
 
});
 
}
 
 
}
 
}
+
}
  +
poof();
 
});
+
if (timer || confetti.length)
+
return frame = requestAnimationFrame(loop);
+
 
// Cleanup
 
document.body.removeChild(container);
 
frame = undefined;
 
});
 
}
 
}
}, 100);
+
}
  +
  +
poof();
  +
}
 
});
 
});

Revision as of 01:43, 31 March 2019

$(function() {
    console.log("has page:", $("body").hasClass("page-Flying_Clown"));
    // Restrict to certain article. TO-DO: Edit to page-Kenneths_Paroxysm_Flower_Helmet.
    if ($("body").hasClass("page-Flying_Clown")) {
      // Globals
      var $window = $(window)
        , random = Math.random
        , cos = Math.cos
        , sin = Math.sin
        , PI = Math.PI
        , PI2 = PI * 2
        , timer = undefined
        , frame = undefined
        , confetti = [];
    
      // Settings
      var particles = 150
        , spread = 40
        , sizeMin = 3
        , sizeMax = 12 - sizeMin
        , eccentricity = 10
        , deviation = 100
        , dxThetaMin = -.1
        , dxThetaMax = -dxThetaMin - dxThetaMin
        , dyMin = .13
        , dyMax = .18
        , dThetaMin = .4
        , dThetaMax = .7 - dThetaMin;
    
      var colorThemes = [
        function() {
          return color(200 * random()|0, 200 * random()|0, 200 * random()|0);
        }, function() {
          var black = 200 * random()|0; return color(200, black, black);
        }, function() {
          var black = 200 * random()|0; return color(black, 200, black);
        }, function() {
          var black = 200 * random()|0; return color(black, black, 200);
        }, function() {
          return color(200, 100, 200 * random()|0);
        }, function() {
          return color(200 * random()|0, 200, 200);
        }, function() {
          var black = 256 * random()|0; return color(black, black, black);
        }, function() {
          return colorThemes[random() < .5 ? 1 : 2]();
        }, function() {
          return colorThemes[random() < .5 ? 3 : 5]();
        }, function() {
          return colorThemes[random() < .5 ? 2 : 4]();
        }
      ];
      function color(r, g, b) {
        return 'rgb(' + r + ',' + g + ',' + b + ')';
      }
    
      // Cosine interpolation
      function interpolation(a, b, t) {
        return (1-cos(PI*t))/2 * (b-a) + a;
      }
    
      // Create a 1D Maximal Poisson Disc over [0, 1]
      var radius = 1/eccentricity, radius2 = radius+radius;
      function createPoisson() {
        // domain is the set of points which are still available to pick from
        // D = union{ [d_i, d_i+1] | i is even }
        var domain = [radius, 1-radius], measure = 1-radius2, spline = [0, 1];
        while (measure) {
          var dart = measure * random(), i, l, interval, a, b, c, d;
    
          // Find where dart lies
          for (i = 0, l = domain.length, measure = 0; i < l; i += 2) {
            a = domain[i], b = domain[i+1], interval = b-a;
            if (dart < measure+interval) {
              spline.push(dart += a-measure);
              break;
            }
            measure += interval;
          }
          c = dart-radius, d = dart+radius;
    
          // Update the domain
          for (i = domain.length-1; i > 0; i -= 2) {
            l = i-1, a = domain[l], b = domain[i];
            // c---d          c---d  Do nothing
            //   c-----d  c-----d    Move interior
            //   c--------------d    Delete interval
            //         c--d          Split interval
            //       a------b
            if (a >= c && a < d)
              if (b > d) domain[l] = d; // Move interior (Left case)
              else domain.splice(l, 2); // Delete interval
            else if (a < c && b > c)
              if (b <= d) domain[i] = c; // Move interior (Right case)
              else domain.splice(i, 0, c, d); // Split interval
          }
    
          // Re-measure the domain
          for (i = 0, l = domain.length, measure = 0; i < l; i += 2)
            measure += domain[i+1]-domain[i];
        }
    
        return spline.sort();
      }
    
      // Create the overarching container
      var container = document.createElement('div');
      container.style.position = 'fixed';
      container.style.top      = '0';
      container.style.left     = '0';
      container.style.width    = '100%';
      container.style.height   = '0';
      container.style.overflow = 'visible';
      container.style.zIndex   = '9999';
    
      // Confetto constructor
      function Confetto(theme) {
        this.frame = 0;
        this.outer = document.createElement('div');
        this.inner = document.createElement('div');
        this.outer.appendChild(this.inner);
    
        var outerStyle = this.outer.style, innerStyle = this.inner.style;
        outerStyle.position = 'absolute';
        outerStyle.width  = (sizeMin + sizeMax * random()) + 'px';
        outerStyle.height = (sizeMin + sizeMax * random()) + 'px';
        innerStyle.width  = '100%';
        innerStyle.height = '100%';
        innerStyle.backgroundColor = theme();
    
        outerStyle.perspective = '50px';
        outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)';
        this.axis = 'rotate3D(' +
          cos(360 * random()) + ',' +
          cos(360 * random()) + ',0,';
        this.theta = 360 * random();
        this.dTheta = dThetaMin + dThetaMax * random();
        innerStyle.transform = this.axis + this.theta + 'deg)';
    
        this.x = $window.width() * random();
        this.y = -deviation;
        this.dx = sin(dxThetaMin + dxThetaMax * random());
        this.dy = dyMin + dyMax * random();
        outerStyle.left = this.x + 'px';
        outerStyle.top  = this.y + 'px';
    
        // Create the periodic spline
        this.splineX = createPoisson();
        this.splineY = [];
        for (var i = 1, l = this.splineX.length-1; i < l; ++i)
          this.splineY[i] = deviation * random();
        this.splineY[0] = this.splineY[l] = deviation * random();
    
        this.update = function(height, delta) {
          this.frame += delta;
          this.x += this.dx * delta;
          this.y += this.dy * delta;
          this.theta += this.dTheta * delta;
    
          // Compute spline and convert to polar
          var phi = this.frame % 7777 / 7777, i = 0, j = 1;
          while (phi >= this.splineX[j]) i = j++;
          var rho = interpolation(
            this.splineY[i],
            this.splineY[j],
            (phi-this.splineX[i]) / (this.splineX[j]-this.splineX[i])
          );
          phi *= PI2;
    
          outerStyle.left = this.x + rho * cos(phi) + 'px';
          outerStyle.top  = this.y + rho * sin(phi) + 'px';
          innerStyle.transform = this.axis + this.theta + 'deg)';
          return this.y > height+deviation;
        };
      }
    
      function poof() {
        if (!frame) {
          // Append the container
          document.body.appendChild(container);
    
          // Add confetti
          var theme = colorThemes[0]
            , count = 0;
          (function addConfetto() {
            var confetto = new Confetto(theme);
            confetti.push(confetto);
            container.appendChild(confetto.outer);
            timer = setTimeout(addConfetto, spread * random());
          })(0);
    
          // Start the loop
          var prev = undefined;
          requestAnimationFrame(function loop(timestamp) {
            var delta = prev ? timestamp - prev : 0;
            prev = timestamp;
            var height = $window.height();
    
            for (var i = confetti.length-1; i >= 0; --i) {
              if (confetti[i].update(height, delta)) {
                container.removeChild(confetti[i].outer);
                confetti.splice(i, 1);
              }
            }
    
            if (timer || confetti.length)
              return frame = requestAnimationFrame(loop);
    
            // Cleanup
            document.body.removeChild(container);
            frame = undefined;
          });
        }
      }
      
      poof();
    }
});