Хабр, привет. Эта статья не претендует на большую серьезность, я просто хочу поделиться новой формой, которую я открыл. Это такой круг, цвет точек которого равен сумме квадратов координат заданной точки. Другими словами pixel_color=(pixel_x^2+pixel_y^2).toString(16).
Тут я немного ошибся, правильная функция определения цвета выглядит так:
function(x, y){
    z = x*x+y*y;
    if(z===0) return '#000000';
    while(z<'0x100000' && z) z=z<<4;
    while(z>'0xffffff' && z) z = Math.floor(z/16);
    return '#'+z.toString(16);
}

Т.е циклично добавляется побитовый сдвиг влево на 4 бита (эквивалентно дописыванию 0 в конце) до тех пор пока 16-ричное число не станет шестизначным, что требуется от RGB-модели.Для больших значений используется цикличное деление на 16


Эта фигура сама собой очень интересна, представляет собой что-то вроде четкого интерферентного фрактала или даже модели вселенной, описывающей микро и макромир. Несмотря на то, что ее легко получить, я нигде не нашел ничего похожего на нее. Возможно я первооткрыватель. В таком случае я хотел бы назвать ее Тетраскоп (tetrascope). В приведенном примере я генерирую тетраскоп радиусом 1024px, максимальное что у меня получилось сгенерировать на своей машине это объект радиусом 4096px, картинка которого весит ~150 мегабайт.

Эта модель — абсолют, под этим я понимаю, что ее физикоматематическая модель существует сама по себе, еще задолго до своего открытия и независимо от человека, как самодостаточная форма бытия.

P.S.: картинку рекомендую смотреть на компьютере в 100% масштабе — так более понятно что она из себя представляет. В комментариях я предлагаю поэксперементировать с кодом, предложить свое описание и смысл картинки или ее название, и вообще как-нибудь дополнить этот пост, возможно какой-то информацией.

$(document).ready(function(){
	var R=1024; var D=2*R+1;
	var rgb = function(c){
		if(c.length<=6)	return c+("0".repeat(6-c.length));
		else return c.substring(0, 3)+c.substring(c.length-3);
	}
	$('body').append('<canvas id="C" width="'+D+'" height="'+D+'">');
	var canvas = document.getElementById('C');
	var ctx = canvas.getContext('2d');
	ctx.fillStyle="#ffffff00";
	ctx.fillRect(0, 0, 256, 256);
	for(var x = 0;x<=R;x++) {
		for(var y = 0;y<=R;y++) {					
			var X1 = R-x;
			var Y1 = R-y;
			var X2 = R+x;
			var Y2 = R+y;
			if (( x*x+y*y )   <=   R*R    ) {
				ctx.fillStyle="#"+(   rgb( (x*x+y*y).toString(16))   );
				ctx.fillRect(X1, Y1, 1, 1);
				ctx.fillRect(X1, Y2, 1, 1);
				ctx.fillRect(X2, Y1, 1, 1);
				ctx.fillRect(X2, Y2, 1, 1);
	}	}	}
});