This is the Processing code
import processing.serial.*;
Serial port;
int yValue = 318;
int midValue = 0;
int sendValue = 0;
void setup() {
size(600, 400);
port = new Serial(this, "COM6", 9600);
}
void draw() {
if (mousePressed && mouseX >= 102 && mouseX <= 158 && mouseY >= 82 && mouseY <= 318) {
yValue = mouseY;
}
//the int yValue gets the value of mouseY if the mouse is being pressed inside of the right area.
background(#18674B);
noStroke();
smooth();
fill(250);
ellipse(500, 350, 40, 40);
ellipse(535, 350, 40, 40);
fill(#18674B);
ellipse(500, 350, 28, 28);
ellipse(535, 350, 28, 28);
fill(250);
rectMode(CORNERS);
rect(495, 348, 505, 352);
rect(530, 348, 540, 352);
rect(533, 345, 537, 355);
//Arduino logotype
fill(0);
rectMode(CORNERS);
rect(100, 80, 160, 320);
//First rect(the black one)
fill(250);
rect(101, 81, 159, 319);
//Second rect(white)
fill(#D81F25);
rect(102, yValue, 158, 318);
//the red rect, you can change the size with the mouse
fill(250);
rect(102, 82, 158, yValue);
midValue = (600 - yValue - 282) * 255 / 236;
//instead of trying to map the yValue to a value between 0 and 255 you do a calculation
text(midValue, 180, 85);
port.write(midValue);
//send the midValue to the arduino
}
This is the arduino code
int ledPin = 9;
int dimmerValue = 0;
void setup(){
Serial.begin(9600);
pinMode(ledPin, OUTPUT);
}
void loop(){
dimmerValue = Serial.read();
analogWrite(ledPin, dimmerValue);
}