Go Down

Topic: My first encounter with Processing! (Read 1 time) previous topic - next topic



I'm fairly new to Arduino & even greener when it comes to Processing, and I've encountered a problem.

I'm trying to do project 14 in the "Arduino projects book". Basically, I want to change the background color of an image using a potentiometer.

Here is my code (including some comments to help myself keep track of things, correct me if they are wrong):

Code: [Select]
import processing.serial.*;
Serial myPort;

PImage logo;

int bgcolor = 0;

void setup() {

  colorMode(HSB, 255);

  logo = loadImage("http://www.userlogos.org/files/logos/jumpordie/teamliquid-iphone.png");
  size(logo.width, logo.height);

  println("Avilable serial ports");

  myPort = new Serial(this, Serial.list()[1], 9600); // parameters : which application, which port & what speed

void draw() {
  if (myPort.available() > 0) { // if(there is something in the buffer)
    bgcolor = myPort.read();

  background(bgcolor, 255, 255); // hue, brightness, saturation. max value 255
  image(logo, 0, 0); // image() is used to draw. --- what to draw , x-coordiante to start, y-coordiante to start ---

I don't really understand the values I get from myPort.read(). They bounce between 100 and -1, barely depending on how I position the potentiometer. Basically, this results in the background colors shifting constantly, leaving me unable to control them.

So, how can I fix this?

Can someone explain this myPort.read() for me please? I thought that it just took the values from the port I connected my potentiometer to on the Arduino (which is basically just analogRead((A1) / 4); )

Secondly, can I use any image for this, or does it have to be a specific image type?

This image shows the values! http://oi43.tinypic.com/f4iaaa.jpg

Thanks for taking your time to read this, please help!


I don't really understand the values I get from myPort.read().

Without seeing the sending code, neither do we.

That Processing code leaves a lot to be desired, though.

First, NO serial I/O should take place in draw(). There is a serialEvent() callback that you can override that should be used to read the serial data.

Second, you should have Processing buffer the serial data until some specific character (the end of packet marker) arrives. That can be the carriage return ('\n') sent by the Arduino (using println()).

Finally, in the serialEvent() callback, you should use the readStringUntil() method with the same end of packet marker. Then, parse the string as needed.


Thx for your quick reply!

Which sending code is it that you are talking about? The code from my arduino? ( Serial.write(analogRead((A1)/4));)

Thank you for informing me about serialEvent(), I'll definately read up on it. However, the code I posted is pretty much identical to the code that was provided in the book, so at the very least it ought to work, dont u think?


I feel that I have no control over the buffer. Maybe I shouldn't? But if I shouldn't, how can I possibly control the colours with the amount of bytes in the buffer?

This whole project is fishy!


Which sending code is it that you are talking about? The code from my arduino?

Is there something else sending data to the Processing application? Of course, I mean the Arduino code.

I doubt that the Arduino code REALLY works with a smiley face.

But, the statement is sending BINARY data to Processing, which is what it is expecting.

If the values are not what you expect, then you need to look at the Arduino, and how the potentiometer is wired to the Arduino. Something is wrong on that end.

The -1 that you are seeing in Processing is what you get when you read from a serial port that has no data. But, that shouldn't happen since the code checks that there is data, before reading.

So, unless there is something else in the Arduino code writing to the serial port, the problem is with the hardware.


Sorry, didn't mean to make a smiley face, it was just part of the code.

I'll post the arduino code:
Code: [Select]
void setup(){

void loop(){
  Serial.write(analogRead(A1) / 4);

I got the values to go between 0 and 255 now (as it should), however I can't change the colors myself. Basically, I have no control over the myPort.read() values. At the moment it's sitting on 70, but in a few seconds it'll probably bounce up to 255 or something.


Basically, I have no control over the myPort.read() values.

Sure you do. Turn the potentiometer. The values will change.

If that isn't happening, you need to investigate why not. Either the value from analogRead() is wrong because you wired the potentiometer incorrectly, or the values are right.

You can tell the difference by changing write() to println() and sending data to the Serial Monitor, instead.

If the values printed in Processing change as you turn the potentiometer, then the problem is in how you use the value in Processing. The comment says:
Code: [Select]
  background(bgcolor, 255, 255); // hue, brightness, saturation. max value 255
This says that the potentiometer value is going to change the hue. I'm not sure exactly what that is supposed to mean. However, since you draw an image that might cover the whole background, I don't think you can expect to see changes unless the image has transparent areas of does not fill the frame.


Hey and thanks again for your quick answer. I am using a .png image, which has transparent areas. It's the correct image type to use. 

I already did the tests you recommended and everything worked fine. I get correct values from the potentiometer. 

My code is pretty much identical to the code in the book. By the way, I'm using the 32-bit version of Processing (simply because Serial does not work on the 64-bit version). Could that affect communication?


How do you know that you are getting good data from the potentiometer? Is it because the values print in Processing correctly? If so, then, communications in not the problem. The background() function is.


I know the values are good because I looked at them in Arduino. However, they are uncontrollable in Processing.

1. The read() values work well with the background() function, the colours change and so on. The problem is, I can't change the read() values myself by twisting the potentiometer. I can only change them in the Arduino IDE, but when I twist the potentiometer, I see no chance in Processing.


I can only change them in the Arduino IDE

I don't understand this. Do you mean the Serial Monitor? The write() call should not be showing readable data in the Serial Monitor.


Jun 30, 2013, 09:20 pm Last Edit: Jun 30, 2013, 09:29 pm by sina92 Reason: 1
Of course I can't understand the write() values. I changed the code up in order to make sure the potentiometer is working as intended, and then changed it back so that it can communicate with Processing.

I am supposed to change the amount of bytes in the buffer with the Serial.write() right? Because I still can't change that.


FINALLY! I solved my issues. I simply increased the delay in the Arduino sketch, so instead of a 1 ms delay after each write(), I changed it to 100 ms!

However, I'm still interested about how this communication really works. Where can I read about this?


Go Up

Please enter a valid email to subscribe

Confirm your email address

We need to confirm your email address.
To complete the subscription, please click the link in the email we just sent you.

Thank you for subscribing!

via Egeo 16
Torino, 10131