remove snowed-in code

master
Aevann 2023-01-01 06:48:19 +02:00
parent 2d2a3520b3
commit 0a6d82bc9f
3 changed files with 0 additions and 124 deletions

View File

@ -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;
}

View File

@ -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);
}

View File

@ -16,13 +16,6 @@
<script defer src="{{'event/js/frostbite.js' | asset}}"></script>
<script defer src="{{'event/css/frostbite.css' | asset}}"></script>
{% 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>
{% if p.award_count("lights", v) %}