urapoh.github.io/index.html at master · urapoh/urapoh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<!-- Image licencing: Author: Keesscherer, Altered by Igor Dorfman [https://creativecommons.org/licenses/by-sa/4.0 CC BY-SA 4.0] https://commons.wikimedia.org/wiki/File:Horsehead_Nebula_and_Flame_Nebula_in_Orion_(B33,_NGC2024).jpg from Wikimedia Commons -->
<!-- Sup? Messages are welcomed on igor at this domain -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>black hole</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
			background: #221111;
        }
		canvas {
		}
    </style>
    <!-- Yandex.Metrika counter --> <script type="text/javascript">     (function(m,e,t,r,i,k,a){         m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};         m[i].l=1*new Date();         for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}         k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)     })(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym');      ym(52302739, 'init', {webvisor:true, clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true}); </script> <noscript><div><img src="https://mc.yandex.ru/watch/52302739" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
</head>

<body>
    <div class="bg">
        <canvas id="canvas" width="258" height="187"></canvas>
    </div>
    <script>
class CanvasGravity {
    constructor(canvas, imageSrc) {
        this.ctx = canvas.getContext('2d');
        this.img = new Image();
        this.img.src = imageSrc;

        this.img.onload = () => {
            canvas.width = this.img.width;
            canvas.height = this.img.height;

            this.ctx.drawImage(this.img, 0, 0);
            this.original = this.ctx.getImageData(0, 0, this.img.width, this.img.height);
        };
    }

    // Восстановление исходного изображения
    reset() {
        this.ctx.putImageData(this.original, 0, 0);
    }

    // Основной эффект гравитации
    gravity(x, y) {
        const base = this.original.data;
        let data = base.slice();
        const w = this.img.width;
        const h = this.img.height;

        for (let i = 0; i < data.length; i += 4) {
            const index = i / 4;
            const px = index % w;
            const py = Math.floor(index / w);

            const dx = px - x;
            const dy = py - y;
            if (dx > 160 || dy > 160 || dx < -160 || dy < -160) {
                continue;
            }
            const dist = Math.sqrt(dx * dx + dy * dy);

            if (dist >= 50 && dist < 160) {
                const factor = Math.tan(Math.PI * (dist - 160) / 240) * 80 + 160;
                const nx = dx * factor / dist + x;
                const ny = dy * factor / dist + y;

                let ix = Math.floor(nx);
                let iy = Math.floor(ny);
                let fx = nx - ix;
                let fy = ny - iy;

				if (ix < 0) {
					ix = w + ix;
				}
				if (ix >= w) {
					ix = ix - w;
				}
				if (iy < 0) {
					iy = h + iy;
				}
				if (iy < 0) {
					iy = iy - h;
				}

				const idx = (iy * w + ix) * 4;
				const idxRight = idx + 4;
				const idxDown = ((iy + 1) * w + ix) * 4;
				const idxDiag = idxDown + 4;

				data[i] = this.interpolate(base, idx, idxRight, idxDown, idxDiag, fx, fy);
				data[i + 1] = this.interpolate(base, idx + 1, idxRight + 1, idxDown + 1, idxDiag + 1, fx, fy);
				data[i + 2] = this.interpolate(base, idx + 2, idxRight + 2, idxDown + 2, idxDiag + 2, fx, fy);
				data[i + 3] = 255;

            } else if (dist < 50) {
                data[i] = 0;
                data[i + 1] = 0;
                data[i + 2] = 0;
                data[i + 3] = 255;
            }
        }
        const imgData = new ImageData(data, this.img.width, this.img.height);
        this.ctx.putImageData(imgData, 0, 0);
    }

    // Интерполяция цвета пикселей
    interpolate(base, i1, i2, i3, i4, fx, fy) {
        return (
            ((base[i1] * (1 - fx) + base[i2] * fx) * (1 - fy) +
                (base[i3] * (1 - fx) + base[i4] * fx) * fy)
        );
    }
}

// Инициализация
const canvas = document.getElementById('canvas');
const gravityCanvas = new CanvasGravity(canvas, '1.jpg');

document.body.addEventListener('mousemove', e => {
    gravityCanvas.gravity(e.pageX, e.pageY);
});

document.body.addEventListener('ontouchstart', e => {
    var x = event.touches[0].clientX;
	var y = event.touches[0].clientY;
	gravityCanvas.gravity(x, y);
});

document.body.addEventListener('touchmove', e => {
    var x = event.touches[0].clientX;
	var y = event.touches[0].clientY;
	gravityCanvas.gravity(x, y);
});
</script>
</body>

</html>