08 sw y hw diseño

UNIVERSIDAD DE CALDAS
HERRAMIENTAS DIGITALES
MARIO H.VALENCIA G.
Laboratorio de Interfaces

INTRODUCCIÓN
• Se han puesto sobre la mesa y se ha hecho necesaria la comprensión de ciertas
ideas que quizás no se habían contemplado en mucho tiempo, como la relación
oyente-vidente-usuario, o la de creador-diseñador, las relativas al uso de los
aparatos digitales, la ruptura de los límites entre el diseño y la creación, los
formatos de conservación de la imagen y el sonido, las formas de entender el
espacio, la interacción, el diseño de espacios reales y virtuales; en deﬁnitiva, los
objetivos y medios de los espacios interactivos (espacios mediatizados).

MODELOS DE INTERACCIÓN
DIGITAL
• En este trabajo de Shefry Shaw, que es uno de los principales pioneros en el desarrollo de la
realidad virtual realizando instalaciones interactivas por computador, se hace patente el uso de
metáforas diferentes al desktop (escritorio), ofreciendo un recorrido a partir de un objetoLegible
City, obra de Jeffrey Shaw. En "Legible City" el visitante tiene la posibilidad de montar una bicicleta
estática y recorrer una ciudad construida por grandes letras tridimensionales generadas en un
sistema computacional que forman palabras y oraciones a lado y lado de la calle

ITOUCH – IPHONE
• iPhone.Teléfono multimedia con conexión a Internet. El iPhone es un teléfono, un ipod, y un
dispositivo con acceso a internet, todo en uno; ofrece cientos de aplicaciones diseñadas, desde
programas oﬁmáticos hasta cientíﬁcos

WII
• Consola de videojuego Nintendo wii.Wii es una consola de videojuego de séptima generación cuya
característica más importante es su control de mando inalámbrico o Wiimote, que es usado como
dispositivo de mano con el que se puede apuntar o detectar aceleración de movimiento en tres
dimensiones; adicionalmente su conexión a red WiiConnect24 le permite actualizarse cuando está
en modo de espera y le da posibilidades de juego en línea

KINECT
• Kinect (originalmente conocido por el nombre en clave «Project Natal») desarrollado por Prime
Sense, es «un controlador de juego libre y entretenimiento» creado por Alex Kipman, Kinect
permite a los usuarios controlar e interactuar con la consola sin necesidad de tener contacto físico
con un controlador de videojuegos tradicional, mediante una interfaz natural de usuario que
reconoce gestos, comandos de voz, y objetos e imágenes. El dispositivo tiene como objetivo
primordial aumentar el uso de la Xbox 360, más allá de la base de jugadores que posee en la
actualidad

LEAP MOTION
• El pequeño dispositivo se conecta vía USB, y no requiere de ningún tipo de calibrado o
conﬁguración especial. El sistema reconoce manos, dedos, e incluso objetos, dentro de su espacio de
trabajo. Llama realmente la atención por la velocidad a la que interpreta los movimientos, sin
retraso aparente desde que los hacemos. El nivel de deﬁnición de captura de movimientos permite
reconocer zoom con dos dedos, dibujar con un lápiz, o girar objetos tridimensionales.

MICROSOFT SURFACE
• Pantalla multitáctil Microsoft Surface. Microsoft Surface es una solución completa que incluye
hardware y software sobre la que se puede integrar un innumerable abanico de aplicaciones. Basado
en WindowsVista, utiliza tecnología multi-táctil sobre una pantalla horizontal de gran formato y 360
grados, haciendo posible que varias personas trabajen simultáneamente tocando la superﬁcie,
interactuando con contenido y objetos físicos de un modo tan familiar que parece el mundo real

