The Nature of Code en p5js. Curso en Kadenze.

Si llevas algún tiempo rondando por Processing seguro que conoces The Nature of Code, el libro de Daniel Shiffman sobre simulación de fuerzas físicas en Processing. Y muy probablemente también tengas noticia de p5js, la portación de Processing a JavaScript.

Bueno, pues ahora tienes la oportunidad de combinar ambos de la mano del propio Shiffman, que acaba de iniciar un curso online en Kadenze.com. Si te interesa el certificado y el proceso de evaluación-y-retroalimentación, el acceso premium a los cursos de kadenze cuesta 10$ al mes. Si no necesitas todo eso, el acceso normal es gratis y tienes acceso a todos los vídeos y el material adicional.

El curso está en el enlace de abajo y acaba de comenzar hace un par de días:

Video Mapping Toy – 03

En los posts anteriores hemos visto cómo crear un cuadrilátero cuyos vértices podemos arrastrar a la posición que queramos y cómo proyectar una animación de vídeo sobre ese cuadrilátero, a modo de textura, sin rebasar sus límites. Es la base para cualquier programa de vídeo mapping

En este vamos a limpiar un poco la cosa, y emplearemos una clase para crear tantos cuadriláteros como queramos. Por supuesto, cada uno puede tener su propia proyección, de manera que podamos mapear una o varias animaciones sobre cualquier superficie (… que tenga cuatro lados).

Al archivo build.pde vamos a sumar otros dos que nos ayudarán a mantener el código ordenadito: screens.pde y projections.pde. En uno guardaremos la clase Screens() y en el otro las texturas PGraphics que proyectaremos sobre ellas.

Al final del artículo encontrarás un enlace a los archivos de este ejemplo.

Lo primero es crear la clase. Si necesitas información básica sobre qué es una clase y cuál es su estructura puedes ir al artículo Crear una clase en este mismo blog.

Llamaremos a nuestra clase Screen, por aquello de que las vamos a utilizar como pantallas sobre las que proyectaremos nuestras animaciones.

La idea es la siguiente:

  • Creamos una clase que recibe cinco argumentos: los cuatro primero son las coordenadas de sus vértices, el quinto la animación que proyectaremos sobre ella.
  • Si el cursor está sobre la esquina, cambia a MANO, muestra una circunferencia sobre la esquina y queda disponible para ser movida.
  • Si hacemos clic y arrastramos, la esquina se mueve con el cursor.
  • Si soltamos, la esquina queda fija (hasta que volvamos a hacer clic sobre ella)

Continue reading

Video Mapping Toy – 02

En el post anterior vimos cómo crear un cuadrilátero cuya forma pueda modificarse arrastrando las esquinas. Ahora crearemos una animación que pueda usarse como textura de ese cuadrilátero. La idea es que el polígono actúe como una pantalla elástica que pueda adaptarse a la forma de la superficie donde se proyecte.

Para ello creamos una animación que se vaya almacenando como PGraphics. La función texture(), aplicada a un objeto PShape() proporciona una textura al polígono. Esa textura se le proporciona como argumento y debe ser un objeto tipo PGraphics, de ahí la necesidad de almacenar la animación de esa manera. Así que la función texture() lo que hace es guardar constantemente los sucesivos estados de la animación en el mismo PGraphics (‘t1’ en el ejemplo) que pasaremos al polígono como argumento.

