Intro a la programaciรณn
usando Processing Ricardo Vega - ricardov.cl - @ricardov_cl v1 (2016) | Creative Commons - Attribution-NonCommercial-NoDerivatives 4.0 International
Qué es Processing
Ben Fry, Casey Reas MIT, Grupo de estéticas Digitales de John Maeda
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...
Por qué Processing
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)
Dónde conseguir Processing?
procesing.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...
Entorno...
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
Sintaxis 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)
Sintaxis parĂĄmetros o argumentos
size ( 800, 600 ) ; nombre de la funciĂłn
parĂŠntesis
punto y coma
Manos a la obra...
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
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
for ( int i = 0;
se testea la condición
se testea la condición
i < 5;
i++ ) {
// hacer algo aquí; }
instrucción que ocurre cada ciclo del bucle
Arrays: lista de variablesâ&#x20AC;Ś 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â&#x20AC;Ś 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...