REACTABLE
• Superficie y marcadores de la Reactable. La Reactable es un instrumento musical electrónico
colaborativo; consta de un tablero semitranslúcido iluminado directamente con dos cámaras
situadas al otro lado del tablero que analiza la superficie y sigue los movimientos, la naturaleza, la
posición y la orientación de los diferentes objetos físicos y lógicos que están situados sobre el
tablero por medio de algoritmos de visión artificial. Desarrollado por el grupo de tecnología musical
de la Universidad Pompeu Fabra.

REACTABLE
Según sus creadores La Reactable intenta ser:
Colaborativo: manipulado por varios ejecutantes (en forma local o remota).Intuitivo: sin
manual, sin instrucciones.
Con una sonoridad interesante y desaﬁante.
Enseñable y aprendible (incluso por niños).
Apto para novatos (instalaciones) y para músicos electrónicos avanzados (conciertos)”

TOBII X120
• Sistema de Eye trackingTobii con iView X. Imagen a: módulo de calibración de iView X, en el cual se
hacen lecturas técnicas sobre el tamaño del iris, la velocidad de parpadeo y la cantidad de luz en el
espacio. Imagen b: se usa el módulo básico de reconocimiento de patrones por el que se entrena al
sistema experto de la aplicación y al usuario de la misma

VERICHIP
• Verichip. Dispositivo
Intracutáneo. VeriChip es un
dispositivo de radiofrecuencia
que se implanta en el cuerpo
humano con ﬁnes médicos y de
identiﬁcación

MINDFLEX
• MindFlex. Juego de Mattel que se controla por ondas cerebrales, y que consiste en que el usuario
levante y mueva una pelota dentro de un circuito de obstáculos, sólo y exclusivamente con el poder
de su mente. La concentración es la clave: cuando se pierde, la bola cae y el jugador pierde.. Para
controlar la bola sólo hay que ajustarse unos auriculares dotados de sensores. Gracias a la
tecnología EEG, es posible leer el estado de concentración de cada jugador.

HERRAMIENTAS DE DESARROLLO
Shell: En informática, el shell o intérprete de órdenes o intérprete de comandos
es el programa informático que provee una interfaz de usuario para acceder a los
servicios del sistema operativo.Dependiendo del tipo de interfaz que empleen, los
shells pueden ser:
De líneas texto (CLI, Command-Line Interface, interfaz de línea de comandos),
Gráﬁcos (GUI, Graphical User Interface, interfaz gráﬁca de usuario),
De lenguaje natural (NUI, Natural User Interface, interfaz natural de usuario).
Los shell son necesarios para invocar o ejecutar los distintos programas
disponibles en la computadora.

HERRAMIENTAS DE
DESARROLLO
• Linea de Comando
La interfaz de línea de comandos o interfaz
de línea de órdenes (en inglés, command-line
interface, CLI) es un método que permite a
los usuarios dar instrucciones a algún
programa informático por medio de una
línea de texto simple.
Las CLI pueden emplearse interactivamente,
escribiendo instrucciones en alguna especie
de entrada de texto, o pueden utilizarse de
una forma mucho más automatizada (archivo
batch), leyendo órdenes desde un archivo de
scripts.

HERRAMIENTAS DE
DESARROLLO
• Linea de Comando
Por ejemplo, las CLI son parte fundamental
de los shells o emuladores de terminal.
Aparecen en todas las interfaces de
escritorio (GNOME, KDE, Microsoft
Windows) como un método para ejecutar
aplicaciones rápidamente.Aparecen como
interfaz de lenguajes interpretados tales
como Java, Python, Ruby o Perl.También se
utilizan en aplicaciones cliente-servidor, en
gestores de bases de datos, en clientes FTP,
etc. Las CLI son un elemento fundamental de
aplicaciones de ingeniería tan importantes
como MATLAB y AutoCAD.

