На самом деле показывать пока практически нечего. Надо еще сильно подумать над синхронизацией и выставлением интервалов. А пока пример:

К сожалению заменить картинки на карте Земли не получилось бы по двум причинам:

Я конечно не уверен, но мне кажется, это бы нарушило лицензионное соглашение. А я хоть и не мего законопослушный но делать этого в отношении гугла не хочу... вот были бы это карты от микрософта...

Вторая причина загадочная

Security error" code: "1000

Прямиком из фаербага. По идеи она возникает тогда когда я хочу получить getImageData картинки со стороннего домена. В общем я это еще узнаю.

Но не смотря на все трудности я все же сделал черно-белую карту с этой гнусной рожей которая мне уже порядком надоела.

Куда бы его на этот раз сунуть свои шаловливые рученьки?!

На самом деле стоило бы дать линк на эту работу но я его не знаю. То есть как, автор приготовил это для конкурса, но линк на работу не дал.

В общем по результатам разбора примера, найден проеб. При попытке оптимизировать отрисовку, оптимизация не случилась :)

То есть автор сделал как-то так

setInterval(function(){
	while(25--){
		c.beginPath();
		x = ...
		y = ...
		if(a){
			c.moveTo(a, b);
			c.lineTo(x, y);
		}
		a = x
		b = y
		c.stroke()
	}
}, 16); 

пытаясь запихнуть в один интервал отрисовку нескольких линий, а надо было выкинуть beginPath и stroke за цикл

setInterval(function(){
	c.beginPath();
	while(25--){
		x = ...
		y = ...
		с[!!a?"lineTo":"moveTo"](x, y);
		a = x
		b = y
	}
	c.stroke()
}, 16)

Но я не об этом. Я тут приготовил пример на поиграться :)

Радиус, это дробное число до 0,5. Почему до 0,5? Потому что 0,2 = 0,8 и 0,4 = 0,6. Ну вы поняли они зеркальные. Чтобы звездочка начала крутиться советую добавить 0,005. Наслаждайтесь :)

Ссылка для скачивания в самом низу страницы.

Начал с примитивов - прямоугольников (картинок) и кругов (эллипсов). Дело совершенно не хитрое перевел координату в точки по карте и умножил сторону (радиус) на два в степени приближение.

// рисуем круг из центра координат с радиусом

Overlay.prototype.onAdd = function() {
	
	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // центр мира
		worldWidth = this.getProjection().getWorldWidth(); // длина мира
			
	this.div = document.createElement('div'); // наш слой
	this.div.style.border = 'none';
	this.div.style.position = 'absolute';
	this.div.style.overflow = 'visible';
	this.div.style.left = center.x - worldWidth / 2 + 'px'; // от левого края карты
	this.div.style.top = center.y - worldWidth / 2 + 'px'; // от верха карты
	this.div.style.width = worldWidth+'px'; // шириной в карту
	this.div.style.height = worldWidth+'px'; // высотой в карту
	
	// таким образом див полностью перекрывает одну (центральную) секцию карты
	// заметте, карта повторяеться горизонтально 
	// но этот слой лежит только поверх одной секции не перекрывая соседние
	
	this.getPanes().overlayImage.appendChild(this.div); // добавляем слой на карту
	this.canvas = Raphael(this.div); // делаем из слоя холст для рисования
	
};

Overlay.prototype.draw = function() {
	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // центр круга
		worldWidth = this.getProjection().getWorldWidth(), // длина карты
		left = center.x - worldWidth / 2, // край карты
		top = center.y - worldWidth / 2, // край карты
		scale = 1 << this.getMap().getZoom(), // увеличение ( Math.pow(2, zoom))
		r = scale * radius, // реальный радиус
		x = center.x - left, // координата по слою
		y = center.y - top; // координата по слою
		
		this.canvas.clear(); // чистим холст от старых картинок
		this.canvas.circle(x, y, r); // рисуем круг
		
}

Вот собственно простейший пример и готов. Но мне же этого мало! А что если круг нарисовать с радиусом больше чем worldWidth/2? Тогда он будет вылазить за рамки слоя и будет обрезан по краям. Но это же не кошерно (или не по фен-шую :) ). Что же делать? Надо расширить слой. Слой расширяется в четырех направлениях так как он выпирает за границы слоя со всех четырех сторон. просто расширить слой не достаточно потому как див перестанет выпирать только справа и снизу, надо еще сместить див влево и вверх, но если сместили див надо поправить координаты круга. Для тех кто не дружит с математикой как я все страшно запутано поэтому показываю на примере.

