Skip to content

Instantly share code, notes, and snippets.

@shunito
Created June 24, 2021 11:58
Show Gist options
  • Save shunito/43c762c4ba1d9f802f1b2d1c6c9992de to your computer and use it in GitHub Desktop.
Save shunito/43c762c4ba1d9f802f1b2d1c6c9992de to your computer and use it in GitHub Desktop.
ナイアガラ
(function(win) {
Math.Radian = Math.PI * 2;
var quantity = 1000,
speed = 4,
top = 30,
left = 10,
canvas = document.getElementById("hanabi"),
ctx, cvW, cvH,
angle, xyst,
count = 0,
first = null,
old, i, p,
py1,py2,
nextY, nextX,
b = document.body,
d = document.documentElement,
color = 0,
colors_a = ['rgba(255,255,255,1)','rgba(255,255,170,1)','rgba(0,191,255,1)','rgba(0,255,0,1)','rgba(255,0,255,1)'],
colors_b = ['rgba(255,255,255,0.03)','rgba(255,255,170,0.03)','rgba(0,191,255,0.03)','rgba(0,255,0,0.03)','rgba(255,0,255,0.03)'],
color_a = colors_a[color],
color_b = colors_b[color],
cols = colors_a.length;
ctx = canvas.getContext("2d");
cvW = canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
cvH = canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
var span = 40,
step = -1,
line = Math.floor( cvW/span ),
length, l2;
length = cvH > 400 ? 400 : Math.floor(cvH * 0.8);
l2 = length + 200;
win.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
function Particle() {
this.initialize.apply(this, arguments);
}
Particle.prototype = {
/** コンストラクタ */
initialize: function(x, y) {
this.x = x;
this.y = y;
},
x : 0, // X座標
y : 0, // X座標
vx : 0, // X方向の速さ
vy : 0, // Y方向の速さ
next : null // LinkedListの参照
};
for(i=0; i< quantity ; i++) {
angle = Math.Radian /4 + Math.random() * 0.1 - 0.05 ;
xyst = Math.random() * speed + speed;
p = new Particle( -30, top);
p.vx = Math.cos(angle) * xyst;
p.vy = Math.sin(angle) * xyst;
if(first === null) {
first = old = p;
} else {
old.next = p;
old = p;
}
}
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.lineWidth = 1;
ctx.strokeStyle = "rgba(255, 255, 255, 1)";
function animationLoop() {
var n = first;
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, cvW, cvH);
ctx.strokeStyle = color_a;
do {
nextY = n.y + n.vy;
nextX = n.x + n.vx;
ctx.beginPath();
ctx.moveTo(n.x, n.y);
ctx.lineTo(nextX , nextY);
ctx.stroke();
py2 = length + ( length - nextY );
if( py2 < l2 ) {
py1 = length + (( length - nextY ) + n.vy) /10;
ctx.save();
ctx.strokeStyle = color_b;
ctx.beginPath();
ctx.moveTo(n.x, py1 );
ctx.lineTo(nextX, py2 );
ctx.stroke();
ctx.restore();
}
n.x = nextX;
n.y = nextY;
if( n.x < 0 || n.x > cvW || n.y < 0 || n.y > length ) {
n.x = Math.floor( Math.random() * step + 1) * span ;
n.y = top;
}
} while (n = n.next);
requestAnimationFrame(animationLoop);
count++;
}
setInterval(function(){
color = Math.floor( Math.random() * cols) ;
color_a = colors_a[color];
color_b = colors_b[color];
},3000);
setInterval(function(){
if( step < line) {
step++;
}
},300);
animationLoop();
})(this);
<canvas id="hanabi"></canvas>
body {
padding: 0;
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
padding: 0;
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment