hey guys,
i'm new to processing and really like it.
i took one of the examples (imagebutton) adn modified it a bit to run 4 images (100x100)
based on the examples code, i cannot get any alignment with my 4 images.
i would ideally like to have them in a cross with 100px spacing on all sides, but the layouts i'm getting are funky.
any ideas? i've played with the numbers and can't get anything appealing.


Code:

void setup()
{
  size(500, 300);
  background(102, 102, 102);

  // FWD
  PImage b = loadImage("baseF.gif");
  PImage r = loadImage("rollF.gif");
  int x = width/2 - b.width/2;
  int y = height/3 - b.height/3; 
  int w = b.width;
  int h = b.height;
  button = new ImageButtons(x, y, w, h, b, r);
  // BWD
  PImage bb = loadImage("baseB.gif");
  PImage rb = loadImage("rollB.gif");
  int xb = width/2 - bb.width/2;
  int yb = height/1 - bb.height/1; 
  int wb = bb.width;
  int hb = bb.height;
  buttonb = new ImageButtonsb(xb, yb, wb, hb, bb, rb);
  // LEFT
  PImage bl = loadImage("baseL.gif");
  PImage rl = loadImage("rollL.gif");
  int xl = width/6 - bl.width/6;
  int yl = height/2 - bl.height/2; 
  int wl = bl.width;
  int hl = bl.height;
  buttonl = new ImageButtonsl(xl, yl, wl, hl, bl, rl);
  // RIGHT
  PImage br = loadImage("baseR.gif");
  PImage rr = loadImage("rollR.gif");
  int xr = width/1 - bl.width/1;
  int yr = height/2 - bl.height/2; 
  int wr = br.width;
  int hr = br.height;
  buttonr = new ImageButtonsr(xr, yr, wr, hr, br, rr);
 

they're 4 buttons: forward, back, left and right
i'd like them aligned like the buttons on a num pad.
even with loadimage (CENTER), they wouldn't align.
not even close.....

Ah, I haven't noticed, but BenHem is right, the point of having a class is to avoid duplication of code: each new ImageButton() provides a new object with parameters distinct of the others.

Now, placing the buttons. The base width/2 - b.width/2 is meant to center the button on the screen: width/2 is half the sketch's area, and if you subtract half the button's width, it is centered.
If you want your cross centered on screen, you should set your x and y coordinates to width/2 and height/2 respectively, and move from there: + or - (b.width + 100) and (b.height + 100).

here's all my code. plz be gentle...
i know it can be cut down by 40-60% but it's my first...
Code:

import processing.serial.*; 

ImageButtons button;
ImageButtonsb buttonb;
ImageButtonsl buttonl;
ImageButtonsr buttonr;

Serial port; 

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

  // FWD
  PImage b = loadImage("baseF.gif");
  PImage r = loadImage("rollF.gif");
  int x = width/2 - b.width/2;
  int y = height/2 - (b.height +100); 
  int w = b.width;
  int h = b.height;
  button = new ImageButtons(x, y, w, h, b, r);
  // BWD
  PImage bb = loadImage("baseB.gif");
  PImage rb = loadImage("rollB.gif");
  int xb = width/2 - bb.width/2;
  int yb = height/2 - (bb.height - 200); 
  int wb = bb.width;
  int hb = bb.height;
  buttonb = new ImageButtonsb(xb, yb, wb, hb, bb, rb);
  // LEFT
  PImage bl = loadImage("baseL.gif");
  PImage rl = loadImage("rollL.gif");
  int xl = width/2 - (bl.width + 100);
  int yl = height/2 - (bl.height - 50); 
  int wl = bl.width;
  int hl = bl.height;
  buttonl = new ImageButtonsl(xl, yl, wl, hl, bl, rl);
  // RIGHT
  PImage br = loadImage("baseR.gif");
  PImage rr = loadImage("rollR.gif");
  int xr = width/2 - (br.width - 200);
  int yr = height/2 - (br.height - 50); 
  int wr = br.width;
  int hr = br.height;
  buttonr = new ImageButtonsr(xr, yr, wr, hr, br, rr);
  // Serial
  println(Serial.list()); 
  port = new Serial(this, Serial.list()[0], 9600); 
}

