two arduinos changing coloured circles on processing

jgid

Hi,

I'm a student new to coding and am trying to get two arduinos, (connected via serial port) to change the colour of two different ellipses on processing. Both arduinos have a simple push button.

One ellipse changes colour when one arduino button is pressed (this part is fine) But when I start to introduce the second arduino the coloured ellipses just flash quickly between the colours.

Is there a way to connect the two arduinos successfully? My code is posted below.

Thank you, Jade 

import processing.serial.*;

import processing.serial.*; Serial port; Serial portss; PImage[] img = new PImage[1]; int val = 0;

void setup () { size (1000, 707);

img [0] = loadImage ("nocolouredblobs.jpg"); background(img [0]);

fill(#459839);
ellipse(931,68,75,75);

port = new Serial(this, Serial.list()[3], 9600); }

void draw() { if (port.available() > 0) { val = port.read(); }

if (val == 2) { fill (#EDB137); ellipse (833, 68, 75, 75); fill (#FFDE9B); ellipse (931,68,75,75); } else { fill (#459839); ellipse (833, 68, 75, 75); fill (#459839); ellipse (931,68,75,75); }

}

Chrisir

Don’t you need one port per arduino?

jgid

I have just added the second port to my code...

import processing.serial.*;
import processing.serial.*;

Serial port;
Serial portss;
PImage[] img = new PImage[1];
int val = 0;

void setup () {
  size (1000, 707);

  img [0] = loadImage ("nocolouredblobs.jpg");
  background(img [0]);

  fill(#459839);  
  ellipse(931,68,75,75);

  port = new Serial(this, Serial.list()[4], 9600);
  portss = new Serial(this, Serial.list()[3], 9600);
}

void draw() {
  if (port.available() > 0) {
     val = port.read(); }


  if (val == 2) {
    fill (#EDB137);
    ellipse (833, 68, 75, 75); 
    fill (#F7CA6E);
    ellipse (931,68,75,75); }
  else { 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }

   if (portss.available() > 0) {
     val = port.read(); } 

   if (val == 2) {
      fill (#ED3C3C);
      ellipse (733, 68, 75, 75); 
      fill (#ED5F3C);
      ellipse (833, 68, 75, 75);
      fill (#ED6B3C);
      ellipse (931,68,75,75); }
   else {
    fill (#459839);
    ellipse (733, 68, 75, 75); 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }

kfrajer

Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code. Details here: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Kf

kfrajer

serial arduino1;
serial arduino2;

void serialEvent(Serial serialObj) {

  if(serialObj == arduino1)
     //Data from first arduino


  if(serialObj == arduino2)
     //Data from second unit
}

Kf

jgid

Great formatting tip thanks.

@kfrajer, do i get the serial arduino1 and serial arduino2 form downloading in the library? Im not sure what this means basically.

kfrajer

Serial port;

serial arduino1;

Notice the above is comparing your code and my code. I am using a label for the port object. From your code, port and portss would do the same job. Just consider using better names relevant to the task as it makes your code easier to read (no difference in this small demo - however always aim for clarity)

Kf

jgid

I have just updated the code and unfortunately its still not working?!!

import processing.serial.*;
import processing.serial.*;

Serial arduino1;
Serial arduino2;
PImage[] img = new PImage[1];
int val = 0;

void setup () {
  size (1000, 707);

  img [0] = loadImage ("nocolouredblobs.jpg");
  background(img [0]);

  fill(#459839);  
  ellipse(931,68,75,75);

  arduino1 = new Serial(this, Serial.list()[4], 9600);
  arduino2 = new Serial(this, Serial.list()[3], 9600);
}

void serialEvent(Serial serialObj) {
  if (serialObj == arduino1) {
     val = arduino1.read(); }  

  if (val == 2) {
    fill (#EDB137);
    ellipse (833, 68, 75, 75); 
    fill (#F7CA6E);
    ellipse (931,68,75,75); }
  else { 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }

   if (serialObj == arduino2) {
     val = arduino2.read(); } 

   if (val == 2) {
      fill (#ED3C3C);
      ellipse (733, 68, 75, 75); 
      fill (#ED5F3C);
      ellipse (833, 68, 75, 75);
      fill (#ED6B3C);
      ellipse (931,68,75,75); }
   else {
    fill (#459839);
    ellipse (733, 68, 75, 75); 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }


}

GoToLoop

Never mutate the sketch's main canvas when outside the "Animation Thread"! [-X

kfrajer

You need a draw function and you change the sketch inside this function, as GoTo pointed out.

Kf

jgid

so I just add void draw like this?

void draw(){

void serialEvent (Serial serialObj) {
  if (serialObj == arduino1) {
     val = arduino1.read(); }  

this has an error...unexpected void token.

jgid

kfrajer

Ok, so this is sort of the structure:

void setup(){ ...}

void draw(){ ...}

void serialEvent (Serial serialObj) {...}

Usually you change a global variable in the serial event and then, based on this variable, you dictate what draw should do.

Kf

jgid

Hi, unfortunately I am still getting the ellipses flashing between the colours really quickly.

import processing.serial.*;
import processing.serial.*;

Serial arduino1;
Serial arduino2;
PImage[] img = new PImage[1];
int val = 0;

void setup () {
  size (1000, 707);

  img [0] = loadImage ("nocolouredblobs.jpg");
  background(img [0]);

  fill(#459839);  
  ellipse(931,68,75,75);

  arduino1 = new Serial(this, Serial.list()[4], 9600);
  arduino2 = new Serial(this, Serial.list()[3], 9600);
}

void draw(){

  if (arduino1.available() > 0) {
     val = arduino1.read(); }

  if (val == 2) {
    fill (#EDB137);
    ellipse (833, 68, 75, 75); 
    fill (#F7CA6E);
    ellipse (931,68,75,75); }
  else { 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }

  if (arduino2.available() > 0) {
     val = arduino2.read(); }
     if (val == 2) {
      fill (#ED3C3C);
      ellipse (733, 68, 75, 75); 
      fill (#ED5F3C);
      ellipse (833, 68, 75, 75);
      fill (#ED6B3C);
      ellipse (931,68,75,75); }
   else {
    fill (#459839);
    ellipse (733, 68, 75, 75); 
    fill (#459839);
    ellipse (833, 68, 75, 75); 
    fill (#459839);
    ellipse (931,68,75,75); }
}

void serialEvent(Serial serialObj) {
  if (serialObj == arduino1) {
     val = arduino1.read(); }  


   if (serialObj == arduino2) {
     val = arduino2.read(); } 


 }

kfrajer

I am not sure what is the update rate for your ellipses or the full concept of your program. However, I need you to check this revise version of your code below. Notice I didn't test the code below as I do not have your setup.

Kf

import processing.serial.*;

Serial arduino1;
Serial arduino2;
PImage[] img = new PImage[1];
int val1 = 0;
int val2 = 0;

void setup () {
  size (1000, 707);

  img [0] = loadImage ("nocolouredblobs.jpg");
  background(img [0]);

  fill(#459839); 
  ellipse(931, 68, 75, 75);

  arduino1 = new Serial(this, Serial.list()[4], 9600);
  arduino2 = new Serial(this, Serial.list()[3], 9600);
}

void draw() {
  if (val1 == 2) {
    fill (#EDB137);
    ellipse (833, 68, 75, 75);
    fill (#F7CA6E);
    ellipse (931, 68, 75, 75);
  } else {
    fill (#459839);
    ellipse (833, 68, 75, 75);
    fill (#459839);
    ellipse (931, 68, 75, 75);
  }


  if (val2 == 2) {
    fill (#ED3C3C);
    ellipse (733, 68, 75, 75);
    fill (#ED5F3C);
    ellipse (833, 68, 75, 75);
    fill (#ED6B3C);
    ellipse (931, 68, 75, 75);
  } else {
    fill (#459839);
    ellipse (733, 68, 75, 75);
    fill (#459839);
    ellipse (833, 68, 75, 75);
    fill (#459839);
    ellipse (931, 68, 75, 75);
  }
}

void serialEvent(Serial serialObj) {
  if (serialObj == arduino1) {
    val1 = arduino1.read();
  } 


  if (serialObj == arduino2) {
    val2 = arduino2.read();
  }
}

jgid

AMAZING. Thank you so much Kf

perfect advice. :)