Intro a la programación usando
Processing Ricardo Vega - ricardov.cl - @ricardov_cl v2 2021 (v1 2016) | Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International
Processing – introducción Qué es Orígenes Características Usos Interface o IDE Sintaxis Sintaxis básicas de funciones Funciones de dibujo - rect, ellipse ... Variables - data types ... Decisiones – if, else … Repetir - Ciclos for, while Listas de variables – Arrays Otros Tipos de datos Otros
Dónde conseguir Processing?
processing.org/downloads escoger “No donation” (o donar, si Ud. quiere...) elegir sistema operativo escoger la versión 2.21 o la 3.1.1 descargar al computador abrir y comenzar a explorar...
lenguajes de programación fueron creados para problemas de ingeniería y ciencias. No para dibujar ni mostrar imágenes...
Por qué Processing
Ben Fry, Casey Reas, John Maeda MIT, Grupo de estéticas Digitales de John Maeda
diseñado por artistas y diseñadores para artistas y diseñadores pensado para aprender las lógicas de programación menor complejidad para aprender pensado para “bocetar” (sketch)
Qué es Processing consiste en un entorno (IDE) y un lenguaje de programación basado en el lenguaje Java para hacer cosas para la web instalaciones interactivas, etc…
Entorno...
Coordenadas
cartesianas
en processing 0, 0 desde esquina superior izquierda
Tipos de datos: int: enteros 1, 5023, -35, etc float: punto flotante 2.5, 3.5, 3,1416... String: cadena de caracteres "Hola", "que bueno este diplomado!!!" color: para guardar valores de color colorPelo = color(200, 20, 0); Otros: boolean: si o no, 1-0
Processing – introducción Qué es Orígenes Características Usos Interface o IDE Sintaxis Sintaxis básicas de funciones Funciones de dibujo - rect, ellipse ... Variables - data types ... Decisiones – if, else … Repetir - Ciclos for, while Listas de variables – Arrays Otros Tipos de datos Otros
Qué hace el computador:
Guardar (datos y otras cosas...) - Variables Decidir (opciones según si pasa algo o no) - If, Else Repetir (acciones y elementos) - ciclos for Guardar Más (lista de variables) - Arrays Reutilizar (datos y acciones repetibles) - Funciones y Clases
Sintaxis parámetros o argumentos
size ( 800, 600 ) ; nombre de la función
paréntesis
punto y coma
Sintaxis //este es un comentario for(int i=0; i<5; i++){ rect(); } Ojo con la sintaxis (como escribimos el código) ; para terminar la “oración” // para hacer comentarios {} siempre abrir y cerrar corchetes...
Funciones recurrentes en Processing size(w, h);
// ancho y alto, para tamaño de ventana
background(r, g, b);
// rojo, verde y azul, para color de fondo
rect(x, y, w, h);
// dibuja un rectángulo
ellipse(x, y, w, h);
// dibuja una elipse
fill(r, g, b);
// colorea el relleno de las formas
stroke(r, g, b);
// colorea la línea de las formas
Referencias sobre funciones y otros elementos de Processing https://processing.org/reference/
Funciones y parámetros size(w, h); w = ancho de la ventana h = altura de la ventana width: "keyword" te entrega en ancho de la ventana height: "keyword" te entrega el alto de la ventana background(r, g, b); r = red (rojo) g = green (verde) b = blue (azul)
Variables: Guardar int x = 10; // declarar x = 10; // asignar rect(x, 20, 30, 30); // usar // se puede declarar y asignar al mismo tiempo float pepe = 20.5; // declarar y asignar rect(x, 20, 30, pepe); // usar
Variables: Guardar
ojo con el scope! no va a encontrar x, está fuera de scope... void setup( ) { int x = 10; } void draw( ) { rect(x, 20, 30, pepe); }
If, Else: Decidir int x = 10; // pregunta si se da una condición if ( x <= 5 ) { //entonces, algo hace algo si se da dicha condición... }
Símbolo
Significado
< <= > >=
“menor que” “menor que o igual que” “mayor que” “mayor que o igual que”
!=
“no igual a”
ciclos for: Repetir podrían dibujar 10, 1000, 1000 rectángulos? rect(10, 10, 10, 10); rect(10, 20, 10, 10); rect(10, 30, 10, 10); rect(10, 40, 10, 10); rect(10, 50, 10, 10); rect(10, 60, 10, 10); rect(10, 70, 10, 10); rect(10, 80, 10, 10); rect(10, 90, 10, 10); ...
ciclos for: Repetir se puede, pero es más fácil con un ciclo for...
creamos una variable
se testea la condición
for ( int i=0; i<5;
se testea la condición
i++ ) {
// hacer algo aquí; } instrucción que ocurre cada ciclo del bucle
Arrays: lista de variables… podemos guardar muchos datos... Variable
1
valor
Array
1
6
4
5
3
2
[0]
[1]
[2]
[3]
[4]
[5]
posición o index
Arrays: lista de variables… podemos guardar muchos datos...
int[ ] edades = {10, 12, 32, 24, 15, 56, 47 }; String [ ] beatles = {"George", "John", "Paul", "Ringo"};
int[ ]
posX = new int[ 50 ];
declaramos
cuantas cajas queremos...
Algunas referencias Referencias de Processing online: https://processing.org/reference/ Learning Processing: http://learningprocessing.com/ Generative Gestaltung: http://www.generative-gestaltung.de/ Forn + Code: http://formandcode.com/ Getting started with Processing, tutorial básico: https://processing.org/tutorials/gettingstarted
Manos a la obra...