Assignment Brief:

1. Write an application that interfaces a user with an input &/or output device that you made
2. As a group, Try out and compare multiple tools for interfacing with devices.

Lets begin

I started this weeks major work from, referring to the documentation pages of Siddharth Himanshi and Jesal sir. The concept was very knew to me so revised some of the basic stuff that came up during the lecture.

What are Interfaces?

Interfaces refer to the connection points or boundaries where two systems, components, or entities interact. In computing, an interface defines how different software components communicate through a set of rules or functions—without needing to know the internal code or structure of each other.

What does API stand for?

API stands for Application Programming Interface. It’s a specific type of interface that defines how software programs interact. It provides developers with a standard way to request data or services from another application or platform.

What is an API?

An API is a set of defined methods and protocols that allows software components to talk to each other. APIs make it possible for one program to access features or data of another without needing to understand its internal code—similar to how apps use third-party services (e.g., weather data, maps, payments).



Other Terminologies are: API Analogy: An API works like a waiter, passing your request to the server (kitchen) and bringing back the response.
What does an API do? It acts as a secure middleman between client and server, handling requests and responses.
Security and Access: APIs control data access based on user authentication, keeping backend systems protected.

Processing using the Xiao RP2040

Processing is a Java-based programming language and environment primarily used for creating visuals and sketches. It is ideal for developing interactive graphics and offers libraries that support not only graphics but also sound and video processing.

In the context of APIs, Processing refers to handling and transforming data between requests and responses. It involves taking the input (like data from a user or device), processing it on the server, and then sending the result back to the client through the API.

You can download the software for here: Processing website.

Mouse to led blink

I started by looking at Siddharth's document. The task was to create a circle, and then code the RP2040 so that when the mouse clicks within the circle, the built-in RGB LED on the Xiao lights up. The process for which was:

1) Code for Ardiuno IDE

            #include 

                #define NUMPIXELS 1
                #define PIXELPOWER 11
                #define PIXELPIN 12
                
                Adafruit_NeoPixel pixel(NUMPIXELS, PIXELPIN, NEO_GRB + NEO_KHZ800);
                
                void setup() {
                  Serial.begin(9600); // Set baud rate to match with Processing or Serial Monitor
                  pinMode(PIXELPOWER, OUTPUT);
                  digitalWrite(PIXELPOWER, HIGH);
                
                  pixel.begin();
                  pixel.show(); // Initialize all pixels to 'off'
                }
                
                void loop() {
                  if (Serial.available() >= 2) { // Wait until 2 bytes are available
                    int g = Serial.read(); // read green
                    int r = Serial.read(); // read red
                
                    Serial.print("Red: ");
                    Serial.print(r);
                    Serial.print(" Green: ");
                    Serial.println(g);
                
                    pixel.setPixelColor(0, pixel.Color(r, g, 128)); // fixed blue value
                    pixel.show();
                    delay(200);
                
                    pixel.setPixelColor(0, pixel.Color(0, 0, 0)); // turn off
                    pixel.show();
                  }
                }

2) Processing IDE

                    import processing.serial.*;

Serial serial;

void setup() {
  size(300, 300); // Set the size of the canvas
  String portName = Serial.list()[0]; // Get the first available serial port
  serial = new Serial(this,portName, 9600); // Open the serial port
  print(Serial.list()[0]);
}

void draw() {
  // Draw the canvas
  background(255);
  ellipse(width/2, height/2, 100, 100); // Draw a circle representing the LED

  // Check for mouse click
  if (mousePressed) {
    if (dist(mouseX, mouseY, width/2, height/2) < 50) {
      serial.write('1'); // Send '1' to turn on the LED
    } else {
      serial.write('0'); // Send '0' to turn off the LED
    }
  }
}
                

Processing interface with circle



Mouse to inbuild Xaio LED blink

RGB spectrum

Next, I experimented with the RGB spectrum. The idea was that the Processing code would generate a color spectrum, and depending on where I clicked, it would send the corresponding RGB values to the RP2040, causing the inbuilt RGB LED to light up in that color.

Like the previous steps I upload the below codes to Processing and Arduino respectively.