void draw()
{
  button.update();
  button.display();
  buttonb.update();
  buttonb.display();
  buttonl.update();
  buttonl.display();
  buttonr.update();
  buttonr.display();
}
// FWD Class
class Button
{
  int x, y;
  int w, h;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;

  boolean overRect(int x, int y, int width, int height) {
    if (mouseX >= x && mouseX <= x+width && 
	mouseY >= y && mouseY <= y+height) {
	return true;
    } 
    else {
	return false;
    }
  }
}
// BWD Class
class Buttonb
{
  int xb, yb;
  int wb, hb;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;

  boolean overRect(int xb, int yb, int width, int height) {
    if (mouseX >= xb && mouseX <= xb+width && 
	mouseY >= yb && mouseY <= yb+height) {
	return true;
    } 
    else {
	return false;
    }
  }
}
// LEFT Class
class Buttonl
{
  int xl, yl;
  int wl, hl;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;

  boolean overRect(int xl, int yl, int width, int height) {
    if (mouseX >= xl && mouseX <= xl+width && 
	mouseY >= yl && mouseY <= yl+height) {
	return true;
    } 
    else {
	return false;
    }
  }
}
// RIGHT Class
class Buttonr
{
  int xr, yr;
  int wr, hr;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;

  boolean overRect(int xr, int yr, int width, int height) {
    if (mouseX >= xr && mouseX <= xr+width && 
	mouseY >= yr && mouseY <= yr+height) {
	return true;
    } 
    else {
	return false;
    }
  }
}

// End for FWD
class ImageButtons extends Button 
{
  PImage base;
  PImage roll;
  PImage currentimage;

  ImageButtons(int ix, int iy, int iw, int ih, PImage ibase, PImage iroll) 
  {
    x = ix;
    y = iy;
    w = iw;
    h = ih;
    base = ibase;
    roll = iroll;
    currentimage = base;
  }

  void update() 
  {
    over();
    if (over){
	currentimage = roll;
	port.write('F');	 
    } 
    else {
	currentimage = base;
	port.write('f');	 
    }
  }

  void over() 
  {
    if( overRect(x, y, w, h) ) {
	over = true;
    } 
    else {
	over = false;
    }
  }

  void display() 
  {
    image(currentimage, x, y);
  }
}

// End for BWD
class ImageButtonsb extends Buttonb 
{
  PImage base;
  PImage roll;
  PImage currentimage;

  ImageButtonsb(int ixb, int iyb, int iwb, int ihb, PImage ibase, PImage iroll) 
  {
    xb = ixb;
    yb = iyb;
    wb = iwb;
    hb = ihb;
    base = ibase;
    roll = iroll;
    currentimage = base;
  }

  void update() 
  {
    over();
    if (over){
	currentimage = roll;
	port.write('B');	 
    } 
    else {
	currentimage = base;
	port.write('b');	 
    }
  }

  void over() 
  {
    if( overRect(xb, yb, wb, hb) ) {
	over = true;
    } 
    else {
	over = false;
    }
  }

  void display() 
  {
    image(currentimage, xb, yb);
  }
}
// End for LEFT
class ImageButtonsl extends Buttonl 
{
  PImage base;
  PImage roll;
  PImage currentimage;

  ImageButtonsl(int ixl, int iyl, int iwl, int ihl, PImage ibase, PImage iroll) 
  {
    xl = ixl;
    yl = iyl;
    wl = iwl;
    hl = ihl;
    base = ibase;
    roll = iroll;
    currentimage = base;
  }

  void update() 
  {
    over();
    if (over){
	currentimage = roll;
	port.write('L');	 
    } 
    else {
	currentimage = base;
	port.write('l');	 
    }
  }

  void over() 
  {
    if( overRect(xl, yl, wl, hl) ) {
	over = true;
    } 
    else {
	over = false;
    }
  }

  void display() 
  {
    image(currentimage, xl, yl);
  }
}

// End for RIGHT
class ImageButtonsr extends Buttonr 
{
  PImage base;
  PImage roll;
  PImage currentimage;

  ImageButtonsr(int ixr, int iyr, int iwr, int ihr, PImage ibase, PImage iroll) 
  {
    xr = ixr;
    yr = iyr;
    wr = iwr;
    hr = ihr;
    base = ibase;
    roll = iroll;
    currentimage = base;
  }

