Sei sulla pagina 1di 23
Comunicación g ráfica y artística con MSP430 y Processing Sistemas Inteligentes. AND ROID & Texas

Comunicación g ráfica y artística con MSP430 y Processing

Comunicación g ráfica y artística con MSP430 y Processing Sistemas Inteligentes. AND ROID & Texas Instruments

Sistemas Inteligentes. AND

con MSP430 y Processing Sistemas Inteligentes. AND ROID & Texas Instruments Teodoro Ibarra

ROID & Texas Instruments

Teodoro Ibarra teo1800@yahoo.com.m x

con MSP430 y Processing Sistemas Inteligentes. AND ROID & Texas Instruments Teodoro Ibarra teo1800@yahoo.com.m x
con MSP430 y Processing Sistemas Inteligentes. AND ROID & Texas Instruments Teodoro Ibarra teo1800@yahoo.com.m x
Processing
Processing

Processing

Processing
Processing Processing está basado en JAVA y es un lenguaje de programación de código abierto

Processing

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

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

crear imágenes, animaciones e interacci ones. Es similar al entorno de programa ción de Energia, Arduino
Figuras geométricas pri mitivas con Processing point() S y n t a x Para meters

Figuras geométricas pri mitivas con Processing

point()

Figuras geométricas pri mitivas con Processing point() S y n t a x Para meters point(x,

Synta x

Para meters

point(x, y)

x

float: x-coordinate of the point

y

float: y-coordinate of the point

Figuras geométricas pri mitivas con Processing line() S y n t a x Para meters

Figuras geométricas pri mitivas con Processing

line()

Figuras geométricas pri mitivas con Processing line() S y n t a x Para meters line(x1,

Synta x

Para meters

line(x1, y1, x2, y2)

x1

float: x-coordinate of the first point

y1

float: y-coordinate of the first point

x2

float: x-coordinate of the second point

y2

float: y-coordinate of the second point

Figuras geométricas pri mitivas con Processing rect() S y n t a x Para meters

Figuras geométricas pri mitivas con Processing

rect()

Figuras geométricas pri mitivas con Processing rect() S y n t a x Para meters rect(a,
Figuras geométricas pri mitivas con Processing rect() S y n t a x Para meters rect(a,
Figuras geométricas pri mitivas con Processing rect() S y n t a x Para meters rect(a,

Synta x

Para meters

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

a

float: x-coordinate of the rectangle by default

b

float: y-coordinate of the rectangle by default

c

float: width of the rectangle by default

d

float: height of the rectangle by default

r

float: radii for all four corners

tr

float: radius for top-right corner

br

float: radius for bottom-right corner

bl

float: radius for bottom-left corner

Figuras geométricas pri mitivas con Processing ellipse() S y n t a x Para meters

Figuras geométricas pri mitivas con Processing

ellipse()

Figuras geométricas pri mitivas con Processing ellipse() S y n t a x Para meters ellipse(a,

Synta x

Para meters

ellipse(a, b, c, d)

a

float: x-coordinate of the ellipse

b

float: y-coordinate of the ellipse

c

float: width of the ellipse by default

d

float: height of the ellipse by default

Retu rns

void

Ejemplo código en Proc essing void setup() { size(200, 200); } void draw() { background(255);

Ejemplo código en Proc essing

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 ne gro

}

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, diámetro x, al to y

Colores en Processing colorMode() S y n t a x Parameters c o l col

Colores en Processing

colorMode()

Colores en Processing colorMode() S y n t a x Parameters c o l col orMode(mode,
Colores en Processing colorMode() S y n t a x Parameters c o l col orMode(mode,
Colores en Processing colorMode() S y n t a x Parameters c o l col orMode(mode,

Syntax

Parameters

col

col orMode(mode, max) col orMode(mode, max1, max2, max3)

orMode(mode)

mode

int: Either RGB or HSB, corresponding to Red /Green/Blue and Hue /Saturation/Brightness

max

floa t: range for all color elements

max1

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

max2

floa t: range for the green or saturation dep ending on the current color mode

max3

floa t: range for the blue or brightness dep ending on the current color mode

Ejemplo 2 void setup() { size(200, 200); } void draw() {   colorMode(RGB, 200); for

Ejemplo 2

void setup()

{

size(200, 200);

}

void draw()

{

 

colorMode(RGB, 200); for (int i = 0; i < 200; i++) { //Realiza un b arrido por filas

 

for (int j = 0; j < 200; j++) { //Realiza un

barrido por columnas

stroke(i, j, 0); //Coloca el color de bord e acorde a los 3 colores básicos en RGB, //cambiar 0 por otro numero

point(i, j); //Coloca un punto

}

 

}

}

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

Curvas en Processing

curve()

Syntax

cur ve(x1, y1, x2, y2, x3, y3, x4, y4)

curve() Syntax cur ve(x1, y1, x2, y2, x3, y3, x4, y4) Parameters x1 floa t: coordinates

Parameters

x1

floa t: coordinates for the beginning control poi nt

y1

floa t: coordinates for the beginning control

x2

poi nt floa t: coordinates for the first point

y2

floa t: coordinates for the first point

x3

floa t: coordinates for the second point

y3

floa t: coordinates for the second point

x4

floa t: coordinates for the ending control point

y4

floa t: coordinates for the ending control point

Ejemplo 3 void setup () { size(200, 200); } void draw () { noFill(); stroke(255,

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 aplicación gráfica en Pro cessing que permita cambiar el color de

Ejemplo 4

Crear una aplicación gráfica en Pro cessing que permita cambiar el

color de relleno en una figura geo

presione un botón en la placa MSP 430

métrica (cuadrado) cuando se

Comunicación con Proc essing en Energia: /*----------------------------------------------------- I N S T I T U T

Comunicación con Proc essing 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 Z

COORDINACIÓN DE INVESTIGACIÓN, INNOVACIÓN Y DESARROLLO TECNOLÓGICO

-------------------------------------------------------

Diplomado en Diseño y Desarrollo de Aplicaciones Inteli gentes basadas en Android y Microcontroladores de Texas Instruments El código de este programa es de libre distribución

Autor: MSEEI Teodoro Ibarra Pérez

-------------------------------------------------------

Realiza un envío de caracteres a Processing para camb iar de color un rectángulo mediante RS232 Placa MSP430 LaunchPad de TI */ #define boton1 5 //Definición del pin 5 a la variable boto n1

void setup() { pinMode(boton1, INPUT_PULLUP); //Se declara una re sistencia pullup Serial.begin(9600); // Configura comunicación serie a 9 600 bits por segundo

}

void loop() { if (digitalRead(boton1)==HIGH){ //Si es presionado el b oton Serial.print(0); //Envía un byte equivalente a 48 en AS CII

}

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

delay(100);

}

Lectura del MSP430 en Processing import processing.serial.*; Serial myPort; // Create object from Serial class

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 PUERT O 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);

if (val == 48) {

fill(0);

// Set background to white // If the serial value is 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 código en Pr ocessing Crear una aplicación gráfica en Pro cessing que permita

Ejemplo 4 código en Pr ocessing

Crear una aplicación gráfica en Pro cessing 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 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);

myPort.write('H');

// change color and // 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 código en En ergia Crear una aplicación gráfica en Pro cessing que permita

Ejemplo 4 código en En ergia

Crear una aplicación gráfica en Pro cessing 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 port int ledPin = 2; // Set the pin to digital I/O 2

void setup() { pinMode(ledPin, OUTPUT); // Set pin as OU TPUT Serial.begin(9600); // Start serial communic ation at 9600 bps

}

void loop() {

if (Serial.available()) { // If data is available t o 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 tur n it OFF

}

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

}

Ejemplo 4 Crear una aplicación gráfica en Pro cessing que permita encender el led de

Ejemplo 4

Crear una aplicación gráfica en Pro cessing que permita encender el led de la placa MSP430 cuando se pase el puntero del ratón sobre la figura geométrica.

PROBAR CON LA HYPERTERMIN AL…

Ejemplo 5 Crear una aplicación gráfica en Pro cessing que permita cambiar el color en

Ejemplo 5

Crear una aplicación gráfica en Pro cessing que permita cambiar el color en una figura geométrica (cu adrado) y su fondo cuando se regule la perilla mediante un pote nciómetro en la placa MSP430

una figura geométrica (cu adrado) y su fondo cuando se regule la perilla mediante un pote
Ejemplo 5 import processing.serial.*; Serial myPort; // Create object from Serial clas s int val=0;

Ejemplo 5

import processing.serial.*;

Serial myPort; // Create object from Serial clas s

int val=0;

// Data received from the serial por t

void setup()

{

size(200, 200); String portName = Serial.list()[1]; //CAMBIAR myPort = new Serial(this, portName, 9600);

PUERTO COM

}

void draw()

{

colorMode(RGB, 200); if ( myPort.available() > 0) { // If data is availa ble, val = myPort.read(); //Almacena el valor leido en el puerto color bg = color(180, 50, (val-48)*25); //Confi gura un color fill(bg); //Relleno de la figura geométrica background((val-48)*25); //Colorea el fondo rect(50, 50, 100, 100,5); //x,y, largo, alto des de el origen esquina superior izquierda

}

}

Encendido y apagado d e un led con Processing Crear una aplicación para encende r

Encendido y apagado d e un led con Processing

Crear una aplicación para encende r 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],

}

void draw()

9600);

{ background(255);

}

void keyReleased() { //Manda al puerto la tecla pulsada port.write(key);

}

Creación de ejecutable s con Processing Una vez creado el programa: 1.- Seleccionar File>Export Application

Creación de ejecutable s con Processing

Una vez creado el programa:

1.- Seleccionar File>Export Application

Creación de ejecutable s con Processing Una vez creado el programa: 1.- Seleccionar File>Export Application
Creación de ejecutable s con Processing 2.- Seleccionar la plataforma y opciones de maximizado

Creación de ejecutable s con Processing

2.- Seleccionar la plataforma y opciones de maximizado

Creación de ejecutable s con Processing 2.- Seleccionar la plataforma y opciones de maximizado