Download Programa / Notas Semana 1

Programa / Notas Semana 1
Introducción a Processing
Aprenderemos programación, pero la pregunta real es
programación? Qué quisieras hacer tú con esta herramienta?
POR
QUÉ
aprenderemos
Crear Arte? Comunicar una idea? Entretener? Educar?
Algunas preguntas:
* Puede una "pintura" ser interactiva?
* Es la experiencia del arte interactivo diferente para cada usuario?
* Cuáles son los pros y contras de este medio?
* Qué pasó con todo mi tiempo? Vale la pena este sacrificio?
Más que cualquier otra forma de arte, los medios interactivos deben contar para la experiencia
del usuario
Qué es programación?
Crear una secuencia de instrucciones (algoritmos) para permitir que algo se cumpla.
Todos somos programadores naturales, especificamos isntrucciones para nosotros mismos y
las ejecutamos. Programamos todo el dia, usualmente en el subconsciente…Todo, desde
decirle a nuestros pies que caminen hasta esa puerta, abrir la puerta y caminar a través de
nuestro cerebro o sistema nervioso central, que le dice a nuestro cuerpo que respire
regularmente.
Inhala, exhala, inhala, exhala...
Todo lo que necesitas aprender en este curso lo aprenderás las primeras 4 semanas.
Personas vs. Computadores
Leea stae frasea
Felicitaciones! Ud. No es un computador.
Los computadores no son buenos en esto, pues necesitan un lenguaje preciso.
Errores sintáciticos son usualmente, el resultado de personas saltándose porciones y llenando
espacios en blanco, porque nosotros entendemos.
Los computadores simplemente NO entienden, por eso, debes ser muy explícito.
Lenguajes
Alto nivel y Bajo nivel
Lenguajes de alto nivel son aquellos que están màs cerca a nuestro lenguaje (humano),
mientras que lenguajes de bajo nivel son los que están más cerca de lo que la máquina
entiende. Estos lenguajes de bajo nivel son generalmente más rápidos y están escritos
específicamente para el computador. Lenguajes de alto nivel usualemente pasan por una serie
de traducciones, interpretando el código y re-escribiéndolo a un nivel más bajo antes de que la
máquina lo eche a correr. Estas traducciones hacen que el programa corra más lento, pero los
computadores de hoy son tan rápidos, de que esto se hace casi imperceptible para lamayoría
de las tareas.
Aquí una incompleta lista de lenguajes, aproximados desde bajo nivel a alto nivel;
* Machine Code
* Assembly
* C, y sus variantes
* Java
* Lenguajes Scripting
o PHP
o Ruby
o Python
o Javascript
Todos tienen puntos fuertes y débiles. Perl, por ejemplo, está estructurado para hacer textos
más fácil, mientras PHP es un gran elemento para proyectos en la web. Ambos, son lenguajes
de alto nivel y están interpretados.
Compilados Vs. Lenguajes Script
La mayoría de los lenguajes de bajo nivel deben ser traducidos en código ejecutable binario, o
"compilados", antes que corran. Una vez de que el lenguaje haya sido compilado, no necesita
compilarse de Nuevo, eso si que no se podran hacer cambios sin recompilar (compile en
Processing).
La ventaja es de que estos programas correrán más rápido porque están optimizados a la
ventaja específica de configuración de hardware y software de estos programas y de un device
o computador particular.
La desventaja es que estos programas compilados son incompatibles con otros sistemas.Esto
es por qué ciertos programas compilados para Windows no corren en Mac, etc.
Lenguajes Script (de texto), son interpretados linea por linea cada vez que se echana corer.
Esta constante interpretación en código que el computador entiende, hará que el programa
corra un poco más lento. Pero la ventaja es de que puede correr en un otro tipo de máquinas.
Porque el código en Lenguajes Script nunca es compilado, puede ser fácilmente leído y
modificado por humanos. Piensa en HTML. Si hubiera sido compilado, luego los
programadores web hubieran tenido que hacer una página diferente para Windows, Linux, OS
X, Palm, Nokia, y cualquier otro device digital. En vez, tenemos browsers que interpretan HTML
mientras estos corren, en un formato que tu computador puede despelgar. (Si HTML es un
lenguaje de programación es un tema de debate).
Java está al nivel más bajo de los lenguajes de alto nivel. Es igualmente bueno en muchas
tareas y fácil de entender si tienes un background en lenguajes de bajo nivel como C, así
también como para aquellos con niveles de manejo de lenguaje alto como JavaScript, Perl,
PHP, etc. Se sitúa en el cruce entre un lenguaje compilado y un lengiaje scripted. El código en
Java debe ser compilado, pero es compilado en un formato intermedio llamado bytecode.
Bytecode es una platafroma mixta compatible y correrá más rápido que un lenguaje scripted,
pero no es una verdadera aplicación compilada. Java bytecode todavía necesita una aplicación
ayudante llamada Java Virtual Machine (o JVM) para ser instalada y que el programa corra.
Processing es un programa Open Source gratuito basado en Java IDE (integrated development
environment o ambiente de desarrollo integrado) y un API (Application Programming Interface o
Interface de Aplicación de Programación ).
Processing hace que Java sea útil para aquellos con poca o sin experiencia en programación,
mientras que deja a un lado la funcionalidad de para aquellos con experiencia.
Bájalo e instálalo: http://www.processing.org/
A menos de que trabajes en las máquinas del lab, en donde ya está instalado (si lo bajas para
Windows, asegúrate de que sea la versión de Java, no la versión Expert sin Java.)
IDE o Integrated Development Environment (Ambiente Integrado de Desarrollo). Es un editor
en el cual escribes un programa y luego compilas y pruebas o testeas.
El IDE Processing es muy simple y fácil de entender.
Abre Processing y anda a IDE. Usa los comandos en File menu: New, Save, Sketchbook
Examples, Export. Usa los comandos bajo el menú Sketch: Run, Stop. Tu mejor amigo será el
menú Help: Reference. Tiene un botón para acceso rápido: Run, Stop, Export.
API o Application Programming Interface (Interfaz de Aplicación de Programación).
Es el código que este lenguaje utiliza. Processing tiene su propio languaje para programar,
basado en Java (simplificado para Java). Processing también tiene Java normal, pero ya
llegaremos a eso.
Sistema de Coordenadas:
Todos los lenguajes de programa que te permiten dibujar en la pantalla usan un sistema de
coordenadas en una forma u otra. Generalmente, estos sistemas de coordenadas referencian a
los pixels (o elementos de imagen).
Processing (y la mayoría de los otros lenguajes y programas gráficos como photoshop)
referencian al punto 0 de la ventana (ambos ejes x e y) en la esquina superior izquierda y
trabajan desde ahí. Ir hacia abajo aumenta el valor del eje y e ir a la derecha, aumenta el valor
del eje x. Así los puntos (30,20) en la forma (x,y) serán 30 pixeles a la derecha y 20 pixeles
abajo desde la esquina superior izquierda de la ventana.
x
(x, y)
y
Comandos:
Referencia será tu major aliado, favor consultar seguido.
Comenzaremos con lo básico que necesitas para hacer un ejercicio:
point(x,y)
Como el nombre lo dice, esto dibuja un punto en la pantalla en las coordenadas específicas x e
y. Este es un pixel (elemento de imagen).
Para escribir este comando en Processing, simplemente tipea: point(10,10); y clickea run.
Notarás que los commandos finalizan con punto y coma o ¨semicolon¨. Este es un standard de
Java y de muchos otros lenguajes de programación.
line(x1,y1,x2,y2) dibujará una linea desde (x1,y1) a (x2,y2). Como ejemplo: line(10,20,10,70);
dibuja una linea desde el punto 10 pixeles a la izquierda, 20 pixels abajo al punto 10 pixeles
desde la izquierda y 70 pixeles abajo.
(x, y, x, y)
size(width, height)
Setea el tamaño del canvas sobre el que estás dibujando.
size(100,100); hará un canvas de 100 pixels ancho por 100 pixeles de alto.
background(grayvalue)
Setea el color de background del canvas a un valor específico de gris. Un valor de gris 0
significa negro, mientras un valor de 255 significa blanco.
background(127); llenará el background con color un gris medio.
background(redvalue, greenvalue, bluevalue)
Setea un color de background del canvas al valor específico. Processing (y la mayoría de otras
representaciones de color en el computador) usan un color de espacio adicional. Piensa en
esto como el sol, la ausencia de sol, lo hace más oscuro o negro, mientras que luz solar plena,
sera blanca.
Los colores serán mezclados fuera de aditivos primaries de rojo, verde y azul. Nuevamente, así
como con los valores de la escala de grises, esto va de 0 a 255 (que es 8 bits por canal).
Habrás notado que hay dos funcioneslistadas background(). Esto significa que background()
está sobrecargado. Processing (Java) considera que una función sea el total de su nombre,
esto es, para nuestros propósitos, que sea nombre y número de su argumento.
background() con 1 argumento sera la primera función y background con 3 argumentos será la
será la segunda (second).
fill(grayvalue) o fill(redvalue,greenvalue,bluevalue)
Una función sobrecargada (como background()) que especifica el color de relleno para
cualquier figura que sea dibujada en la pantalla.
noFill()
apaga el relleno de cualquier figura que sea dibujada en la pantalla.
La figura será transparente.
stroke(grayvalue) o stroke(redvalue,greenvalue,bluevalue)
Especifica el color a ser usado en cualquier cosa que se dibuje en pantalla (line, point, shapes).
noStroke()
Apaga el color del borde de las figuras, efectivamente, haciendo que su contorno sea
transparente.
rect(x, y, width, height)
Dibuja un rectángulo con el ancho y alto específico, en determinadas posiciones x e y.
rectMode(MODE) MODE puede ser: CORNER (por defecto), CORNERS o CENTER.
Cambia el modo para dibujar un rectángulo. CORNERS significa que las coordenadas
especificadas x e y sean la esquina superior izquierda del rectángulo. CENTER significa que
las coordenadas especificadas x e y seran el punto centro del rectángulo.
En este punto, deberías sentirte cómodo con el material de refrencia para mirar los siguientes
comandos: ellipse() Ellipse Reference ellipseMode() EllipseMode Reference triangle()
Comentarios
Los comentarios son muy importantes en programación. Nos permiten a nosotros y a los
demás entender el código. Deberías adquirir este hábito inmediatamente con cualquier cosa
que hagas en Processing.
Para crear un comentario en tu código, simplemente coloca un doble slash ("//") al comienzo de
la frase.
// Este es un comentario.
Si entras multiples lineas para un comentario, puedes comenzar por un slash y un asterisco y
terminar por un asterisco y un slash.
/* Coloca comentarios y más comentarios */
Errores
En este punto, deberías indudablemente tener errores en tu código, dado a la ejercitación.
Processing coloca mensajes de error abajo en una barra roja entre la ventana output y la
ventana del código.
Desafortunadamente, los reportes de error de Processing son una molestia y toma un tiempo
en dares cuenta del verdadero error en el código.
Por ejemplo: Abrí Processing y escribí "test" en la ventana de código y luego clickee en ¨run¨.
Processing reportó: "unexpected token: test" en la barra roja. En otras palabras, Processing no
entendió "test" ya que no es un comando en este lenguaje.
Para poner otro ejemplo: Escribí "line(10,10,50,50)" y no puse semicolon. Processing reportó:
"unexpected token: null"
Lo que significa que: Processing estuvo buscando algo pero encontro nothing (null). En este
caso, estaba buscando el ";" o semicolon.