// r > worldWidth / 2 по условию

Overlay.prototype.draw = function() {
	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // центр круга
		worldWidth = this.getProjection().getWorldWidth(), // длина карты
		left = center.x - worldWidth / 2, // край карты
		top = center.y - worldWidth / 2, // край карты
		scale = 1 << this.getMap().getZoom(), // увеличение ( Math.pow(2, zoom))
		r = scale * radius, // реальный радиус
		x = center.x - left, // координата по слою
		y = center.y - top, // координата по слою
		
		// отступы
		offsetLeft = r - x,
		offsetTop = r - y,
		offsetRight = r + x - worldWidth,
		offsetBottom = r + y - worldWidth,
		
		// длина и высота учитывая отступы
		fullWorkdWidth = offsetLeft + worldWidth + offsetRight,
		fullWorkdHeight = offsetTop + worldWidth + offsetBottom;
		
		// изменяем положение слоя и размеры холста
		this.div.style.left = left - offsetLeft + 'px';
		this.div.style.top = top - offsetTop + 'px';
		this.div.style.width = fullWorkdWidth + 'px';
		this.div.style.height = fullWorkdHeight + 'px';
		this.canvas.setSize(fullWorkdWidth, fullWorkdHeight);
		
		this.canvas.clear();
		this.canvas.circle(x, y, r); // рисуем круг
		
}

В результате получаеться где-то такая фигура

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

Походу с примитивами разобрались, Но кому нужны эти примитивы? Все хотят отмечать на карте разного рода кривые и полигоны (многогранники), что же, нужно и это реализовать. Возьмем пример которым пользуется Dmitry Baranovskiy, автор RaphaelJS - это петля Мёбиуса, знак бесконечности или просто перевернутая восьмерка для людей без воображения. Задаётся она вот такими координатами M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z. Координаты как вы ведите относительные (это видно из маленьких "с"), но даже если бы они были абсолютными это было бы не страшно. Первое что делаем переводим абсолютные в относительные, потом смещаем первую точку куда нам надо и умножаем все остальные точки по известной формуле.

Overlay.prototype.draw = function() {
	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // точка смещения
		worldWidth = this.getProjection().getWorldWidth(), // длина карты
		left = center.x - worldWidth / 2, // край карты
		top = center.y - worldWidth / 2, // край карты
		scale = 1 << this.getMap().getZoom(), // увеличение ( Math.pow(2, zoom))
		path = Raphael.pathToRelative(Raphael.parsePathString("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z"));
		line = [];
			
		for (var i in path) {
			for (var j in path[i]) {
				if (j == 0) {
					line[i] = [path[i][j]]; // буква
				} else if (i==0 && j==1) {
					line[i].push(center.x - left + path[i][j]); // начальная точка по X
				} else if (i==0 && j==2) {
					line[i].push(center.y - top + path[i][j]); // начальная точка по Y
				} else {
					line[i].push(path[i][j] * scale);  // все остальные точки
				}
			}
		}
		
		this.canvas.clear();
		this.canvas.path(line);
		
}

Единственный минус рисования кривой (как и текста), это то что пока не нарисуешь не узнаешь размеров, конечно можно долго высчитывать их по координатам но по моему это того не стоит, особенно если координаты относительные. С другой стороны узнать размер можно после рисования, вытереть и сместить все что нужно и нарисовать по новой, но по моему это требует еще больше усилий, хотя формулой для этого я не поделиться не могу.

	// для кривой (рисуеться с левого верхнего края)
	var path = this.canvas.path(line),
		width = path.getBBox().width,
		height = path.getBBox().height,
		x = point.x - left,
		y = point.y - top;
		
	// для текста (рисуеться из центра)
	var text = this.canvas.text(point.x, point.y, text),
		width = text.getBBox().width,
		height = text.getBBox().height,
		x = point.x - width / 2 - left,
		y = point.y - height / 2 - top;

С основными возможностями и трудностями рисования разобрались переходим к конкретным примерам

Прямоугольники

Есть пять разный вариантов нарисовать прямоугольник

