|
| 1 | +window.onload = () => { |
| 2 | + 'use strict'; |
| 3 | + |
| 4 | + const canvas = document.getElementById('canvas') as HTMLCanvasElement; |
| 5 | + const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; |
| 6 | + |
| 7 | + const effectDisplacement = document.querySelector('filter feDisplacementMap') as SVGFEDisplacementMapElement; |
| 8 | + const effectOffset = document.querySelector('filter feOffset') as SVGFEOffsetElement; |
| 9 | + |
| 10 | + const centerX: number = canvas.width / 2; |
| 11 | + const centerY: number = canvas.height / 2; |
| 12 | + let offsetFactor: number = 0; |
| 13 | + let radians: number = 0; |
| 14 | + let i: number = 0; |
| 15 | + |
| 16 | + /** |
| 17 | + * Bad math - Values are ok for this screen size. |
| 18 | + * Moving mouse to center (on X) increases factor; boundaries will become close to 0. |
| 19 | + * |
| 20 | + * - scaleFactor: Determines max. possible result. |
| 21 | + * - offset: Left or right from center (must be positive). |
| 22 | + * Higher offset will cancel out with scale factor and become close to 0. |
| 23 | + */ |
| 24 | + function onMouseMove(event: MouseEvent) { |
| 25 | + const scaleFactor = centerX / 100; |
| 26 | + const offset = (event.offsetX - centerX) / 100; |
| 27 | + |
| 28 | + offsetFactor = Math.abs(Math.abs(offset) - scaleFactor); |
| 29 | + } |
| 30 | + |
| 31 | + /** |
| 32 | + * Frame-by-frame render process. |
| 33 | + */ |
| 34 | + function loop() { |
| 35 | + // Artificial delay for better visibility: |
| 36 | + // To render every N-th frame only; change expression 'i % 1' to higher numbers. |
| 37 | + const renderFrame = i === 0 || i % 1 === 0; |
| 38 | + |
| 39 | + if (renderFrame) { |
| 40 | + update(); |
| 41 | + reset(); |
| 42 | + draw(); |
| 43 | + } |
| 44 | + |
| 45 | + window.requestAnimationFrame(loop); |
| 46 | + i++; |
| 47 | + } |
| 48 | + |
| 49 | + /** |
| 50 | + * Update effect values. |
| 51 | + */ |
| 52 | + function update() { |
| 53 | + let scale: string = effectDisplacement.getAttribute('scale') + ''; |
| 54 | + let rnd: string = Math.random().toString(); |
| 55 | + |
| 56 | + // Effect size - Added random values = Stronger distortion and 'vibration' effect |
| 57 | + scale = (16 + Math.sin(+scale) * offsetFactor).toString(); |
| 58 | + |
| 59 | + // Rotation speed |
| 60 | + radians += 0.05; |
| 61 | + |
| 62 | + effectOffset.setAttribute('dx', rnd); |
| 63 | + effectOffset.setAttribute('dy', rnd); |
| 64 | + effectDisplacement.setAttribute('scale', scale); |
| 65 | + } |
| 66 | + |
| 67 | + /** |
| 68 | + * Reset screen by partly transparent filling for a fading effect. |
| 69 | + */ |
| 70 | + function reset() { |
| 71 | + ctx.fillStyle = 'rgba(255, 255, 255, 0.25)'; |
| 72 | + |
| 73 | + ctx.fillRect(0, 0, canvas.width, canvas.height); |
| 74 | + } |
| 75 | + |
| 76 | + /** |
| 77 | + * Draw rectangle at screen center. |
| 78 | + */ |
| 79 | + function draw() { |
| 80 | + ctx.save(); |
| 81 | + |
| 82 | + ctx.lineWidth = 24; |
| 83 | + ctx.strokeStyle = 'rgba(255, 192, 0, 1)'; |
| 84 | + |
| 85 | + ctx.translate(centerX, centerY); |
| 86 | + ctx.rotate(radians); |
| 87 | + ctx.beginPath(); |
| 88 | + ctx.rect(-100, -100, 200, 200); |
| 89 | + ctx.stroke(); |
| 90 | + |
| 91 | + ctx.restore(); |
| 92 | + } |
| 93 | + |
| 94 | + // Start |
| 95 | + canvas.addEventListener('mousemove', onMouseMove); |
| 96 | + |
| 97 | + loop(); |
| 98 | +}; |
0 commit comments