БлогNot. Вибротрон

Вибротрон

Маленький пример на 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>

теги: javascript графика

16.10.2019, 14:43; рейтинг: 332