Skip to content

16. Interface and application programming

This week I worked on Interface and Application Programming

Group Assignment

From the following link you can access the: Group Assignment

Individual Assignment

I was looking for the best software option to design interfaces but for beginners. I found Processing , a software that was also born as an alternative for teaching programming fundamentals in a visual context. It can be downloaded from the following link:

https://processing.org/

Then, my instructor recommended me to check this link from Arduino Education that presents several examples of Visualization with Arduino and Processing and to try all the examples to understand how the Processing software works.

https://www.arduino.cc/education/visualization-with-arduino-and-processing

This way I can create an interface for my PCB board from the INPUTS assignment.

https://fabacademy.org/2022/labs/esan/students/hugocesar-gomez/assignments/week11/

First I had to reprogram my PCB to be able to read the signals through the serial port. The code I used is the following:

#include <SoftwareSerial.h>
#define rxPin 1
#define txPin 2
#define sensor 2
SoftwareSerial mySerial(rxPin, txPin);

void setup() {
  // put your setup code here, to run it once:
  mySerial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
  int value = analogRead(sensor);
  mySerial.println(value);
}

I tried to modified the output range to increase the sensitivity, but I couldn’t. The range is too low because is a temperature sensor.

Well, then I burned my PCB, literally, so I had to change the ATtiny45.

After change the uC I programmed my PCB again.

From the examples I did my tests with the particle system and Interactive ellipse examples.

Particle System

int n = 1000; // number of points 

float[] m = new float[n]; // make a new floating-point list 
float[] x = new float[n];
float[] y = new float[n];
float[] vx = new float[n];
float[] vy = new float[n];
float[] redchannel = new float[n]; 
float[] bluechannel = new float[n];
float[] greenchannel = new float[n];
float[] shape = new float[n];

import processing.serial.*;

Serial myPort; // Creates an object of class Serial
static String val; // Data received from serial port
int sensorVal = 0;

//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

void setup() {
  fullScreen();
  fill(0,10);
  reset();// executing reset on click. 10000 random values are entered 
  String portName = "COM10";// Change the number (in this case ) to match the corresponding port number connected to your Arduino. 
  myPort = new Serial(this, portName, 1200);
}

//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

void draw() {
   if ( myPort.available() > 0) { // If the data is available,
  val = myPort.readStringUntil('\n'); 
  try {
   sensorVal = Integer.valueOf(val.trim());
  }
  catch(Exception e) {
  ;
  }
  println(sensorVal); // read it and store it in vals!
  }  
  noStroke();
  fill(0,30);
  rect(0, 0, width, height); // black background 

  for (int i = 0; i < n; i++) { // execute loop 10,000 times
    float dx = mouseX - x[i]; // distance of the mouse 
    float dy = sensorVal - y[i];

    float d = sqrt(dx*dx + dy*dy); // calculate the distance between the points and the mouse 
    if (d < 1) d = 1; 

    float f = cos(d * 0.06) * m[i] / d*2; //decide whether to move towards or away from the mouse 

    vx[i] = vx[i] * 0.4 - f * dx; //changing the velocity so that it moves toward the ring. 
    vy[i] = vy[i] * 0.2 - f * dy;
  }

  for (int i = 0; i < n; i++) {
    x[i] += vx[i];
    y[i] += vy[i];

    if (x[i] < 0) x[i] = width;
    else if (x[i] > width) x[i] = 0;

    if (y[i] < 0) y[i] = height
    else if (y[i] > height) y[i] = 0;

    if (m[i] < 0) fill(bluechannel[i], greenchannel[i] , 255);
    otherwise fill(255, bluechannel[i],redchannel[i]);

      if (shape[i] > 2) fill(bluechannel[i], greenchannel[i] , 255);
    otherwise, fill(255, bluechannel[i],redchannel[i]);

    if (shape[i] > 2) rect(x[i], y[i],10,10);
else if (shape[i] > 1 && shape[i] <=2) rect

Then I tested The Interactive ellipse code

import processing.serial.*;

Serial myPort;  // Create object from Serial class
static String val;    // Data received from the serial port
int sensorVal = 0;

void setup()
{
   size(720, 480);
   noStroke();
  noFill();
  String portName = "COM10";// Change the number (in this case ) to match the corresponding port number connected to your Arduino. 

  myPort = new Serial(this, portName, 1200);
}

void draw()
{
  if ( myPort.available() > 0) {  // If data is available,
  val = myPort.readStringUntil('\n'); 
  try {
   sensorVal = Integer.valueOf(val.trim());
  }
  catch(Exception e) {
  ;
  }
  println(sensorVal); // read it and store it in vals!
  }  
 background(0);
  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
  float c = map(sensorVal, 0, width, 0, 400);
  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
  float d = map(sensorVal, 0, width, 40,500);
  fill(255, c, 0);
  ellipse(width/2, height/2, d, d);   

}

In both cases I had to change the port Name for COM10 and the baud rate for 1200. I saw that my parter Lesly did the same.

https://fabacademy.org/2020/labs/esan/students/lesly-ramirez/assignments/week15/#programming

Files


Last update: December 1, 2022