• Ограничить область на карте с помощью границ (LatLngBounds)
• Нарисовать как во всех графических редакторах из верхнего левого угла с привязкой к координате
• Нарисовать как круг указав координату центра
• Нарисовать от левого верхнего угла в определенной точке на карте, при этом надо знать размер дива с картой и сам прямоугольник не будет менять позиции про движении карты, а уедет за край видимой области
• То же что и предыдущий, только из центра

	var map = new google.maps.Map(document.getElementById("map"), {
		zoom: 0,
		center: new google.maps.LatLng(0,0),
		mapTypeId: google.maps.MapTypeId.SATELLITE
	});

	new RaphaelOverlay({
		map:map,
		shapes : [{
			// прямоугольник ограниченный парой координат
			// может пропадать при движении карты
			// из-за отрицательной длинны
			position : new google.maps.LatLngBounds(
				// верхний првым угол (north-east)
				new google.maps.LatLng(-50, -100), 
				// нижний левый угол (south-west)
				new google.maps.LatLng(50, 100)
			),
			type: "rect",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#00f', 
				"fill-opacity": 0.3
			}
		},{
			// обычный прямоугольник нарисованный 
			// из верхнего левого угла
			// от координат 
			position : new google.maps.LatLng(85, -175),
			// и имеющий размеры 100x100
			size : new google.maps.Size(100, 100),
			type: "rect",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#0f0', 
				"fill-opacity": 0.3
			}
		},{
			// прямоугольник нарисованный 
			// из центра
			// от координат
			center : new google.maps.LatLng(-85, 175),
			// и имеющий размеры 100x100
			size : new google.maps.Size(100, 100),
			type: "rect",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// прямоугольник нарисованный 
			// из верхнего левого угла
			// от верхнего левого угла карты
			// такой прямоугольник не меняет позиции 
			// при движении карты
			position : new google.maps.Point(300, 100),
			size : new google.maps.Size(100, 100),
			type: "rect",
			// скругление углов
			radius: 10,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#ff0', 
				"fill-opacity": 0.3
			}
		},{
			// такой же как предыдущий, только 
			// из центра 
			center : new google.maps.Point(300, 100),
			size : new google.maps.Size(100, 100),
			type: "rect",
			// скругление углов
			radius: 10,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f0f', 
				"fill-opacity": 0.3
			}
		}]
	});

Картинки

По большому счету ничем не отличаются от прямоугольников, кроме того что имеют ссылку на картинку и не имеют скругления углов

	new RaphaelOverlay({
		map:map,
		shapes : [{
			// ссылка на картинку
			src : "http://upload.wikimedia.org/wikipedia/commons/d/d6/Wikipedia-logo-v2-en.png",
			position : new google.maps.LatLng(85, -175),
			size : new google.maps.Size(135, 155),
			type: "image"
		}]
	});

Круги и овалы

	new RaphaelOverlay({
		map:map,
		shapes : [{
			// у круга центр совпадает с позицией
			// но центр приоритетнее
			center: new google.maps.LatLng(85, 175),
			type: "circle",
			radius: 100,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#0f0', 
				"fill-opacity": 0.3
			}
		},{
			// как и квадрат круг и овал можно рисовать
			// из фиксированной точки
			position: new google.maps.Point(300, 100),
			type: "circle",
			radius: 100,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// овал отличается от круга двумя радиусами
			position: new google.maps.LatLng(-85, -175),
			type: "ellipse",
			rx: 100,
			ry: 50,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#00f', 
				"fill-opacity": 0.3
			}
		}]
	});

Кривые и полигоны

	new RaphaelOverlay({
		map:map,
		shapes : [{
			// Фигура нарисованная по координатам
			// может менять ширину при движении карты
			position : [
				new google.maps.LatLng(84, -175),
				new google.maps.LatLng(84, 175),
				new google.maps.LatLng(0, 0)
			],
			type: "polygon",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// Фигура нарисованная по кривой 
			// с абсолютными координатами
			position: new google.maps.LatLng(85, -175),
			path: "M 0 0 L 200 0 L 100 200 z",
			type: "path",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// Фигура нарисованная по кривой 
			// с относительными координатами
			position: new google.maps.LatLng(85, -175),
			path: "M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z",
			type: "path",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		}]
	});

Текст

	new RaphaelOverlay({
		map:map,
		shapes : [{
			position: new google.maps.LatLng(0, 0),
			text : "CTAPbIu_MABP",
			type: "text",
			attr : {
				fill: '#fff', 
				"font-size" : 20
			}
		}]
	});

