Interface and Application Programming

Group Assignment

1. Processing: Processing is both a software sketchbook and a programming language designed for creating interactive media, such as visual arts, audio, video, and multimedia applications. It offers an intuitive interface, an integrated development environment (IDE), and a collection of libraries that simplify coding. Artists, designers, and programmers can unleash their creativity and explore new possibilities in the digital realm using Processing. It is an open-source project that supports cross-platform compatibility, fosters community collaboration, and encourages innovation.

2. MIT App Inventor: MIT App Inventor is a cloud-based tool that enables the creation of Android mobile apps without prior programming experience. Its drag-and-drop visual interface empowers users to assemble pre-built components, including buttons, text boxes, and images, to build interactive apps effortlessly. Additionally, MIT App Inventor offers a block-based programming language, allowing users to define app behavior using intuitive visual blocks. The platform provides comprehensive tutorials, documentation, and sample apps to support beginners and allows testing on real devices through a companion app. Overall, MIT App Inventor empowers users to transform their app ideas into reality with ease.

3. Jupyter: Jupyter is an open-source web application that facilitates the creation and sharing of documents containing live code, equations, visualizations, and explanatory text. It is extensively utilized in scientific computing, data science, and machine learning for interactive data analysis and visualization. Jupyter notebooks enable users to combine code, text, and multimedia content within a single document that can be easily shared. Supporting multiple programming languages, including Python, R, Julia, and more, Jupyter notebooks have gained popularity among researchers, educators, and data scientists as a versatile tool.

4. Bubble: Bubble is a visual programming platform that empowers users to develop web and mobile applications without the need for traditional coding. Its drag-and-drop interface facilitates the creation of user interfaces and the definition of app functionalities. Bubble offers a wide range of customization options, including responsive layouts, animations, and integrations with third-party services. Additionally, it provides hosting services and scalable infrastructure to launch and operate apps in the cloud. With Bubble, users can build sophisticated applications capable of processing transactions, sending emails, storing and displaying data, and more, all without writing a single line of code.

After researching and learning about Processing, MIT App Inventor, Jupyter, and Bubble, I found Processing to be the most interesting and relevant tool for my needs. Therefore, I have decided to focus on learning and working with Processing.

Individual Assignment

For this week’s assignment, I will be utilizing the touch sensor board that I milled during the previous week’s task, input device week.

This board features three capacitive sensors. My plan is to create an interactive display where touching a sensor will trigger the appearance of a circle in various colors. When the sensor is touched again, the circle will disappear.

I will be using the same code that was developed for the Arduino during the input device week. For more detailed information, you can refer to the code and documentation from that particular week’s assignment.

Arduino Code

