Comunicacin grfica y artstica con MSP430 y Processing

Sistemas Inteligentes. ANDROID & Texas Instruments

Teodoro Ibarra teo1800@yahoo.com.mx

Processing

Processing
Processing est basado en JAVA y es un lenguaje de programacin de cdigo abierto y creado para las personas que deseen crear imgenes, animaciones e interacciones. Es similar al entorno de programacin de Energia, Arduino y Wiring.

Figuras geomtricas primitivas con Processing

point()
Syntax Parameters x point(x, y) float: x-coordinate of the point float: y-coordinate of the point

Figuras geomtricas primitivas con Processing

line()
Syntax Parameters x1 line(x1, y1, x2, y2) float: 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

y1

x2

y2

Figuras geomtricas primitivas con Processing

rect()
Syntax rect(a, b, c, d) rect(a, b, c, d, r) rect(a, b, c, d, tl, tr, br, bl) float: x-coordinate of the rectangle by default float: y-coordinate of the rectangle by default float: width of the rectangle by default float: height of the rectangle by default float: radii for all four corners float: radius for top-right corner float: radius for bottom-right corner float: radius for bottom-left corner Parameters a b c d r tr br bl

Figuras geomtricas primitivas con Processing

ellipse()
Syntax Parameters a ellipse(a, b, c, d) float: 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 void

Returns

Ejemplo cdigo en Processing

void setup() { size(200, 200); } void draw() { background(255); // Establece el color de fondo blanco utilizando escala de grises fill(0); //Establece el relleno del objeto negro point(10,10); line(50,180,150,180); rect(50, 50, 100, 100,5); //x,y, largo, alto desde el origen esquina superior izquierda fill(200); ellipse(50,50,100,50); //x,y, dimetro x, alto y }

Colores en Processing
colorMode()
Syntax colorMode(mode) colorMode colorMode(mode, max) colorMode colorMode(mode, max1, max2, max3) colorMode

Parameters mode

int: Either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightness float: 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

max max1

max2

max3

Ejemplo 2
void setup() { size(200, 200); } void draw() { colorMode(RGB, 200); for (int i = 0; i < 200; i++) { //Realiza un barrido por filas for (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 bsicos en RGB, //cambiar 0 por otro numero point(i, j); //Coloca un punto } } }

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

Parameters x1

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

y1 x2 y2 x3 y3 x4 y4

Ejemplo 3
void 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 4
Crear una aplicacin grfica en Processing que permita cambiar el color de relleno en una figura geomtrica (cuadrado) cuando se presione un botn en la placa MSP430

Comunicacin con Processing en Energia:

/*----------------------------------------------------INSTITUTO TECNOLGICO SUPERIOR DE JEREZ COORDINACIN DE INVESTIGACIN, INNOVACIN Y DESARROLLO TECNOLGICO ------------------------------------------------------Diplomado en Diseo y Desarrollo de Aplicaciones Inteligentes basadas en Android y Microcontroladores de Texas Instruments El cdigo de este programa es de libre distribucin Autor: MSEEI Teodoro Ibarra Prez ------------------------------------------------------Realiza un envo de caracteres a Processing para cambiar de color un rectngulo mediante RS232 Placa MSP430 LaunchPad de TI */ #define boton1 5 //Definicin del pin 5 a la variable boton1 void setup() { pinMode(boton1, INPUT_PULLUP); //Se declara una resistencia pullup Serial.begin(9600); // Configura comunicacin serie a 9600 bits por segundo } void loop() { if (digitalRead(boton1)==HIGH){ //Si es presionado el boton Serial.print(0); //Enva un byte equivalente a 48 en ASCII } else Serial.print(1); //Enva un byte equivalente a 49 en ASCII delay(100); }

Lectura del MSP430 en Processing

import processing.serial.*; Serial myPort; // Create object from Serial class int val=0; // Data received from the serial port void setup() { size(200, 200); // List all the available serial ports println(Serial.list()); // Open whatever port is the one you're using. String portName = Serial.list()[1]; //CAMBIAR PUERTO COM myPort = 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 white if (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); }

Ejemplo 4 cdigo en Processing

Crear una aplicacin grfica en Processing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratn sobre la figura geomtrica.
import processing.serial.*; Serial myPort; // Create object from Serial class int 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 and myPort.write('H'); // send an H to indicate mouse is over square } else { // If mouse is not over square, fill(0); // change color and myPort.write('L'); // send an L otherwise } rect(50, 50, 100, 100); // Draw a square } boolean mouseOverRect() { // Test if mouse is over square return ((mouseX >= 50) && (mouseX <= 150) && (mouseY >= 50) && ( (mouseY <= 150)); }

Ejemplo 4 cdigo en Energia

Crear una aplicacin grfica en Processing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratn sobre la figura geomtrica.
char val; // Data received from the serial port int ledPin = 2; // Set the pin to digital I/O 2 void setup() { pinMode(ledPin, OUTPUT); // Set pin as OUTPUT , Serial.begin(9600); // Start serial communication at 9600 bps } void loop() { if (Serial.available()) { // If data is available to read, val = Serial.read(); // read it and store it in val } if (val == 'H') { // If H was received digitalWrite(ledPin, HIGH); // turn the LED on } else { digitalWrite(ledPin, LOW); // Otherwise turn it OFF } delay(100); // Wait 100 milliseconds for next reading }

Ejemplo 4
Crear una aplicacin grfica en Processing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratn sobre la figura geomtrica. PROBAR CON LA HYPERTERMINAL

Ejemplo 5
Crear una aplicacin grfica en Processing que permita cambiar el color en una figura geomtrica (cuadrado) y su fondo cuando se regule la perilla mediante un potencimetro en la placa MSP430

Ejemplo 5
import processing.serial.*; Serial myPort; // Create object from Serial class int val=0; // Data received from the serial port void setup() { size(200, 200); String portName = Serial.list()[1]; //CAMBIAR PUERTO COM myPort = 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 puerto color bg = color(180, 50, (val-48)*25); //Configura un color 48)*25); fill(bg); //Relleno de la figura geomtrica background((val-48)*25); //Colorea el fondo 48)*25); rect(50, 50, 100, 100,5); //x,y, largo, alto desde el origen esquina superior izquierda } }

Encendido y apagado de un led con Processing

Crear una aplicacin para encender el led cuando se presione la tecla A desde processing
import processing.serial.*; Serial port; void setup() { size(255, 255); port = new Serial(this, Serial.list()[1], 9600); ()[1], } void draw() { background(255); } void keyReleased() { //Manda al puerto la tecla pulsada () port.write(key); }

Creacin de ejecutables con Processing

Una vez creado el programa: 1.- Seleccionar File>Export Application

Creacin de ejecutables con Processing

2.- Seleccionar la plataforma y opciones de maximizado