Sideways: Slitscan for Urban Travellers

Sideways is a very small program created with Processing that creates 2 slitscan bitmaps from a single video. The video must be a first-person road shoot so both sides (left & right) are created from the edges.

instructions

  • open the sketch in Processing. Download the program if necessary
  • import your video to the sketch or place it in the /data directory
  • update filename and extension variables accordingly

important variables

  • scanBorderOffset is the sample distance from the edge
  • scanWidth is the slice width
  • widthFactor is the multiplier of the output width
Check the Repo in Github

Examples

left side:
2014116114933_izq
right side:
2014116114933_der
For more information on the topic, check this Informal Catalogue of Slit-Scan Video Artworks and Research created by Golan Levin.

Árbol Pitagórico

En Febrero recién pasado tuve el honor de formar parte del primer programa de maestría en diseño de interacción, en Costa Rica. En esa ocación tuve el placer de colarme en el curso de Tomás de Camino a de introducción a la programación. Acá les dejo uno de los primeros ejercicios del curso:

show code

/*
 * Recursive Hypotenuse
 * by Herbert Spencer
 * February 2014
 */
 
float ang;  // this is the global angle
int levels; // this is the amount of tree levels or how many times we will call the recursive function
 
void setup() {
  size(510, 510);
  noStroke();
  smooth();
  levels = 3;       // start with something small
  mouseX = width/2; // place the mouse in the middle
}
 
void draw() {
  // white background
  background(255);
 
  // the global angle can be modified by de 'x' movement of the mouse
  ang = map(mouseX, 0, width, -HALF_PI, 0);
 
  // this is where we call the recursive function
  hypotenuse(width/2 - 30, height, width/2 + 30, height, levels);
}
 
// this is the recursive function
// it requeres 4 floats and 1 int. The floats represent the position of 2 points, which define the hypotenuse
// the level defines how many times are we calling this function recursevely
 
void hypotenuse(float x1, float y1, float x2, float y2, int level) {
 
  // determine the length, which is the distance between the points. We'll call it 'side', the side of the square
  float side = dist(x1, y1, x2, y2);
 
  // determine the angle between the two points... not so tricky
  float t = atan2(y2- y1, x2 - x1);
 
  // reset the coordinate system, just to be polite
  pushMatrix();
  {
    // translate our axis to the first point, our new (0,0)
    translate(x1, y1);
 
    // align space to the hypothenuse, using the angle we've just calculated
    rotate(t);
 
    // draw the square
    fill(col(level), 90); // nice color with transparency
    rect(0, -side, side, side);
 
    // translate to the new hypothenuse
    translate(0, -side);
 
    // determine the lengths of the triangle sides given a global angle 'ang'.
    // 'a, b, c'; where 'c' is the hypotenuse. We have 'c', it's the distance between the first two points, ok?
 
    float a = cos(ang) * side;
    float b = sin(ang) * side;
 
    // draw the triangle
    noStroke();
    fill(col(level), 150);
    beginShape();
    {
      vertex(0, 0);                       // first vertex
      vertex(cos(ang) * a, sin(ang) * a); // tricky second vertex
      vertex(side, 0);                    // third vertex
    }
    endShape();
 
    // this is a method to eventually escape from this recursive fuction
    if (level > 0) {
      hypotenuse(0, 0, cos(ang) * a, sin(ang) * a, level-1);
      hypotenuse(cos(ang) * a, sin(ang) * a, side, 0, level-1);
    }
  }
  popMatrix();
}
 
void keyPressed() {
 
  // you can toggle the levels by hitting keys a-z
  if (key == 'a') {
    levels++;
  }
  if (key == 'z') {
    levels--;
  }
 
  // so we keep levels reasonable...
  levels = constrain(levels, 0, 16);
 
  // output to console how many levels do we have at the moment
  println("levels = "+levels);
}
 
color col(int level){
  int n = levels - level;
  float r = 18;
  float g = 134 + 11 * n;
  float b = 255 - 19 * n;
  color c = color(r,g,b);
  return c;
}

Para agregar o quitar niveles de recursión debes presionar las teclas a y z. El código está publicado acá.

Pizarra

Uno de los problemas más frecuentes con que me topo al momento de hacer clases es la incompatibilidad entre el proyector y la pizarra. Cada día, y con más frecuencia, se requiere de un proyector (datashow) para presentar, demostrar código, traer referentes, indicar procedimientos, revisar casos, etc. El proyector ya es –digámoslo así– un commodity indispensable y que se echa de menos con facilidad.

Pero la dimensión que trae el dibujo o el acto de dibujar en la pizarra, en paralelo y reforzando el discurso es fundamental. Sobre todo en diseño. Mostrar un esquema de un Keynote no es igual a dibujarlo. Gracias a DrawSomething hemos aprendido que el proceso del dibujo dice tanto como el dibujo mismo, la secuencia va desplegando el significado porque tiene su propio discurso.

La iluminación tampoco ayuda: el proyector requiere de una luz atenuada, la pizarra, luz incidente (sobre todo si es negra).

