Semilla de la vida con "xor"
La Semilla de la Vida es el nombre que se da a una figura geométrica compuesta de 6 círculos completes,
todos del mismo diámetro, que para algunos tiene un significado místico y esotérico.
Aquí nos interesa solo como dibujarla, ya que nos permite practicar con la propiedad globalCompositeOperation de <canvas>.
Empezamos esbozando un circulo imaginario con el centro en la esquina superior izquierda del <canvas> (var cX = 0, cY = 0) con un radio de 60px ( var r = 60;). No hay que trazarlo. Solo servirá de guía.
Trasladamos el contexto en el centro del canvas: ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);
Para dibujar la "semilla de la vida" necesitamos 6 círculos cuyos centros están dispuestos equidistantemente en la circunferencia del circulo guía, o sea formando un ángulo "a" de 60° entre ellos. Recordemos que en radianes 60° = Math.PI/3.
Observamos que podemos escribir un bucle for para construir los 6 circulos.
Para el centro del primer circulo el ángulo a = (Math.PI/3)*0 radianes.
Para el centro del segundo circulo el ángulo a = (Math.PI/3)*1 radianes.
Para el centro del tercer circulo el ángulo a = (Math.PI/3)*2 radianes.
etc...
Falta encontrar las coordenadas de los centros, y la fórmula ya la conocemos:
X = cX+r*cos(a);
Y = cY+r*sin(a);
donde:
- "a" es el ángulo calculado anteriormente,
- "r" es el radio y
- "cX" e "cY" son las coordenadas del centro del circulo guía.
Al final dibujamos los círculos utilizando el método arc(), y combinamos cada circulo con el circulo anterior utilizando ctx.globalCompositeOperation = "xor";
for( var i=0; i < 6; i++ ){
var a = ( Math.PI/3 )*i
var X = cX+r * Math.cos(a);
var Y = cY+r * Math.sin(a);
// dibujamos los circulos
ctx.beginPath();
ctx.arc(X, Y, r, 0, 2 * Math.PI);
ctx.fill();
//combinamos trazados con xor
ctx.globalCompositeOperation = "xor";
}
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var cX = 0;
var cY = 0;
var r = 60;
// definimos el estilo de relleno
ctx.fillStyle = "blue";
// trasladamos el contexto en el centro del canvas
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
// girar 90°
ctx.rotate(Math.PI / 2);
// utilizamos un bucle for para construir los 6 circulos
for (var i = 0; i < 6; i++) {
var a = (Math.PI / 3) * i
var X = cX + r * Math.cos(a);
var Y = cY + r * Math.sin(a);
// dibujamos los circulos
ctx.beginPath();
ctx.arc(X, Y, r, 0, 2 * Math.PI);
ctx.fill();
//combinamos trazados con xor
ctx.globalCompositeOperation = "xor";
}
}
}