Skip to content

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

1

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).

2

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

3



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

4


I moved my mouse and created a beautiful pattern.

5


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.

6


On moving the mouse I got this beautiful pattern.

7


Next I changed the second colour to a lighter green

8


This beautiful pattern was the output.

9


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

10

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.

11

12


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.

As I’m using ATmega328 microcontroller, I added the following as given here 
“https://mcudude.github.io/MiniCore/package_MCUdude_MiniCore_index.json”
on Additional Boards Manager URLs: in settings of preferences under Files in main menu. 
Now I clicked the Boards Manager… in Boards: “Arduino Uno” under Tools in the main menu. 
I searched for mega and I got MiniCore by MCUdude listed underneath. 
I installed this and got the list of mega microcontrollers in Boards under Tools in the main menu.


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.