Processing Code:

                    import processing.serial.*;

                    Serial serial;
                    
                    void setup() {
                      
                      size(400, 400); // Set the size of the canvas
                      String portName = Serial.list()[0]; // Get the first available serial port
                      serial = new Serial(this, portName, 9600); // Open the serial port
                      print(Serial.list()[0]);
                      
                      int step = 50;
                      noStroke();
                    
                      //drawing the colour interface
                      for (int j = 0; j<=height; j+=step/2)
                      {
                        for (int i = 0; i<=width; i+=step/2)
                        {
                          int r = i;
                          int g = j;
                          int r_ = int(map(r, 0, width, 0, 255));
                          int g_ = int(map(g, 0, height, 0, 255));
                          fill(r_, g_, 128);
                          ellipse(r, g, step, step);
                          //print("g = ", r," g = ", g, " ");
                        }
                      }
                    }
                    
                    void draw() {
                    
                      if (mousePressed) {
                        
                        //picking up colour based on location
                        
                        int r_ = int(map(mouseX, 0, width, 0, 255));
                        int g_ = int(map(mouseY, 0, height, 0, 255));
                        serial.write(r_);
                        serial.write(g_);
                        print(r_, " ", g_, " ");
                        println();
                      }
                    }

Arduino Code: Remember to install the NeoPixel Library if not installed yet.

                    #include 
                        #define numpixels 1
                        #define pixelpower 11
                        #define pixelpin 12
                        Adafruit_NeoPixel pixel(numpixels, pixelpin, NEO_GRB + NEO_KHZ800);
                        
                        
                        void setup() {
                          Serial.begin(9600); // Set the baud rate to match the Processing sketch
                        
                          pinMode(pixelpower, OUTPUT);
                          pixel.begin();
                          digitalWrite(pixelpower, HIGH);
                        
                        }
                        
                        void loop() {
                          if (Serial.available())
                          {
                            char g = Serial.read();
                            char r = Serial.read();
                            Serial.print(r);
                            Serial.print(" ");
                            Serial.println(g);
                        
                            int r_ = int(r);
                            int g_ = int(g);
                        
                            pixel.setPixelColor(0, pixel.Color(r_, g_, 128));
                            pixel.show();
                            delay(200);
                            pixel.setPixelColor(0, pixel.Color(0, 0, 0));
                            pixel.show();
                          }
                        }

RGB 1



RGB 2



RGB 3



RGB 4

Blynk.io

Blynk is an Internet of Things (IoT) platform that enables you to control and monitor hardware devices remotely. It provides both mobile and web applications for seamless interaction with connected hardware. Blynk is relatively easy to grasp, and its drag-and-drop graphical interface makes it very user-friendly.

You can download the website from: Blynk.io. Chinmay Sir guided us in the process.

In the virtual data stream, add different components that you will use from this app interface to the hardare side. I planned to use a a switch to ON/OF an LED and control the LED brightness on PWM using a potentiometer. Thus in ther Virtual data stream, I created three virtual pins as LED, potentiometer and PWM.

        //--------------------------------------------------------------------------------------------------------------------------
//Datastreams on Blynk - 
// V0 - Potentiometer
// V1 - LED Switch
// V2 - PWM LED
//--------------------------------------------------------------------------------------------------------------------------
#define BLYNK_TEMPLATE_ID "TMPL3IeBNw10l"
#define BLYNK_TEMPLATE_NAME "IOT"
#define BLYNK_AUTH_TOKEN "LTNojxLRteSgUs7fUhevABd4pxpZb3-I"
//--------------------------------------------------------------------------------------------------------------------------
// Comment this out to disable prints and save space
#define BLYNK_PRINT Serial
//--------------------------------------------------------------------------------------------------------------------------
// Initialize required libraries 
#include             
#include 
//--------------------------------------------------------------------------------------------------------------------------
char auth[] = BLYNK_AUTH_TOKEN;
char ssid[] = "HONOR_X9b_5G";    // Wifi name. Case, space sensitive  
char pass[] = "shrey231004";  // Wifi passowrd. Case, space sensitive. Set password to "" for open networks.
//--------------------------------------------------------------------------------------------------------------------------
int potValue = A0;  // Assign pin A0 to read potentiometer value

