Sesion5 Processing

Sistemas Inteligentes. ANDROID & Texas Instruments

Comunicación gráfica y artísticacon MSP430 y Processing

Teodoro [email protected]

Sistemas Inteligentes. ANDROID & Texas Instruments

Comunicación gráfica y artísticacon MSP430 y Processing

[email protected]

Processing

Processing

Processing está basado en JAVA y es un lenguaje de programación de código abierto y creado para las personas que deseen crear imágenes, animaciones e interacciones.

Es similar al entorno de programación de Energia, Arduino y Wiring.

Processing está basado en JAVA y es un lenguaje de programación de código abierto y creado para las personas que deseen crear imágenes, animaciones e interacciones.

Es similar al entorno de programación de Energia, Arduino y Wiring.

Figuras geométricas primitivas con Processing

point() Syntax

Parametersx

y

Figuras geométricas primitivas con ProcessingSyntax point(x, y)

Parametersfloat: x-coordinate of the point

float: y-coordinate of the point


line() Syntax

Parametersx1

y1

x2

y2

Figuras geométricas primitivas con ProcessingSyntax line(x1, y1, x2, y2)

Parametersfloat: x-coordinate of the first point

float: y-coordinate of the first point

float: x-coordinate of the second point

float: y-coordinate of the second point


rect() Syntax

Parametersa

b

c

d

rtr

br

bl

Figuras geométricas primitivas con ProcessingSyntax rect(a, b, c, d)

rect(a, b, c, d, r)rect(a, b, c, d, tl, tr, br, bl)

Parametersfloat: x-coordinate of the rectangle by defaultfloat: y-coordinate of the rectangle by defaultfloat: width of the rectangle by defaultfloat: height of the rectangle by defaultfloat: radii for all four cornersfloat: radius for top-right cornerfloat: radius for bottom-right cornerfloat: radius for bottom-left corner


ellipse() Syntax

Parametersa

b

c

d

Returns

Figuras geométricas primitivas con ProcessingSyntax ellipse(a, b, c, d)

Parametersfloat: x-coordinate of the ellipse

float: y-coordinate of the ellipse

float: width of the ellipse by default

float: height of the ellipse by default

Returns void

Ejemplo código en Processingvoid setup() {size(200, 200);

}

void draw(){background(255); // Establece el color de fondo blanco utilizando escala de grisesfill(0); //Establece el relleno del objeto negropoint(10,10);line(50,180,150,180);rect(50, 50, 100, 100,5); //x,y, largo, alto desde el origen esquina superior izquierdafill(200);ellipse(50,50,100,50); //x,y, diámetro x, alto y

}

Ejemplo código en Processing

background(255); // Establece el color de fondo blanco utilizando escala de grisesfill(0); //Establece el relleno del objeto negro

rect(50, 50, 100, 100,5); //x,y, largo, alto desde el origen esquina superior izquierda

ellipse(50,50,100,50); //x,y, diámetro x, alto y

Colores en Processing

colorMode()Syntax colorMode

colorModecolorMode

Parametersmode int: Either RGB or HSB, corresponding to

Red/Green/Blue and Hue/Saturation/Brightness

max float: range for all color elements

max1 float: range for the red or hue depending on the current color mode

max2 float: range for the green or saturation depending on the current color mode

max3 float: range for the blue or brightness depending on the current color mode

colorMode(mode)colorMode(mode, max)colorMode(mode, max1, max2, max3)

int: Either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightnessfloat: range for all color elements

float: range for the red or hue depending on the current color mode

float: range for the green or saturation depending on the current color mode

float: range for the blue or brightness depending on the current color mode

Ejemplo 2

void setup() {size(200, 200);

}

void draw(){colorMode(RGB, 200);for (int i = 0; i < 200; i++) { //Realiza un barrido por filasfor (int j = 0; j < 200; j++) { //Realiza un barrido por columnas

stroke(i, j, 0); //Coloca el color de borde acorde a los 3 colores básicos en RGB, //cambiar 0 por otro numeropoint(i, j); //Coloca un punto

}}

}

