From Arduino to Processing

Hi everyone,
I'm working on a university project where, through an RGB sensor, I should make images appear on processing.

I'm using codes that work on Arduino (I read all the RGB values) now I do not understand how to transport these values on Processing in such a way as to make me appear an image when the sensor get red color, another images when get blue color and another one when get greens.

Attached find the codes for Arduino and Processing that I am using

Thanks a lot in advance

ARDUINO:

#include <Adafruit_TCS34725.h>

#include <Wire.h>
#include "Adafruit_TCS34725.h"

/* Example code for the Adafruit TCS34725 breakout library */

/* Connect SCL    to analog 5
   Connect SDA    to analog 4
   Connect VDD    to 3.3V DC
   Connect GROUND to common ground */

/* Initialise with default values (int time = 2.4ms, gain = 1x) */
// Adafruit_TCS34725 tcs = Adafruit_TCS34725();

/* Initialise with specific int time and gain values */
Adafruit_TCS34725 tcs = Adafruit_TCS34725(TCS34725_INTEGRATIONTIME_101MS, TCS34725_GAIN_1X);

void setup(void) {
  Serial.begin(9600);

  if (tcs.begin()) {
    Serial.println("Found sensor");
  } else {
    Serial.println("No TCS34725 found ... check your connections");
    //while (0);
  }

  // Now we're ready to get readings!
}

void loop(void) {
  uint16_t r, g, b, c;
  // colorTemp, lux;

  tcs.getRawData(&r, &g, &b, &c);

  Serial.print(r, DEC);
  Serial.print(",");
  Serial.print(g, DEC);
  Serial.print(",");
  Serial.print(b, DEC);
  Serial.println(","); //IMPORTANT println


}

PROCESSING:

import processing.serial.*;

Serial mySerial;  // Create object from Serial class
String myString = null;
int nl = 10;
float myVal;
int myR, myG, myB, myR2, myG2, myB2;


PFont font;

// ANDREA, my comments are the code in the grey (commented)

void setup() {
  size(805, 500);
  pixelDensity(2);
  String myPort = Serial.list()[1]; //change the 0 to a 1 or 2 etc. to match your port
  mySerial = new Serial(this, myPort, 9600);
  //println(myPort);
  
  font = createFont("Helvetica", 32);
  

}

void draw() {
  background(255);

  while ( mySerial.available() > 0) {  // If data is available,
    myString = mySerial.readStringUntil(nl);

    if (myString != null) {
      myVal = float(myString);

// the code below puts the information from the Serial into a processing String Array
      String[] mySplitString = split(myString, ',');

      if (mySplitString.length >=3) {
        myR = int(mySplitString[0]);
        
        // below are the incoming values > the variables with 2 at the end are the mapped values, the map range needs to be adjusted depending on room light sensitivite
        // using my codes will need you co test a bit with the initial map value balance
        // read the max values with white paper over the sensor to see the highest values coming from the sensor, Ardiono code you have may be better but you will need to know how to strip/read these values into Processing
        myR2 = (int)map(myR, 0, 7000, 0, 255);
        myG = int(mySplitString[1]);
        myG2 = (int)map(myG, 0, 9000, 0, 255);
        myB = int(mySplitString[2]);
        myB2 = (int)map(myB, 0, 5000, 0, 255);
      }

// this prints values to the console
      println(mySplitString.length + " " + myR2 + " " + myG2 + " " + myB2 + "   " + myString);

    }
  }

// this if statement is set to display a rectangle if the object over the sensor contains more red that green or blue
      if (myR2 > myG2 && myR2 > myB2 && myR2 > 20) {
// PUT WHAT YOU WANT ON SCREEN HERE
// REPEAT CODE BLOCK AS NECESSARY WITH OTHER CONTENT AND OTHER CONDITIONAL STATEMENTS
rect(300, 300, 100, 100);
      }

// this just puts the mapped values on the screen for testing purposes
textFont(font);
fill(0);
text(myR2 + " - red  " + myG2 + " - green " + myB2 + " - blue ", 40, 40);  
fill(myR2, myG2, myB2);
noStroke();
rect(100, 100, 100, 100);
}

