15. Interface and Application Programming¶
Objective¶
As group assignment we have to compare as many tool options as possible this week.
As individual assignment I have to write an application that interfaces a user with an input and/or output device that I made.
Files, Tools and Planning¶
Files
Arduino file: Cat face
Processing file: Cat face
Tools
Arduino IDE
Processing
Planning
Upload Trello screenshot here
Group Assignment¶
Find it here in our group page
Individual Assignment¶
As part of this week’s assignment is to create interfaces to my boards using serial communication. So for this purpose I decided to use my ShooBot Board made for my final project.
Processing¶
Step 1. My instructor Joel suggested that I try using Processing as an interface.
I first downloaded the Processing from this link
I followed the instruction from the tutorials to install and start working on it.
Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.
First I tried learning the basics of the application by trying out the first program given in the tutorial. It is just one line of code and I entered it into the editor and pressed the RUN symbol(The Play Button).
Then I got the output on another pop up screen and I decided to check the Parameters of the ellipse function and found it here
ELLIPSE
Syntax: ellipse(a, b, c, d)
Parameters:
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
Next I tried another simple program given in the tutorial. “This program creates a window that is 480 pixels wide and 120 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black.”-Tutorial Explanation
I moved my mouse and created a beautiful pattern.
I decided to edit this program. First I changed the output window size to 720 by 360.
I wanted to change the colour to the green colour that I use as a theme colour for my documentation. I knew its Hex Code as #145D53. So I googled it and found its RGB as 20, 93, 83. I gave this input to the function fill and pressed run.
On moving the mouse I got this beautiful pattern.
Next I changed the second colour to a lighter green
This beautiful pattern was the output.
By now I was comfortable with the program and wanted to try out something fun.
Step 2. I decided to draw a cat face using simple geometric shapes.
Here are the Parameters for the shapes I used.
ARC
Syntax:arc(a, b, c, d, start, stop)
arc(a, b, c, d, start, stop, mode)
Parameters:
a float: x-coordinate of the arc’s ellipse
b float: y-coordinate of the arc’s ellipse
c float: width of the arc’s ellipse by default
d float: height of the arc’s ellipse by default
start float: angle to start the arc, specified in radians
stop float: angle to stop the arc, specified in radians
LINE
To color a line, use the stroke() function. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function.
Syntax:line(x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2)
Parameters:
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
z1 float: z-coordinate of the first point
z2 float: z-coordinate of the second point
TRIANGLE
Syntax:triangle(x1, y1, x2, y2, x3, y3)
Parameters:
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
x3 float: x-coordinate of the third point
y3 float: y-coordinate of the third point
Setting up Serial Communication with my Board and Processing.¶
I wanted to make an interface that display the readings from the ultrasonic sensor on the ShooBot board I made for my final project.
This is the ShooBot board I designed for my final project.
Step 3:First I opened the Arduino app and found the example code from File > Example, In the folder libraries under Serial Library. I first used the SimpleRead library.
Then the simple read code appeared on the screen.
Next I changed the portname to the corresponding port where I will connect the board to the PC through FTDI Cable, and also the baud rate.
Next I took the original program I wrote for my Final Project and took parts from it and the parts from the Example program for serial communication to make this program.
I connected the Fab Tiny ISP Programmer to the ShooBot Board. I compiled the program and uploaded it to the ShooBot. Then I removed the Fab Tiny ISP Programmer and connected the board to the computer using FTDI cable, gave 12v, 5A power and I pressed the serial monitor on the arduino program to get this error message.
I realised there is no FTDI driver in this computer and installed it.
Again I connected the board to the computer using FTDI cable and pressed the serial monitor on the arduino program to get no output at all.
I thought there was something wrong with my program. So I uploaded the original ShooBot program again and connected this with the
Arduino Code¶
#include <SoftwareSerial.h>
#define trigPin 3
#define echoPin 2
#define RX 1
#define TX 0
SoftwareSerial window(RX, TX);
void setup()
{
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
window.begin(9600);
}
void loop()
{
long duration, distance;
digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
duration = pulseIn(echoPin, HIGH);
distance = (duration/2) / 29.1;
window.println(distance);
if(distance<50)
{
window.write(1);
}
else
{
window.write(2);
}
delay(500);
}
Processing Code¶
import processing.serial.*; Serial myPort; // Create object from Serial class int val; // Data received from the serial port void setup() { size(530, 530); myPort = new Serial(this, "/dev/ttyUSB0", 9600); } void draw() { if (myPort.available() > 0) { val = myPort.read(); // read it and store it in val println(val); } if (val==2) { fill(255); } if(val==1) { fill(20,93,83); } rect(0,0,530,530); //outer rectangle ellipse(260, 260, 480, 480);//face ellipse(200, 200, 80, 80);//left eye ellipse(340, 200, 80, 80);//right eye fill(0); line(80, 310, 237, 300);//WHISKER TOP LEFT line(300, 300, 450, 310);//WHISKER TOP RIGHT line(145, 380, 237, 320);//WHISKER BOTTOM LEFT line(380, 380, 295, 320);//WHISKER BOTTOM RIGHT line(45,150,35,35);//left ear left line line(35,35,150,45);//left ear right line triangle(55, 115, 55, 55, 115, 55);//left ear inner triangle line(465,135,460,35);//right ear right line line(460,35,365,45);//right ear left line triangle(460, 115, 400, 55, 450, 55);//ear inner triangle arc(269, 365, 40, 40, -TWO_PI,-PI); //smile ellipse(215,220,20,20);//Left eye center ellipse(325,220,20,20);//right eye center ellipse(270, 300, 40, 40);//nose noFill(); arc(320, 325, 100, 100, HALF_PI, PI); //MOUTH RIGHT arc(220, 325, 100, 100, 0, HALF_PI);//MOUTH lEFT arc(240, 510, 400, 400, PI+QUARTER_PI,PI+HALF_PI);//WHISKER LEFT arc(300, 510, 400, 400, PI+HALF_PI,PI+HALF_PI+QUARTER_PI);//WHISKER RIGHT }
Working¶
I connected the ShooBot board to the USB tiny and uploaded the program, next I connected the FTDI cable on to the board with other end on the computer.
Mistakes and Learnings¶
I lost a lot of time thinking there was some problem with my board or the program, all the while the problem was with my computer. On hind sight, if I had made a simple test program and run it I would have understood that the seriol communication problem with my computer early on.
What made me proud¶
Although the cat face looks like a toddler’s drawing, it made me proud that I could do it as my first processing program. I was later on able to create a lot of patterns using processing.