We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
button actions (Read 556 times)
sardonic_math
button actions
Apr 7th, 2009, 2:52pm  
Ok, so fairly new to processing.  I've made a 9-ellipse grid, rolling the mouse over each ellipse sends data over the serial port to turn on an LED attached to an arduino.  

how would i change this code so that when you rollover or click each ellipse, only that ellipse changes color, rather than all nine of them?


[code]import processing.serial.*;

Serial port;

void setup()
{
 size(300, 300);
 noStroke();
 smooth();
 frameRate(15);  
 println(Serial.list());  
 port = new Serial(this, Serial.list()[0], 9600);
}

// function to test if mouse is over square
boolean mouseOverCirc1()
{
 return ((mouseX >= 25)&&(mouseX <= 75)&&(mouseY >= 25)&(mouseY <= 75));
}
boolean mouseOverCirc2()
{
 return ((mouseX >= 125)&&(mouseX <= 175)&&(mouseY >= 25)&(mouseY <= 75));
}
boolean mouseOverCirc3()
{
 return ((mouseX >= 225)&&(mouseX <= 275)&&(mouseY >= 25)&(mouseY <= 75));
}
boolean mouseOverCirc4()
{
 return ((mouseX >= 25)&&(mouseX <= 75)&&(mouseY >= 125)&(mouseY <= 175));
}
boolean mouseOverCirc5()
{
 return ((mouseX >= 125)&&(mouseX <= 175)&&(mouseY >= 125)&(mouseY <= 175));
}
boolean mouseOverCirc6()
{
 return ((mouseX >= 225)&&(mouseX <= 275)&&(mouseY >= 125)&(mouseY <= 175));
}
boolean mouseOverCirc7()
{
 return ((mouseX >= 25)&&(mouseX <= 75)&&(mouseY >= 225)&(mouseY <= 275));
}
boolean mouseOverCirc8()
{
 return ((mouseX >= 125)&&(mouseX <= 175)&&(mouseY >= 225)&(mouseY <= 275));
}
boolean mouseOverCirc9()
{
 return ((mouseX >= 225)&&(mouseX <= 275)&&(mouseY >= 225)&(mouseY <= 275));
}

