Difference between revisions of "Template:Marburg/confetti"

(Created page with "$(document).ready(function(){var t=document.scripts[document.scripts.length-1],e=document.createElement("canvas");e.style.position="absolute",e.style.left="0",e.style.top="0",...")
 
Line 1: Line 1:
−
$(document).ready(function(){var t=document.scripts[document.scripts.length-1],e=document.createElement("canvas");e.style.position="absolute",e.style.left="0",e.style.top="0",e.style.width="100%",e.style.height="100%",t.parentElement.insertBefore(e,t);var i=e.getContext("2d"),a=Date.now(),o=a,n=0,r=40;e.width=e.parentNode.clientWidth,e.height=e.parentNode.clientHeight;var l=!1;var s=[],d=.15,h=5.2,p=15.2,c=30;function f(t){t.radius=v(10,20),t.position=u(t.radius),t.rotation=v(0,360),t.velocity={x:v(h,p)*(1==v(0,2)?-1:1),y:v(h,p)*(1==v(0,2)?-1:1)},t.lifetime=v(3,5),t.spawnTime=a,t.color="rgb("+v(0,255)+", "+v(0,255)+", "+v(0,255)+")",t.alpha=0,t.fadeState=-1}function u(t){for(var i,a,o,n,r={x:v(0,e.width),y:v(0,15)},l=!0,d=0;d<s.length;d++){var h=s[d];(i=h.position,a=r,void 0,void 0,o=i.x-a.x,n=i.y-a.y,Math.sqrt(o*o+n*n))<t+h.radius+c&&(l=!1)}return l?r:-1}function v(t,e){return Math.floor(Math.random()*(e-t+1))+t}!function t(){if(r>0){if(requestAnimationFrame(t),c=e.getBoundingClientRect(),v=c.top,y=c.bottom,v<window.innerHeight&&y>=0&&!l){for(var h=0;h<40;h++){var p={id:h,enabled:!0};f(p),s.push(p)}l=!0}var c,v,y;l&&(e.width=e.parentNode.clientWidth,e.height=e.parentNode.clientHeight,i.clearRect(0,0,i.width,i.height),function(){for(var t=0;t<s.length;t++){var o=s[t];if(o.enabled){if(-1==o.position){if(o.position=u(o.radius),-1==o.position)continue;o.fadeState=0}switch(o.position.x+=o.velocity.x*n*.1,o.position.y+=o.velocity.y*n,(a-o.spawnTime)/1e3>=o.lifetime&&(o.fadeState=1),o.rotation+=.1*n,o.fadeState){case 0:o.alpha<1&&(o.alpha+=d*n),o.alpha>=1&&(o.alpha=1,o.fadeState=-1);break;case 1:o.alpha>0&&(o.alpha-=d*n),o.alpha<=0&&(o.enabled=!1,0==--r&&(s=[],e.parentNode.removeChild(e)))}i.globalAlpha=.2*o.alpha,i.translate(o.position.x,o.position.y),i.rotate(o.rotation),l=o,i.fillStyle=l.color,i.fillRect(-l.radius/2,-l.radius/2/2,l.radius,l.radius/2),i.rotate(-1*o.rotation),i.translate(-o.position.x,-o.position.y)}}var l}()),a=Date.now(),n=.01*(a-o),o=a}}()});
+
$(document).ready(function(){
 +
function isScrolledIntoView(e) {
 +
    var rect = e.getBoundingClientRect();
 +
    var elemTop = rect.top;
 +
    var elemBottom = rect.bottom;
 +
    var isVisible = elemTop < window.innerHeight && elemBottom >= 0;
 +
    return isVisible;
 +
}
 +
 
 +
// basic render loop
 +
var script = document.scripts[document.scripts.length - 1];
 +
var canvas = document.createElement("canvas");  
 +
canvas.style.position = "absolute"; canvas.style.left = "0"; canvas.style.top = "0";
 +
canvas.style.width = "100%"; canvas.style.height = "100%";
 +
script.parentElement.insertBefore(canvas, script);
 +
var c = canvas.getContext("2d");
 +
var time = Date.now(), last = time, deltaTime = 0;
 +
var alive = 40;
 +
canvas.width = canvas.parentNode.clientWidth;
 +
canvas.height = canvas.parentNode.clientHeight;
 +
 
 +
 
 +
var ready = false;
 +
function loop(){
 +
if(alive > 0) requestAnimationFrame(loop);
 +
else return;
 +
if(isScrolledIntoView(canvas) && !ready){
 +
for(var i = 0; i < 40; i++){
 +
var particle = {id: i, enabled:true};
 +
randomizeParticle(particle);
 +
particles.push(particle);
 +
}
 +
ready = true;
 +
}
 +
if(ready){
 +
canvas.width = canvas.parentNode.clientWidth;
 +
canvas.height = canvas.parentNode.clientHeight;
 +
c.clearRect(0, 0, c.width, c.height);
 +
update();
 +
}
 +
time = Date.now();
 +
deltaTime = (time - last) * 0.01;
 +
last = time;
 +
}
 +
 
 +
// create all particles
 +
var particles = [];
 +
var fadeSpeed = 0.15;
 +
var minSpeed = 5.2;
 +
var maxSpeed = 15.2;
 +
var minDist = 30;
 +
 
 +
function randomizeParticle(particle){
 +
particle.radius = rnd(10, 20);
 +
particle.position = rndPosition(particle.radius);
 +
particle.rotation = rnd(0, 360);
 +
particle.velocity = {x: rnd(minSpeed,maxSpeed) * (rnd(0,2) == 1 ? -1 : 1), y: rnd(minSpeed,maxSpeed) * (rnd(0,2) == 1 ? -1 : 1)};
 +
particle.lifetime = rnd(3,5);
 +
particle.spawnTime = time;
 +
particle.color = "rgb("+rnd(0,255)+", " + rnd(0,255)+", " + rnd(0,255) + ")";
 +
particle.alpha = 0.0;
 +
particle.fadeState = -1; // -1 = NONE, 0 = IN, 1 = OUT
 +
}
 +
 
 +
function respawnParticle(particle){
 +
randomizeParticle(particle);
 +
particle.alpha = 0.0;
 +
particle.fadeState = particle.position == -1 ? -1 : 0;
 +
}
 +
 
 +
function rndPosition(radius){
 +
var pos = {x: rnd(0, canvas.width), y: rnd(0, 15)};
 +
var valid = true;
 +
for(var i = 0; i < particles.length; i++){
 +
var obj = particles[i];
 +
var d = dist(obj.position, pos);
 +
if(d < radius + obj.radius + minDist) valid = false;
 +
}
 +
if(valid) return pos;
 +
else return -1;
 +
}
 +
 
 +
 
 +
// update particles each frame
 +
function update(){
 +
for(var i = 0; i < particles.length; i++){
 +
var e = particles[i];
 +
if(!e.enabled) continue;
 +
// only draw particles without overlapping positions
 +
if(e.position == -1){
 +
e.position = rndPosition(e.radius);
 +
if(e.position == -1) continue;
 +
else e.fadeState = 0;
 +
}
 +
 +
// apply velocity
 +
e.position.x += e.velocity.x * deltaTime *0.1;
 +
e.position.y += e.velocity.y * deltaTime;
 +
 +
// despawn
 +
if((time - e.spawnTime) / 1000 >= e.lifetime) e.fadeState = 1;
 +
 
 +
e.rotation += deltaTime * 0.1;
 +
 
 +
switch(e.fadeState){
 +
case 0:
 +
if(e.alpha < 1.0) e.alpha += fadeSpeed * deltaTime;
 +
if(e.alpha >= 1.0){
 +
e.alpha = 1.0;
 +
e.fadeState = -1;
 +
}
 +
break;
 +
case 1:
 +
if(e.alpha > 0.0) e.alpha -= fadeSpeed * deltaTime;
 +
if(e.alpha <= 0.0){
 +
e.enabled = false;
 +
alive--;
 +
if(alive == 0){
 +
particles = [];canvas.parentNode.removeChild(canvas);
 +
}
 +
}
 +
break;
 +
}
 +
 
 +
// render
 +
c.globalAlpha = e.alpha * 0.2;
 +
c.translate(e.position.x, e.position.y);
 +
c.rotate(e.rotation);
 +
drawParticle(e);
 +
c.rotate(e.rotation * -1);
 +
c.translate(-e.position.x, -e.position.y);
 +
}
 +
}
 +
 
 +
 
 +
function drawParticle(e){
 +
c.fillStyle = e.color;
 +
c.fillRect(-e.radius/2,-e.radius/2/2, e.radius, e.radius/2);
 +
}
 +
 
 +
function rnd(min, max) {
 +
    return Math.floor(Math.random() * (max - min + 1) ) + min;
 +
}
 +
 
 +
function dist(pos1, pos2){
 +
var a = pos1.x - pos2.x;
 +
var b = pos1.y - pos2.y;
 +
return Math.sqrt(a*a + b*b);
 +
}
 +
 
 +
function clamp(v, min, max){
 +
return v < min ? min : v > max ? max : v;
 +
}
 +
 
 +
loop();
 +
});

