El diario de Pepe Molina (Caricatos)

Para crear figuras geométricas sencillas podemos hacerlo "a ojo", y obtener los resultados que mostramos a continuación, pero si nos animamos con sencillos cálculos, seguro que mejoraremos los resultados.

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

RSS de las imágenes:

La Cita

El conocimiento viene, la sabiduría se queda

Alfred Tennyson, poeta inglés (1809-1892).

En esta zona están las páginas personales del autor.

Mis Enlaces

Mis clientes ahora también son mis amigos (aunque les cobre).

Mis Clientes

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

Mis Amigos Informáticos

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

Puede contribuir a mantener esta página con su donativo.

SVG: Estrellas

Publicado el día 15 de agosto de 2012
id=93; categorías: Programación

Hemos implementado el efecto rollover en las figuras, y aún quedando bien (bonito), no es lo deseado en los casos de las estrellas de cinco y ocho puntas. Intentaremos pues obtener estrellas de otra manera.

Un poco de geometría

No profundizaremos mucho en cuestiones o ecuaciones matemáticas, pero para estos casos podemos usar la ecuación de la circunferencia. Y como precedente veremos el código de una vieja página donde implementamos con una librería gráfica propia, un reloj analógico; en concreto mostraremos como hemos pintado las marcas de las horas:

// creación de las 12 marcas...
radian = Math.PI / 180;
for (var i = 11; i < 24; i ++)	{
	alfa = 30 * i;
	colorMarca = (alfa % 90 == 0) ? "black" : "gray";
	anchoMarca =  (alfa % 90 == 0) ? 3 : 2;
	alfaX = parseInt(Math.sin(alfa * radian) * 45) + 50;
	alfaY = parseInt(Math.cos(alfa * radian) * 45) + 50;
	marca = new Esfera("", alfaX, alfaY, anchoMarca, colorMarca, "visible");
	laCaja.innerHTML += marca.generar();
}

Por lo pronto usaremos ese código para ver las coordenadas que recoge y fabricar un dodecágono:

A partir de las coordenadas obtenidas (28,88,49,95,72,88,88,72,95,51,88,28,72,12,51,5,28,12,12,28,5,49,12,72,28,88), hemos creado la figura que mostramos a la derecha; y echándole algo de imaginación, alternamos el radio en unas puntas por su mitad y obtenemos la estrella de seis puntas que se distingue a la izquierda de este párrafo. A diferencia del dodecágono, nuestra "estrella" de seis puntas está generada con valores reales, así que vamos a omitir mostrar esos puntos, aunque puede verse desde el código fuente del apunte; de todos modos mostraremos el código que genera los puntos.

Los retoques que hemos realizado al código lo reflejamos a continuación:

function seis_puntas() {
	coordenadas = [];
	radian = Math.PI / 180;
	for (var i = 11; i < 23; i ++)	{
		alfa = 30 * i;
		radio = (i % 2 == 1) ? 22.5:45;
		coordenadas.push((Math.sin(alfa * radian) * radio) + 50);
		coordenadas.push((Math.cos(alfa * radian) * radio) + 50);
	}
	return coordenadas;
}

Del código podemos deducir que para un determinado número de puntas necesitamos el doble de coordenadas alternando el radio de cada cálculo.

Cinco puntas

A partir de la última reflexión modificamos nuestro código y hemos conseguido la estrella que vemos a nuestra izquierda. Hemos cambiado algunos valores para ajustar el número de puntas y sus coordenadas.

También es posible crear estrellas como el asterisco que precede este párrafo agrupando lineas. Para insertar esta figura hemos añadido otros elementos básicos de las imágenes svg como la agrupación de elementos "g" y el atributo "viewbox".

A continuación mostramos variantes de la estrella de cinco puntas escaladas:

Nótese que al agrandar las imágenes, éstas no se pixelan como en los mapas de bits. En la última de las figuras hemos utilizado el atributo preserveAspectRatio para conseguir el efecto de estiramiento.

<< primer apunte < apunte anterior apunte siguiente > último apunte >>

Zona de comentarios

Hemos encontrado 2 comentarios.

#Mensaje enviado por Andrés
Comentario escrito el día 18 de agosto de 2012, a la hora 12:12:07
url: http://www.disegnocentell.com.ar
email: mobius@disegnocentell.com.ar

Muy bueno! Espero ansioso más artículos sobre svg :)

Lo que me encantaría es ver el código en los ejemplos para no tener que buscarlo en el código fuente de la página :)

responder a este comentario

#Mensaje enviado por Pepe Molina
Comentario escrito el día 19 de de 2012, a la hora 18:33:07
url: http://www.pepemolina.com

Gracias por el comentario Andrés.

La verdad es que en la mayoría de los casos tan solo he modificado los atributos points y fill de la etiqueta polygon. De todos modos he pensado en crear un generador de figuras poligonales básicas (tampoco sé de geometría como para cosas sofisticadas).

Saludos