Página principal

De Ciencias de la Simulación
Saltar a: navegación, buscar

CREACIÓN DIGITAL

Proceso

  • Bitácora online (carpeta drive) 30%
  • Reto expositivo: OpenCV, Audio Minin, Arduino, Sensores.. 20%
  • Entrega final 40%
  • Participación presencial 10%

Plataformas de creación con programación dinámica

Todos son datos numéricos

- Bit [1] - Byte [2]

  • Ejercicio: escuchar una imagen

- Cargar una imagen RAW en Photoshop - Convertir en - Exportar en tiff - Cargar en audacity como archivo en bruto en 8 bits ("8 bits discriminará entre 256 niveles de señal equidistantes (28)") [3] - escuchar la imagen - poner un efecto sin tocar la cabecera del archivo [4] - exportar como imagen - (exportar - archivos in comprimir. en opciones elegir el formato RAW) - color de cada pixel 0 - 255 - Cada combinación corresponde a 8 bits - 8 bits es un byte [5][6] - sonido [8 bites] - combinaciones [7] - funciona importando en Ulaw - y poniendo el efecto eco. Exportar también Ulaw

Azaroso Lab - Laboratorio de creación colectiva

  • Salida de los obreros de la fábrica Lumiére (1985) [8]
  • El hombre de la cámara de Dziga Vertov (1929) [9]
  • Las estaciones del año de Artavazd Pelechian (1972) [10]
  • Random [11]
  • Pn=n! de Ivan Marino [12] "En matemáticas, una permutación es la variación del orden o de la disposición de los elementos de un conjunto."
  • The Pirate Cinema [13]
  • Whiteonwhite:algorithmicnoir [14]
  • Herramienta de montaje con Blender [15]
  • Montaje aleatorio de High Noon [16]
  • MIRADⒶS [17]
  • RANDOM USER [18]

Montaje audiovisual generativo/algorítmico

"Repensar la idea de lenguaje cinematográfico implica volver a considerar algunos aspectos de la historia del cine en sus paulatinas combinaciones: desde la máquina específica electromecánica y fotoquímica original a sus sucesivas combinaciones, reemplazos y simulaciones por las tecnologías electrónicas y digitales. Esto nos lleva a reflexionar sobre ciertos mitos, que fueron signando la historia de las máquinas cinematográficas, y sobre una idea de puesta en escena a partir de las prácticas de realización y experimentación que permiten trazar un panorama sobre las posibilidades del cine digital" [19] Jorge la Ferla


  • A Random Film [20]
  • Xml - lenguaje de marcas [21]
  • Api - Interfaz de programación de aplicaciones [22]


<randomFilm>

   <textos intro="TÍTULO" final="EL FIN" prologo="Laboratorio de cocreación audiovisual"></textos>
   <creditos path="pelicula/creditos.mp4"></creditos>
   <contraste activo=0 ></contraste>
   <tiempoTitulo segundos=9> </tiempoTitulo>
   <tiempoPrologo segundos=14> </tiempoPrologo>
   <sec>
       <plano path="01.mov" velocidad=1.0 sonido=0.0></plano>
       <plano path="03.mov" velocidad=1.0 sonido=0.0></plano>
       
        <audio path="01.wav" volumen=0.6></audio>   
   </sec>

</randomFilm>

Creación con programación por módulos

Imagen fija Sonido Documental Argumental Televisión

Cine digital

  • Alma [23]
  • Consolation Servide - Eija-liisa Athila (1999) Finlandia [24]
  • Brakelights Scott Hessels [25]
  • Metronome #1 [26]
  • Sprocket [27]
  • IMMEMORY [28] [29]
  • Bear71 [30]
  • The Tulse Luper Suitcases [31][32] vj [33]
  • Alma "hija de la violencia [34]
  • Perón, Sinfonía del Sentimiento [35]
  • Pachito Rex [36]
  • Ofvideoplayer OpenFrameworks [37]
  • Libreria de video para Processing [38]

