forked from rDrama/rDrama
remove snowed-in code
parent
2d2a3520b3
commit
0a6d82bc9f
|
@ -1,16 +0,0 @@
|
||||||
#canvas-snowed-in-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 9998;
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
#canvas-snowed-in-lines {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
opacity: 0.0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
|
@ -1,101 +0,0 @@
|
||||||
var canvas = document.querySelector('#canvas-snowed-in-overlay');
|
|
||||||
var lineCanvas = document.querySelector('#canvas-snowed-in-lines');
|
|
||||||
|
|
||||||
var canvasContext = canvas.getContext('2d');
|
|
||||||
var lineCanvasContext = lineCanvas.getContext('2d');
|
|
||||||
|
|
||||||
var pointLifetime = 4000;
|
|
||||||
var points = [];
|
|
||||||
|
|
||||||
//FILL CANVAS
|
|
||||||
canvasContext.fillStyle="rgba(0, 0, 0, 0.1)";
|
|
||||||
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
//INIT
|
|
||||||
function init() {
|
|
||||||
document.addEventListener('mousemove', onMouseMove);
|
|
||||||
window.addEventListener('resize', resizeCanvases);
|
|
||||||
resizeCanvases();
|
|
||||||
tick();
|
|
||||||
}
|
|
||||||
|
|
||||||
init();
|
|
||||||
|
|
||||||
//RESIZE CANVAS
|
|
||||||
function resizeCanvases() {
|
|
||||||
canvas.width = lineCanvas.width = window.innerWidth;
|
|
||||||
canvas.height = lineCanvas.height = window.innerHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseMove(event) {
|
|
||||||
points.push({
|
|
||||||
time: Date.now(),
|
|
||||||
x: event.clientX,
|
|
||||||
y: event.clientY
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function tick() {
|
|
||||||
// Remove old points
|
|
||||||
// points = points.filter(function(point) {
|
|
||||||
// var age = Date.now() - point.time;
|
|
||||||
// return age < pointLifetime;
|
|
||||||
// });
|
|
||||||
|
|
||||||
drawLineCanvas();
|
|
||||||
drawImageCanvas();
|
|
||||||
requestAnimationFrame(tick);
|
|
||||||
//setTimeout(() => {
|
|
||||||
//tick();
|
|
||||||
//}, 1000 / 60);
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawLineCanvas() {
|
|
||||||
var minimumLineWidth = 40;
|
|
||||||
var maximumLineWidth = 60;
|
|
||||||
var lineWidthRange = maximumLineWidth - minimumLineWidth;
|
|
||||||
var maximumSpeed = 200;
|
|
||||||
|
|
||||||
lineCanvasContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
|
|
||||||
lineCanvasContext.lineCap = 'round';
|
|
||||||
lineCanvasContext.shadowBlur = 90;
|
|
||||||
lineCanvasContext.shadowColor = '#fff';
|
|
||||||
|
|
||||||
for (var i = 1; i < points.length; i++) {
|
|
||||||
var point = points[i];
|
|
||||||
var previousPoint = points[i - 1];
|
|
||||||
|
|
||||||
// Change line width based on speed
|
|
||||||
var distance = getDistanceBetween(point, previousPoint);
|
|
||||||
var speed = Math.max(0, Math.min(maximumSpeed, distance));
|
|
||||||
var percentageLineWidth = (maximumSpeed - speed) / maximumSpeed;
|
|
||||||
lineCanvasContext.lineWidth = minimumLineWidth + percentageLineWidth * lineWidthRange;
|
|
||||||
|
|
||||||
// Fade points as they age
|
|
||||||
// var age = Date.now() - point.time;
|
|
||||||
// var opacity = (pointLifetime - age) / pointLifetime;
|
|
||||||
// lineCanvasContext.strokeStyle = 'rgba(255, 255, 255, ' + opacity + ')';
|
|
||||||
lineCanvasContext.strokeStyle = 'rgba(255, 255, 255, 1)';
|
|
||||||
|
|
||||||
lineCanvasContext.beginPath();
|
|
||||||
lineCanvasContext.moveTo(previousPoint.x, previousPoint.y);
|
|
||||||
lineCanvasContext.lineTo(point.x, point.y);
|
|
||||||
lineCanvasContext.stroke();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDistanceBetween(a, b) {
|
|
||||||
return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawImageCanvas() {
|
|
||||||
canvasContext.globalCompositeOperation = 'source-over';
|
|
||||||
canvasContext.save();
|
|
||||||
canvasContext.fillStyle="rgb(255,255,255)";
|
|
||||||
canvasContext.globalAlpha = 0.09;
|
|
||||||
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
|
|
||||||
canvasContext.restore();
|
|
||||||
canvasContext.globalCompositeOperation = 'destination-out';
|
|
||||||
canvasContext.drawImage(lineCanvas, 0, 0);
|
|
||||||
|
|
||||||
}
|
|
|
@ -16,13 +16,6 @@
|
||||||
<script defer src="{{'event/js/frostbite.js' | asset}}"></script>
|
<script defer src="{{'event/js/frostbite.js' | asset}}"></script>
|
||||||
<script defer src="{{'event/css/frostbite.css' | asset}}"></script>
|
<script defer src="{{'event/css/frostbite.css' | asset}}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if p.award_count("snowed-in", v) %}
|
|
||||||
<canvas id="canvas-snowed-in-overlay"></canvas>
|
|
||||||
<canvas id="canvas-snowed-in-lines"></canvas>
|
|
||||||
<link rel="stylesheet" href="{{'event/css/snowed-in.css' | asset}}">
|
|
||||||
<script defer src="{{'event/js/snowed-in.js'|asset}}"></script>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if p.award_count("lights", v) %}
|
{% if p.award_count("lights", v) %}
|
||||||
|
|
Loading…
Reference in New Issue