› › ›

Change colors when mouse is over forms

roosmarijnroosmarijn
edited October 2016 in Arduino

Hi, I want three squares and when I go over the first one, i want all of them to turn red and to send a letter to arduino, when I go over the second one, I want all of them to turn green and when I go over the third one with my mouse, I want all of them to turn blue. When I click outside the boxes, I want all of them to turn black. Ony the R, G and B color changing part isn't working. Can someone help me with this?

import processing.net.*;
import processing.serial.*;
Serial myPort;
int click =0;
int box =0;

void setup () {
  size ( 640, 200);
  background (130);
  String portName = "COM5";
  myPort = new Serial (this, portName, 9600);
}

void draw () {
  drawFigures();
}
void loop () {   

  if (mouseOverRect1() == true) {  // If mouse is over square,
    fill(255, 20, 20);         // change color and
    drawFigures();
    myPort.write('R');              // send an R to indicate mouse is over square 1
  }  
  if (mouseOverRect2() == true) {  // If mouse is over square,
    fill(20, 255, 20);           // change color and
    drawFigures();
    myPort.write('G');              // send an G to indicate mouse is over square 2
  } 
  if (mouseOverRect3() == true) {  // If mouse is over square,
    fill(20, 20, 255);                    // change color and
    drawFigures();
    myPort.write('B');              // send an B to indicate mouse is over square 3
  }
}