rgbAndrea.ino (1.01 KB)

simpleForAndrea.pde (2.28 KB)

I would try to help, but I can't open .ino files or .pde files on my device and don't like downloading strange files, either. Read the "how to use this forum-please read" stickies to see how to properly post code and you will likely get more help.

please read How to use this forum

please note how you should post the codes... it saves us from having to download and use something to view it...

Okay I am trying to find out how to post the codes. Thanks

Done it. Thanks :slight_smile:

OK, thanks. Now we need to know what the problem is. Please don't just say "it doesn't work".

What happens when you run the code?
Does any thing show in the Processing console?

So basically when I run the code to Arduino, the serial monitor read the RGB number. So this part is fine.

In Processing nothing happens. I believe I haven't set up the values right ( as you can see in the processing code), I should do the conditional but there is where I am struggling.

What exactly is "processing"??? Is this for the computer?

Here is your Processing code modified, slightly. You were on the right rrack, just had sOme extra stuff. It splits the input string, prints the mapped values and colors the boxes. I changed the serial port and baud rates so you will need to set those for your system.

Processing code:

import processing.serial.*;

Serial mySerial;  // Create object from Serial class
String myString = null;
int nl = 10;
float myVal;
int myR, myG, myB, myR2, myG2, myB2;


PFont font;

// ANDREA, my comments are the code in the grey (commented)

void setup() {
  size(805, 500);
  pixelDensity(2);  // MY SYSTEM DOES NOT SUPPORT THI FUNCTION
  //String myPort = Serial.list()[1]; //change the 0 to a 1 or 2 etc. to match your port
  mySerial = new Serial(this, "COM5", 115200);  // SET TO MY SYSTEM, CHANGE FOR YOURS
  //println(myPort);

  font = createFont("Helvetica", 32);
}

void draw() 
{
  background(255);

  if ( mySerial.available() > 0)
  {  // If data is available,
    myString = mySerial.readStringUntil(nl);

    if (myString != null)  
    {
      // the code below puts the information from the Serial into a processing String Array
      String[] mySplitString = split(myString, ',');

      print ("split string  ");
      println(mySplitString);

      if (mySplitString.length > 3) // MAKE SURE THAT THE WHOLE PACKER WAS RECEIVED
      {
        myR = int(mySplitString[0]);

        // below are the incoming values > the variables with 2 at the end are the mapped values, the map range needs to be adjusted depending on room light sensitivite
        // using my codes will need you co test a bit with the initial map value balance
        // read the max values with white paper over the sensor to see the highest values coming from the sensor, Ardiono code you have may be better but you will need to know how to strip/read these values into Processing
        myR2 = (int)map(myR, 0, 7000, 0, 255);
        myG = int(mySplitString[1]);
        myG2 = (int)map(myG, 0, 9000, 0, 255);
        myB = int(mySplitString[2]);
        myB2 = (int)map(myB, 0, 5000, 0, 255);


        // this prints values to the console
        print("split string length, mapped RGB values and input string  ");
        println(mySplitString.length + " " + myR2 + " " + myG2 + " " + myB2 + "   " + myString);
      }
      else  // MAYBE STARTED READING THE MIDDLE OF A PACKET, IGNORE THIS INCOMPLETE PACKET
      {
        return;
      }
    }
  }

  // this if statement is set to display a rectangle if the object over the sensor contains more red that green or blue
  if (myR2 > myG2 && myR2 > myB2 && myR2 > 20)
  {
    // PUT WHAT YOU WANT ON SCREEN HERE
    // REPEAT CODE BLOCK AS NECESSARY WITH OTHER CONTENT AND OTHER CONDITIONAL STATEMENTS
    rect(300, 300, 100, 100);
  }

  // this just puts the mapped values on the screen for testing purposes
  textFont(font);
  fill(0);
  text(myR2 + " - red  " + myG2 + " - green " + myB2 + " - blue ", 40, 40); 
  fill(myR2, myG2, myB2);
  noStroke();
  rect(100, 100, 100, 100);
}

