Herramientas: Intro a Processing para el diseño

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