boolean mouseOverRect1() { // Test if mouse is over square 1
  return ((mouseX >= 10) && (mouseX <= 190) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect2() { // Test if mouse is over square 2
  return ((mouseX >= 230) && (mouseX <= 420) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect3() { // Test if mouse is over square 3
  return ((mouseX >= 450) && (mouseX <= 630) && (mouseY >= 10) && (mouseY <= 190));
}


void mouseClicked() {
  if ((mouseOverRect1()== false)&&(mouseOverRect2()== false)&&(mouseOverRect3()== false)) { // if mouse is outside the box
    if  (click == 0) { // and mouse is pressed
      fill (0);
      drawFigures ();
      myPort.write ('N');
    }
  }
}

void drawFigures() {

  rect(10, 10, 180, 180);
  rect(230, 10, 180, 180);
  rect( 450, 10, 180, 180);
}

Here is my code. thanks a lot!

Tagged:

Answers

  • roosmarijnroosmarijn

    I figured it out myself!

  • ChrisirChrisir

    I was trying to figure it out

    Could you post your code solution please?

  • roosmarijnroosmarijn

    yeah sure

    import processing.net.*;
import processing.serial.*;
Serial myPort;
int click =0;
int box =0;

void setup () {
  size ( 640, 200);
  background (130);
  String portName = "COM5";
  myPort = new Serial (this, portName, 9600);
}

void draw () {
  drawFigures();  

  if (mouseOverRect1() == true) {  // If mouse is over square,
    fill(255, 20, 20);         // change color and
    drawFigures();
    myPort.write('R');              // send an R to indicate mouse is over square 1
  }  
  if (mouseOverRect2() == true) {  // If mouse is over square,
    fill(20, 255, 20);           // change color and
    drawFigures();
    myPort.write('G');              // send an G to indicate mouse is over square 2
  } 
  if (mouseOverRect3() == true) {  // If mouse is over square,
    fill(20, 20, 255);                    // change color and
    drawFigures();
    myPort.write('B');              // send an B to indicate mouse is over square 3
  }
}

boolean mouseOverRect1() { // Test if mouse is over square 1
  return ((mouseX >= 10) && (mouseX <= 190) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect2() { // Test if mouse is over square 2
  return ((mouseX >= 230) && (mouseX <= 420) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect3() { // Test if mouse is over square 3
  return ((mouseX >= 450) && (mouseX <= 630) && (mouseY >= 10) && (mouseY <= 190));
}


void mouseClicked() {
  if ((mouseOverRect1()== false)&&(mouseOverRect2()== false)&&(mouseOverRect3()== false)) { // if mouse is outside the box
    if  (click == 0) { // and mouse is pressed
      fill (0);
      drawFigures ();
      myPort.write ('N');
    }
  }
}

void drawFigures() {

  rect(10, 10, 180, 180);
  rect(230, 10, 180, 180);
  rect( 450, 10, 180, 180);
}
  • GoToLoopGoToLoop

    http://www.JeffreyThompson.org/collision-detection/point-rect.php
    http://studio.SketchPad.cc/sp/pad/view/ro.9eDRvB4LRmLrr/latest

  • roosmarijnroosmarijn

    I'm also trying to turn an RGB led to red, green of blue of off. it depands on the color of the blocks, so where my mouse is. But it is green all the time. here are both of my codes. any help?

    import processing.serial.*;
Serial myPort;
int click =0;

void setup () {
  size ( 640, 200);
  background (130);
  String portName = "COM5";
  myPort = new Serial (this, portName, 9600);
}

void draw () {

  if (mouseOverRect1() == true) {  // If mouse is over square,
    fill(255, 20, 20);         // change color and
    myPort.write('R');              // send an R to indicate mouse is over square 1
  }  
  if (mouseOverRect2() == true) {  // If mouse is over square,
    fill(20, 255, 20);           // change color and
    myPort.write('G');              // send an G to indicate mouse is over square 2
  } 
  if (mouseOverRect3() == true) {  // If mouse is over square,
    fill(20, 20, 255);                    // change color and
    myPort.write('B');              // send an B to indicate mouse is over square 3
  }
  drawFigures();
}

boolean mouseOverRect1() { // Test if mouse is over square 1
  return ((mouseX >= 10) && (mouseX <= 190) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect2() { // Test if mouse is over square 2
  return ((mouseX >= 230) && (mouseX <= 420) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect3() { // Test if mouse is over square 3
  return ((mouseX >= 450) && (mouseX <= 630) && (mouseY >= 10) && (mouseY <= 190));
}


void mouseClicked() {
  if ((mouseOverRect1()== false)&&(mouseOverRect2()== false)&&(mouseOverRect3()== false)) { // if mouse is outside the box
    if  (click == 0) { // and mouse is pressed
      fill (0);
      drawFigures ();
      myPort.write ('N');
    }
  }
}

void drawFigures() {

  rect(10, 10, 180, 180);
  rect(230, 10, 180, 180);
  rect( 450, 10, 180, 180);
}



/* // arduino code


 int red = LOW;
 int green = LOW;
 int blue = LOW;

 int val;
 int redPin = 6;
 int greenPin = 9;
 int bluePin = 11;


 void setup() {
 pinMode (redPin, OUTPUT);
 pinMode(greenPin, OUTPUT);
 pinMode (bluePin, OUTPUT);
 Serial.begin(9600);
 char val;

 }


 void loop() {

 while (Serial.available()) { // If data is available to read,
 val = Serial.read(); // read it and store it in val
 }

 if (val == 'R') { // If H was received
 red = HIGH;
 green = LOW;
 blue = LOW;
 }
 if (val == 'G') {
 red = LOW;
 green = HIGH;
 blue = LOW;
 }
 if (val = 'B') {
 red = LOW;
 green = LOW;
 blue = HIGH;
 } else {
 red = LOW;
 green = LOW;
 blue = LOW;
 }
 analogWrite (redPin, red);
 analogWrite (greenPin, green);
 analogWrite (bluePin, blue);

 //delay (1000);
 }

 */
  • ChrisirChrisir
    edited October 2016

    Yeah, trouble is the lines 88 to 106

    (Directly above my post)

    Here you use if and then else - but it's wrong

    The else part is ran every time it's not 'B' since it's part of this if-clause only

    Instead use if.... else if....

    So in line 93 else if, in line 98 else if

    Then the final else part (with 3x LOW) refers to all 3 ifs and not only to the last if

     if (val == 'R') { // If H was received
     red   = HIGH;
     green = LOW;
     blue = LOW;
 }
 else if (val == 'G') {
     red = LOW;
     green = HIGH;
     blue = LOW;
 }
 else if (val = 'B') {
     red = LOW;
     green = LOW;
     blue = HIGH;
 } else {
     red = LOW;
     green = LOW;
     blue = LOW;
}

    OK?

  • roosmarijnroosmarijn
    edited October 2016

    it helped a lot! now the colors change, but I have one problem left. the rgb led doesn't turn off it is Always on blue,or the other colors when I go over that box.

    this is how it is connected, but with other ports and this is how my led has it's points

    hope you can help with it

  • roosmarijnroosmarijn

    rgb led connected RGB-led-pinout maybe these pictures work

  • ChrisirChrisir

    sorry for being late

    first post your new entire code please

    you wrote:

    the rgb led doesn't turn off it is Always on blue or the other colors when I go over that box.

    use println(val); in line 87 to print val - what's its value when you are not over any box???

    you could say val=0; in line 83 to make sure it gets a proper reset (because when the while loop is skipped, val still has its old value. Bad.)

    Best, Chrisir ;-)

  • roosmarijnroosmarijn

    Hi, I tried your comments, but it is still not working. The println doesn't work at all. I will post my now updated code:

    import processing.serial.*;
Serial myPort;
int click =0;

void setup () {
  size ( 640, 200);
  background (130);
  String portName = "COM5";
  myPort = new Serial (this, portName, 9600);
}

void draw () {

  if (mouseOverRect1() == true) {  // If mouse is over square,
    fill(255, 20, 20);         // change color and
    myPort.write('R');              // send an R to indicate mouse is over square 1
  }  
  if (mouseOverRect2() == true) {  // If mouse is over square,
    fill(20, 255, 20);           // change color and
    myPort.write('G');              // send an G to indicate mouse is over square 2
  } 
  if (mouseOverRect3() == true) {  // If mouse is over square,
    fill(20, 20, 255);                    // change color and
    myPort.write('B');              // send an B to indicate mouse is over square 3
  }
  drawFigures();
}

boolean mouseOverRect1() { // Test if mouse is over square 1
  return ((mouseX >= 10) && (mouseX <= 190) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect2() { // Test if mouse is over square 2
  return ((mouseX >= 230) && (mouseX <= 420) && (mouseY >= 10) && (mouseY <= 190));
}
boolean mouseOverRect3() { // Test if mouse is over square 3
  return ((mouseX >= 450) && (mouseX <= 630) && (mouseY >= 10) && (mouseY <= 190));
}


void mouseClicked() {
  if ((mouseOverRect1()== false)&&(mouseOverRect2()== false)&&(mouseOverRect3()== false)) { // if mouse is outside the box
    if  (click == 0) { // and mouse is pressed
      fill (0);
      drawFigures ();
      myPort.write ('N');
    }
  }
}

void drawFigures() {

  rect(10, 10, 180, 180);
  rect(230, 10, 180, 180);
  rect( 450, 10, 180, 180);
}



/* // arduino code


int red ;
int green ;
int blue ;

int val;

int redPin = 6;
int bluePin = 10;
int greenPin = 11;



void setup() {
  pinMode (redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode (bluePin, OUTPUT);
  Serial.begin(9600);
  char val;

  analogWrite (redPin, red);
  analogWrite (greenPin, green);
  analogWrite (bluePin, blue);
}


void loop() {
  analogWrite (redPin, red);
  analogWrite (greenPin, green);
  analogWrite (bluePin, blue);

  val = 'N';
  while (Serial.available()) { // If data is available to read,
    val = Serial.read(); // read it and store it in val
  }
println(val);
  if (val == 'R') { // If H was received
    red = HIGH;
    green = LOW;
    blue = LOW;
  }
   else if (val == 'G') {
    red = LOW;
    green = HIGH;
    blue = LOW;
  }
   else if (val = 'B') {
    red = LOW;
    green = LOW;
    blue = HIGH;
  } else {
    red = LOW;
    green = LOW;
    blue = LOW;
  }

//delay (1000);
}

 */

    hope you can figure out why

  • roosmarijnroosmarijn

    When I connect the green output to pin 10 instead of the blue one, then the led stays green. When I skip pin 10 and use pin 9 instead, the problem is also not solved. I have not used solder, so that can't be the problem. I don't know what is.

  • ChrisirChrisir
    edited October 2016

    you could say val=0; in line 91

  • roosmarijnroosmarijn

    It is still not working! I have no idea what to do

  • ChrisirChrisir

    In line 12.......:

    Use if...else if here as well

    last append else myPost.write('N');

    Or just think through your sketch step by step

Sign In or Register to comment.