HERRAMIENTAS DE
DESARROLLO
• Interfaz Grafica de Usuario
La interfaz gráfica de usuario, conocida
también como GUI (del inglés
graphical user interface), es un
programa informático que actúa de
interfaz de usuario, utilizando un
conjunto de imágenes y objetos
gráficos para representar la
información y acciones disponibles en
la interfaz. Su principal uso, consiste en
proporcionar un entorno visual
sencillo para permitir la comunicación
con el sistema operativo de una
máquina o computador.

HERRAMIENTAS DE
DESARROLLO
• Interfaz Natural de Usuario
La interfaz natural de usuario (en inglés
natural user interface, NUI) es el tipo de
interfaz de usuario en las que se interactúa
con un sistema, aplicación, etcétera, sin
utilizar sistemas de mando o dispositivos de
entrada (como en las interfaces gráﬁcas de
usuarios, sería un ratón, teclado alfanumérico,
lápiz óptico, panel táctil, joystick, etcétera), y
en su lugar, se hace uso de movimientos
gestuales del cuerpo o de alguna de sus
partes tales como las manos, sirviendo de
mando de control.

HERRAMIENTAS DE
DESARROLLO
• Lenguaje de Programanción
Es un lenguaje formal diseñado para
realizar procesos que pueden ser
llevados a cabo por máquinas como
las computadoras. Pueden usarse
para crear programas que controlen
el comportamiento físico y lógico de
una máquina, para expresar
algoritmos con precisión, o como
modo de comunicación humana. Está
formado por un conjunto de
símbolos y reglas sintácticas y
semánticas que deﬁnen su estructura
y el signiﬁcado de sus elementos y
expresiones

HERRAMIENTAS DE
DESARROLLO
• Lenguaje de Programación
Los programas se pueden clasificar
por el paradigma del lenguaje que se
use para producirlos. Los principales
paradigmas son: imperativos,
declarativos y orientación a objetos.
La forma en la cual se programa
puede ser por medio de texto o de
forma visual. En la programación
visual los elementos son manipulados
gráficamente en vez de especificarse
por medio de texto.

HERRAMIENTAS DE
DESARROLLO
Existen muchos lenguajes de programación de alto nivel con sus diferentes
versiones. Por esta razón es difícil su tipificación, pero una clasificación muy
extendida desde el punto de vista de su forma de trabajar y la filosofía de su
creación es la siguiente:
Lenguajes de programación imperativos: entre ellos tenemos el Cobol, Pascal,
C y Ada.
Lenguajes de programación declarativos: el Lisp y el Prolog.
Lenguajes de programación orientados a objetos: el Smalltalk y el C++.
Lenguajes de programación orientados al problema: son aquellos lenguajes
específicos para gestión.
Lenguajes de programación naturales: son los nuevos lenguajes que pretender
aproximar el diseño y la construcción de programas al lenguaje de las
personas.

HERRAMIENTAS DE
DESARROLLO
En lenguajes con tipos estáticos se determina el tipo de todas las expresiones
antes de la ejecución del programa (típicamente al compilar).
La mayoría de los lenguajes populares con tipos estáticos, tales como C++, C# y
Java, manejan tipos explícitos.
Los lenguajes con tipos dinámicos determinan la validez de los tipos involucrados
en las operaciones durante la ejecución del programa. En otras palabras, los tipos
están asociados con valores en ejecución en lugar de expresiones textuales en
lenguajes con tipos dinámicos se suele dejar de lado la depuración en favor de
técnicas de desarrollo como por ejemplo BDD yTDD. Ruby, Lisp, JavaScript y
Python son lenguajes con tipos dinámicos

HERRAMIENTAS DE
DESARROLLO
C++ es un lenguaje de programación
diseñado a mediados de los años 1980
por Bjarne Stroustrup. La intención de su
creación fue el extender al lenguaje de
programación C mecanismos que
permiten la manipulación de objetos. En
ese sentido, desde el punto de vista de los
lenguajes orientados a objetos, el C++ es
un lenguaje híbrido. Posteriormente se
añadieron facilidades de programación
genérica, que se sumaron a los
paradigmas de programación estructurada
y programación orientada a objetos. Por
esto se suele decir que el C++ es un
lenguaje de programación multiparadigma.