  void update() 
  {
    over();
    if (over){
	currentimage = roll;
	port.write('R');	 
    } 
    else {
	currentimage = base;
	port.write('r');	 
    }
  }

  void over() 
  {
    if( overRect(xr, yr, wr, hr) ) {
	over = true;
    } 
  

Hopefully you should find the following does the same as your extended code.  It didn't take much work - mostly a matter of deleting a lot of duplicated code!

Notice how there's just one Button and one ImageButtons class: the point of classes is to avoid duplication of effort and to make it easy to create multiple, similar objects simply by passing appropriate properties when they are created.  By necessity this means that anything that might change between an object is stored as a property within it...

Also notice that I've added a Button constructor:

Code:

  Button(int x, int y, int w, int h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  } 

and called this in the subClass with "super(x,y,w,h);".  'super' simply references the parent class constructor.  As well as saving time this is a way to ensure any child classes comply with the requirements of the base class - i.e. that all necessary properties are set.  It may be that the 'strRoll' and 'strBase' properties I added to the ImageButtons class should belong in Button...


Code:

import processing.serial.*; 

ImageButtons button;
ImageButtons buttonb;
ImageButtons buttonl;
ImageButtons buttonr;

Serial port; 

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

  // FWD
  PImage b = loadImage("baseF.gif");
  PImage r = loadImage("rollF.gif");
  int x = width/2 - b.width/2;
  int y = height/2 - (b.height +100); 
  int w = b.width;
  int h = b.height;
  button = new ImageButtons(x, y, w, h, b, r, "F", "f");
  // BWD
  PImage bb = loadImage("baseB.gif");
  PImage rb = loadImage("rollB.gif");
  int xb = width/2 - bb.width/2;
  int yb = height/2 - (bb.height - 200); 
  int wb = bb.width;
  int hb = bb.height;
  buttonb = new ImageButtons(xb, yb, wb, hb, bb, rb, "B", "b");
  // LEFT
  PImage bl = loadImage("baseL.gif");
  PImage rl = loadImage("rollL.gif");
  int xl = width/2 - (bl.width + 100);
  int yl = height/2 - (bl.height - 50); 
  int wl = bl.width;
  int hl = bl.height;
  buttonl = new ImageButtons(xl, yl, wl, hl, bl, rl, "L", "l");
  // RIGHT
  PImage br = loadImage("baseR.gif");
  PImage rr = loadImage("rollR.gif");
  int xr = width/2 - (br.width - 200);
  int yr = height/2 - (br.height - 50); 
  int wr = br.width;
  int hr = br.height;
  buttonr = new ImageButtons(xr, yr, wr, hr, br, rr, "R", "r");
  // Serial
  println(Serial.list()); 
  port = new Serial(this, Serial.list()[0], 9600); 
}

void draw() {
  button.update();
  button.display();
  buttonb.update();
  buttonb.display();
  buttonl.update();
  buttonl.display();
  buttonr.update();
  buttonr.display();
}
// FWD Class
class Button {
  int x, y;
  int w, h;
  color basecolor, highlightcolor;
  color currentcolor;
  boolean over = false;

  Button(int x, int y, int w, int h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }

  boolean overRect(int x, int y, int width, int height) {
    if (mouseX >= x && mouseX <= x+width && 
	mouseY >= y && mouseY <= y+height) {
	return true;
    } 
    else {
	return false;
    }
  }
}


class ImageButtons extends Button {
  PImage base;
  PImage roll;
  PImage currentimage;
  String strRoll;
  String strBase;

  ImageButtons(int x, int y, int w, int h, PImage base, PImage roll, String strRoll, String strBase) {
    super(x,y,w,h);
    this.base = base;
    this.roll = roll;
    this.currentimage = base;
    this.strRoll = strRoll;
    this.strBase = strBase;
  }

  void update() {
    over();
    if (over){
	currentimage = roll;
	port.write(strRoll);	 
    } 
    else {
	currentimage = base;
	port.write(strBase);	 
    }
  }

  void over() {
    if( overRect(x, y, w, h) ) {
	over = true;
    } 
    else {
	over = false;
    }
  }

  void display() {
    image(currentimage, x, y);
  }
}