He indicado los añadidos con comentarios precedidos por cuatro barras en vez de dos (////).

Continue reading

Video Mapping Toy – 01

Abro aquí una breve serie de entradas sobre una herramienta muy sencilla para mapear proyecciones sobre superficies poligonales. Evidentemente no se trata de nada que intente emular las herramientas profesionales que existen, sino más bien un juguetillo que nos permita moldear la forma de una o varias pantallas para ajustarse a la de la superficie sobre la que se proyecta.

La idea es usar clips de vídeo o programas de Processing como texturas que se aplicarán  a un polígono cuyas esquinas puedan cambiar de posición al arrastrarlas con el ratón.

Empecemos por crear el polígono editable, al que llamaremos ‘pantalla’.

Aquí va el código (NOTA: Processing 3.0 se publicó justo después de que escribiera los programas de este tutorial. Están realizados para 2.2.1. Donde es necesario indico qué cambios hay que hacer para que funcione en la versión 3):

//VARIABLES
 
//Vértices de la pantalla
//Definimos las coordenadas de cada vértice
PVector v1 = new PVector(10,10);
PVector v2 = new PVector(390,10);
PVector v3 = new PVector(390,390);
PVector v4 = new PVector(10,390);
 
//¿Arrastrar y soltar?
/*Creamos estas 4 variables para indicar
si hay que mover los vértices*/
boolean _v1, _v2, _v3, _v4 = false;
 
//SETUP
 
/*Descomentar el bloque siguiente
si estás usando la versión 3.0 */
/* Processing 3.0
void settings(){
    size(600, 600, P2D);
}
*/
 
void setup() {
    //Comentar la línea siguiente sii usas 3.0
    size(400, 400, P2D);
    //
    background(0);
    stroke(255);
}
 
void draw() {
    background(0);
    fill(0);
    /*Insertamos la función 'pantalla',
    que definiremos luego*/
    pantalla();
    fill(255);
    text("Arrastra las esquinas", 20, 40);
}
 
/*Esta función crea un cuadrilátero
que toma sus coordenadas de las variable PVector
que definimos al principio*/ 
void pantalla(){
 
    // Cuadrilátero
    beginShape(QUADS);
      vertex(v1.x,v1.y);
      vertex(v2.x,v2.y);
      vertex(v3.x,v3.y);
      vertex(v4.x,v4.y);
    endShape();
 
    testMouseOver();
}
 
 
/*Esta función comprueba si el cursor está
sobre una esquina del cuadrilátero*/
void testMouseOver(){
    //Si está cerca de la primera esquina...
    if (mouseX>v1.x-5 && mouseX<v1.x+5 && mouseY>v1.y-5 && mouseY<v1.y+5) { //... cambia el cursor... cursor(HAND); //... dibuja un cí­rculo... ellipse(v1.x, v1.y, 5, 5); //... y avisa de que está. _v1 = true; } //Igual para la segunda esquina else if (mouseX>v2.x-5 && mouseX<v2.x+5 && mouseY>v2.y-5 && mouseY<v2.y+5) { cursor(HAND); ellipse(v2.x, v2.y, 5, 5); _v2 = true; } //Igual para la tercera else if (mouseX>v3.x-5 && mouseX<v3.x+5 && mouseY>v3.y-5 && mouseY<v3.y+5) { cursor(HAND); ellipse(v3.x, v3.y, 5, 5); _v3 = true; } //Igual para la cuarta else if (mouseX>v4.x-5 && mouseX<v4.x+5 && mouseY>v4.y-5 && mouseY<v4.y+5) {
        cursor(HAND);
        ellipse(v4.x, v4.y, 5, 5);
        _v4 = true;
    }
 
    //Si no está sobre las esquinas...
    else {
        //... el cursor es una flecha...
        cursor(ARROW);
 
        //... y avisa.
        _v1 = false;
        _v2 = false;
        _v3 = false;
        _v4 = false;
 
    }
}
 
/*Esta función mueve cada esquina del cuadrilátero
si se hace clic sobre ellas*/ 
void mouseDragged(){
    if (_v1 == true) {
        v1.x = mouseX;
        v1.y = mouseY;
    }
 
    else if (_v2 == true) {
        v2.x = mouseX;
        v2.y = mouseY;
    }
 
    else if (_v3 == true) {
        v3.x = mouseX;
        v3.y = mouseY;
    }
 
    else if (_v4 == true) {
        v4.x = mouseX;
        v4.y = mouseY;
    }
}

En el próximo capítulo de este tutorial incorporaremos una textura animada al cuadrilátero.

Retomando la cosa

Bueno, después de actualizar la larga serie anterior (17 últimas entradas) a finales de julio he dejado el blog al margen, no porque no estuviera aprendiendo cosas nuevas sino porque se me juntaron varias cosas y no había tiempo material para actualizar.

Dos de esas cosas precisamente eran cursos sobre Processing:

  • Programación Creativa para Medios Digitales y Aplicaciones Móviles
    De la University of London en Coursera. Nivel alto, buen material aunque un tanto desactualizado en algunos casos. Recomendable si ya tienes conocimientos medianamente sólidos en Processing, de lo contrario se puede poner bastante cuesta arriba. Video, sonido, interacción. Si lo que os interesa principalmente es la publicacción de apps y la integración con redes sociales… entonces mejor no lo sigais, es la parte más floja del curso.
  • Programming Graphics III: Painting with Sound
    Tercer curso de Joshua Davis sobre Processing y su librería Hype. Los dos anteriores estaban en Skillshare. En este caso Davis ha optado por vender directamente el curso en Gumroad. Si habéis seguido alguno de los anteriores no hará falta que os lo recomiende, ya sabréis cómo se las gasta el tío. Si no, podéis empezar por los dos anteriores, también a la venta en Gumroad y en Skillshare. Centrado en el uso de archivos de audio para generar / controlar imágenes.

Y ya que estamos con cursos, yo que soy de letras he dado con un recurso importante para los que no tenemos una buena base matemática:

  • Coding Math
    Una larga serie de vídeos sobre uso de las matemáticas en programación. Su autor, Keith Peters usa principalmente JavaScript, pero los conceptos matemáticos son fácilmente portables a Processing.

De ahí han salido algunos sketches que compartiré con vosotros en breve.

Gracias por la paciencia y por seguir visitando el blog.

Repasando Processing / Índice

Enlazo aquí los diferentes posts de esta última serie que comenta los contenidos del repositorio que hemos abierto en GitHub.

  1. Repositorio en GitHub
  2. Repasando Processing / Estructuras y Formas básicas
  3. Repasando Processing / Curvas
  4. Repasando Processing / Formas 3D
  5. Repasando Processing / Texto
  6. Repasando Processing / Color
  7. Repasando Processing / Transformaciones / translate()
  8. Repasando Processing / Transformaciones / rotate()
  9. Repasando Processing / pushMatrix(), popMatrix()
  10. Repasando Processing / Condicionales y bucles
  11. Repasando Processing / Funciones y clases
  12. Repasando Processing / Arrays
  13. Repasando Processing / Redes
  14. Repasando Processing / Bitmaps y vectoriales
  15. Repasando Processing / Vídeo
  16. Repasando Processing / Juegos