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