Похоже это все, забыл только сказать что есть еще настройка приближения. Поскольку во всех примерах приближение поставлено минимальное, то при приближении хотя бы 10 все фигуры распадутся и будет очень некрасиво. Это происходит по разным причинам - кривизна SVG или VML или переполнение int32 в параметре ширины или высоты. Поэтому я сделал поправку на приближение. Первых два пункта интуитивно понятны это минимальное и максимальное приближение на котором видно фигуру, а третий пункт это приближение на котором заданы координаты кривых. То есть фигуру видно с 3 по 5 приближение, но координаты были рассчитаны при нулевом то можно это указать, иначе считается что они были заданы по меньшему из видимых. Смотрите пример с 3 по 5 приближение возле маркера.

	new RaphaelOverlay({
		map:map,
		shapes : [{
			position: new google.maps.LatLng(0, 0),
			path: "M0,0c0,50 100-50 100,0c0,50 -100-50 -100,0z",
			type: "path",
			zoom : {
				min : 3,
				max : 5,
			},
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			position: new google.maps.LatLng(0, 0),
			path: "M0,0c0,50 100-50 100,0c0,50 -100-50 -100,0z",
			type: "path",
			zoom : {
				min : 3,
				max : 5,
				adjusted : 0
			},
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		}]
	});

Скачать скрипт можно тут DOWNLOAD LINK. Вот и все, надеюсь будет хоть кому-то полезно!

function roundedRect(ctx,x,y,width,height,radius){
	ctx.beginPath();
	ctx.moveTo(x,y+radius);
	ctx.lineTo(x,y+height-radius);
	ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
	ctx.lineTo(x+width-radius,y+height);
	ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
	ctx.lineTo(x+width,y+radius);
	ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
	ctx.lineTo(x+radius,y);
	ctx.quadraticCurveTo(x,y,x,y+radius);
	ctx.stroke();
}

Работает как-то так:

Еще хотел натянуть на грани текстуры но у меня явно не тот подход к рисованию и я решил что лучше забить. Зато натянул на куб градиент:

Цацкайтесь на здоровье, пишите где мои проебы, как их поправить или просто пишите. Следующих версий ждать не стоит я скорее всего займусь чем-то на Java, или на YUI.

Из изменений: добавлина матрица граней, то есть порядок соединения вершин

this.G = [
	[0,1,2,3,4,5],
	[1,2,3,0,5,6],
	[2,6,7,4,1,2],
	[3,5,6,7,0,1],
]

и новый цикл для обхода матрицы

for(var i=0;i<6;i++){
	this.plot.beginPath();
	this.plot.fillStyle = "rgba("+(i<3?255:0)+","+((i<1||i>3)?255:0)+","+(i>2?255:0)+",0.5)";
	this.plot.moveTo(this.V2d[0][this.G[0][i]],this.V2d[1][this.G[0][i]]);
	this.plot.lineTo(this.V2d[0][this.G[1][i]],this.V2d[1][this.G[1][i]]);
	this.plot.lineTo(this.V2d[0][this.G[2][i]],this.V2d[1][this.G[2][i]]);
	this.plot.lineTo(this.V2d[0][this.G[3][i]],this.V2d[1][this.G[3][i]]);
	this.plot.closePath();
	this.plot.fill();
}

PS Пользователи IE идут на хуй, потому что он не поддерживает полупрозрачности фона rgba(255,255,255,0.5)

Вторая редакция кубика не имеет ничего общего с первой. Все полностью переделано. Теперь вместо того чтобы высчитывать углы наклонов и поворотов рёбер от угла поворота куба, я решил сделать так, как делается в нормальнйо трехмерной графике. Нарисовать сцену, положить в координаты [0,0,0] центр куба, по векторам высчитать вершины и нарисовать между ними линии. Что собственно с успехом и реализовал.

теперь как видите ничего нигде не точит и все прекрасно отображается. пришлось конешно пошаманить, прописать все углы, ребра и векторы но зато теперь все идеально. Куб можно изменять в размерах, отдалять и приближать "камеру", красить в произвольный цвет и все это при помощи настроек.

По просьбе Adw0rd'a выкладываю сырцы которые все это генерируют:

Cube = function(options){
	this.init(options);
}

