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.
Index › Programming Questions & Help › Syntax Questions › Simple beginner' question
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Simple beginner' question (Read 782 times)
Centifolia
Simple beginner' question
Jun 21st, 2009, 11:51am  
Hi --
if I have a class that refers to drawing a rect, how can I change it so that it fits using an image and that I can create instances out of it?

Code:

void setup() {
  size(400, 300);
  bar = new NavigationBar(300, 50, 100, 60, 380);
}

class NavigationBar {
  
  int x, y, w, h;
  int xLimit;
   
  NavigationBar(int x, int y, int w, int h, int xLimit) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    }

  void display() {
    // displays the bar (a simple rect)
    stroke(0); fill(250, 150, 0);
    rect(x, y, w, h);
  }
  
  


I was thinking about adding another parameter like for example "int image" to the class. In voice setup() I have to load the image, right?
image=loadImage("Help.png");

What about void display()?

I just don't get it. I appreciate your help.
Back to top
 
 
PhiLho 
Re: Simple beginner' question
Reply #1 - Jun 21st, 2009, 12:05pm  
That's right, except the type of image is PImage.
You can display it with the image() function.
Back to top
 
WWW  
Centifolia
Re: Simple beginner' question
Reply #2 - Jun 21st, 2009, 12:18pm  
Hi PhilHo-
thanks for your qucik reply.
I tried it that way:

Code:

void setup() {
  size(400, 300);
  a = loadImage("NaviHelpRef.png"); 
  bar = new NavigationBar(300, 50, 100, 60, 380);
}

class NavigationBar {
  
  int x, y, w, h;
  xLimit;
    
  NavigationBar(int PImage, int x, int y, int w, int h, int xLimit) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.xLimit = xLimit;
     }

 void display() {
    // displays the bar (a simple rect)
    stroke(0); fill(250, 150, 0);
    rect(x, y, w, h);
    image(a,x, y, w, h);
  }
  
 void display() {
    // displays the bar (a simple rect)
    stroke(0); fill(250, 150, 0);
    rect(x, y, w, h);
    image(a, x, y, w, h);
  }


I get the the message:
Perhaps you wanted the overloaded version  NavigationBar(int PImage, int x, int y, int w, int h, int xLimit) instead.

I just don't understand how I create an instance then with e.g.
bar = new NavigationBar(300, 50, 100, 60, 380);
Back to top
 
 
Centifolia
Re: Simple beginner' question
Reply #3 - Jun 21st, 2009, 12:20pm  
I forgot to post this:

Code:

void setup() {
  size(400, 300);
  a = loadImage("NaviHelpRef.png"); 
  bar = new NavigationBar(300, 50, 100, 60, 380);
}
Back to top
 
 
PhiLho 
Re: Simple beginner' question
Reply #4 - Jun 21st, 2009, 1:06pm  
Would be more like:
Code:
NavigationBar bar;

void setup() {
  size(400, 300);
  PImage a = loadImage("NaviHelpRef.png"); 
  bar = new NavigationBar(a, 300, 50, 100, 60, 380);
}

void draw()
{
  bar.display();
}

class NavigationBar {
  
  int x, y, w, h;
  int xLimit;
  PImage img;
    
  NavigationBar(PImage pi, int x, int y, int w, int h, int xLimit) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.xLimit = xLimit;
    img = pi;
     }

 void display() {
    // displays the bar (a simple rect)
    stroke(0); fill(250, 150, 0);
    rect(x, y, w, h);
    image(img, x, y, w, h);
  }
}
Back to top
 
WWW  
Centifolia
Re: Simple beginner' question
Reply #5 - Jun 21st, 2009, 1:29pm  
Perfect!
Could you have one more look at the other code?
I want it to let it slide out to the right, but somehow it jumps to the left.
Don't know what goes wrong here.

Code:

NavigationBar bar;


void setup() {
  size(1024, 768);
  PImage a = loadImage("NaviHelpRef.png"); 
 // b = loadImage("NaviHelpOver.png");
 
  bar= new NavigationBar(a,897, 68, 127, 39, 380);
 //  bar1= new NavigationBar(a,500, 50, 100, 60, 380);
  
}