void draw()
{
 background(0);
 if(mouseOverCirc1())      // if mouse is over square
 {
   fill(#FF0000);         // change color
   port.write('1');       // send an 'H' to indicate mouse is over square
 }
 else if (mouseOverCirc2()){
   fill(#00FFFF);         // change color
   port.write('4');       // send an 'L' otherwise
 }
 else if (mouseOverCirc3()){
   fill(#FF0000);         // change color
   
Back to top
 
 
sardonic_math
Re: button actions
Reply #1 - Apr 7th, 2009, 2:53pm  
rest of code :

else if (mouseOverCirc3()){
   fill(#FF0000);         // change color
   port.write('7');       // send an 'L' otherwise
 }
 else if (mouseOverCirc4()){
   fill(#FF0000);         // change color
   port.write('2');       // send an 'L' otherwise
 }
 else if (mouseOverCirc5()){
   fill(#00FFFF);         // change color
   port.write('5');       // send an 'L' otherwise
 }
 else if (mouseOverCirc6()){
   fill(#FF0000);         // change color
   port.write('8');       // send an 'L' otherwise
 }
 else if (mouseOverCirc7()){
   fill(#FF0000);         // change color
   port.write('3');       // send an 'L' otherwise
 }
 else if (mouseOverCirc8()){
   fill(#00FFFF);         // change color
   port.write('6');       // send an 'L' otherwise
 }
 else if (mouseOverCirc9()){
   fill(#FF0000);         // change color
   port.write('9');       // send an 'L' otherwise
 }
   else
   {fill(#555555);
 }
 ellipse(50, 50, 50, 50);  // draw circle
 ellipse(50, 150, 50, 50);  // draw circle
 ellipse(50, 250, 50, 50);  // draw circle
 ellipse(150, 50, 50, 50);  // draw circle
 ellipse(150, 150, 50, 50);  // draw circle
 ellipse(150, 250, 50, 50);  // draw circle
 ellipse(250, 50, 50, 50);  // draw circle
 ellipse(250, 150, 50, 50);  // draw circle
 ellipse(250, 250, 50, 50);  // draw circle
 
}

Back to top
 
 
NoahBuddy
Re: button actions
Reply #2 - Apr 7th, 2009, 3:03pm  
You could create your own button class.

http://processing.org/learning/topics/buttons.html
Back to top
 
 
sardonic_math
Re: button actions
Reply #3 - Apr 7th, 2009, 3:37pm  
yeah, i've looked at that, and for the life of me I can't understand what is going on, beyond knowing that it uses custom functions.  any help in the regard would be so appreciated.
Back to top
 
 
Cedric
Re: button actions
Reply #4 - Apr 7th, 2009, 5:05pm  
NoahBuddy is right, a button class would be the only good way.
But anyway, i worked on your code if you wanna keep it that way.

First, you dont need all boolean stuff, just check within if funktion.
Dont use else... just different "ifs"
best way for a circle is to check the distance between the mouse position and the circle origin. if it is <radius its withing the circle.

hmm guess thats it, but you should take a look at the class anyway:




void setup(){
size(300, 300);
smooth();
}

void draw(){
background(0);

fill(200);
fill(#555555);
ellipse(50, 50, 45, 45);  
ellipse(50, 150, 45, 45);  
ellipse(50, 250, 45, 45);
ellipse(150, 50, 45, 45);  
ellipse(150, 150, 45, 45);  
ellipse(150, 250, 45, 45);
ellipse(250, 50, 45, 45);  
ellipse(250, 150, 45, 45);  
ellipse(250, 250, 45, 45);  

if(dist(mouseX,mouseY,50,50)<25) {
  fill(#FF0000);        
 ellipse(50, 50, 50, 50);
}
if (dist(mouseX,mouseY,150,50)<25){
  fill(#00FFFF);        
  ellipse(150, 50, 50, 50);
}
 if (dist(mouseX,mouseY,250,50)<25){
  fill(#FF0000);    
  ellipse(250, 50, 50, 50);  
}
 if (dist(mouseX,mouseY,50,150)<25){
  fill(#FF0000);      
 ellipse(50, 150, 50, 50);  
}
 if (dist(mouseX,mouseY,150,150)<25){
  fill(#00FFFF);        
 ellipse(150, 150, 50, 50);
}
  if (dist(mouseX,mouseY,250,150)<25){
  fill(#FF0000);      
 ellipse(250, 150, 50, 50);  
}
if (dist(mouseX,mouseY,50,250)<25){
  fill(#FF0000);        
 ellipse(50, 250, 50, 50);
}
 if (dist(mouseX,mouseY,150,250)<25){
  fill(#00FFFF);          
 ellipse(150, 250, 50, 50);  
}
if (dist(mouseX,mouseY,250,250)<25){
  fill(#FF0000);        
 ellipse(250, 250, 50, 50);  
}
}  
Back to top
 
... twitter.com/CedricKiefer
WWW CedricKiefer 9570393 CedricKiefer  
PhiLho 
Re: button actions
Reply #5 - Apr 7th, 2009, 10:51pm  
Cedric wrote on Apr 7th, 2009, 5:05pm:
Dont use else... just different "ifs"

Why If the circles doesn't overlap, using else is a good idea. It won't make any real difference in speed, but it looks more logical... Smiley

If one doesn't want to use classes (yet), it would be a good idea to put the coordinates in an array (they can even be computed, but that's more trouble than worth, I suppose).
Thus, with an array for X coords, one for Y, and one for colors, everything can be done in a single, small loop: it is always better to avoid having lot of similar looking lines with only some parameters changing...  Cool
I can show code if needed.
Back to top
 
WWW  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›