Software over the rainbow

Algunas lecturas veraniegas para todo aquel interesado en las intersecciones entre la programación y la creación (visual, sonora, conceptual…):

• Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers, de Golan Levin

Completísimo ensayo teórico-práctico sobre visión por ordenador para los que no somos programadores de verdad (lease ingenieros). Con gran cantidad de referencias a otros recursos e incluso implementaciones de algunas técnicas en… ¿lo adivinan? Claro que si.

• {Software} structures, de Casey Reas

Un interesante escrito que relaciona el arte producido con software con la obra del artista conceptual Sol Lewitt. Acompaña a la exposición del mismo nombre comisionada por el portal de net art whitney artport.

• LivecodingGrades, del colectivo Toplap

Tal y como su nombre indica, el livecoding es el arte de programar (y obtener resultados) en directo. Toplap son un interesantísimo colectivo dedicado a esta disciplina. La mayoría hacen música aunque también los hay que producen visuales. Estos livecoding grades son los hipotéticos ejercicios que tendría que efectuar un estudiante para convertirse en livecoder. Obviamente están bromeando, pero tiene mucha gracia. (Sobre este grupo espero publicar pronto una prensentación en profundidad).

Eso suena realmente bien. Esperemos que así sea.

Lo mejor de “Mi filosofía, de A a B y de B a A” de Andy Warhol es un capítulo donde una amiga obsesionada con la limpieza le relata minuciosamente y durante tropecientas páginas cómo limpia su apartamento. Y no es que el resto del libro no sea disfrutable. Con tamaña colección de agudísimas observaciones sociales y (no tantas) artísticas, resulta una lectura muy recomendable.

Es sólo que me ha mejorado en mis quehaceres domésticos. Nunca había pensado que hubiera que ser tan minucioso.

… y como colofón al post grillado del mes, un tutorial de limpieza del hogar.

Pues siguiendo con la serie de code-tips-que-no-aportan-nada-nuevo-pero-me-sirven-para-no-olvidarlos, hoy tenemos dos maneras de distribuir objetos en un grid (el código es actionscript pero vale para cualquier lenguaje).

Habitualmente siempre que he tenido que hacer un grid (¿rejilla? ¿grilla?) utilizo dos bucles for anidados. El código suele ser algo así:

// contador de clips
cont = 0;
// separacion del grid respecto al borde
offset = 20;
// separacion entre clips
dist = 10
//-----------------------------------------------------------
// filas
for (i=0; i<5; i++) {
	// columnas
	for (j=0; j<5; j++) {
                // duplicamos un clip a en el escenario
		var nuevoClip = a.duplicateMovieClip("a"+cont, cont);
                // posicionamos
		with (nuevoClip) {
			_x = offset+i*(nuevoClip._width + dist);
			_y = offset+j*(nuevoClip._height + dist);
		}
                // aumentamos el contador
		cont++;
	}
}

El otro día vi en algún sitio una manera de hacerlo con un sólo bucle y no comprendía bien el funcionamiento. El código que vi era algo parecido a esto:

// contador de clips
cont = 0;
// filas
filas = 5;
// columnas
columnas = 6;
// total cuadros
total= filas*columnas;
// separacion del grid respecto al borde
offset = 20;
// separacion entre clips
dist = 10
//-----------------------------------------------------------
for (k=0; k<total ; k++) {
	// duplicar clip b
	var nuevoClip = b.duplicateMovieClip("b"+cont, cont);
	// posicionar
	with (nuevoClip) {
		_x = offset + Math.floor(k % filas)*(nuevoClip._width + dist);
                _y = offset + Math.floor(k / filas)*(nuevoClip._height + dist);
	}
	cont++;
}

Lo fundamental es que si dividimos la posición actual k por el numero de filas y lo convertimos a entero, nos da la fila en la que estamos:

clip 0: k = 0, filas = 5; Math.floor(0 / 5) = 0; // primera fila
clip 1: k = 1, filas = 5; Math.floor(1 / 5) = 0; // primera fila
…
clip 4: k = 4, filas = 4; Math.floor(4 / 5) = 0; // primera fila
clip 5: k = 5, filas = 5; Math.floor(5/ 5) = 1; // segunda fila
…
clip 16: k = 16, filas = 5; Math.floor(16 / 5) = 3; // cuarta fila
…
clip 24: k = 24, filas = 5; Math.floor(24 / 5) = 4; // ultima fila

Para la posicion x utilizamos el operador módulo %. El resto de la misma división que hemos utilizado para la fila, nos da la posicion en la columna:

clip 0: k = 0, filas = 5; Math.floor(0 % 5) = 0; // (el resto es 0) => primera columna
clip 1: k = 1, filas = 5; Math.floor(1 % 5) = 1; //(el resto es 1) => segunda columna
…
clip 4: k = 4, filas = 4; Math.floor(4 % 5) = 4; // ultima columna
clip 5: k = 5, filas = 5; Math.floor(5 % 5) = 0; // primera columna
…
clip 16: k = 16, filas = 5; Math.floor(16% 5) = 1; // segunda columna
…
clip 24: k = 24, filas = 5; Math.floor(24 % 5) = 4; // ultima columna

Luego, simplemente con multiplicar los valores de fila y columna por la distancia entre clips + la anchura o altura de cada clip (nuevoClip._width + dist) (tal y como hicimos también en el primer ejemplo), hallamos la posición del elemento en el grid.

Y para muestra, los dos ejemplos

Y eso es todo.

Ya lo anunció Hernando Barragán en los foros de processing y en su propio foro. Por fin se pueden pedir kits de wiring al módico precio de 60$. Los gastos de envío son de 52$, pero se pueden mandar hasta 6 kits en un mismo envío, así que… si alguien de barcelona quiere compartir gastos de envío, contácteme en jesusgollonet [esoqueseponeaqui] gmail.com

Hace unos días, para practicar un poco de OOP y as2, se me ocurrió crear una clase que me permitiera hacer pie charts (esto es, gráficas redondas, de esas que parecen un pastel). Una vez terminada, para probarla, pensé en cómo quedaría hacer un reloj con este tipo de representación gráfica.

Exacto, bastante feo.

Pero he pensado que igual le servía a alguien el código. Así que, aquí lo tienen para descargar. El código está más o menos comentado, y hay otro ejemplo de uso de la clase Pie ;creo que no es difícil entenderlo. Si alguien tiene una duda, sugerencia, o (y esto lo agradecería mucho) corrección sobre mis bad OOPractices, ya saben donde estoy.

Por cierto, que aprovecho para recomendar el excelente plugin kimili flash embed, que me ha permitido insertar el swf tras un proceso de instalación de… 10 segundos

Hace algún tiempo prometí poner un ejemplo en movimiento y el código fuente del sketch de video ascii que estaba haciendo. Ya lo he pasado a la versión Beta y por aquí lo dejo.

Código fuente del sketch (si tienes webcam debería ser copiar y pegar).

P.D: Para quien le interese el tema, hace algo más de un mes hubo un thread muy interesante en los foros de processing sobre el tema de convertir una imagen a texto. Hay algunas aportaciones muy buenas.