Desarrollé, para el curso Imagen Escrita una aplicación elemental en Processing para tener una pizarra proyectable. Esta aplicación es a su vez, la base para desarrollar herramientas aumentadas de dibujo más complejas.

Les comparto esta aplciación porque últimamente me ha servido mucho, incluso en reuniones de diseño, para discutir wireframes, esquemas y demases. Espero que les sirva.

Instrucciones del teclado

  • (m) – cambia de pizarrón negro a pizarra blanca
  • (z) – deshace el último trazo. Se puede usar iterativamente hasta que no quede ninguno.
  • (ESPACIO) – borra todo
  • (s) graba la pizarra a una imagen en la carpeta ‘img’ relativa a la ruta de la aplicación
Actualización: El programa de la Pizarra se encuentra disponible para descargar en Github, entre las mejoras: ahora se pueden hacer líneas rectas con SHIFT y tiene compatibilidad para tablets.

Espirales

Estos días no he hecho nada porque me la he pasado en puras reuniones. Mientras escucho, dibujo espirales en mi cuaderno y veo como los pequeños errores, engrosamientos y disminuciones de los espacios se acumulan, amplifican o suavizan.

Veo como las familias de espirales se multiplican, cruzan y entrelazan. Tal vez así la sensación de no hacer nada desaparezca.

Processing 1.0

la pantalla "acerca de" processing en su versión 1.0 Processing ha dejado de ser un beta. Lo era desde que partió este proyecto el año 2001 en el MediaLab del MIT de la mano de Casey Reas y Ben Fry. Esta aplicación, o más bien, este entorno de desarrollo nos ha permitido acercarnos a la computación desde un punto de vista artístico y creativo. Ha causado un gran impacto en la comunidad de educadores y formadores de artistas y diseñadores. Sin ir más lejos, el año 2005 (cuando aún era un beta) recibió el Golden Nica en Ars Electrónica. Personalmente creo que Processing cumple un rol fundamental en la formación del diseñador, especialmente por la capacidad de estimular el pensamiento abstracto – matemático necesario para la concepción de formas digitales. Concretamente existe un ramo en la e[ad] llamado Lenguaje Computacional Cero (o LC0) dentro del Taller de Diseño para el Primer Año. Este curso es una introducción a la computación como una herramienta de expresión plástica, donde el objetivo es el diseño pero el medio es el software. Los estudiantes se familiarizan con algoritmos básicos, geometría computacional y simulación cinemática. La alfabetización digital, entendida en la mayoría de los casos como la capacidación para el uso de programas, sólo resuleve la mitad del problema: el saber leer. Saber escribir, tiene implicancias mucho más profundas, porque significa ser capaz de expresar y llevar adelante las ideas propias. Para un diseñador este distingo es fundamental ya que debe comprender el lenguaje desde ambos lados para poder construir y diseñar; y el medio digital permite esa maleabilidad.

Dibujos Generativos

Lenguaje Computacional Cero (o LC0) es un nuevo módulo dentro de la asignatura del Taller de Diseño para el Primer Año. Dentro de este ramo se introduce a los alumnos a la programación gráfica como un modo de acceder al lenguaje de la abstracción desde el rigor de los algoritmos matemáticos. Este curso es una introducción a la computación como una herramienta de expresión plástica, donde el objetivo es el diseño pero el medio es el software. Los estudiantes se familiarizarán con algoritmos básicos, geometría computacional y simulación cinemática.

La alfabetización digital, entendida en la mayoría de los casos como la capacidación para el uso de programas, sólo resuleve la mitad del problema: el saber leer. Saber escribir, tiene implicancias mucho más profundas, porque significa ser capaz de expresar y llevar adelante las ideas propias. Para un diseñador este distingo es fundamental ya que debe comprender el lenguaje desde ambos lados para poder construir y diseñar; y el medio digital permite esa maleabilidad.

En este curso usamos el entorno de desarrollo Processing para construir dibujos generados a partir de máquinas autónomatas. Estos proyectos tienen una versión impresa en PDF y un corto de video, ambos generados completamente a partir de código. Todos los videos están disponibles en nuestro grupo de vimeo y los programas en http://www.ead.pucv.cl/processing/2008.


Genesis_proyecto de Serrano Daniel en Vimeo.


reflejo con fondo blanco de Daniela Labra en Vimeo.


El Efecto de la Luz y El Viento de Nicolás Abarca en Vimeo.


Ramificaciones de Fernanda Ladrón de Guevara en Vimeo.

Marcianitos

Como este sitio trata de la doble página traigo esta aplicación: Issuu.

Mis amigos más fundamentalistas dirán que es pura nostalgia por la página, otros dirán que se trata de otra aplicación que declara la supremacía absoluta de Internet sobre los otros medios de comunicación; porque es capaz de contenerlos a todos.

En fin, si esta discusión no te interesa, sólo baja el código para hacer tus propios marcianitos.

  1. float)height - (2 * margen []
  2. float)width - (2 * margen []