14.Interface and application programming

This week’s assignment was to write a program that ran with an interface. I chose to use Processing to turn on and off an LED. I also tested interfacing tools as a group, which can be read about on my group site

Research

To begin this week, I look over Mrs.Morrow’s interfacing documentation to see how I should go about this week. I also took Dr.Taylor’s advice and checked out the program Processing to see if I wanted to use that to complete this week. Ginny Foster found this website that walks through programming with an interface.

Arduino code

For wiring, I set up an LED to ground and Pin 13 using a resistor (image 1). I then uploaded the following code to the Arduino after changing the pin number to align with the one I had chosen.

/*LED on and off using the processing IDE.
  created by the SriTu Tech team.
  Read the code below and use it for any of your creation
*/
void setup() {
  Serial.begin(9600);//enable serial communication
  pinMode(5, OUTPUT);//define arduino pin
}
void loop() {
  if (Serial.available() > 0) {//check serial value
    char led = Serial.read();//read serial value
    if (led == '1') {//check serial read 
      digitalWrite(5, HIGH);//LED on
    } else if (led == '0') {//check serial read 
      digitalWrite(5, LOW);//LED off
    }
  }
}

Once this code uploaded, I moved onto the Processing portion.

Processing 4

After installing the Processing 4 application, I ran this code after changing the port number to 14.

/*LED on and off using the processing IDE.
  The second time uploads this code.
  created by the SriTu Tech team.
  Read the code below and use it for any of your creation
*/
import processing.serial.*;//import serial communicate library

Serial myPort;//create serial object

int circleOneX, circleOneY;      // Position of button one
int circleX, circleY;  // Position of button two
int circleOnesize = 90;     // Diameter button one
int circleSize = 90;   // Diameter of button two

color currentColor, baseColor;//color variable
color circleOnecolor, circleColor;//color variable
color circleOneHighlight, circleHighlight;//color variable

boolean circleOneOver = false;
boolean circleOver = false;

PFont f;//font type
void setup() {
  size(300, 200);//screen size
  circleOnecolor = color(0);//set colors to variable
  circleOneHighlight = color(51);//set colors to variable
  circleColor = color(255);//set colors to variable
  circleHighlight = color(204);//set colors to variable
  baseColor = color(102);//set colors to variable
  currentColor = baseColor;

  circleX = width/2+circleSize/2+25;
  circleY = height/2;
  circleOneX = width/2-circleOnesize+15;
  circleOneY = height/2;

  printArray(PFont.list());//print fonts list your computer
  f = createFont("Ebrima Bold", 20);//Enter your font name
  textFont(f);


  String portName = "COM14";//Enter your COM port
  myPort = new Serial(this, portName, 9600);//select first port
  print(portName);
}

void draw() {
  update(mouseX, mouseY);//main method
  background(currentColor);//background color

  if (circleOneOver) {
    fill(circleOneHighlight);
  } else {
    fill(circleOnecolor);
  }
  stroke(255);
  ellipse(circleOneX, circleOneY, circleOnesize, circleOnesize);//drow circle one

  if (circleOver) {
    fill(circleHighlight);
  } else {
    fill(circleColor);
  }
  stroke(0);
  ellipse(circleX, circleY, circleSize, circleSize);//drow circle two

  textAlign(LEFT);
  fill(255);//black color
  text("LED OFF", 37, 110);//display text


  textAlign(RIGHT);
  fill(0);//white color
  text("LED ON", 255, 110);//display text

}

void update(int x, int y) {
  if ( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    circleOneOver = false;
  } else if (circleOneOver(circleOneX, circleOneY, circleOnesize) ) {
    circleOneOver = true;
    circleOver = false;
  } else {
    circleOver = circleOneOver = false;
  }
}

void mousePressed() {
  if (circleOver) {
    currentColor = circleColor;
    myPort.write('1');//send value one
    print("LED on");
  }
  if (circleOneOver) {
    currentColor = circleOnecolor;
    myPort.write('0');//send value ziro
    print("LED off");
  }
}

