This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

domingo, 23 de diciembre de 2012

Computación Gráfica con aplicación en Computación Física

Proyecto: Interfaz gráfica con círculos

1-Breve descripción


En entradas anteriores hemos analizado el funcionamiento tanto de Arduino y su entorno IDE como de Processing. En esta oportunidad se muestran los resultados de un proyecto donde se integran Arduino y Processing a los efectos de desarrollar una interfaz gráfica.

El proyecto utiliza una Arduino UNO, una fotoresistencia (LDR), dos potenciómetros, una resistencia, Processing y utiliza la comunicación serie básica entre Arduino y la computadora.

Básicamente puede dibujar, y observar el resultado en el monitor de la computadora, controlando los dos potenciómetros. El LDR determina cuan oscuro será dibujado el círculo.

2-Componentes

• Fotoresistencia (LDR).
• Resistencia 10 KΩ.
• Potenciómetro 100 KΩ (2).
• Arduino UNO.
• Cable USB.
• Breadboard.
• Alambres de conexión.
• IDE Arduino.
• Processing.

3-Pasos

Paso 1: configurar el hardware


• Ubicar los potenciómetros próximos uno al otro. Actuarán como control horizontal y vertical de la interfaz gráfica.

• Uno de sus pines extremos se conectará a la fuente de +5V, el otro a tierra y el pin medio a una entrada analógica de la placa Arduino UNO (A0 o A1).
• LDR: configurar un divisor de tensión utilizando la LDR y la resistencia de 10 KΩ. El punto medio del divisor de tensión se conectará a la entrada analógica A2.


