Esta sesión ha sido una introducción de presentación. Nos hemos conocido y hemos hecho un pequeño recorrido por las piezas hechas en processing. Volveremos a esta presentación en las sesiones posteriores, explicando en cada clase una pieza o un artista.

Hemos empezado a escribir las primeras líneas de código, sin avanzar mucho en la interface del processing, el objetivo era empezar a tomar contacto con la herramienta  y ver que rápido y facil es realizar el primer sketch. También empezamos a familiarizarnos con la consola de error y nos hemos dado cuenta que el punto y coma al final de cada línea es muy fácil que se nos olvide!

Hemos aprendido como manejarnos en la referencia de processing.org y hemos utilizado los primeros comandos básicos usándolos en modo estático ( sin usar draw ni setup).

______________________________________________________________________

Aqui un listado y descripción de los primeros comandos utilizados.

• size() > define las dimensiones de nuestro sketch.

El primer parámetro es el ancho (un numero entero int)  y el segundo el alto (un número entero int), utilizaremos por ahora este comando solo con estos dos paràmetros. El MODE lo explicaremos mas adelante.

Si no utilizamos el comando, por defecto las dimensiones de nuestro sketch serán 100×100 píxeles. Se recomienda que no utilicemos variables para introducir los parámetros ancho y alto, sino directamente un número, ya que si no luego podremos tener problemas ( por ejemplo cuando exportamos nuestro sketch a un html)

size(width, height)size(width, height, MODE)

• background() >>  esta función define el color utilizado para el fondo de nuestro sketch.
  __

  

  background(51);

  

  background(255, 204, 0);

  El fondo por defecto es gris.

  background(gray)
  background(gray, alpha)
  background(value1, value2, value3)
  background(value1, value2, value3, alpha)
  background(color)
  background(color, alpha)
  background(hex)
  background(hex, alpha)

• ellipse() > Dibuja una elipse en la pantalla. Una elipse con el mismo ancho y el mismo alto es un circulo. Los primeros parametros fijan las coordenadas de dónde se dibujará, Por defecto se fija el centro de la elipse, si se quiere cambiar el punto de origen , se utiliza la función EllipseMode();
  ellipse(x, y, width, height)

• line() > Dibuja una línea en la pantalla Dibuja una linea (un camino directo entre dos puntos). La versión de line() con 4 parámetros dibuja una línea en un espacio 2D. Para colorearla usamos la funcion stroke(). Una línea no puede ser rellenada, por tanto el método fill() no afectará al color de la línea. Las líneas en 2D son dibujadas con un ancho de un pixel por defecto, si queremos variar el grosor usamos la función strokeWeight(). La versión con 6 parámetros hace que podamos dibujar la línea en el espacio XYZ. Para ello requiere el modo de sketch P3D o OPENGL en combinación con size()line(x1, y1, x2, y2);line(x1, y1, z1, x2, y2, z2);

noStroke();

• fill() > Fija el color usado para rellenar formas. Si usamos  fill(204, 102, 0), todas las formas siguientes serán rellenadas de naranja. Dependiendo del colorMode() estaremos usando el sistema RGB o HSB, por defecto usamos el  RGB, donde cada valor va desde 0 a 255.En el PDE de processing tenemos una herramienta muy útil llamada Color Selector.Podemos también escribir el color con la notación hexadecimal #CCFFAA, 0xFFCCFFAA (en esta notación primero nos referimos al componente Alpha, luego al rojo, verde y azul)Cuando usamos colores de escala de grises solo pasamos un parámetro, por ejemplo fill(255) o fill(0)

  fill(gray)
  fill(gray, alpha)
  fill(value1, value2, value3)
  fill(value1, value2, value3, alpha)
  fill(color)
  fill(color, alpha)
  fill(hex)
  fill(hex, alpha)

• stroke() > fija el color de las líneas y de los bordes de las formas

  stroke(gray)
  stroke(gray, alpha)
  stroke(value1, value2, value3)
  stroke(value1, value2, value3, alpha)
  stroke(color)
  stroke(color, alpha)
  stroke(hex)
  stroke(hex, alpha)

• noFill() > deshabilita el color de las formas
• noStroke() > deshabilita el color del borde
  Si noStroke() y noFill() son llamados, no se dibujará nada

______________________________________________________________________

tareas para la semana que viene:

• Creación de cuenta en vimeo
• Hay que escoger tres piezas hechas en processing de todos los recursos y enlaces que hemos visto en clase, y explicar el por qué los hemos escogido.

______________________________________________________________________

Recursos:

• Sistema de coordenadas y formas (Daniel Shiffman).
• RGB Color ( Daniel Shiffman)
• Presentación de processing (Alba G. Corral)
  
• Descarga del programa

______________________________________________________________________

para la semana que viene:

• Creación de cuenta en vimeo
• Hay que escoger tres piezas hechas en processing de todos los recursos y enlaces que hemos visto en clase, y explicar el por qué los hemos escogido.