Project 14: Tweak the Logo

[SheCurvesMobius]

Hi all,

I was about to post this question, and then figured out how to fix it. I wanted to post it anyways, with the solution, so that it might help others. I do have two unanswered question at the end of the post.

Original question:
I'm trying to get the Tweak the Logo project to work but I've hit a snag. The logo remains red, and nothing is printed to the Processing console.

I'm using a Mac with Catalina OS.

This is my Arduino code:

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

void loop() {
  Serial.write(analogRead(A0) / 4);
  delay(1);
}

And this is my Processing code:

import processing.serial.*;
Serial myPort;
PImage logo;
int bgcolor = 0;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  colorMode(HSB, 255);
  logo = loadImage("http://www.arduino.cc/arduino_logo.png");
  surface.setSize(logo.width, logo.height);
  println("Available serial ports:");
  println(Serial.list());
  myPort = new Serial(this, Serial.list()[0], 9600);
}

void draw() {
  if ( myPort.available() > 0) {
    bgcolor = myPort.read();
    println(bgcolor);
  }
  background(bgcolor, 255, 255);
  image(logo, 0, 0);
}

This is what Processing reports as my available ports:
/dev/cu.Bluetooth-Incoming-Port /dev/cu.MALS /dev/cu.SOC /dev/cu.usbmodem141301 /dev/tty.Bluetooth-Incoming-Port /dev/tty.MALS /dev/tty.SOC /dev/tty.usbmodem141301

Behaviour:
The processing sketch shows a red logo. Nothing is printed to the console, and the logo colour never changes--it's always red.

If I open the Arduino serial monitor, this is what I see: when I rotate the dial, I get question marks output to the serial monitor for half of the arc, and for the other half I get characters that change as I rotate the pot.

I've looked at messages from others on the forum, and nothing I've found has helped, including:

• Changing the if to while in the Processing sketch
• Changing Serial.write to Serial.print or Serial.println
• Changing the [0] in myPort = new Serial(this, Serial.list()[0], 9600); to a [1]
• Changing the delay to 33 in the Arduino sketch

Solution:
To cover all my bases, I tried [2], and [3] instead of [0] here: myPort = new Serial(this, Serial.list()[0], 9600);. The [3] ended up working: it got me a different colour than red. However, when I moved it, nothing changed. That made me think that the 'if' did in fact need to change to 'while' in the Processing code. Those two changes made the code work.

Unanswered questions:

1. Does anyone know why the correct port is [3] (the fourth port), when the Processing sketch only prints two ports in the list of available ports?

2. Why does the Arduino output question marks to the serial monitor for half of the potentiometer's arc?

Thanks so much!

[J-M-L]

make sure you pick the right Serial port. Run this Processing code with your Arduino connected to the Mac and with the IDE's Serial monitor closed

import processing.serial.*;
void setup() {
  printArray(Serial.list());
}
void draw() {}

have a look at the Processing IDE's console, you should see a list of all the Serial interfaces

You should see an entry for your Arduino (the same name you picked to upload code in the Arduino's IDE)
make a note of the index (here it's 1), that's what you need to use in your code

myPort = new Serial(this, Serial.list()[INDEX YOU NOTED GOES HERE], 9600);

On the Arduino side you write a value between 0 and 1023 divided by 4, so you do get something that fits in a byte. The information is sent in binary (that's what write does) so it's OK to read it on the Processing side using bgcolor = myPort.read();

of course for the Processing program to work, you need to close the Serial monitor in the Arduino IDE.

Then don't expect the logo to change color, as the code only changes the background and as you selected HSB color mode in the setup, the colors will be mapped kinda this way

If you connect A0 to GND, you'll send 0, so the HSB color selected is (0,255,255). with Hue at 0 and full saturation and brightness, you get to the left of the color rainbow above, so this is RED and you get

if you connect A0 to 5V, 1023/4 = 255 so the value transmitted is 255 and Hue for 255 is at the other end of the spectrum which is red again. So you have the same image.

if you connect A0 to 3.3V then you are a bit to the right into the blue and you'll see

if you put a wire into A0 and leave it floating, you've built an antenna and you'll see the background change randomly as A0 is picking up whatever noise that is around you.

---

because 9600 bauds is slow, and you get some printouts, I'd suggest to use

import processing.serial.*;
Serial myPort;
PImage logo;
int bgcolor = 0;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  colorMode(HSB, 255);
  logo = loadImage("http://www.arduino.cc/arduino_logo.png");
  surface.setSize(logo.width, logo.height);
  myPort = new Serial(this, Serial.list()[1], 500000);
}

void draw() {
  if ( myPort.available() > 0) {
    bgcolor = myPort.read();
  }
  background(bgcolor, 255, 255);
  image(logo, 0, 0);
}

and on your arduino

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

void loop() {
  Serial.write(analogRead(A0) / 4);
  delay(1);
}

[SheCurvesMobius]

Thanks so much for this JML! I've made the changes that you've recommended.

I'm wondering if you could let me know why the Arduino outputs question marks to the serial monitor for half of the potentiometer's arc?

[J-M-L]

@SheCurvesMobius

I'm wondering if you could let me know why the Arduino outputs question marks to the serial monitor for half of the potentiometer's arc?

The serial monitor should not be open if you want to send the data to processing. If processing is not launched don’t forget to set the right baud rate In the monitor (in accordance with the code)

[SheCurvesMobius]

Hi there,

Thanks your your answer to my question.

Yes, I understand that the serial monitor should not be open if I want to read the data from Processing. When I'm reading the data from Processing, I have the serial monitor closed. However, I was curious to see what the data looked like that was being sent to Processing, and so I was checking it with the serial monitor. I noticed that it's a variety of characters as I turn the dial, but for half of the dial it's backwards question marks, and I was just wondering why that was.

[J-M-L]

@SheCurvesMobius

so I was checking it with the serial monitor.

At what baud rate ? 500000 ?

Also we are sending raw bytes, not ascii. So use a terminal capable of showing hex digits being sent. The IDE serial monitor can’t

[SheCurvesMobius]

Ok, that's where my confusion lies. I really don't know/understand what is being sent. It sounds like we are sending "raw bytes" in the form of HEX digits and the terminal I'm using to monitor what's being sent will only show ASCII. I'll see if I can find a serial monitor that can show me the HEX digits.

Thanks for helping to clarify for me!

[J-M-L]

Yes that’s it. Use A more capable monitor and you’ll see the bytes flowing