Esquema realizado con Fritzing (http://www.fritzing.org)


Paso 2: subir el código Arduino (sketch)


• Descargar e instalar el IDE Arduino desde el sitio http://www.arduino.com, la versión 1.0.2 en este caso.

• Conectar la placa Arduino UNO a la computadora mediante el cable USB.
• Abrir el IDE Arduino.
• Verificar/Compilar el código y subirlo a la placa Arduino UNO.


Paso 3: Processing


• Descargar e instalar Processing desde el sitio http://www.processing.org, la versión 1.5.1 en este caso.

• Abrir Processing y subir el código en Processing.
• Click sobre el botón “Run” y observe el funcionamiento de la interfaz gráfica.

Precaución: tanto el puerto que utiliza Arduino como el que utiliza Processing debe ser el mismo.

4-Resultados obtenidos



5-Registro fotográfico



Imágen N° 1


Imágen N° 2

Computación Física. Arduino


La base de la computación física es hacer servir herramientas y tecnologías conceptualmente simples, para diseñar ingenios que actúan directamente sobre el mundo físico.

Involucra el diseño de objetos interactivos que pueden comunicarse con humanos utilizando sensores y actuadores controlados mediante un comportamiento implementado por un software que corre dentro de un microcontrolador.

1-Computación Física con Arduino

Arduino es una plataforma de computación física open source basada en una placa de I/O y un ambiente de desarrollo que implementa el lenguaje Processing.

Puede ser usado para desarrollar objetos interactivos en si mismos o puede ser conectada al software de una computadora.

Entre sus características principales se encuentran:

• Multiplataforma (Windows, Macintosh y Linux).
• Basado en el IDE de Processing.
• Programable por medio del puerto USB.
• Tanto el software como el hardware son open-source.
• Hardware barato (U$S 35).
• Existe una comunidad de usuarios a nivel mundial.


La plataforma Arduino consta de dos partes: la tarjeta Arduino, una pieza de hardware donde construir los proyectos; y el entorno de desarrollo (IDE), la pieza de software que corre en una
computadora. Mediante el IDE se crea un pequeño programa o “sketch” que se envía a la placa Arduino y le dice que hacer.

1-1. Hardware Arduino UNO

• Microcontrolador Atmega328 de 8 bits.
• 14 I/O digitales.
• 6 entradas analógicas.
• 6 salidas analógicas.
• Alimentado desde el puerto USB o desde una batería de 9 Vcc.


1-2. Software (IDE)

• Un programa especial que corre en la computadora y permite escribir programas en un lenguaje de programación sencillo y basado en el lenguaje Processing.

• Al presionar “Run”, el código escrito en e IDE se traduce al lenguaje C y compila en un lenguaje comprensible para el microcontrolador.

• El ciclo de programación en Arduino básicamente es el siguiente:

  • Conectar la placa Arduino a la PC mediante el cable USB.
  • Escribir el sketch que dará vida a la placa.
  • Subir el sketch a la placa por medio del cable USB y esperar unos segundos.
  • La tarjeta ejecuta el sketch.
1-3. Sketch ejemplo: encender un LED conectado al pin 13 durante 1 segundo y esperar otro
segundo apagado antes de repetir el ciclo.

int led = 13; //LED conectado a pin 13
void setup() {
pinMode(led, OUTPUT); // inicializa la el pin digital como salida
}
void loop() { // rutina para ejecutar un bucle
digitalWrite(led, HIGH); // enciende el LED  (nivel HIGH)
delay(1000); // espera 1 segundo
digitalWrite(led, LOW); // apaga el lED (nivel LOW)
delay(1000); // espera 1 segundo
}


Computación Gráfica. Processing


La Computación Gráfica es una rama de las Ciencias de la Computación con gran impacto social y acercamiento al público en general.

Usualmente, la graficación está asociada a la interactividad. Actualmente la mayoría de los sistemas o programas interactivos tienen una interface gráfica. Por otra parte, se observa una creciente popularidad de sistemas que traducen modelos abstractos a imágenes visuales (simulación ingenieril, datos obtenidos por
sensores por ejemplo).

La computación gráfica es la disciplina que estudia la representación pictórica sintética de un modelo real o imaginario basándose sólo en una representación numérica.

El procesamiento de imágenes se ocupa del problema inverso: el análisis de una escena a partir de una 
imagen y la reconstrucción del modelo numérico que lo describe.




Aplicaciones


Desde el punto de vista de una breve descripción representativa, se tienen:

• Interfaces: interface gráfica. El teclado se utiliza solamente para ingresar texto.
• Industria del entretenimiento: producción de video-juegos, películas y cortos de dibujos animados, posproducción y efectos especiales de películas y también la creación de utilitarios destinados a la creación de productos en estos rubros.
• Aplicaciones comerciales: elaboración de presentaciones comerciales.
• Diseño asistido (CAD).
• Aplicaciones científicas: desde la simulación hasta la visualización de fenómenos abstractos y su representación gráfica por medio de metáforas visuales asociadas.
• Cartografía y GIS: soporte de sistemas de información geográfica y aplicaciones relacionadas.


Dispositivos gráficos


Una clasificación referida al modo en que los gráficos son manejados por la computadora. Existen dispositivos de los siguientes tipos:

Dispositivos de vectores: reciben de la computadora la información geométrica de la localización y tamaño de las primitivas que soportan.
Dispositivos de raster (o pixels): reciben de la computadora la información de una serie de pixels, que se posicionan de forma continua.


Primitivas gráficas


Una “primitiva” es la unidad mínima de representación. Las primitivas básicas son el punto, el segmento de recta y la circunferencia o el círculo. En términos más amplios, se tiene: Punto, Línea, Polilínea, Polimarca, Polígono, Arco, Círculo, Texto gráfico.

• Puntos: se especifican a partir de su localización y color. Discretización directa.
• Segmentos de recta: se especifican a partir de un par de puntos que representan sus extremos.
• Circunferencias: se especifican por la posición de su centro y su radio.
• Polígonos: indispensables para representar entidades sólidas. Se representan a partir de una secuencia de puntos que determina la poligonal de su perímetro.
• Puntos: putpixel(x,y)
• Recta: line(x1,y1,x2,y2) (atributos: estilo, anchura,color).
• Polilínea: pline (nv,lv) siendo: nv (número de vértices) y lv (lista de vértices).
Atributos: estilo, anchura, color.
• Círculo: Circle(x,y,r).
• Arcos: arc(x1y1,x2y2,e), siendo e: excentricidad.



Formatos de almacenamiento


• Representación vectorial: las imágenes se representan como una serie de líneas o formas. La palabra vector se refiere no sólo a líneas, sino también a formas como cuadrados o círculos. Aplicaciones: dibujo lineal, CAD, etc.
• Representación bitmap: la imagen se descompone en puntos de una cuadrícula, el valor de cada uno de ellos se guarda individualmente. Es fácil de implementar y funciona, con limitaciones, con cualquier imagen. Aplicaciones: fotografías, cuadros e imágenes de video digitalizadas.


¿Qué es Processing?


Es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, de fácil utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital.

Fue iniciado por Ben Fry y Casey Reas a partir de reflexiones en el Aesthetics and Computation Group del MIT Media Lab dirigido por John Maeda.

Processing es desarrollado por artistas y diseñadores como una herramienta alternativa al software propietario. Puede ser utilizado tanto para aplicaciones locales así como aplicaciones para la web (Applets).

Se descarga desde el sitio: http://www.processing.org y es distribuido bajo la licencia GNU GPL. Su entorno se denomina Processing Development Enviroment (PDE).



Dibujando Primitivas con Processing


Una pantalla de computadora es una grilla de elementos llamados pixels. Cada 
pixel tiene una posición dentro de la grilla determinada por coordenadas. En 
Processing, la coordenada “x” es la distancia desde el borde izquierdo de la 
ventana de display y la coordenada “y” es la distancia desde el tope del borde. Las 
coordenadas del punto se definen como (x,y).



1-Dibujando una ventana: función size()

Dentro de la ventana de display se dibujan las imágenes con elementos de código 
llamados funciones. Estas son los bloques constructivos básicos en Processing. El 
comportamiento de una función es definido por sus parámetros, por ejemplo: un 
programa en Processing utiliza la función size() para definir el ancho y el alto de la 
ventana de display. Si no se la utilizan por defecto la dimensión del display es de 
100*100 pixels.




Por ejemplo, para dibujar una ventana de 400 pixels de ancho * 300 pixels de alto se utiliza la función size() con los parámetros siguientes: size(400,300).




2-Dibujando un punto: función point()


La función point() tiene dos parámetros que definen la posición: la coordenada “x” y la coordenada “y”. Por ejemplo, para dibujar un pequeño punto en el centro de una ventana:

size(480,120);
point(240,60);




3-Dibujando una línea: función line()

Para dibujar una línea entre las coordenadas (20,50) y (420,110), pruebe:


size(480,120); //dibuja una ventana de 480 * 120 pixeles
line(20,50,420,110); //dibuja la línea dentro de la ventana y entre los puntos indicados






4-Dibujando un rectángulo: función rect()


Tanto rectángulos como elipses se definen mediante cuatro parámetros: el primero y el segundo son para las coordenadas “x” e “ del punto de anclaje, el tercero para el ancho y el cuarto para la altura. Por ejemplo, para dibujar un rectángulo desde la coordenada (180,60) con un ancho de 220 pixels y una altura de 40 pixels:

size(480,120);
rect(180,60,220,40);






5-Dibujando una elipse: función ellipse()

Ahora las coordenadas “x” e “y” son el centro de la figura.


Sintaxis: ellipse(a,b,c,d)                                                                                    

Siendo:                                                                                  


a: coordenada “x”.
b: coordenada “y”.
c: ancho, default=80 pixels.
d: altura, default =80 pixels.



Ejemplo: ellipse(50,50,80,80);


Interpretación: se dibuja una elipse con el centro a 50 pixels del borde izquierdo y a 50 pixels desde la parte superior; con un ancho y alto de 80 pixels cada uno.


Si bien existe abundante bibliografía relacionada con Processing, y otras primitivas no indicadas aquí, es importante consultar en el sitio: www://processing.org