Since I don't have your hardware I wrote a simple sketch for my Uno to output test values (one set per second).
Uno code:

void setup()
{
   Serial.begin(115200);
}

void loop()
{
   uint16_t r, g, b, c;
   r = 6800;
   g = 44;
   b = 4500;
   c = 1200;

   static unsigned long timer = 0;
   unsigned long interval = 1000;
   if (millis() - timer >= interval)
   {
      timer = millis();
      Serial.print(r, DEC);
      Serial.print(",");
      Serial.print(g, DEC);
      Serial.print(",");
      Serial.print(b, DEC);
      Serial.print(",");
      Serial.print(c, DEC);
      Serial.println();
   }
}

Output screen:

What exactly is "processing"??? Is this for the computer?

The Processing "language" is for writing code for the PC (and MAC, too, I guess). The Arduino IDE is based on Processing.

groundFungus:
The Processing "language" is for writing code for the PC (and MAC, too, I guess). The Arduino IDE is based on Processing.

just caught up, how cool. seems like my serial projects may get better with it.

Off topic, but I have been using Processing for quite a while to, for instance, graph data or make GUIs for Arduino projects. Its similarity to Arduino makes it easier to learn, but it is not exactly the same so there is a bit of learning curve. Extensive examples that come with the Processing IDE, help with that.

sorry to go off - topic - i hope OP has working codes now...

I can see some good uses for this... always a learning curve. I have a project in mind that I thought would take java and python but Processing seems easier (because of similarity to Arduino IDE)

Not sure the extent yet... I didn't see Apple (iphone) support but may not have dug deep enough yet.

Thanks GroundFungus. It worked. Now instead of the squares, if there over 200 red I need a picture to appears, if there's over 200 green another pic and over 200 blue another one.

I found this code on Processing website but still not working.

PImage img;  // Declare variable "a" of type PImage

void setup() {
  size(640, 360);
  // The image file must be in the data folder of the current sketch 
  // to load successfully
  img = loadImage("moonwalk.jpg");  // Load the image into the program  
}

void draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  // Displays the image at point (0, height/2) at half of its size
  image(img, 0, height/2, img.width/2, img.height/2);
}

Works fine for me. I don't know what not working means. Do you have the image file in the sketch folder?

This is turning into a Processing thread and it may not be appropriate for the Arduino forum.

Thank guys all solved.

I completed adding this condition and it worked.

// this if statement is set to display a rectangle if the object over the sensor contains more red that green or blue
      if (myR2 > myG2 && myR2 > myB2 && myR2 > 20) {
// PUT WHAT YOU WANT ON SCREEN HERE
// REPEAT CODE BLOCK AS NECESSARY WITH OTHER CONTENT AND OTHER CONDITIONAL STATEMENTS
PImage img;
img = loadImage("TINTORETTO.jpg");
image(img, 0, 0);
     }
           if (myG2 > myR2 && myG2 > myB2 && myG2 > 20) {
// PUT WHAT YOU WANT ON SCREEN HERE
// REPEAT CODE BLOCK AS NECESSARY WITH OTHER CONTENT AND OTHER CONDITIONAL STATEMENTS
PImage img;
img = loadImage("BARTHES.jpg");
image(img, 0, 0);
     }
              if (myB2 > myR2 && myB2 > myG2 && myB2 > 20) {
// PUT WHAT YOU WANT ON SCREEN HERE
// REPEAT CODE BLOCK AS NECESSARY WITH OTHER CONTENT AND OTHER CONDITIONAL STATEMENTS
PImage img;
img = loadImage("MONET.jpg");
image(img, 0, 0);
     }
             }

Great. Good luck with your project.