Revision as of 13:10, 26 November 2018

$(document).ready(function(){ function isScrolledIntoView(e) { var rect = e.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = elemTop < window.innerHeight && elemBottom >= 0; return isVisible; }

// basic render loop var script = document.scripts[document.scripts.length - 1]; var canvas = document.createElement("canvas"); canvas.style.position = "absolute"; canvas.style.left = "0"; canvas.style.top = "0"; canvas.style.width = "100%"; canvas.style.height = "100%"; script.parentElement.insertBefore(canvas, script); var c = canvas.getContext("2d"); var time = Date.now(), last = time, deltaTime = 0; var alive = 40; canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight;


var ready = false; function loop(){ if(alive > 0) requestAnimationFrame(loop); else return; if(isScrolledIntoView(canvas) && !ready){ for(var i = 0; i < 40; i++){ var particle = {id: i, enabled:true}; randomizeParticle(particle); particles.push(particle); } ready = true; } if(ready){ canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; c.clearRect(0, 0, c.width, c.height); update(); } time = Date.now(); deltaTime = (time - last) * 0.01; last = time; }

// create all particles var particles = []; var fadeSpeed = 0.15; var minSpeed = 5.2; var maxSpeed = 15.2; var minDist = 30;

function randomizeParticle(particle){ particle.radius = rnd(10, 20); particle.position = rndPosition(particle.radius); particle.rotation = rnd(0, 360); particle.velocity = {x: rnd(minSpeed,maxSpeed) * (rnd(0,2) == 1 ? -1 : 1), y: rnd(minSpeed,maxSpeed) * (rnd(0,2) == 1 ? -1 : 1)}; particle.lifetime = rnd(3,5); particle.spawnTime = time; particle.color = "rgb("+rnd(0,255)+", " + rnd(0,255)+", " + rnd(0,255) + ")"; particle.alpha = 0.0; particle.fadeState = -1; // -1 = NONE, 0 = IN, 1 = OUT }

function respawnParticle(particle){ randomizeParticle(particle); particle.alpha = 0.0; particle.fadeState = particle.position == -1 ? -1 : 0; }

function rndPosition(radius){ var pos = {x: rnd(0, canvas.width), y: rnd(0, 15)}; var valid = true; for(var i = 0; i < particles.length; i++){ var obj = particles[i]; var d = dist(obj.position, pos); if(d < radius + obj.radius + minDist) valid = false; } if(valid) return pos; else return -1; }


// update particles each frame function update(){ for(var i = 0; i < particles.length; i++){ var e = particles[i]; if(!e.enabled) continue; // only draw particles without overlapping positions if(e.position == -1){ e.position = rndPosition(e.radius); if(e.position == -1) continue; else e.fadeState = 0; }

// apply velocity e.position.x += e.velocity.x * deltaTime *0.1; e.position.y += e.velocity.y * deltaTime;

// despawn if((time - e.spawnTime) / 1000 >= e.lifetime) e.fadeState = 1;

e.rotation += deltaTime * 0.1;

switch(e.fadeState){ case 0: if(e.alpha < 1.0) e.alpha += fadeSpeed * deltaTime; if(e.alpha >= 1.0){ e.alpha = 1.0; e.fadeState = -1; } break; case 1: if(e.alpha > 0.0) e.alpha -= fadeSpeed * deltaTime; if(e.alpha <= 0.0){ e.enabled = false; alive--; if(alive == 0){ particles = [];canvas.parentNode.removeChild(canvas); } } break; }

// render c.globalAlpha = e.alpha * 0.2; c.translate(e.position.x, e.position.y); c.rotate(e.rotation); drawParticle(e); c.rotate(e.rotation * -1); c.translate(-e.position.x, -e.position.y); } }


function drawParticle(e){ c.fillStyle = e.color; c.fillRect(-e.radius/2,-e.radius/2/2, e.radius, e.radius/2); }

function rnd(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; }

function dist(pos1, pos2){ var a = pos1.x - pos2.x; var b = pos1.y - pos2.y; return Math.sqrt(a*a + b*b); }

function clamp(v, min, max){ return v < min ? min : v > max ? max : v; }

loop(); });