logo El diario de Pepe Molina (Caricatos)

yo

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

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Me pregunto si clonar a mi esposa se consideraría bigamia

Luis Guzmán, actor portorriqueño (1967).


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


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


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


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


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


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


botón pay-pal

SVG: Estrellas

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

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.

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.

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 :)

#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 mi emoticón

Evaluación

Valoración de esta página: (apunte.93) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 8763 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=2&max=480
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio