Brevisima intro a Processing

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...