Cube.prototype = {
	
	color : "#000000", // цвет граней
	plot : null, // 2d context
	size : 10, // размер куба
	focalLens : 0, // расстояние от центра куба до камеры
	theta : [0,0], // углы поворотов по осям в радианах
	V2d : [[],[]], // вектора в двухмерной проекции
	
	T : [], // Translation vector
	E : [[],[]], // Edges
	R : [[],[],[]], // Rotation matrix
	V : [[],[],[]], // Vertices

	init : function(options){
		
		for (var i in options)
			this[i] = options[i];
			
		if(!this.focalLens)
			this.focalLens = this.plot.canvas.width;
			
		var self = this;
		document.onmousemove = function(event){
			self.theta = [event.clientX / 100, event.clientY / 100];
			self.draw();
		}			
			
		this.createScene();
		this.draw();
	},
	
	createScene : function (){
		var s = this.size;
		
		this.V = [
			[-s, s, s,-s,-s, s, s,-s],
			[-s,-s, s, s,-s,-s, s, s],
			[-s,-s,-s,-s, s, s, s, s],
		];
		
		this.E = [
			[0,1,2,3,4,5,6,7,0,1,2,3],
			[1,2,3,0,5,6,7,4,4,5,6,7],
		];
		
		this.R = [
			[1,0,0],
			[0,1,0],
			[0,0,1],
		];
		
		this.T = [0,0,0];
	},

	updVertices : function (){
		var x, y, z;
		
		for(var i=0;i<8;i++){
			x=this.R[0][0]*this.V[0][i]+this.R[0][1]*this.V[1][i]+this.R[0][2]*this.V[2][i]+this.T[0];
			y=this.R[1][0]*this.V[0][i]+this.R[1][1]*this.V[1][i]+this.R[1][2]*this.V[2][i]+this.T[1];
			z=this.R[2][0]*this.V[0][i]+this.R[2][1]*this.V[1][i]+this.R[2][2]*this.V[2][i]+this.T[2];

			this.V2d[0][i]=this.plot.canvas.width/2+x*this.focalLens/z;
			this.V2d[1][i]=this.plot.canvas.height/2+y*this.focalLens/z;
		}
	},


	setTransformation : function (x, y, z, anglex, angley){
		var 
		sx = Math.sin(anglex),
		cx = Math.cos(anglex),
		sy = Math.sin(angley),
		cy = Math.cos(angley);
		
		this.R = [
			[ cx   , 0 ,  sx],
			[ sx*sy, cy, -cx*sy],
			[-sx*cy, sy,  cx*cy],
		];
		this.T = [x,y,z];
	},

	drawModel : function (){
		this.plot.beginPath();
		this.plot.strokeStyle=this.color;
		for(var i=0;i<12;i++){
			this.plot.moveTo(this.V2d[0][this.E[0][i]],this.V2d[1][this.E[0][i]]);
			this.plot.lineTo(this.V2d[0][this.E[1][i]],this.V2d[1][this.E[1][i]]);
			this.plot.stroke();
		}
	},
	
	drawCells : function(){
		this.plot.fillStyle="black";
		for(var i=100,l=this.plot.canvas.width;i<l;i+=100){
			this.plot.fillRect(0,i,l,1);
			this.plot.fillRect(i,0,1,l);
		}
	
	},

	draw : function (){
		var self = this;

		this.plot.clearRect(0,0,this.plot.canvas.width,this.plot.canvas.height);
		this.setTransformation(0.0, 0.0, 40.0, this.theta[0], this.theta[1]);
		this.updVertices();
		this.drawCells();
		this.drawModel();
	},
}


window.onload=function(){
	var plot = document.getElementById("cube").getContext("2d"),
	
	cube = new Cube({plot:plot,color:"#00FF00",size:10});
}

И еще три строчки HTML:

<script type="text/javascript" src="/content/source/cube-0.2.js"></script>
<script type="text/javascript" src="/content/source/excanvas.js"></script>
<div style="text-align:center;"><canvas  id="cube" width="500" height="500"/></div>

но это не конец, в следующей версии планируется натяжка текстур на грани и добавление света, или раскраска сторон с добавлением полупрозрачности, я еще не решил что буду делать.

После записи о вращении квадрата я немного полистал учебники по геометрии, и даже "основы учебного академического рисунка", и поднабрался знаний по поводу того что и как должно быть. И вот пришло время поделится этим с вами.

