Processing 1.0 - Processing Discourse - Click on moving button

alkopop79

Click on moving button
Sep 17^th, 2009, 7:45am

Hi there,

I want to build an interactive portfolio where head of each "plant" represents a button. I could not figure out how to write the conditional part. How should I define the moving ellipses as clickable areas? I thought about defining the distance somehow from the center of each ellipse and any time the cursor is within the distance, the user could click on it. Any ideas how to start?

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: Click on moving button Reply #1 - Sep 17^th, 2009, 10:02am Basically, you got the idea. You make clickable shapes by checking the mouse event coordinates are within the shape.

antiplastik

Re: Click on moving button
Reply #2 - Sep 17^th, 2009, 12:11pm

The easiest is to begin with a simple class:

Code:

class EllipseButton {
  
  float x, y, size;
  
  void draw() {
    ellipseMode(CENTER);
    ellipse(x, y, size, size);
  }
  
  boolean isUnderMouse() {
    return (dist(mouseX, mouseY, x, y) < size);
  }
  
}

Then, you can iterate over your objects and check - on mouseClicked - if the cursor is in the ellipse or not.

alkopop79 YaBB Newbies Offline Posts: 46	Re: Click on moving button Reply #3 - Sep 17^th, 2009, 5:16pm Many thanks! Will try it!

Cedric

Re: Click on moving button
Reply #4 - Sep 17^th, 2009, 5:47pm

checking a circle is quite easy. if the shapes are getting more complex it is probably a good idea, to draw offscreen using different colours and check for the colour at your mouse position using http://processing.org/reference/get_.html

something similar is described here with 3d objects but works with complex shapes too
http://processing.org/hacks/hacks:picking_color_buffer

twitter.com/CedricKiefer

alkopop79

Re: Click on moving button
Reply #5 - Sep 17^th, 2009, 7:35pm

sold it this way:

Quote:

float theta = 0.0;
float time = 0.0;
float increment = 0.01;
boolean over = false;

void setup()
{
  size(500,500);

}
void draw() {
  background(255);
  float n = noise(time)* width;
  time += increment;
  float x = (sin(theta) + 1) * width/2;
  theta += 0.05;

  if (mouseY < 210 && mouseY > 190 && mouseX > n-10 && mouseX < n + 10 && mousePressed)
  {
    over = true;
  }
  else {
    over = false;
  }
  if (over) {

    background(200);
  }
  else {
    background(100);
  }
  strokeWeight(2);
  noFill();
  bezier( 250, 500, n, 500, 200, 20, n, 200);
  fill(255);
  ellipse(n , 200, 20, 20);
  smooth();

}

Cedric YaBB Moderator Offline Posts: 1838	Re: Click on moving button Reply #6 - Sep 18^th, 2009, 2:04am antiplastik was right thought. using if( dist(mouseX,mouseY,n,200)<=10 && mousePressed) is more accurat
	twitter.com/CedricKiefer

alkopop79

Re: Click on moving button
Reply #7 - Sep 19^th, 2009, 8:31am

Thanks for the help! This time I'm struggling building a Plant class. As I need 4 of these plants, a Plant class would help. This is the mock-up of what I want, without using class and objects:

Quote:

PFont f;
float time = 0.0;
float increment = 0.01;
int fs = 16;

void setup()
{
  size(500,500);
}
void draw() {
  background(255);
  float xn = 1;
  float s = noise(time)*100;
  f = loadFont("Webdings-48.vlw");
  textFont(f, fs);

  noiseDetail(1,0.1);
  float n = noise(time)* width;
  println(n);
  float m = noise(time*1.2)* width;
  float o = noise(time*0.9)*width;
  time += increment;
  strokeWeight(2);
  bezier( 250, 500, n, 500, 200, 20, n, m/3+100);
  fill(255);
  ellipse(n , m/3+100, s, s);
  fill(0);
  text("alkopop", n + 30, m/3+105);
  noFill();
  bezier( 350, 500, m, 500, 300, 150, m, 300);
  fill(255);
  ellipse(m,300,s/1.5,s/1.5);
  fill(0);
  text("menu", m + 20, 305);
  noFill();
  bezier( 390, 500, o, 500, 370, 10, o, 100);
  fill(255);
  ellipse(o,100,s/2,s/2);
  fill(0);
  text("portfolio", o + 30, 105);
  smooth();
  noFill();
  }

What I don't understand, is how to write a class in a separate tab? And do I need this? Which parameters should I include in the class? I'm a bit confused with the whole class-object thing, not even the brilliant Dan Shiffman-book could answer my questions (still a brilliant book!). Thanks for your help!

alkopop79

Re: Click on moving button
Reply #8 - Sep 19^th, 2009, 8:32am

Thanks for the help! This time I'm struggling building a Plant class. As I need 4 of these plants, a Plant class would help. This is the mock-up of what I want, without using class and objects:

Quote:

PFont f;
float time = 0.0;
float increment = 0.01;
int fs = 16;

void setup()
{
size(500,500);
}
void draw() {
background(255);
float xn = 1;
float s = noise(time)*100;
f = loadFont("Webdings-48.vlw");
textFont(f, fs);

noiseDetail(1,0.1);
float n = noise(time)* width;
println(n);
float m = noise(time*1.2)* width;
float o = noise(time*0.9)*width;
time += increment;
strokeWeight(2);
bezier( 250, 500, n, 500, 200, 20, n, m/3+100);
fill(255);
ellipse(n , m/3+100, s, s);
fill(0);
text("alkopop", n + 30, m/3+105);
noFill();
bezier( 350, 500, m, 500, 300, 150, m, 300);
fill(255);
ellipse(m,300,s/1.5,s/1.5);
fill(0);
text("menu", m + 20, 305);
noFill();
bezier( 390, 500, o, 500, 370, 10, o, 100);
fill(255);
ellipse(o,100,s/2,s/2);
fill(0);
text("portfolio", o + 30, 105);
smooth();
noFill();
}

What I don't understand, is how to write a class in a separate tab? And do I need this? Which parameters should I include in the class? I'm a bit confused with the whole class-object thing, not even the brilliant Dan Shiffman-book could answer my questions (still a brilliant book!). Thanks for your help!