Полиспираль
Давненько не было чего-то этакого, чтоб психоделическая графика и все дела.
Слова "полиспираль" особо и в поисковиках-то нет, они норовят исправить запрос на какую-то "полуспираль", но это она - спираль, состоящая из нескольких линейных сегментов, причём, каждый сегмент на заданную величину больше (или меньше) предыдущего. Каждый сегмент также меняет направление под заданным углом.
Если сделать на яваскрипте и в анимации, получится психоделическая картинка, от которой у лиц, склонных к шизофрении, паранойе и эпилептическим припадкам может наступить ахтунгфюрер, я вас предупреждал :)
После запуска лучше нажать в браузере 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 [1545 просмотров]