for (int i = 0; i < 200; i++) { //Realiza un barrido por filasfor (int j = 0; j < 200; j++) { //Realiza un barrido por columnas

stroke(i, j, 0); //Coloca el color de borde acorde a los 3 colores básicos en RGB,

Curvas en Processing

curve()Syntax curve(x1, y1, x2, y2, x3, y3, x4, y4

Parametersx1 float: coordinates for the beginning control

point

y1 float: coordinates for the beginning control point

x2 float: coordinates for the first point

y2 float: coordinates for the first pointx3 float: coordinates for the second pointy3 float: coordinates for the second pointx4 float: coordinates for the ending control pointy4 float: coordinates for the ending control point

curve(x1, y1, x2, y2, x3, y3, x4, y4)

float: coordinates for the beginning control point

float: coordinates for the beginning control pointfloat: coordinates for the first point

float: coordinates for the first pointfloat: coordinates for the second pointfloat: coordinates for the second pointfloat: coordinates for the ending control pointfloat: coordinates for the ending control point

Ejemplo 3void setup () {size(200, 200);

}

void draw () {noFill();stroke(255, 102, 0);curve(5, 26, 5, 26, 73, 24, 73, 61);stroke(0); curve(5, 26, 73, 24, 73, 61, 15, 65); stroke(255, 102, 0);curve(73, 24, 73, 61, 15, 65, 15, 65);

}

Ejemplo 4Crear una aplicación gráfica en Processing que permita cambiar el color de relleno en una figura geométrica (cuadrado) cuando se presione un botón en la placa MSP430

Crear una aplicación gráfica en Processing que permita cambiar el color de relleno en una figura geométrica (cuadrado) cuando se presione un botón en la placa MSP430

Comunicación con Processing en Energia:/*-----------------------------------------------------I N S T I T U T O T E C N O L Ó G I C O S U P E R I O R D E J E R E ZCOORDINACIÓN DE INVESTIGACIÓN, INNOVACIÓN Y DESARROLLO TECNOLÓGICO-------------------------------------------------------Diplomado en Diseño y Desarrollo de Aplicaciones Inteligentes basadas enAndroid y Microcontroladores de Texas InstrumentsEl código de este programa es de libre distribuciónAutor: MSEEI Teodoro Ibarra Pérez-------------------------------------------------------Realiza un envío de caracteres a Processing para cambiarde color un rectángulo mediante RS232 Placa MSP430 LaunchPad de TI*/#define boton1 5 //Definición del pin 5 a la variable boton1

void setup() {pinMode(boton1, INPUT_PULLUP); //Se declara una resistencia pullupSerial.begin(9600); // Configura comunicación serie a 9600 bits por segundo

}

void loop() {if (digitalRead(boton1)==HIGH){ //Si es presionado el boton

Serial.print(0); //Envía un byte equivalente a 48 en ASCII}else

Serial.print(1); //Envía un byte equivalente a 49 en ASCIIdelay(100);}

Comunicación con Processing en Energia:I N S T I T U T O T E C N O L Ó G I C O S U P E R I O R D E J E R E ZCOORDINACIÓN DE INVESTIGACIÓN, INNOVACIÓN Y DESARROLLO TECNOLÓGICO

Diplomado en Diseño y Desarrollo de Aplicaciones Inteligentes basadas en

Realiza un envío de caracteres a Processing para cambiarde color un rectángulo mediante RS232 Placa MSP430 LaunchPad de TI

#define boton1 5 //Definición del pin 5 a la variable boton1

pinMode(boton1, INPUT_PULLUP); //Se declara una resistencia pullupSerial.begin(9600); // Configura comunicación serie a 9600 bits por segundo

if (digitalRead(boton1)==HIGH){ //Si es presionado el botonSerial.print(0); //Envía un byte equivalente a 48 en ASCII

Serial.print(1); //Envía un byte equivalente a 49 en ASCII

Lectura del MSP430 en Processingimport processing.serial.*;

Serial myPort; // Create object from Serial classint val=0; // Data received from the serial port

void setup() {size(200, 200);// List all the available serial portsprintln(Serial.list());// Open whatever port is the one you're using.String portName = Serial.list()[1]; //CAMBIAR PUERTO COMmyPort = new Serial(this, portName, 9600);

}

void draw() {if ( myPort.available() > 0) { // If data is available,

val = myPort.read(); // read it and store it in val}background(255); // Set background to whiteif (val == 48) { // If the serial value is 0,

fill(0); // set fill to black} else { // If the serial value is not 0,

fill(204); // set fill to light gray}rect(50, 50, 100, 100);

}

Lectura del MSP430 en Processing

String portName = Serial.list()[1]; //CAMBIAR PUERTO COM

Ejemplo 4 código en ProcessingCrear una aplicación gráfica en Processing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratón sobre la figura geométrica.

import processing.serial.*;Serial myPort; // Create object from Serial classint val; // Data received from the serial port

void setup() {println(Serial.list());size(200, 200);String portName = Serial.list()[1];myPort = new Serial(this, portName, 9600);

}void draw() {background(255);if (mouseOverRect() == true) { // If mouse is over square,

fill(204); // change color andmyPort.write('H'); // send an H to indicate mouse is over

} else { // If mouse is not over square,

fill(0); // change color andmyPort.write('L'); // send an L otherwise

}rect(50, 50, 100, 100); // Draw a square

}boolean mouseOverRect() { // Test if mouse is over squarereturn ((mouseX >= 50) && (mouseX <= 150) && (mouseY >= 50) && (

}

Ejemplo 4 código en ProcessingCrear una aplicación gráfica en Processing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratón sobre la

over square

>= 50) && (mouseY <= 150));

Ejemplo 4 código en EnergiaCrear una aplicación gráfica en Processing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratón sobre la figura geométrica.

char val; // Data received from the serial portint ledPin = 2; // Set the pin to digital I/O 2

void setup() {pinMode(ledPin, OUTPUT); // Set pin as OUTPUTSerial.begin(9600); // Start serial communication

}

void loop() {if (Serial.available()) { // If data is available toval = Serial.read(); // read it and store it in val

}if (val == 'H') { // If H was receiveddigitalWrite(ledPin, HIGH); // turn the LED on

} else {digitalWrite(ledPin, LOW); // Otherwise turn

}delay(100); // Wait 100 milliseconds for next

}

Ejemplo 4 código en EnergiaCrear una aplicación gráfica en Processing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratón sobre la

, OUTPUT); // Set pin as OUTPUTcommunication at 9600 bps

to read,in val

on

turn it OFF

reading

Ejemplo 4Crear una aplicación gráfica en Processingled de la placa MSP430 cuando se pase el puntero del ratón sobre la figura geométrica.

PROBAR CON LA HYPERTERMINAL…

Processing que permita encender el de la placa MSP430 cuando se pase el puntero del ratón sobre la

PROBAR CON LA HYPERTERMINAL…

Ejemplo 5Crear una aplicación gráfica en Processing que permita cambiar el color en una figura geométrica (cuadrado) y su fondo cuando se regule la perilla mediante un potenciómetro en la placa MSP430

Crear una aplicación gráfica en Processing que permita cambiar el color en una figura geométrica (cuadrado) y su fondo cuando se regule la perilla mediante un potenciómetro en la placa MSP430

Ejemplo 5import processing.serial.*;


void setup() {size(200, 200);String portName = Serial.list()[1]; //CAMBIAR PUERTO COMmyPort = new Serial(this, portName, 9600);

}

void draw(){colorMode(RGB, 200);if ( myPort.available() > 0) { // If data is available,val = myPort.read(); //Almacena el valor leido en el puertocolor bg = color(180, 50, (val-48)*25); //Configura un colorfill(bg); //Relleno de la figura geométricabackground((val-48)*25); //Colorea el fondo rect(50, 50, 100, 100,5); //x,y, largo, alto desde el origen esquina superior izquierda

}}


String portName = Serial.list()[1]; //CAMBIAR PUERTO COM

if ( myPort.available() > 0) { // If data is available,val = myPort.read(); //Almacena el valor leido en el puerto

48)*25); //Configura un color

48)*25); //Colorea el fondo rect(50, 50, 100, 100,5); //x,y, largo, alto desde el origen esquina superior izquierda

Encendido y apagado de un Crear una aplicación para encender el “A” desde processing

import processing.serial.*;Serial port;void setup() {size(255, 255);port = new Serial(this, Serial.list()[1], 9600);

}void draw(){background(255);

}void keyReleased() { //Manda al puerto la tecla pulsadaport.write(key);

}

Encendido y apagado de un led con ProcessingCrear una aplicación para encender el led cuando se presione la tecla

()[1], 9600);

() { //Manda al puerto la tecla pulsada

Creación de ejecutables con Una vez creado el programa:

1.- Seleccionar File>Export Application

Creación de ejecutables con Processing

Creación de ejecutables con

2.- Seleccionar la plataforma y opciones de maximizado

Creación de ejecutables con Processing

Sesion5 Processing

Documents

Transcript of Sesion5 Processing