Diferencia entre revisiones de «Processing: LC0»
De Casiopea
(pLGxcyLeuBVihKeTHNB) |
Sin resumen de edición |
||
(No se muestran 41 ediciones intermedias de 33 usuarios) | |||
Línea 1: | Línea 1: | ||
http:// | {{Curso | ||
|Asignaturas Relacionadas=Imagen Escrita, | |||
|Año=2007 | |||
|Tipo de Curso=Ramo Lectivo | |||
|Profesores=Herbert Spencer, | |||
|Carreras Relacionadas=Diseño Gráfico, Diseño Industrial | |||
|Nombre=Lenguaje Computacional 0 | |||
}} | |||
==Descripción== | |||
Módulo de [[Taller de Primer Año Diseño|Primer Año Diseño]]:<br/>''Fundamentos de la Forma Computacional'' o<br/>''Introducción a la Gráfica Interactiva'',<br/>adaptado del curso ''The Interactive Image'' por [http://www.flong.com Golan Levin] | |||
Este curso es una introducción a la computación como una herramienta de expresión plástica, donde el objetivo es el diseño pero el medio es el software. Tener experiencia previa en programación no es un prerequisito para este curso. Los estudiantes se familiarizarán con algoritmos básicos, geometría computacional y simulación cinemática. | |||
* Libro del Curso: '''[http://processing.org/learning/books/ Processing: A Programming Handbook for Visual Designers and Artists]''' | |||
* Plataforma para la presentación de trabajos y tareas: '''[http://openprocessing.org/ OpenProcessing.org (Beta)]''' | |||
==Contenidos del Curso== | |||
<div style="font-size: 10px; color:#666; font-weight: bold;"> | |||
# Processing | |||
## Download & Instalación | |||
## Ambiente Gráfico | |||
## Formatos de Exportación | |||
# Elementos del Código | |||
## //, /* */ | |||
## Funciones | |||
## Expresiones y Declaraciones | |||
## Consola | |||
# Dibujo 1 | |||
## Definición Espacial: Sistema de Coordenadas | |||
## Figuras Primitivas | |||
### <code>point(), line(), triangle(), quad(), rect(), ellipse(), bezier()</code> | |||
## Orden en el Dibujo | |||
### <code>background(), fill(), stroke(), noFill(), noStroke()</code> | |||
# Variables | |||
## Tipos de datos (dataTypes): <code>int, float, boolean, true, false</code> | |||
## Variables Processing: <code>width, height</code> | |||
## Nomenclarura de color | |||
### <code>color, color(), colorMode(), RGB, HSB</code>, hexadecimal | |||
# Matemáticas: Aritmética y Funciones | |||
## <code>+, -, *, /, %</code> | |||
## Sintaxis (); | |||
## Atajos: <code>++, --, +=, -=, -</code> | |||
# Repetición | |||
## Ciclo '''<code>for</code>''' | |||
## Ciclos anidados | |||
# Dibujo 2 | |||
## Por vértices | |||
## <code>beginShape(), endShape(), vertex(), curveVertex(), bezierVertex()</code> | |||
## curvas polares e identidad circular | |||
# Aleatoriedad | |||
## <code>random(), noise()</code> | |||
## dibujo generativo | |||
# Programación orientada a objetos | |||
## Concepto de clases e instancias | |||
## subclases y superclases | |||
# [[Imagen Digital:PDF|Generar archivos PDF desde Processing]] <code>import processing.pdf.*</code> | |||
## Tipografías vectoriales <code>hint(ENABLE_NATIVE_FONTS), PFont.list(), createFont()</code> | |||
## Sin visualización en pantalla <code>size(612, 792, PDF, "dibujo.pdf"), exit()</code> | |||
## Con visualización en pantalla <code>beginRecord(PDF, "filename.pdf"), endRecord();</code> | |||
### Documentos multipágina <code>pdf.nextPage();</code> | |||
# Objetos de imágenes <code>PImage</code> | |||
## Acceso al [[Arreglo de Pixeles]] <code>pixels[]</code> | |||
</div> | |||
==Tareas== | |||
* '''Martes 1 de Julio:''' Familiarizarse con el entorno de trabajo de Processing y el sistema de publicación de tareas. Subir un applet a su carpeta individual. Esta carpeta debe estar formateada del siguiente modo: "apellio_nombre". Se suben en esta carpeta todos los ejercicios de este curso. Se debe mantener un cuidado respecto a los nombres de los ejercicios | |||
* '''Martes 8 de Julio:''' Subir un applet que utilice los elementos de dibujo introducidos en la clase anterior. Este ejercicio corresponde a una exploración de las primitivas estándar incluídas como funciones simples en processing, definición de color (relleno y trazo). | |||
* '''Marte 15 de Julio:''' Construir un patrón bidimensional utilizando ciclos anidados y llamando a una función propia. La versión avanzada de la tarea debe considerar que esta función incorpora pequeñas variaciones cada vez que se ejecuta mediante la inclusión de la función <code>random()</code>. | |||
* '''Martes 22 de Julio:''' Perfeccionar y corregir la tarea anterior. Los alumnos avanzados deben explorar el concepto de recursividad. | |||
==Ejemplos== | |||
===Dibujo=== | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/america dibujo de america]: dibujo con vértices | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/ciclos_anidados ciclos anidados]: dibujo de un patrón xy sensible al mouse | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/trama_y_distancia trama y distancia]: dibujo de un patrón xy sensible a la [[distancia]] del mouse | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/helix1 hélice 1] | |||
===Arreglos o Matrices=== | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/arreglo_de_puntos arreglo de puntos]: almacenamiento de datos en la memoria | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/croquera croquera]: un programa elemental de dibujo | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/helix2 hélice 2] | |||
===Coordenadas Polares y Cartesianas=== | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/polar la Lemniscata de Bernoulli]: curva polar animada con la función seno<br/> | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/lissajous la identidad circular de Lissajous]: visualización de la identidad circular en x e y | |||
===Random y Noise=== | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/random_vs_noise random vs. noise] Dos aproximaciones distintas a la aleatoriedad | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/filtro Modulación y filtro de señales]: La función <code>sin()</code> como envolvente de la función <code>noise()</code> | |||
===Programación Orientada a Objetos: Clases=== | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/autos Autos]: clases de autos | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/pelotas1 Pelotas], parte 1 | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/tesela tesela simple]: una teselación periódica (p2gg) | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/teselaAnimada tesela animada]: la misma teselación p2gg con un tesel animado y rotacón controlada por el mouse | |||
* [http://www.ead.pucv.cl/processing/2008/spencer-herbert/teselas_chalala/ Teselas de la travesía a Purmamarca 2007] | |||
===Manejo de Archivos de Imágenes=== | |||
* [http://www.herbertspencer.net/ead/images/a/a4/Random_foto.zip random foto]: este ejemplo construye un arreglo de imágenes a partir de los archivos de una carpeta. Muy útil para grandes cantidades de imágenes. Escencialmente es una extensión de lo hablado en la última clase. | |||
* conversión de pixels<nowiki>[]</nowiki> al sistema cartesiano de coordenadas: | |||
<pre><nowiki> | |||
desde cartesiano a lineal: | |||
pixels[y*width + x] | |||
desde un número de índice (index) del arreglo al sistema cartesiano: | |||
int y = index / width; | |||
int x = index % width; | |||
</nowiki></pre> | |||
==Referencias== | |||
===Cursos Anteriores=== | |||
* [[LC0: 2009]] | |||
* [[LC0: 2007]] | |||
** [[Imagen Digital: Lámina final]], proyecto 2007 | |||
===Referencias Online=== | |||
* http://www.processing.org | |||
* [http://www.proyecto-biopus.com.ar/emiliano/tutorial_programacion/index.html Tutorial de Processing - Castellano] | |||
* http://www.codetree.org/index.php | |||
* [http://jtnimoy.com/itp/p5/workshop/ Tutorial de processing - Inglés] por Josh Nimoy | |||
* [http://www.processinghacks.com/hacks/contents processing hacks] | |||
* [http://www.arduino.cc/ Proyecto Arduino]: Placas programables en processing | |||
* http://local.wasp.uwa.edu.au/~pbourke/surfaces_curves/ - superficies y curvas | |||
* http://www.visualcomplexity.com/vc/ - proyectos de visualización computacional | |||
* http://www.infosthetics.com/ | |||
* http://dataisnature.com/ | |||
* http://www.generatorx.no/ | |||
* http://acg.media.mit.edu/ {aesthetics+computation group: proyectos antiguos, MIT} | |||
* http://www.abstractmachine.net/blog/ | |||
* http://www.tom-carden.co.uk/category/weblog/ | |||
* http://www.processingblogs.org/ | |||
* [http://dev.processing.org/reference/core/javadoc/index-all.html Listadp de comandos no documentados para Processing] | |||
==== Personas ==== | |||
* http://www.benfry.com - Ben Fry, fundador del proyecto processing | |||
* http://reas.com/ - Casey Reas, fundador del proyecto processing | |||
* http://www.flong.com/ - Golan Levin, artista en medios digitales | |||
* http://www.shiffman.net/teaching/nature - the nature of code, Daniel Shiffman | |||
[[Categoría: Pre Grado]] | |||
[[Categoría: Diseño]] | |||
[[Categoría: Lenguaje Computacional]] | |||
[[Categoría: Cursos]] |
Revisión actual - 06:58 11 mar 2013
Asignatura(s) | Imagen Escrita |
---|---|
Año | 2007 |
Tipo de Curso | Ramo Lectivo |
Profesores | Herbert Spencer |
Carreras Relacionadas | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
Estudiantes
Descripción
Módulo de Primer Año Diseño:
Fundamentos de la Forma Computacional o
Introducción a la Gráfica Interactiva,
adaptado del curso The Interactive Image por Golan Levin
Este curso es una introducción a la computación como una herramienta de expresión plástica, donde el objetivo es el diseño pero el medio es el software. Tener experiencia previa en programación no es un prerequisito para este curso. Los estudiantes se familiarizarán con algoritmos básicos, geometría computacional y simulación cinemática.
- Libro del Curso: Processing: A Programming Handbook for Visual Designers and Artists
- Plataforma para la presentación de trabajos y tareas: OpenProcessing.org (Beta)
Contenidos del Curso
- Processing
- Download & Instalación
- Ambiente Gráfico
- Formatos de Exportación
- Elementos del Código
- //, /* */
- Funciones
- Expresiones y Declaraciones
- Consola
- Dibujo 1
- Definición Espacial: Sistema de Coordenadas
- Figuras Primitivas
point(), line(), triangle(), quad(), rect(), ellipse(), bezier()
- Orden en el Dibujo
background(), fill(), stroke(), noFill(), noStroke()
- Variables
- Tipos de datos (dataTypes):
int, float, boolean, true, false
- Variables Processing:
width, height
- Nomenclarura de color
color, color(), colorMode(), RGB, HSB
, hexadecimal
- Tipos de datos (dataTypes):
- Matemáticas: Aritmética y Funciones
+, -, *, /, %
- Sintaxis ();
- Atajos:
++, --, +=, -=, -
- Repetición
- Ciclo
for
- Ciclos anidados
- Ciclo
- Dibujo 2
- Por vértices
beginShape(), endShape(), vertex(), curveVertex(), bezierVertex()
- curvas polares e identidad circular
- Aleatoriedad
random(), noise()
- dibujo generativo
- Programación orientada a objetos
- Concepto de clases e instancias
- subclases y superclases
- Generar archivos PDF desde Processing
import processing.pdf.*
- Tipografías vectoriales
hint(ENABLE_NATIVE_FONTS), PFont.list(), createFont()
- Sin visualización en pantalla
size(612, 792, PDF, "dibujo.pdf"), exit()
- Con visualización en pantalla
beginRecord(PDF, "filename.pdf"), endRecord();
- Documentos multipágina
pdf.nextPage();
- Documentos multipágina
- Tipografías vectoriales
- Objetos de imágenes
PImage
- Acceso al Arreglo de Pixeles
pixels[]
- Acceso al Arreglo de Pixeles
Tareas
- Martes 1 de Julio: Familiarizarse con el entorno de trabajo de Processing y el sistema de publicación de tareas. Subir un applet a su carpeta individual. Esta carpeta debe estar formateada del siguiente modo: "apellio_nombre". Se suben en esta carpeta todos los ejercicios de este curso. Se debe mantener un cuidado respecto a los nombres de los ejercicios
- Martes 8 de Julio: Subir un applet que utilice los elementos de dibujo introducidos en la clase anterior. Este ejercicio corresponde a una exploración de las primitivas estándar incluídas como funciones simples en processing, definición de color (relleno y trazo).
- Marte 15 de Julio: Construir un patrón bidimensional utilizando ciclos anidados y llamando a una función propia. La versión avanzada de la tarea debe considerar que esta función incorpora pequeñas variaciones cada vez que se ejecuta mediante la inclusión de la función
random()
. - Martes 22 de Julio: Perfeccionar y corregir la tarea anterior. Los alumnos avanzados deben explorar el concepto de recursividad.
Ejemplos
Dibujo
- dibujo de america: dibujo con vértices
- ciclos anidados: dibujo de un patrón xy sensible al mouse
- trama y distancia: dibujo de un patrón xy sensible a la distancia del mouse
- hélice 1
Arreglos o Matrices
- arreglo de puntos: almacenamiento de datos en la memoria
- croquera: un programa elemental de dibujo
- hélice 2
Coordenadas Polares y Cartesianas
- la Lemniscata de Bernoulli: curva polar animada con la función seno
- la identidad circular de Lissajous: visualización de la identidad circular en x e y
Random y Noise
- random vs. noise Dos aproximaciones distintas a la aleatoriedad
- Modulación y filtro de señales: La función
sin()
como envolvente de la funciónnoise()
Programación Orientada a Objetos: Clases
- Autos: clases de autos
- Pelotas, parte 1
- tesela simple: una teselación periódica (p2gg)
- tesela animada: la misma teselación p2gg con un tesel animado y rotacón controlada por el mouse
- Teselas de la travesía a Purmamarca 2007
Manejo de Archivos de Imágenes
- random foto: este ejemplo construye un arreglo de imágenes a partir de los archivos de una carpeta. Muy útil para grandes cantidades de imágenes. Escencialmente es una extensión de lo hablado en la última clase.
- conversión de pixels[] al sistema cartesiano de coordenadas:
desde cartesiano a lineal: pixels[y*width + x] desde un número de índice (index) del arreglo al sistema cartesiano: int y = index / width; int x = index % width;
Referencias
Cursos Anteriores
- LC0: 2009
- LC0: 2007
- Imagen Digital: Lámina final, proyecto 2007
Referencias Online
- http://www.processing.org
- Tutorial de Processing - Castellano
- http://www.codetree.org/index.php
- Tutorial de processing - Inglés por Josh Nimoy
- processing hacks
- Proyecto Arduino: Placas programables en processing
- http://local.wasp.uwa.edu.au/~pbourke/surfaces_curves/ - superficies y curvas
- http://www.visualcomplexity.com/vc/ - proyectos de visualización computacional
- http://www.infosthetics.com/
- http://dataisnature.com/
- http://www.generatorx.no/
- http://acg.media.mit.edu/ {aesthetics+computation group: proyectos antiguos, MIT}
- http://www.abstractmachine.net/blog/
- http://www.tom-carden.co.uk/category/weblog/
- http://www.processingblogs.org/
- Listadp de comandos no documentados para Processing
Personas
- http://www.benfry.com - Ben Fry, fundador del proyecto processing
- http://reas.com/ - Casey Reas, fundador del proyecto processing
- http://www.flong.com/ - Golan Levin, artista en medios digitales
- http://www.shiffman.net/teaching/nature - the nature of code, Daniel Shiffman