Черным выделена формула зависимости шестнадцатеричного индекса цвета пикселя от порядкового номера x и y от центра изображения. Полуается геометрическая сетка из пузырей.
Анимации на js
Для исходного изображения n принято за единицу
(function(){ var R = 256; var D=2R;
var pow = Math.pow; var floor=Math.floor;
var ceil_log16 = function(col) { return col.toString(16).length; }
rgb = function(x, y){ return floor( (xxn+yyn)pow(16, ( 6-ceil_log16(xxn+yyn)) ) ); }
document.body.innerHTML=('<canvas id="C" width="'+D+'" height="'+D+'"></canvas>');
var canvas = document.getElementById('C');
var ctx = canvas.getContext('2d');
window.n=0; var si = setInterval(function () {
window.n += 1;
for(var x = 0;x<R;x++) {
for(var y = 0;y<R;y++) {
ctx.fillStyle='#'+rgb(x, y, n).toString(16);
var X1 = R-x-1;
var Y1 = R-y-1;
var X2 = R+x;
var Y2 = R+y;
if ( ( xx+yy ) < R*R ) {
ctx.fillRect(X1, Y1, 1, 1);
ctx.fillRect(X1, Y2, 1, 1);
ctx.fillRect(X2, Y1, 1, 1);
ctx.fillRect(X2, Y2, 1, 1);
} } } }, 100);
})();
Код можно выполнить прямо в консоли браузера
Тут съело 5 знаков умножения
Правильно будет return floor( (x умножить x умножить n + y умножить у умножить n) умножить pow(16, ( 6- ceil_log16(x умножить x умножить n + y умножить у умножить n)) ) );
ДИХЛОФОС СЮДА БЫСТРО СКОРЕЕ !!!
ТАРАКАНЫ НАБЕГАЮТТ
>Двач, что скажешь?
В /pr/
Очевидно что 16 в 6 степени минус логарифм по основанию 16 сумм квадратов двух чисел дают некий магический эффект
Если бы формула была честной и точка $(x,y)$ красилась бы в этот цвет то была бы полная вращательная симметрия. Вращательной симметрии не наблюдается потому что ты красишь именно пиксели, а не точки. Пузыри возникают как раз из-за этого эффекта "пиксели vs точки", потому что на окружностях $x^2+y^2 = C$ лежат разное количество целых точек в зависимости от $C$. Нечто похожее будет если покрасить на единичной сфере все рац точки с знаменателями $> C$ например, тоже будут пузыри. Картинка красивая, но с точки зрения математики не сильно интересная.
Это аналогично дописыванию нулей справа до 6 стимволов в 16-ричной записи числа, или обрезанию символов после шестого. Таким образов соседние пикселы могут как резко отличаться по значению RGB, так и быть ближе к равным. Из-за этого получается пузырьковая сетка.
Мне давно интересен этот глиф. Но когда смог его записать в виде формулы, стало уже не так интерсно.
>>76817
Да это формула и логарифмы не при чём вообще, опять же, вбей $100(x^2+y^2)$ вместо своей, будут те же самые пузыри. Любая функция зависящая только от $x^2+y^2$ даст то же самое. Ну потому что дело не в формуле а в том как распределены целые точки на окружностях $x^2+y^2=C$, а это не меняется от того какую именно $f(x^2+y^2)$ ты выберешь (от $f$ зависит только "радиальное" распределение цветов).
Без формулы пузыри не вложенны друг в друга, и фрактал не получается, а так да, умножение дает сдвиг в RGB координатах
var pow = Math.pow; var floor=Math.floor;
var ceil_log16 = function(col) { return col.toString(16).length; }
rgb = function(x, y){ return floor( (xxn+yyn)100 ); }
document.body.innerHTML=('<canvas id="C" width="'+D+'" height="'+D+'"></canvas>');
var canvas = document.getElementById('C');
var ctx = canvas.getContext('2d');
window.n=0; var si = setInterval(function () {
window.n += 1;
for(var x = 0;x<=R;x++) {
for(var y = 0;y<=R;y++) {
ctx.fillStyle='#'+rgb(x, y, n).toString(16);
if (x===0&&y===0) ctx.fillStyle="#000000";
var X1 = R-x;
var Y1 = R-y;
var X2 = R+x;
var Y2 = R+y;
if ( ( xx+yy ) < R*R ) {
ctx.fillRect(X1, Y1, 1, 1);
ctx.fillRect(X1, Y2, 1, 1);
ctx.fillRect(X2, Y1, 1, 1);
ctx.fillRect(X2, Y2, 1, 1);
} } } }, 100);
})();
>лучше так, чтобы фрактал не был деформированным
(function(){ var R = 256; var D=2R+1;
var pow = Math.pow; var floor=Math.floor;
var ceil_log16 = function(col) { return col.toString(16).length; }
rgb = function(x, y){ return floor( (xxn+yyn)pow(16, ( 6-ceil_log16(xxn+yyn)) ) ); }
document.body.innerHTML=('<canvas id="C" width="'+D+'" height="'+D+'"></canvas>');
var canvas = document.getElementById('C');
var ctx = canvas.getContext('2d');
window.n=0; var si = setInterval(function () {
window.n += 1;
for(var x = 0;x<=R;x++) {
for(var y = 0;y<=R;y++) {
ctx.fillStyle='#'+rgb(x, y, n).toString(16);
if (x===0&&y===0) ctx.fillStyle="#000000";
var X1 = R-x;
var Y1 = R-y;
var X2 = R+x;
var Y2 = R+y;
if ( ( xx+yy ) < R*R ) {
ctx.fillRect(X1, Y1, 1, 1);
ctx.fillRect(X1, Y2, 1, 1);
ctx.fillRect(X2, Y1, 1, 1);
ctx.fillRect(X2, Y2, 1, 1);
} } } }, 100);
})();
>Поправка
Вот, записал код нормально, с пояснениями. И чтоб знаки не съедал парсер. По прежнему код можно выполнить в консоли браузера
Если смотреть на него более 8000 секунд, то анимация замедляется и можно разглядеть бесконечно красивые узоры в малых кругах, и они совершенно разные, переходящие друг-в друга.
Это же доступно и для js кода при больших значениях n - мы таким способом масштабируем бесконечный фрактал.
по этой теории, если мы перемещаем окно с изображением по экрану, то узоры должны меняться
а можешь сделать чтобы круг перемещался вправо по экрану и отрубить остальную анимацию?
>Двач, что скажешь?
Ну красиво, что сказать, но не математика.
Это очень красиво.