Processing

PROCESSING COMO LENGUAJE DE PROGRAMACIN


*

*

Contenido

1 Sesin: 14-11-13

Processing como lenguaje de programacin.

Entorno de programacin.

Elementos, modos y recurso de programacin.

2 Sesin: 21-11-13

Dibujar en Processing 2D

Interactuar con el mundo fsico.

Arduino y sensores.

3 Sesin: 28-11-13

Comunicacin entre Arduino y Processing.

Aplicaciones.

*

TALLER PROCESSING-ARDUINO. II



*

ENTORNO DE PROGRAMACIN (IDE)

*

*




*


Ejemplo: prog01_prueba.pde
Vamos a escribir un programa y lo vamos a guardar con el nombre prog01_prueba.

ellipse(50, 50, 80, 80);//ellipse(x,y,a,h);

http://processing.org/reference/ellipse_.html

Es un programa con una sola instruccin.

Otras primitivas bsicas de dibujo

- Punto

- Lnea

*

*




*


Ejemplo: prog02_prueba.pde
Vamos a escribir un programa y lo vamos a guardar con el nombre prog02_prueba.

*

void setup() {

size(480, 120);

}

void draw() {

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);

}

*




*


ELEMENTOS DE PROGRAMACIN. SETUP()
Partes fundamentales de la estructura del programa, son dos funciones: setup() y draw().
1.- La funcin setup(). Esta funcin slo se ejecuta una vez

*

void setup() {

size(480, 120);

}

Esta funcin sirve para inicializar la aplicacin:
Definir el tamao del marco.El color de fondo.El color de relleno.
*




*


ELEMENTOS DE PROGRAMACIN. DRAW()
2.- La funcin draw().
Esta funcin se ejecuta continuamente hasta que se produzca una parada. La habitual es pulsar el icono de stop.

14/11/13


*

void draw() {

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);

}

*



*


ELEMENTOS DE UN PROGRAMA. Resumen
TIPOS DE DATOS (variables):int, long, float, char, boolean,arrayOPERADORES.Aritmticos, relacionales, lgicos,
14/11/13

*

*




*


ESTRUCTURAS DE CONTROL.
Delimitadores de bloque: { instrucciones; }

while:

while ( expr ) { instrucciones }Ejemplo

do { instrucciones } while ( expr )

for

for ( begin; end; inc ) {instrucciones }Ejemplo

if/else

if ( expr ) {instrucciones }

if ( expr ) {instrucciones } else { instrucciones }Ejemplo

switch

switch ( var ) { case val: instrucciones default: } Ejemplo

Saltos: break, continue, return

*

*




*


ESTRUCTURAS DE CONTROL.
Delimitadores de bloque: { instrucciones; }

while:

while ( test ) { instrucciones }Ejemplo

do { instrucciones } while ( test )

for

for ( begin; test; inc ) {instrucciones }Ejemplo

if/else

if ( test ) {instrucciones }

if ( test ) {instrucciones } else { instrucciones }Ejemplo

switch

switch ( val ) { case val_1: instrucciones default: } Ejemplo

Saltos: break, continue, return

*

*




*


PROCESSING 2D.
SISTEMA DE COORDENADAS 2D.El tamao de la ventana se establece con la funcin size(), instruccin que se escribe en la funcin setup(). El (0,0), origen, se encuentra situado en la esquina superior izquierda, donde las x son positivas hacia a la izquierda y las y son positivas hacia abajo.

*

*



*


PROCESSING 2D.
COLOR Y RELLENO.El color de los trazos se determinan con la funcin stroke()
stroke(255) => RGB(255, 255, 255) especifica un valor entre 0-256 niveles de gris.

stroke(128, 0, 128) => Cualquier valor RGB

El grosor de los trazos se puede caracterizar con strokeWeight()

strokeWeight(5) => Grosor 5

El color de relleno de figuras 2D se especifica mediante la funcin fill()

fill(128) => RGB(128, 128, 128)

fill(200, 120, 90) => RGB(200, 120, 90)


*

*



*


PROCESSING 2D.
background()
Borra la ventana con el color especificado

Ejemplos: background(0)

background(128, 100, 128)
noFill()
Las figuras 2D se dibujaran sin relleno
noStroke()
Las figuras 2D se dibujaran sin trazo (especialmente til en figuras cerradas, pero afecta a todas, incluso a lneas)


*

*



*


PROCESSING 2D.
EJEMPLO SOBRE UNA LNEA
Escribimos un programa prog03_linea y vamos aadiendo el siguiente cdigo.


*

*

size(100, 100);//tamao de la ventana

background(0);//color de fondo

stroke(255);//color del trazo

strokeWeight(5);//grosor del trazo

line(0, 0, 99, 99);



*


PROCESSING 2D.
EJEMPLO SOBRE UNA LNEA
Escribimos un programa prog04_linea y vamos aadiendo el siguiente cdigo.


*

*

size(200, 200);

background(0);

//utilizamos una estructura de control repetitiva

for (int i=0; i

PROCESSING 2D.
ELIPSE Y CRCULOSellipse(x, y, ancho, alto)
Dibuja una elipse en las coordenadas (x, y) y el ancho y alto suministrados
ellipseMode()
Cambia el modo en el que los parmetros de la elipse son interpretados

ellipseMode(CENTER) => (x, y) es el centro de la elipse (es elmodo por defecto).

ellipseMode(RADIUS) => igual que el anterior, pero ancho y alto son radios y no dimetros

ellipseMode(CORNER) => (x, y) hace referencia a la esquina superior izquierda del rectngulo envolvente de la elipse

ellipseMode(CORNERS) => los cuatro parmetros de la elipse hacen referencia a dos puntos opuestos del rectngulo envolvente de la elipse


*

*



*


PROCESSING 2D.
EJEMPLO DE ELIPSE Y CRCULOS
Escribimos un programa prog05_elipse y vamos aadiendo el siguiente cdigo.


*

*

size(200, 200);

background(0);

stroke(255, 0, 0);//color del trazo

strokeWeight(5);//grosor

fill(0, 255, 0);

// (x, y) y dimetros

ellipse(100, 100, 100, 50);

// 2 esquinas opuestas

ellipseMode(CORNERS);

ellipse(0, 0, 50, 50);



*


PROCESSING 2D.
PRIMITIVAS DE 2D
Adems de las primitivas que hemos visto estn tambin las siguientes:

Arcos

Rectngulos

Tringulos

Cuadrilteros

Curvas (Bzier y Catmull-Rom)

Shapes (formas libres)


*

*



*


MOVIMIENTO 2D.

float x=0; // coordenadas

float y=0;

float vy = 1; // velocidad eje X

float vx = 2; // velocidad eje y

void setup(){

size(300,300);

fill(255);

}

void draw(){

background(0);

x = x + vx;

y = y + vy;

ellipse(x,y,10,10);

}


*

*

A continuacin vamos a realizar un programa prog06_pelotaSinRebote que realiza movimientos.



*


Processing

Documents

Transcript of Processing