HERRAMIENTAS DE
DESARROLLO
Java es un lenguaje de programación de propósito general,
concurrente, orientado a objetos que fue diseñado
especíﬁcamente para tener tan pocas dependencias de
implementación como fuera posible. Su intención es
permitir que los desarrolladores de aplicaciones escriban
el programa una vez y lo ejecuten en cualquier dispositivo
(conocido en inglés como WORA, o "write once, run
anywhere"), lo que quiere decir que el código que es
ejecutado en una plataforma no tiene que ser
recompilado para correr en otra. Java es, a partir de 2012,
uno de los lenguajes de programación más populares en
uso, particularmente para aplicaciones de cliente-servidor
de web, con unos 10 millones de usuarios reportados

HERRAMIENTAS DE
DESARROLLO
JavaScript (abreviado comúnmente JS) es un
lenguaje de programación interpretado, dialecto del
estándar ECMAScript. Se deﬁne como orientado a
objetos,3 basado en prototipos, imperativo,
débilmente tipado y dinámico. Se utiliza
principalmente en su forma del lado del cliente
(client-side), implementado como parte de un
navegador web permitiendo mejoras en la interfaz
de usuario y páginas web dinámicas. JavaScript se
diseñó con una sintaxis similar a C, aunque adopta
nombres y convenciones del lenguaje de
programación Java. Sin embargo, Java y JavaScript
tienen semánticas y propósitos diferentes.

HERRAMIENTAS DE
DESARROLLO
HTML5 (HyperText Markup Language, versión 5) es la
quinta revisión importante del lenguaje básico de la World
Wide Web, HTML. HTML5 especifica dos variantes de
sintaxis para HTML: una «clásica», HTML (text/html),
conocida como HTML5, y una variante XHTML conocida
como sintaxis XHTML5 que deberá servirse con sintaxis
XML (application/xhtml+xml)
Es un estándar que sirve de referencia del software que
conecta con la elaboración de páginas web en sus
diferentes versiones, define una estructura básica y un
código (denominado código HTML) para la definición de
contenido de una página web, como texto, imágenes,
videos, juegos, entre otros. Es un estándar a cargo del
World Wide Web Consortium (W3C)

HERRAMIENTAS DE
DESARROLLO
Hojas de estilo en cascada (o CSS, siglas en inglés
de Cascading Stylesheets) es un lenguaje de diseño
gráﬁco para deﬁnir y crear la presentación de un
documento estructurado escrito en un lenguaje de
marcado2 . Es muy usado para establecer el diseño
visual de las páginas web, e interfaces de usuario
escritas en HTML o XHTML; el lenguaje puede ser
aplicado a cualquier documento XML, incluyendo
XHTML, SVG, XUL, RSS, etcétera.También permite
aplicar estilos no visuales, como las hojas de estilo
auditivas. Junto con HTML y JavaScript, CSS es una
tecnología usada por muchos sitios web para crear
páginas visualmente atractivas, interfaces de usuario
para aplicaciones web, y GUIs para muchas
aplicaciones móviles

AMBIENTES DE DESARROLLO
Y SISTEMAS DE CONTROL
Ambientes de desarrollo
Processing OpenFramework Adobe Flash
Pure Data Max MSP Eyes Web

PROCESSING
• Según sus creadores, Ben Fry y Casey Reas, Processing es “un lenguaje de programación y un
entorno creado para las artes electrónicas y las comunidades de diseño visual”, es un Framework
que permite relacionar conceptos básicos de programación en un entorno de línea de código con
principios de generación de formas 2D y 3D, control de interacción, creación y control de sonido e
imagen en movimiento (tanto video como animación).

PROCESSING
• Este lenguaje, basado en Java, fue gestado con la simplicidad en mente, para que diseñadores,
artistas, estudiantes, arquitectos, ingenieros, matemáticos, investigadores o simplemente personas
con una gran curiosidad y motivación creativa puedan aprender a programar, sin que esto resulte un
dolor de cabeza ni tengamos que lidiar con una alta tecnicidad computacional, y que al mismo
tiempo, disfrutemos de la ﬂexibilidad que nos permite comunicarnos con la computadora en su
propia lengua, el código. Inicialmente desarrollado como software para crear bocetos de trabajo y
enseñar los principios de la programación en un contexto visual, Processing ha evolucionado hacia
una herramienta de producción profesional.

OPEN FRAMEWORKS
• OpenFrameworks es un conjunto de herramientas C ++ de código abierto diseñado para ayudar al
proceso creativo proporcionando un marco simple e intuitivo para la experimentación, es una
herramienta de código libre para programación creativa orientada a artistas y diseñadores. Permite
trabajar con gráﬁcos, audio, vídeo, visión por ordenador

OPENFRAMEWORKS
• Openframeworks es una biblioteca open-source cuyo objetivo inicial es colaborar con artistas y
estudiantes en el trabajar con código en c++. Su “ﬁlosofía” y propósitos son muy similares a las de
processing; sin embargo, openframeworks no es una IDE (Integrated Development Environment)
sino una colección coherente de procesos alrededor de unas cuantas bibliotecas útiles, a saber:
OpenGL para mostrar gráﬁcos, FreeImage, para manipulación de imágenes, Freetype, para mostrar y
manipular fuentes, rtAudio, para audio, Quicktime, (mac o pc), directShow (pc) yVideo4Linux (linux),
para captura y reproducción de vídeo

ADOBE FLASH
• Adobe Flash, o simplemente Flash, es un ambiente de desarrollo que incluye tanto un programa de
edición multimedia, Flash program, como un programa de visualización de películas creadas en el
ambiente de edición, Flash Player, escrito y distribuido por Adobe. Utiliza gráficos vectoriales e
imágenes raster, sonido, flujo de vídeo y audio bidireccional, y una estructura de programación en
línea de código tipo script tipificada fuertemente en la metodología orientada a objetos conocido
como action script (AS)

PUREDATA
• Pure-Data es un ambiente de desarrollo de software que utiliza un paradigma de programación
visual basado en eventos y orientado a objetos. En su interfaz gráﬁca de uso se hace patente la
metáfora de la caja negra. Cada caja representa una función con argumentos de entrada (inputs) —
datos, sentencias de control o datos procesados (outputs)— y de salida, que son las respuestas
como datos procesados en el interior de cada caja. Cada una de esta cajas cumple funciones
especíﬁcas que son lanzadas o disparadas (triger) a partir de sus inputs, que a su vez pueden ser
eventos del usuario o el entorno

MAX/ MSP JITTER
• Max es un entorno de desarrollo de software que ofrece una interfaz gráﬁca modular de
interconexión de objetos a partir de la relación de las entradas y salidas de los mismoses bastante
modular, y la mayoría de las rutinas forman parte de una biblioteca compartida. La IPA (Interfaz de
Programación de Aplicaciones) permite el desarrollo de nuevas rutinas (llamadas «objetos
externos») por terceras personas. En consecuencia, muchos de los usuarios de Max son
programadores no aﬁliados a Cycling '74

EYE WEB
• EyesWeb es una plataforma desarrollada por el Laboratorio de Informática Musical de la
Universidad de Génova (InfoMus Lab, 2008). “Se especializa en la captación de diferentes
patrones de movimiento y gestualidad del cuerpo humano y la interpretación musical, y está
orientado a la producción de sistemas multimedia interactivos para el análisis de movimientos
escénicos en tiempo real y controlar la síntesis de sonido y la ejecución en vivo de
instrumentos”

SDGTOOLKIT
• Framework desarrollado por el GroupLab de la Universidad de Calgary. Es usado para el diseño de
aplicaciones groupware que da la posibilidad de utilizar diferentes ratones, teclados, cursores y
orientaciones desde un mismo dispositivo; está implementado como una aplicación para .NET.

SDGTOOLKIT
• Hay que conocer las ventajas y desventajas que nos ofrece. Por ejemplo, si vas a hacer un
efecto de audio, te recomiendo que vayas a hacerlo con PureData o Max, si quieres hacer
una página web interactiva con gráﬁcos generativos, me iría a por Processing. Si lo que
quieres es crear una app con un uso de computer vision o una aplicación que corra en
OSX, en Linux, en iOS, en Android, en Windows y en la RaspberryPi al mismo tiempo,
openframeworks

OTRAS HERRAMIENTAS
• Blender
• Isadora
• Context Free
• Design By Numbers
• DrawBot
• GEM
• Field
• Irrlicht
• JBox2D
• Jitter
• NodeBox
• Ogre
SperColaider
Chunk
• Pygame
• Scriptographer
• Structure Synth
• VVVV

Y SISTEMAS DE CONTROL
Sistemas de Control
Wiring Raspberry Pi
Basic Stamp Arduino

WIRING
• Wiring comprende un ambiente de programación y una tarjeta electrónica de entrada y salida (i/o
input/output) de datos, usada inicialmente para la exploración de arte electrónico, medios tangibles,
enseñanza y aprendizaje de programación computacional. Se ha convertido en una tarjeta de diseño
de prototipos electrónicos que trabaja sobre los aspectos de interacción física, usa una interfaz de
programación similar a processing, como lenguaje de programación, usa “un C basado en las AVRLIB
de Pascal Stang, que también esta javadizado para no tener que usar apuntadores” (Reyes, 2008),
posee en su tarjeta de hardware un microcontrolador que puede ser programado por el ambiente
de wiring para controlar dispositivos externos como sensores y actuadores; “usa un micro ATMEL
atmega128”

RASPBERRY PI
• Raspberry Pi es un computador de placa reducida, computador de placa única o computador de
placa simple (SBC) de bajo coste desarrollado en Reino Unido por la Fundación Raspberry Pi, con
el objetivo de estimular la enseñanza de ciencias de la computación en las escuelas.

ARDUINO
• Arduino es una plataforma de código libre de computación física formada por una simple placa de
entrada-salida y un entorno de desarrollo para escribir el software que se ejecutará en él. Su
lenguaje de programación es una implementación de Wiring desarrollado en un C basado en las
AVRLIB. Arduino es una plataforma basada en una tarjeta o circuito impreso y un entorno de
desarrollo o IDE basado en el lenguaje de Wiring y Processing. En su versión Duemilanove cuenta
con 14 pines digitales i/o, 6 entradas análogas y 6 pines para salida análoga PWM (estos pines se
comparten con los de entrada y salida digital)

BASIC STAMP
• Basic Stamp 2 es un kit de desarrollo y un modulo de microcontrolador enfocado al desarrollo y
aprendizaje de diseños de interfaces computacionales físicas, facilitando, a partir de sus diferentes
kits, el trabajo sencilla en el diseño y construcción de circuitos robóticos y módulos
microcontrolados; su lenguaje de desarrollo es una versión simpliﬁcada de Basic llamado Basic
stamp; consta de 16 pines de entrada y salida digital, 2 puertos de salida análoga de 8 bits y 1
puerto PWM de 10bits; usa un procesador BS2 de Parallax.

PHIDGETS
• Phidgets es un conjunto de bloques interconectables sobre la estructura “plug and play” que se
caracteriza por su bajo costo. Permite tener control de los sensores y actuadores desde un
computador a través de múltiples puertos usb; cada bloque es controlado por un puerto para el
cual se han desarrollado o se pueden desarrollar sus API (aplicaciones) en diversos lenguajes de
programación, lo cual la hace muy ﬂexible y útil al momento de conectar nuevos módulos; cuenta
con gran cantidad de dispositivos para su conexión (sensores de distancia, fuerza, presión, toque,
movimiento, motores, infrarrojos…) y tarjetas de entrada-salida que funcionan como los kists de
ensamblaje; dependiendo del kit se tienen mayores posibilidades de entradas y salidas; el kit medio
consta de 8 entradas análogas, 8 entradas digitales y 8 salidas digitales

BUG
• Según sus creadores bugbase es “un computador linux con cuatro ranuras de
expansión” (Dispositivo de prototipazo rápido, 2009). Bugbase trabaja con un microcontrolador
ARM1136JF-s, a cuya placa se le pueden insertar cuatro de seis módulos disponibles, entre los que
están BugMotion, que es un módulo de detección de movimiento que contiene un sensor infrarojo
pasivo, o PIR, y un acelerómetro de tres ejes; BugLocate, receptor GPS; BugView, una pantalla LCD
sensible al tacto, BugvonHippel, módulo que funciona como un conector al cual se pueden añadir
sensores, efectores, dispositivos inalámbricos y aparatos USB

SUNSPOT
• Fue desarrollado por el famoso laboratorio de SUN LABs. SunSPOT (Small Programable Object
Technology) busca, según sus creadores, “permitir que todos los nuevos tipos de dispositivos se
conecten e intercambien en la red; la tecnología SunSPOT coloca la visión de la “Internet de cosas”
mucho más cerca de la realidad”

MODELOS HICANALISIS ESTRUCTURAL DE LAS INTERFACES DIGITALES
En este modelo conceptual encontramos tres entornos básicos: uno físico humano, otro físico de
hardware y software, y un último entorno de trabajo o interacción y representación.

MODELOS HICANALISIS ESTRUCTURAL DE LAS INTERFACES DIGITALES
Entorno físico humano: representa al usuario operador del sistema,
en este ámbito se encuentran los elementos de entrada y los de
salida.
Entorno físico de hardware y software: en este módulo se
adquiere, por una parte, la información que el operador humano
envía al sistema, y por otra se toma la información de respuesta
del sistema y se traduce en acciones e información para que sea
reconocida por el ser humano.
Entorno de trabajo: en este ambiente se desarrollan o despachan
los requerimientos del operador humano a partir de programas
de computador o del diseño de dispositivos electrónicos
especíﬁcos; se puede ver como el motor detrás de la interface

MODELOS
HICANALISIS ESTRUCTURAL DE LAS
INTERFACES DIGITALES

POR QUE P55
Permite 3 formas de programar: básica,
procedural/
estructurada y orientada a objetos
• Las primeras pruebas y ‘sketches’
sencillos se pueden desarrollar en el
modo básico (sin funciones, código
directo)
• ‘sketches’ y programas más ambiciosos
pueden hacer uso de funciones
(programación a la ‘C’)
• Programas más complejos pueden
desarrollarse aplicando orientación a
objetos (clases de Java)
• Finalmente, se puede desarrollar en
java ‘puro’ y usar librerías de processing y
otros entornos
(eclipse, netbeans etc.)

POR QUE P55
Genera aplicaciones listas para ser
ejecutadas en las tres principales
plataformas: Mac OS, Linux y
Windows
• Las aplicaciones processing también
pueden generarse para su ejecución en
internet (como un applet de Java)
• Es posible desarrollar aplicaciones para
dispositivos.
• Conexión con dispositivos y prototipos
electrónicos: proyectos Arduino y Wiring
(http://
hardware.processing.org)

print("hello world!");
Primer programa

Versión 1
print("Hello World!”);
print("Hola Clase!");

Versión 1I
println("Hello World!”);
println("Hola Clase!");

Versión 1I
line(40,15,90,95);

Ejercicio 1
Hacer una X en el
canvas

otros objetos gráﬁcos
line() p.e.: line(30, 20, 85, 75);
rect() p.e.: rect(30, 20, 55, 55);
ellipse() p.e.: ellipse(56, 46, 55, 55);
triangle() p.e.: triangle(30, 75, 58, 20, 86, 75);

Manejo de color
El valor de un color en Processing se expresa así:
color(255,0,0) para un rojo puro, por ejemplo.
para un verde con alfa (transparencia) del 50%:
color(0,255,0,127). Si no se especiﬁca el parámetro alfa, se
entiende que su valor es máximo, 255, y que por lo tanto no hay
transparencia (la opacidad es total).
Para ver estos valores de color, el color picker de la interfaz de
Processing puede ser muy útil.
Cuando un color está en la escala de grises (y por consiguiente
sus valores R, G y B son iguales entre sí), se puede expresar con
un solo valor: color(127);

Manejo de color
Hay varias maneras de utilizar el color.
De momento, veremos las funciones background(),
stroke() y ﬁll().
Dentro de sus paréntesis (es decir, como
parámetros), pondremos el valor de color (en
forma de uno, tres, o cuatro números de 0 a 255),
para cambiar, respectivamente, el color de fondo de
una ventana, el color del trazo en una forma
geométrica, o su color de relleno.

Color para un rectángulo
ﬁll(0,255,0);
stroke(255,0,0);
rect(30, 20, 55, 55);

Combinando
size(600,400);
background(0);
ﬁll(255,0,0);
strokeWeight(5);
stroke(255);
ellipse(250,150,200,180);
noStroke();
ﬁll(0,255,0,127);
rect(250,150,200,120);
stroke(255,200);
line(100,100,350,210);

Tipos de datos Numéricos
y operaciones básicas
int a,b,e;
ﬂoat c,d,f;
a = 10;
b = 3;
c = 40.0;
d = 6.0;
println( a / b ); //imprime 3
println( c / d ); //imprime 6.66666666...
e = a + b * 8;
f = c - d * 2.0;

operaciones abreviadas
int x,b;
x = 100;
b = 5;
x++; // esto equivale a x=x+1
x--; // esto equivale a x=x-1
x+=b; // esto equivale a x=x+b
x-=b; // esto equivale a x=x-b
x*=b; // esto equivale a x=x*b
x/=b; // esto equivale a x=x/b

Variables
int x = 0;
println(x);
x=x+1;
println(x);
x=x+1;
println(x);

if then-else
int a = 1;
int b = 2;
if(a==b){
println("igual");
}else{
println("diferente");
}

Bucles - repeticiones
for(int i=0 ; i<5 ; i++){
println(i);
}

Combinando lo aprendido
int x = 0;
void setup( ){
noStroke( );
}
void draw( ){
background(190);
rect(x, 0, 5, 100);
x=x+1;
}

caracteres
char miVar;
miVar = 'b';
println(miVar); //imprime una b

Control con mouse
mi primera interacción
String a,b,c;
a = "hola ";
b = "mundo!!!!";
c = a + b;
println(a); //imprime hola
println(c); //imprime hola mundo!!!!
int x,y;
void setup(){
background(230);
size(200,200);
}
void draw(){
x=mouseX-25;
y=mouseY-25;
rect(x,y,50,50);
}

Control con mouse
version I sin rastro
String a,b,c;
a = "hola ";
b = "mundo!!!!";
c = a + b;
println(a); //imprime hola
println(c); //imprime hola mundo!!!!
int x,y;
void setup(){
size(200,200);
}
void draw(){
background(230);
x=mouseX-25;
y=mouseY-25;
rect(x,y,50,50);
}

08 sw y hw diseño

Más contenido relacionado

La actualidad más candente (14)

Similar a 08 sw y hw diseño (20)

Más de Mario Valencia (13)

Último (20)

08 sw y hw diseño