БлогNot. Полиспираль

Полиспираль

Давненько не было чего-то этакого, чтоб психоделическая графика и все дела.

Слова "полиспираль" особо и в поисковиках-то нет, они норовят исправить запрос на какую-то "полуспираль", но это она - спираль, состоящая из нескольких линейных сегментов, причём, каждый сегмент на заданную величину больше (или меньше) предыдущего. Каждый сегмент также меняет направление под заданным углом.

Если сделать на яваскрипте и в анимации, получится психоделическая картинка, от которой у лиц, склонных к шизофрении, паранойе и эпилептическим припадкам может наступить ахтунгфюрер, я вас предупреждал :)

После запуска лучше нажать в браузере F11 и Ctrl+F5, чтобы развернуть приложение на весь экран и начать сначала.

Ниже приводятся ссылка и полный исходник файла на момент написания (предполагается сохранение листинга в файле типа .html в кодировке Юникода UTF-8).

Сколько циклов вы готовы смотреть на это?

 PolySpiral.html, запустить приложение Полиспираль в текущем окне/вкладке (2 Кб)

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <style>
  html, body { margin: 0; padding: 0; overflow:hidden; }
  body { background-color: #000000; }
 </style>
</head>
<body>

 <canvas id="spiralCanvas"></canvas>
 <script>
  var canvas = document.getElementById("spiralCanvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext("2d");
  var inc = 0;

  function drawSpiral (len, angleIncrement) {
   var x1 = canvas.width / 2;
   var y1 = canvas.height / 2;
   var angle = angleIncrement;
   var ddSeg = 360, ddLen = 2.718;
   for (var i = 0; i < ddSeg; i++) {
    var x2 = x1 + Math.cos(angle) * len;
    var y2 = y1 - Math.sin(angle) * len;
    ctx.strokeStyle = HSVtoRGB (i / ddSeg, 1, 1);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    x1 = x2; y1 = y2; len += ddLen;
    angle = (angle + angleIncrement) % (Math.PI * 2);
   }
  }
 
  function HSVtoRGB (h, s, v) { //функция со stackoverflow
   var r, g, b, 
       i = Math.floor(h * 6), 
       f = h * 6 - i, 
       p = v * (1 - s), 
       q = v * (1 - f * s), 
       t = v * (1 - (1 - f) * s);
   switch (i % 6) {
    case 0: r = v, g = t, b = p; break;
    case 1: r = q, g = v, b = p; break;
    case 2: r = p, g = v, b = t; break;
    case 3: r = p, g = q, b = v; break;
    case 4: r = t, g = p, b = v; break;
    case 5: r = v, g = p, b = q; break;
   }
   return "rgb("
    + Math.round(r * 255) + ","
    + Math.round(g * 255) + ","
    + Math.round(b * 255) + ")";
  }
 
  function toRadians(degrees) { return degrees * (Math.PI / 180); }
 
  setInterval (function () {
   inc = (inc + 0.1) % 360;
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   drawSpiral (5, toRadians(inc));
  }, 25);
 </script>
 <noscript>
  <div align="center">
   Извините, для работы приложения нужен включённый Javascript
  </div>
</noscript>
 
</body></html>

"Смотри в её экран, пока он не начнёт смотреть в тебя"

Предложил жене посмотреть, со словами, что мне нужен чокнутый подопытный, а она ничего не почувствовала. У меня же от одного цикла заболела голова :(

Либо чокнут таки я, либо коэффициенты подобраны не так :)

Завтра проверим на большем количестве людей.

12.06.2019, 20:22 [1610 просмотров]


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

показать комментарии (2)