Transcript
Sistemas Inteligentes. ANDROID & Texas Instruments
Comunicación gráfica y artísticacon MSP430 y Processing
Teodoro Ibarrateo1800@yahoo.com.mx
Sistemas Inteligentes. ANDROID & Texas Instruments
Comunicación gráfica y artísticacon MSP430 y Processing
teo1800@yahoo.com.mx
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
Figuras geométricas primitivas con Processing
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
Figuras geométricas primitivas con Processing
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
Figuras geométricas primitivas con Processing
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.*;
Serial myPort; // Create object from Serial classint val=0; // Data received from the serial port
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
}}
Serial myPort; // Create object from Serial classint val=0; // Data received from the serial port
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
top related