void setup() {
  pinMode(potValue, INPUT);                                 // Define pin A0 as input. (Potentiometer)
  pinMode(D4, OUTPUT);                                      // Define pin D4 as output. (LED_Switch)
  pinMode(D2, OUTPUT);                                      // Define pin D2 as output. (PWM_LED)
  Serial.begin(115200);
  Blynk.begin(auth, ssid, pass, "blynk.cloud", 80);                          // Initialize Blynk parameters
}
//--------------------------------------------------------------------------------------------------------------------------
// Virtual Pin V1. This function takes value from pin V0 from Blynk and updates it on ESP board. 
BLYNK_WRITE(V1) {
 int pinValue = param.asInt(); // Assigning incoming value from pin V1 to a variable
  if (pinValue == 1) {         // 
   digitalWrite(D4, HIGH);      
  }
     else {
      digitalWrite(D4, LOW);
     }                        
}
//--------------------------------------------------------------------------------------------------------------------------
// Virtual Pin V2. This function takes value from pin V2 from Blynk and updates it on ESP board. 
BLYNK_WRITE(V2) {
 int PWMValue = param.asInt(); // Assigning incoming value from pin V2 to a variable
 analogWrite (D2,PWMValue);           
}
//--------------------------------------------------------------------------------------------------------------------------
void loop() {
  Blynk.run();
  int potValue  = analogRead(A0);    // Read analog value from potentiometer on pin A0
  Blynk.virtualWrite(V0, potValue);  // Sends Analog value to Gauge on datastream V0          
}
      

The above didnt work. The status of my Blyk.io was offline. Thus, I connected my Laptop with a stronger WIFI, and switched on a the hotspot and connected it to a hotspot connection. This gave and ONLINE status to my blynk platform as well

Made the connections

Final Outcome

P5js

I used P5js as a first year student. Coding was very new to me then, its nice to see growth as I feel quite fimiliar with the alien coding language now. p5.js is a JavaScript library designed to make creative coding easy and accessible, especially for artists, designers, educators, and beginners.

P5js Interface

Thanks to the open software that it is, I could source my very first written code: It was a mickey mouse trailing shapes that follow the two circle and a rectangle. With the semi-transparent fill (alpha = 10) with smoky or trailing visual effect, and overlapping shapes. Whenever you left click your mouse the mickey gives a fill opacity effect otherwise it gives a trail.

Example1

function setup() {
        createCanvas(400, 400);
      }
      
      function draw() {
        //background(250,1);
      
        fill(80,55,120);
        //rect(120, 120,90,90);
      noStroke();      
        fill(70,90,150,10);
        ellipse(mouseX, mouseY,40,40);
        rect(mouseX+4, mouseY+4, 50,50);
        
        ellipse(mouseX+50, mouseY+0, 40,40);
      }

Example2: This code gives the desired text on mouse click.

      function setup() {
      createCanvas(400, 400);
      }

      function draw() {
      //background(220);
      let someText='Bee'
      textSize(50);
      textStyle(BOLDITALIC);
      textFont('BASKERVILLE')
      //text(someText, mouseX ,mouseY,mouseX);
      //text('leo', mouseX+80, mouseY+80, 400);
      noFill();
      stroke(150);
      }

      function drawText(word,posX, posY, size){
      text(word, posX, posY);
      textSize(size);

      }

      function mouseClicked()
      {
      drawText('Bee', mouseX, mouseY, random(5,50));
      drawText('Leo', mouseX+50, mouseY+50, random(5,50));
      }

Group Assignment

Comparing Processing, P5.js, and Blynk

Processing is a Java-based programming environment widely used for creating visual art and interactive sketches. It excels at producing interactive graphics and also includes libraries for handling sound, video, and other media, making it a versatile tool for creative projects.

P5.js is the JavaScript counterpart to Processing, designed specifically for creative coding on the web. It enables you to build interactive graphics and animations that run directly in web browsers, making it ideal for sharing and showcasing digital art online.

Blynk is an Internet of Things (IoT) platform that allows users to remotely control and monitor hardware devices. It features a mobile and web-based app interface with a drag-and-drop GUI, making it very beginner-friendly. Blynk is especially useful for quick prototyping and real-time interaction with connected devices.

Tool	Based On	Main Use	Strengths	Platform
Processing	Java	Creating visuals and sketches	Great for graphics, sound, and video projects	Desktop (Java IDE)
P5.js	JavaScript	Creative coding for the web	Runs in browser, good for animations and interaction	Web (Browser-based)
Blynk	IoT Platform	Controlling and monitoring devices	Easy to use, drag-and-drop UI, great for IoT projects	Mobile + Web

Project files

Mouse to Led Processing code
Mouse to Led Aurdino code
Mouse to RGB Processing code
Mouse to RGB Aurdino code Blynk Code