3,3 Мб, 2048x2300Двач, что скажешь?
Черным выделена формула зависимости шестнадцатеричного индекса цвета пикселя от порядкового номера 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);
})();
Код можно выполнить прямо в консоли браузера
Черным выделена формула зависимости шестнадцатеричного индекса цвета пикселя от порядкового номера 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);
})();
Код можно выполнить прямо в консоли браузера
>return floor( (xxn+yyn)pow(16, ( 6-ceil_log16(xxn+yyn)) ) );
Тут съело 5 знаков умножения
Правильно будет return floor( (x умножить x умножить n + y умножить у умножить n) умножить pow(16, ( 6- ceil_log16(x умножить x умножить n + y умножить у умножить n)) ) );
>>76806
Очевидно что 16 в 6 степени минус логарифм по основанию 16 сумм квадратов двух чисел дают некий магический эффект
Очевидно что 16 в 6 степени минус логарифм по основанию 16 сумм квадратов двух чисел дают некий магический эффект
>>76790 (OP)
Если бы формула была честной и точка $(x,y)$ красилась бы в этот цвет то была бы полная вращательная симметрия. Вращательной симметрии не наблюдается потому что ты красишь именно пиксели, а не точки. Пузыри возникают как раз из-за этого эффекта "пиксели vs точки", потому что на окружностях $x^2+y^2 = C$ лежат разное количество целых точек в зависимости от $C$. Нечто похожее будет если покрасить на единичной сфере все рац точки с знаменателями $> C$ например, тоже будут пузыри. Картинка красивая, но с точки зрения математики не сильно интересная.
Если бы формула была честной и точка $(x,y)$ красилась бы в этот цвет то была бы полная вращательная симметрия. Вращательной симметрии не наблюдается потому что ты красишь именно пиксели, а не точки. Пузыри возникают как раз из-за этого эффекта "пиксели vs точки", потому что на окружностях $x^2+y^2 = C$ лежат разное количество целых точек в зависимости от $C$. Нечто похожее будет если покрасить на единичной сфере все рац точки с знаменателями $> C$ например, тоже будут пузыри. Картинка красивая, но с точки зрения математики не сильно интересная.
>>76815
Я аспирант математик.
Я аспирант математик.
>>76810
Это аналогично дописыванию нулей справа до 6 стимволов в 16-ричной записи числа, или обрезанию символов после шестого. Таким образов соседние пикселы могут как резко отличаться по значению RGB, так и быть ближе к равным. Из-за этого получается пузырьковая сетка.
Это аналогично дописыванию нулей справа до 6 стимволов в 16-ричной записи числа, или обрезанию символов после шестого. Таким образов соседние пикселы могут как резко отличаться по значению RGB, так и быть ближе к равным. Из-за этого получается пузырьковая сетка.
>>76811
Мне давно интересен этот глиф. Но когда смог его записать в виде формулы, стало уже не так интерсно.
Мне давно интересен этот глиф. Но когда смог его записать в виде формулы, стало уже не так интерсно.
2,1 Мб, 2880x1132>>76818
>>76817
Да это формула и логарифмы не при чём вообще, опять же, вбей $100(x^2+y^2)$ вместо своей, будут те же самые пузыри. Любая функция зависящая только от $x^2+y^2$ даст то же самое. Ну потому что дело не в формуле а в том как распределены целые точки на окружностях $x^2+y^2=C$, а это не меняется от того какую именно $f(x^2+y^2)$ ты выберешь (от $f$ зависит только "радиальное" распределение цветов).
>>76817
Да это формула и логарифмы не при чём вообще, опять же, вбей $100(x^2+y^2)$ вместо своей, будут те же самые пузыри. Любая функция зависящая только от $x^2+y^2$ даст то же самое. Ну потому что дело не в формуле а в том как распределены целые точки на окружностях $x^2+y^2=C$, а это не меняется от того какую именно $f(x^2+y^2)$ ты выберешь (от $f$ зависит только "радиальное" распределение цветов).
>>76819
Без формулы пузыри не вложенны друг в друга, и фрактал не получается, а так да, умножение дает сдвиг в RGB координатах
Без формулы пузыри не вложенны друг в друга, и фрактал не получается, а так да, умножение дает сдвиг в RGB координатах
(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)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);
})();
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);
})();
>лучше так, чтобы фрактал не был деформированным
>>76830
(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);
})();
(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);
})();
>Поправка
>>76830
(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);
})();
(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);
})();
>Поправка
https://github.com/4eckme/Tetrascope/blob/main/tetrascope.play.js
Вот, записал код нормально, с пояснениями. И чтоб знаки не съедал парсер. По прежнему код можно выполнить в консоли браузера
Вот, записал код нормально, с пояснениями. И чтоб знаки не съедал парсер. По прежнему код можно выполнить в консоли браузера
>>76828
Если смотреть на него более 8000 секунд, то анимация замедляется и можно разглядеть бесконечно красивые узоры в малых кругах, и они совершенно разные, переходящие друг-в друга.
Это же доступно и для js кода при больших значениях n - мы таким способом масштабируем бесконечный фрактал.
Если смотреть на него более 8000 секунд, то анимация замедляется и можно разглядеть бесконечно красивые узоры в малых кругах, и они совершенно разные, переходящие друг-в друга.
Это же доступно и для js кода при больших значениях n - мы таким способом масштабируем бесконечный фрактал.
>>76811
по этой теории, если мы перемещаем окно с изображением по экрану, то узоры должны меняться
по этой теории, если мы перемещаем окно с изображением по экрану, то узоры должны меняться
>>76840
а можешь сделать чтобы круг перемещался вправо по экрану и отрубить остальную анимацию?
а можешь сделать чтобы круг перемещался вправо по экрану и отрубить остальную анимацию?
>>76838
какое же мерзное отвратительное тараканье говно
какое же мерзное отвратительное тараканье говно
>>76852
Не понимаю о чём ты
Не понимаю о чём ты
>>76790 (OP)
Это очень красиво.
Это очень красиво.