Вибротрон
Маленький пример на canvas-цикл, организованный в специально созданной канве и с помощью класса на Javascript (да-да, теперь в JS есть классы, соответственно, в IE код работать не будет).
Думаю, эта штука похожа не только на "эффекты" из какой-нибудь "Гостьи из будущего" (ах, Наташа Гусева!), но и на обещание, которое никогда не будет выполнено :)
Вот код в работе и полный исходник шыдевра в виде файла .html в кодировке Юникода UTF-8.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Вибротрон</title>
</head>
<body>
<div id="vibroId"
style="background-color:black; text-align:center; margin: auto; padding: 0px; width: 400px; height: 400px;">
</div>
<script>
const SIZE = 400, WAIT = .02;
class vibra {
constructor() {
this.wait = WAIT;
this.colorIndex = 0;
this.dimension = 5;
this.lastTime = 0;
this.accumulator = 0;
this.deltaTime = 1 / 60;
this.colors = [
"#ff0000", "#ff8000", "#ffff00", "#80ff00", "#00ff00", "#00ff80",
"#00ffff", "#0080ff", "#0000ff", "#8000ff", "#ff00ff", "#ff0080"
];
this.canvas = document.createElement('canvas');
this.canvas.width = SIZE;
this.canvas.height = SIZE;
const element = document.getElementById("vibroId");
element.appendChild (this.canvas);
this.ctx = this.canvas.getContext("2d");
for (let element = this.dimension; element < SIZE / 2; element += 10) {
this.draw ("#808080", element);
}
}
draw (color, element) {
this.ctx.strokeStyle = color;
this.ctx.beginPath();
this.ctx.moveTo (element, element);
this.ctx.lineTo (SIZE - element, element);
this.ctx.lineTo (SIZE - element, SIZE - element);
this.ctx.lineTo (element, SIZE - element);
this.ctx.closePath();
this.ctx.stroke();
}
update (deltaTime) {
if ((this.wait -= deltaTime) < 0) {
this.draw (this.colors[this.colorIndex], this.dimension);
this.wait = WAIT;
if ((this.dimension += 10) > SIZE / 2) {
this.dimension = 5;
this.colorIndex = (this.colorIndex + 1) % this.colors.length;
}
}
}
start () {
this.loop = (time) => {
this.accumulator += (time - this.lastTime) / 1000;
while (this.accumulator > this.deltaTime) {
this.accumulator -= this.deltaTime;
this.update(Math.min(this.deltaTime));
}
this.lastTime = time;
requestAnimationFrame (this.loop);
}
this.loop (0);
}
}
function start() {
const vibroClass = new vibra ();
vibroClass.start();
}
window.addEventListener('load', function (e) {
start();
});
</script>
<noscript>Нужен включённый в браузере Javascript для работы приложения!</noscript>
</body></html>
16.10.2019, 14:43 [1116 просмотров]