Ésta mañana estaba enredando tratando de crear un generador de patterns (imágenes repetitivas para fondos, etc) con javascript y canvas. Pero al intentar hacerla, dado a un error (aumentaba la x mientras disminuía la y) ha salido una forma extrañísima, que me gustaría dejar constatado:

Figura generada con canvas

La forma está relacionada con con la proporcionalidad inversa.
Os paso el código por si alguien quiere generarlas con otro color, más separación, etc (tenéis que llamar a la función generardesde la consola).

<html><head></head><body>
<img src="about:blank" id="the-image">
<script type="text/javascript">
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
imagen = document.getElementById("the-image");
function generar(dimension, color, espacio){
var lineas, espacioEntreLineas,
alto = dimension,
ancho = dimension,
x = 0,
y = alto;

espacio = espacio || dimension/2;

lineas = dimension/espacio -1;
espacioEntreLineas = dimension/lineas;

canvas.height = alto;
canvas.width = ancho;
ctx.beginPath();
ctx.strokeStyle = color;

function draw(){
ctx.moveTo(0, y);
ctx.lineTo(x, 0);
}

for( var i = 0; i < lineas; i ++ ){
x += espacioEntreLineas;
y -= espacioEntreLineas;
draw();
};
ctx.stroke();
imagen.src = canvas.toDataURL("image/png");
}
</script>
</body></html>

Yo mientras seguiré intentándolo

3 pensamientos en “Experimento con canvas

  1. Imagen de Adolfo D. el dijo:

    Bienvenido al maravilloso mundo de la hipérbola, la espectacular proyección bidimensional de la ecuación de proporcionalidad inversa.

    Si has notado algo de ironía es que tus sentidos arácnidos fallan, todo esta escrito desde el sarcasmo.

  2. Imagen de Adolfo D. el dijo:

    La cuadricula es el espacio y lo que has generado es el límite, por si te sirve de curiosidad esa sería la distorsión espacial (tomando la cuadricula como el espacio real) cerca de un punto de gravedad infinita, como un horizonte de sucesos.

    Por cierto, el sábado me voy a Galicia con el ejercito de primos que tengo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.