void draw() {
  background(155);
  bar.handle();
  bar.display();
}

void mouseClicked() {
  if (bar.isUnderMouse() && !bar.isFadingOut && !bar.isFadingIn) bar.isFadingIn = true;
}

class NavigationBar {
  
  int x, y, w, h;
  int xStart, xLimit;
  PImage img;
  float timeBeforeItFades = 3.0;
  
  float previousTime, currentTime;
  boolean isFadingOut, isFadingIn;
  
  NavigationBar(PImage pi, int x, int y, int w, int h, int xLimit) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.xLimit = xLimit;
    this.xStart = x;
    img = pi;
    previousTime = millis();
    currentTime = timeBeforeItFades;
    isFadingOut = false;
    isFadingIn = false;
  }
  
  boolean isUnderMouse() {
    if (mouseX < x || mouseX > x+w) return false;
    if (mouseY < y || mouseY > y+h) return false;
    return true;
  }
  
  // manage mouse hover and bar movement
  void handle() {
    // we need to know how much time has ellapsed since last frame
    float timeEllapsedSinceBeginning = millis();
    float timeEllapsedSinceLastFrame = timeEllapsedSinceBeginning - previousTime;
    previousTime = timeEllapsedSinceBeginning;
    // if the bar is not fading in, or out, or is not under the mouse...
    if (!isFadingOut && !isFadingIn && !isUnderMouse()) {
	// then we decrease the time counter
	currentTime -= timeEllapsedSinceLastFrame/1000;
	if (currentTime < 0.0) {
	  isFadingOut = true;
	  currentTime = timeBeforeItFades;
	}
    }
    // fading out means...
    else if (isFadingOut) {
	// the bar moves to the right
	x++;
	if (x >= xLimit) {
	  x = xLimit;
	  isFadingOut = false;
	}
    }
    // fading in means...
    else if (isFadingIn) {
	// the bar moves to the left
	x--;
	if (x <= xStart) {
	  x = xStart;
	  isFadingIn = false;
	  // setting the counter to its start value
	  currentTime = timeBeforeItFades;
	}
    }
  }
  
  void display() {
    
    image(img, x, y, w, h);
   }
  
}
Back to top
 
 
PhiLho 
Re: Simple beginner' question
Reply #6 - Jun 21st, 2009, 9:59pm  
Not tested, but the test if (x <= xStart) might be if (x <= xLimit) instead.
Back to top
 
WWW  
Centifolia
Re: Simple beginner' question
Reply #7 - Jun 22nd, 2009, 1:05am  
No, unfortunately this didn't solve the problem. It's still jumping to x position 380. I don't understand it.
Back to top
 
 
blindfish
Re: Simple beginner' question
Reply #8 - Jun 22nd, 2009, 2:24am  
In setup try:

bar= new NavigationBar(a,897, 68, 127, 39, 1024);

Sometimes you're just looking for a more complex problem and miss the simple solution Wink
Back to top
 
Where is the what if the what is in why?
 
blindfish
Re: Simple beginner' question
Reply #9 - Jun 22nd, 2009, 2:38am  
You still have a problem though...  As I think I pointed out when you first asked about this idea: bringing it back on screen with a mouse click is unintuitive and in your implementation simply won't work:

void mouseClicked() {
 if (bar.isUnderMouse() && !bar.isFadingOut && !bar.isFadingIn) bar.isFadingIn = true;
}

How can you click on it when it is no longer visible on screen?   i.e. the x position is greater than the screen limits so isUnderMouse() can only return false.

As I suggested it would be more intuitive to fade in the navigation when the mouse position approaches it's location:

void mouseMoved() {
 if (mouseX > width-bar.w && mouseY < bar.y + bar.h/2 && mouseY > bar.y - bar.h/2) {
   bar.isFadingIn = true;  
 }
}
Back to top
 
Where is the what if the what is in why?
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›