Я решил что до того как рисовать красивые полупрозрачные грани неплохо было бы научится вращать вершины. Чем собственно и занялся. Четыре точки вращаются в трех плоскостях. Но там немного хитро по оси OX вращение происходит при передвижении мышки вперед назад, а по оси OY и/или OZ происходит при передвижении мышки из стороны в сторону и зависит от того на какой грани лежит куб.

Развлекаемся:

Весь код показывать не буду, если захотите посмотрите, но главную функцию, которая рассчитывает позиции вершин обязательно надо показать.

function(){
	var data = [],
	dim = this.dimension,
	o = this.theta;
	for (var x = -dim; x <= dim; x += 2 * dim)
		for (var y = -dim; y <= dim; y += 2 * dim)
			for (var z = -dim; z <= dim; z += 2 * dim){
				var 
				a = x * Math.cos(o.x) - y * Math.sin(o.x),
				b = x * Math.sin(o.x) + y * Math.cos(o.x),
				c = b * Math.cos(o.y) - z * Math.sin(o.y),
				d = b * Math.sin(o.y) + z * Math.cos(o.y);
				data.push({
					left : 250 + a * (d + 2) * 50,
					top  : 250 + c * (d + 2) * 50,
				});
			}
	return data;
}

Единственным недостатком такого способа расчета координат есть то, что если поставить куб так чтобы взгляд шел сразу по двум граням, то дальняя вершина, которая должна сливаться с передней (то есть взгляд должен идти по ребру) сильно выходит за рамки куба. Но я так понял что я не первый кто пользуется этим способом, так что думаю что ничего страшного.

В планах на ближайшее будущее новый куб у которого ничего никуда не вылазит.

А началось все с того что я увидел имитацию Counter Strike нарисованную при помощи векторной графике и javascript в canvas. Я решил написать нечто подобное. Но с чего начать? Я решил нарисовать кубик который можно вращать во все стороны. До кубика дело не дошло. Проблемы возникли еще с первой стороной. Блядская математика. В общем как я уже говорил, я пытался повернуть квадрат хоть как-нибудь, хоть куда-нибудь целых 4 часа. Более того не сумел найти ни одно учебника по 2D графике в котором бы внятно описывалось как создавать псевдо-трехмерные объекты, с формулами. Ближе к часу ночи вспомнил про книгу "Как самому создать трехмерную игру", вспомнил громким матом. Выругался и полез искать учебник по математике для школы, нашел mathematics.ru, стало немного проще, но все равно квадратик развернулся только в два ночи, когда я синусы, косинусы, плюсы и минусы расставлял почти не думая, пытаясь забрутфорсить формулу.

Вот такая хоботня у меня получилась: красным цветом исходный квадрат, черным - повернутый.

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

	var plot = document.getElementById("sqrt").getContext("2d"),
	theta = 30 * Math.PI / 180,
	delta = [Math.cos(theta),Math.sin(theta)];
	radius = 100 * Math.sqrt(2);

	// Горизонтальные полосы
	plot.fillRect(0,100,400,1)
	plot.fillRect(0,200,400,1)
	plot.fillRect(0,300,400,1)
	
	// Вертикальные полосы
	plot.fillRect(100,0,1,400)
	plot.fillRect(200,0,1,400)
	plot.fillRect(300,0,1,400)
	
	// Красный квадрат
	plot.beginPath();
	plot.fillStyle = "red";
	plot.moveTo(100, 100);
	plot.lineTo(100, 300);
	plot.lineTo(300, 300);
	plot.lineTo(300, 100);
	plot.closePath();
	plot.fill();
	
	// черный квадрат Малевича
	plot.beginPath();
	plot.fillStyle = "black";
	plot.moveTo(200 - radius * delta[1], 200 - radius * delta[0]);
	plot.lineTo(200 + radius * delta[0], 200 - radius * delta[1]);
	plot.lineTo(200 + radius * delta[1], 200 + radius * delta[0]);
	plot.lineTo(200 - radius * delta[0], 200 + radius * delta[1]);
	plot.closePath();
	plot.fill();

Спонсор картинки в IE 6 и 7 - Google co своим скриптом explorercanvas, IE 8 идет на хуй.

Вывод из этой басни такой: надо было учить математику в школе, а потом появляются посты такие как этот и прошлый.