boolean circleOneOver(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

this resulted in the following:

From there, I decided to change different aspects of the interfacing code. I first wanted to change the colors of the ‘On’ and ‘Off’ circles. I looked through the code and found where the RGB values were for the circles. I then when to tools and selected the RGB values tool to show me what color the values I placed would be. After I changed the ‘On’ and ‘Off’ circles to different shades of purple as well as changing the ‘On’ button’s outline to white and the ‘Off’ button’s outline to black I was left with this code:

/*LED on and off using the processing IDE.
  The second time uploads this code.
  created by the SriTu Tech team.
  Read the code below and use it for any of your creation
*/
import processing.serial.*;//import serial communicate library

Serial myPort;//create serial object

int circleOneX, circleOneY;      // Position of button one
int circleX, circleY;  // Position of button two
int circleOnesize = 90;     // Diameter button one
int circleSize = 90;   // Diameter of button two

color currentColor, baseColor;//color variable
color circleOnecolor, circleColor;//color variable
color circleOneHighlight, circleHighlight;//color variable

boolean circleOneOver = false;
boolean circleOver = false;

PFont f;//font type
void setup() {
  size(300, 200);//screen size
  circleOnecolor = color(93, 43, 147);//set colors to variable
  circleOneHighlight = color(0, 0, 0);//set colors to variable
  circleColor = color(236, 39, 240);//set colors to variable
  circleHighlight = color(255, 255, 255);//set colors to variable
  baseColor = color(255, 185, 255);//set colors to variable
  currentColor = baseColor;

  circleX = width/2+circleSize/2+25;
  circleY = height/2;
  circleOneX = width/2-circleOnesize+15;
  circleOneY = height/2;

  printArray(PFont.list());//print fonts list your computer
  f = createFont("Ebrima Bold", 20);//Enter your font name
  textFont(f);


  String portName = "COM14";//Enter your COM port
  myPort = new Serial(this, portName, 9600);//select first port
  print(portName);
}

void draw() {
  update(mouseX, mouseY);//main method
  background(currentColor);//background color

  if (circleOneOver) {
    fill(circleOneHighlight);
  } else {
    fill(circleOnecolor);
  }
  stroke(255);
  ellipse(circleOneX, circleOneY, circleOnesize, circleOnesize);//drow circle one

  if (circleOver) {
    fill(circleHighlight);
  } else {
    fill(circleColor);
  }
  stroke(0);
  ellipse(circleX, circleY, circleSize, circleSize);//drow circle two

  textAlign(LEFT);
  fill(255);//black color
  text("LED OFF", 37, 110);//display text


  textAlign(RIGHT);
  fill(0);//white color
  text("LED ON", 255, 110);//display text

}

void update(int x, int y) {
  if ( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    circleOneOver = false;
  } else if (circleOneOver(circleOneX, circleOneY, circleOnesize) ) {
    circleOneOver = true;
    circleOver = false;
  } else {
    circleOver = circleOneOver = false;
  }
}

void mousePressed() {
  if (circleOver) {
    currentColor = circleColor;
    myPort.write('1');//send value one
    print("LED on");
  }
  if (circleOneOver) {
    currentColor = circleOnecolor;
    myPort.write('0');//send value ziro
    print("LED off");
  }
}

boolean circleOneOver(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

this resulted in the following:

I also wanted to test out changing the text. I changed the text to binary and set ‘On’ to 1 and ‘Off’ to 0. that left me with the following code:

/*LED on and off using the processing IDE.
  The second time uploads this code.
  created by the SriTu Tech team.
  Read the code below and use it for any of your creation
*/
import processing.serial.*;//import serial communicate library

Serial myPort;//create serial object

int circleOneX, circleOneY;      // Position of button one
int circleX, circleY;  // Position of button two
int circleOnesize = 90;     // Diameter button one
int circleSize = 90;   // Diameter of button two

color currentColor, baseColor;//color variable
color circleOnecolor, circleColor;//color variable
color circleOneHighlight, circleHighlight;//color variable

boolean circleOneOver = false;
boolean circleOver = false;

PFont f;//font type
void setup() {
  size(300, 200);//screen size
  circleOnecolor = color(93, 43, 147);//set colors to variable
  circleOneHighlight = color(0, 0, 0);//set colors to variable
  circleColor = color(236, 39, 240);//set colors to variable
  circleHighlight = color(255, 255, 255);//set colors to variable
  baseColor = color(255, 185, 255);//set colors to variable
  currentColor = baseColor;

  circleX = width/2+circleSize/2+25;
  circleY = height/2;
  circleOneX = width/2-circleOnesize+15;
  circleOneY = height/2;

  printArray(PFont.list());//print fonts list your computer
  f = createFont("Ebrima Bold", 20);//Enter your font name
  textFont(f);


  String portName = "COM10";//Enter your COM port
  myPort = new Serial(this, portName, 9600);//select first port
  print(portName);
}

void draw() {
  update(mouseX, mouseY);//main method
  background(currentColor);//background color

  if (circleOneOver) {
    fill(circleOneHighlight);
  } else {
    fill(circleOnecolor);
  }
  stroke(255);
  ellipse(circleOneX, circleOneY, circleOnesize, circleOnesize);//drow circle one

  if (circleOver) {
    fill(circleHighlight);
  } else {
    fill(circleColor);
  }
  stroke(0);
  ellipse(circleX, circleY, circleSize, circleSize);//drow circle two

  textAlign(CENTER);
  fill(255);//black color
  text("0", 37, 110);//display text


  textAlign(CENTER);
  fill(0);//white color
  text("1", 255, 110);//display text

}

void update(int x, int y) {
  if ( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    circleOneOver = false;
  } else if (circleOneOver(circleOneX, circleOneY, circleOnesize) ) {
    circleOneOver = true;
    circleOver = false;
  } else {
    circleOver = circleOneOver = false;
  }
}

void mousePressed() {
  if (circleOver) {
    currentColor = circleColor;
    myPort.write('1');//send value one
    print("LED on");
  }
  if (circleOneOver) {
    currentColor = circleOnecolor;
    myPort.write('0');//send value ziro
    print("LED off");
  }
}

boolean circleOneOver(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

That looked like this:

Reflection

I learned how to use the Processing application. As well as how to access the RBG values in the tools tab of the application. This week will be helpful to my final project because I might create an app to work with my butterfly so I can use this skill to work with my butterfly

---

Last update: May 10, 2023