Interactividad

  • Qué es la interactividad [39]

Conceptos básicos de programación

Creación visual con código

  • Introducción a p5.js

function setup() {

 createCanvas(640, 480);

}

function draw() {

 if (mouseIsPressed) {
   fill(0);
 } else {
   fill(255);
 }
 ellipse(mouseX, mouseY, 80, 80);

}

Mapear

  • Setup, Draw y Framerate [60][]
  • Condicionales [61]

Variables

  • Ejercicio - ojos que sigan el mouse
  • Variables [62]
  • Ejercicio de clase [63]
  • Boolean [64]

int sz = 50; int posY = 0; boolean play = false;

void setup() {

 size (700, 700);

}

void draw() {

 background(255);
 fill(0);
 rect(width/2-sz/2, posY, sz, sz);
 if (play) {
   posY = posY + 1;
 }

}

void mousePressed(){

 if (play == false){
  play = true; 
 }
 else{
 play = false;
 }
 println(play);

}

Manejo del tiempo

Realidad Virtual

  • Interfaz

"Desde la óptica de las aplicaciones por ordenador, las interfaces son las vías de comunicación bidireccionales, entre el usuario y la experiencia de interacción, que permiten percibir e incidir sobre la aplicación.

Los estadios de diseño de una interfaz se dividen en tres partes esenciales:

   (1) decidir qué canales externos se comunicarán con los internos y en qué forma lo harán: esto se conoce como mapeo,
   (2) establecer los elementos que actuarán de enlace en el exterior de la aplicación: las interfaces físicas o interfaces de hardware,
   (3) determinar los elementos que actuarán de enlace en el interior de la aplicación: las interfaces lógicas o interfaces de software.

Un ejemplo muy sencillo de esta configuración de elementos es el de la combinación ratón-cursor en un entorno de ventanas cualquiera. La interfaz física es el ratón, la interfaz lógica el cursor y los mapeos definen: la concordancia entre unidades de movimiento del ratón y las unidades de movimiento del cursor, la concordancia entre la pulsación de un botón del ratón y la reacción del cursor que pasa a seleccionar algún objeto de la ventana, etc." Roc Parès [79]

Mapear

Map en processing [80] Map en P5.js [81]

Condicionales mouse y funciones

  • Presentación condicionales [82]
  • Parte 2 [83]
  • If processing [84]
  • Else processing [85]
  • Interfaz Mouse: Mousepressed [86]
  • Intefaz teclas Key [87]

Planeación digital

  • Pseudo código [88]

- Inicio el programa

- hago dos variables de tipo imagen

- cargo las imagenes en el sistema

- pongo una imagen de fondo

- dibujo la otra encima

- si presiono la imagen de borrará la primera capa y develará la del fondo


  • Casos de uso [89]
  • Modelo de dominio [90]

Sensor Infrarrojo

  • Los usos de la kinect [91]
  • Hacks de la Kinect [92]
  • Libreria para processing SimpleOpenNI [93][94]
  • Otro ejemplo [95]
  • OpenKinect [96]

Funciones


Otras interfaces de control en el ordenador: microfono, cámara, y Botones

  • Libreria Sound
  • Libreria OpenCV
  • Libreria Control P5

placas para la creación de interfaces físicas

Bucle, Array, For, Vectorlist

Tipografía

Imagen real

Cargar Imagen en processing

PImage img; // Declare a variable of type PImage

void setup() {
 size(466,309);
 // Make a new instance of a PImage by loading an image file
 img = loadImage("00.jpg");
 nubes  = loadImage("01.png");
 

}

