IMG_8156.mov

IMG_8157.mov

Referring back to the Lab: Two-Way (Duplex) Serial Communication Using an Arduino and the p5.webserial Library, I was able to enable serial communciation between my arduino microcontroller with the HSB interactions and my p5 sketch.

The only problem is that it’s really slow.

I had the hue, saturation, and brightness values recorded in the console on IDE. Since I was using a function to convert the 16-bit hue into RGB, I used the rotary position instead to determine the hue value in p5.

Arduino IDE:

int position = encoder.getPosition();

if (position % 25 == 0) {
    encoder.reset();
    position = encoder.getPosition();
  }

int sliderPot1_VALUE = analogRead(sliderPot1_PIN);
  int saturation = map(sliderPot1_VALUE, 0, 1023, 0, 255);
  int sliderPot2_VALUE = analogRead(sliderPot2_PIN);
  int brightness = map(sliderPot2_VALUE, 0, 1023, 0, 255)

Serial.print(position);
Serial.print(",");
Serial.print(saturation);
Serial.print(",");
Serial.println(brightness);

Then, I had p5 read the console of IDE and turn the strings of information into an array, with each value separated by a comma as an individual entry.

p5:

function serialEvent() {
  inString = serial.readStringUntil("\\r\\n");
  if (inString != null) {
    console.log(inString);
    let colr = split(trim(inString), ",");
    console.log(colr);
    if (colr.length==3) {
      pos = Number(colr[0]);
      sat = Number(colr[1]);
      bright = Number(colr[2]);
    }
  }
}

let hu = map(pos, 0, 24, 0, 360)
let satr= map(sat, 0, 255, 0, 100)
let brightn = map(bright, 0, 255, 0, 100)

background(hu, satr, brightn);
console.log(hu + ", " + satr + ", " + brightn)