#include "Adafruit_FreeTouch.h"
Adafruit_FreeTouch qt_1 = Adafruit_FreeTouch(A1, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
Adafruit_FreeTouch qt_2 = Adafruit_FreeTouch(SCK, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
Adafruit_FreeTouch qt_3 = Adafruit_FreeTouch(MOSI, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);

void setup() {

 Serial.begin(115200);

}

int qt_Threshold = 850;

void loop() {
  int qt1 = 0;
  int qt2 = 0;
  int qt3 = 0;

  if (! qt_1.begin())
    Serial.println("Failed to begin qt");
  if (! qt_2.begin())
    Serial.println("Failed to begin qt");
  if (! qt_3.begin())
    Serial.println("Failed to begin qt");



   qt1 = qt_1.measure();

  if (qt1 >= qt_Threshold) {
   Serial.println("Touched1");
   delay (100);
  }
  else {
    Serial.println("Untouched1");
    delay (100);

  }

    qt2 = qt_2.measure();

  if (qt2 >= qt_Threshold) {
    Serial.println("Touched2");
    delay (100);

  }

   else {
    Serial.println("Untouched2");
    delay (100);

  }

  qt3 = qt_3.measure();

  if (qt3 >= qt_Threshold) {
    Serial.println("Touched3");
    delay (100);

  }
   else {
    Serial.println("Untouched3");
    delay (100);
  }
}

Processing Code

import processing.serial.*;

Serial serial;


boolean touch1Pressed = false;  // Flag to indicate if touch 1 is pressed
boolean touch2Pressed = false;  // Flag to indicate if touch 2 is pressed
boolean touch3Pressed = false;  // Flag to indicate if touch 3 is pressed


boolean circle1Visible = false;  // Flag to indicate if the red circle is currently visible
boolean circle2Visible = false;  // Flag to indicate if the green circle is currently visible
boolean circle3Visible = false;  // Flag to indicate if the yellow circle is currently visible

void setup() {
  size(800, 800);  // Set up the Processing canvas size

  // Replace "COM3" with the appropriate serial port for your microcontroller

  serial = new Serial(this, "COM3", 115200);

  serial.bufferUntil('\n'); // Read data when newline character is received
}

void draw() {

  if (touch1Pressed) {
    if (!circle1Visible) {
      background(255);  // Clear the canvas
      fill(255, 0, 0);  // Set fill color to red
      ellipse(width/2 - 100, height/2, 100, 100);  // Draw a red circle at the left of the canvas
      circle1Visible = true;  // Set the flag to indicate the red circle is now visible
    } else {
      background(255);  // Clear the canvas
      circle1Visible = false;  // Set the flag to indicate the red circle is no longer visible
    }
  }

  if (touch2Pressed) {
    if (!circle2Visible) {
      background(255);  // Clear the canvas
      fill(0, 255, 0);  // Set fill color to green
      ellipse(width/2 + 100, height/2, 100, 100);  // Draw a green circle at the right of the canvas
      circle2Visible = true;  // Set the flag to indicate the green circle is now visible
    } else {
      background(255);  // Clear the canvas
      circle2Visible = false;  // Set the flag to indicate the green circle is no longer visible
    }
  }

  if (touch3Pressed) {
    if (!circle3Visible) {
      background(255);  // Clear the canvas
      fill(0, 0, 0);  // Set fill color to green
      ellipse(width/2 + 100, height/2, 100, 100);  // Draw a yellow circle at the right of the canvas
      circle3Visible = true;  // Set the flag to indicate the green circle is now visible
    } else {
      background(255);  // Clear the canvas
      circle3Visible = false;  // Set the flag to indicate the green circle is no longer visible
    }
  }

  touch1Pressed = false;  // Reset the flag after drawing
  touch2Pressed = false;  // Reset the flag after drawing
  touch3Pressed = false;  // Reset the flag after drawing

}

void serialEvent(Serial port) {
  String data = port.readStringUntil('\n');
  if (data != null) {
    data = data.trim(); // Remove leading/trailing whitespace
    if (data.equals("Touched1")) {
      touch1Pressed = true;  // Set the flag to indicate touch 1 is pressed
    } else if (data.equals("Touched2")) {
      touch2Pressed = true;  // Set the flag to indicate touch 2 is pressed
    }else if (data.equals("Touched3")) {
      touch3Pressed = true;  // Set the flag to indicate touch 3 is pressed
    }
  }
}

This is an explanation of the code and the functions used:

The provided code utilizes the Processing programming language and is designed to work with an Arduino microcontroller. Here’s an overview of the code and the functions it includes:

1. Serial Communication Setup: The Serial library is imported to establish communication between the Processing sketch and the Arduino via a serial connection.

2. Setup Function: The setup() function is called once at the start of the sketch. It sets up the size of the Processing canvas and initializes the serial communication by specifying the appropriate serial port and baud rate.

3. Draw Function: The draw() function is continuously executed in a loop, updating the canvas based on the touch sensor inputs.

4. Touch Sensor Inputs: The code checks the state of each touch sensor (touch1Pressed, touch2Pressed, touch3Pressed) and performs different actions based on their states.

5. Drawing the Circles: If a touch sensor is pressed and its corresponding circle is not currently visible, a circle of a specific color is drawn at a particular position on the canvas using the ellipse() function. The visibility flag for that circle is set to true. If the touch sensor is pressed again and the circle is already visible, the canvas is cleared (background(255)) and the visibility flag is set to false.

6. Resetting Flags: After each draw cycle, the touch sensor flags are reset to false to prepare for the next cycle.

Final Result

In summary, the code enables an interactive display where pressing the touch sensors triggers the appearance and disappearance of circles on the canvas, each with a different color. The communication between the Arduino and Processing occurs via the serial connection, allowing the touch sensor inputs to control the visual output on the canvas.

The first touch sensor will display a black circle, the second one will display a green circle, and the last one will show a red circle.

---

Last update: June 26, 2023