void draw() {


 //tint(random(255),random(255),random(255),random(255));
 // Draw the image to the screen at coordinate (0,0)
 image(img,0,0);
 //image(img,10,20,90,60);
 if(mousePressed){
   image(nubes,0,0);
 }
  • Clase PImage [116]
  • Método loadimage()[117]
  • carpeta Data

The Data Folder: How do I get there?

Images can be added to the data folder automatically via:

Sketch → Add File. . .

or manually:

Sketch → Show Sketch Folder

This will open up the sketch folder. If there is no data directory create one. Otherwise, place your image files inside.

Processing accepts the following file formats for images: GIF, JPG, TGA, PNG

Cargar imagen en P5

var img; // Declare variable 'img'.

function setup() {

 createCanvas(720, 400);
 img = loadImage("assets/moonwalk.jpg");  // Load the image

}

function draw() {

 // Displays the image at its actual size at point (0,0)
 image(img, 0, 0);
 // Displays the image at point (0, height/2) at half size
 image(img, 0, height/2, img.width/2, img.height/2);

}

Laboratorio de experimentación

Export Java & Javascript

== Threshold == [134]

  • Umbral Normalmente los métodos del valor umbral "binarizan" la imagen de partida, es decir se construyen dos segmentos: el fondo de la imagen y los objetos buscados. La asignación de un pixel a uno de los dos segmentos (0 y 1) se consigue comparando su nivel de gris g con un cierto valor umbral preestablecido t (en inglés threshold). La imagen final es muy sencilla de calcular ya que para cada pixel sólo hay que realizar una comparación numérica. La regla de cálculo correspondiente {\displaystyle T_{g}} {\displaystyle T_{g}} es:

{\displaystyle T_{global}(g)={\begin{cases}0&{\mbox{si }}g<t\\1&{\mbox{si }}g\geq t\end{cases}}} {\displaystyle T_{global}(g)={\begin{cases}0&{\mbox{si }}g<t\\1&{\mbox{si }}g\geq t\end{cases}}} Los métodos del valor umbral son métodos de segmentación completos, es decir cada pixel pertenece obligatoriamente a un segmento y sólo uno. Otros métodos de segmentación permiten que los segmentos se solapen. Si en la imagen existen varios objetos con una luminosidad similar, con un mismo tono de gris, todos los pixels que los componen pertenecerán al mismo segmento. En la práctica siempre hay algún píxel que queda fuera del segmento aunque pertenezca al objeto, normalmente debido a ruidos en la imagen original. En función del valor umbral que se escoja el tamaño de los objetos irá oscilando.

Video

Creación

  • Instrucciones [137]
  • Imagen generativa [138]
  • Imagen fija
  • Sonido [139]
  • Tipografía [140]
  • Inputs: mouse, teclado, micrófono, cámara...
  • Web o Sistemas operativos [141]

Creación 2

Blend [142]

  • PImage [143] [144]
  • OpenCV [145]
  • Video Referencia [146]
  • Ejemplos Video [joan.cat/processing/cs/s11_imatge/media/video_2014.zip]
  • Ejemplos Sonido [joan.cat/processing/cs/s11_imatge/media/so_LLIBRERIA%20P5.zip]
  • Referentes de creación [147]
  • Concentración
  • Acta final del día

Visión por computador

  • → Uso de cámaras → Instalaciones interactivas

→ El cuerpo como interfaz → Podemos usar: posicion, embergadura (caja contenedora), gestualidad, movimiento, cantidad de movimiento, silueta, touch, etc. → Cualquier cosa que podamos detectar: caras, ojos, imagenes, marcadores, luz, etc.

  • Interacción contributiva - Daniel Rozin [smoothware][148]
  • Cámara computador y sonido 1991 [149]
  • Interacción análogo/digital [150]
  • Tiempo real [151]
  • Participación [152]
  • Cámara video procesado [153]
  • Interacción tangible con cámara [154]
  • Tensión superficial [155]
  • Suelos interactivos [156] [157]
  • Espacios interactivos [158] [159]
  • Paredes interactivas [160] [161]

Tecnología como accidente

  • Guerra en africa
  • Dispositivos a bajo costo

Guia de usuario wiki

Consulta la guía del usuario para obtener información sobre el uso del software wiki.

Primeros pasos