Make an object appear over an image

kguglielmo

I am trying to make a roulette wheel spin in processing. I will then have the ball spinning in the opposite direction. For the roulette wheel I simply used an image of the wheel and have it rotating. However, whenever I try to make the ball, it shows up on the outside of the image. Is there a way to make the ball appear over the image?

Below is my code:

float theta;

float thetaRate;

PImage img;

Ball balls = new Ball();

void setup(){

  size(700,700);

  background(#6AA21E);

  smooth();

  img= loadImage("roulette.jpg");

  thetaRate=.02;

}

void draw(){

  translate(width/2,height/2);

  theta+=thetaRate;

  rotate(theta);

  imageMode(CENTER);

  image(img,0,0);

  balls.move();

  balls.display();

}

class Ball {

  float r=10;

  float thetaB=0;

  float x;

  float y;

  void move(){

    x=r*cos(thetaB);

    y=r*sin(thetaB);
  }

  void display(){

    noStroke();

    fill(0);

    ellipse(x+width/2,y+height/2,16,16);

    thetaB+=0.2;

  } 
}

Thank you!!

koogs

(duplicate thread deleted)

koogs

just drawing the ball after the image should be enough

i think the problem here is that you're adding width / 2 and height / 2 to coordinates of the ball when it's already being affected by the translate at the start of draw(), effectively translating it twice.

just make line 64 ellipse(x, y, 16, 16); and that should be ok. i haven't tested this though 8)

PhiLho

Alternatively, wrap the lines:

  translate(width/2,height/2);
  theta+=thetaRate;
  rotate(theta);
  imageMode(CENTER); // Can go to setup() if it is always the same mode
  image(img,0,0);

between pushMatrix() / popMatrix(), to keep the transformation (translate / rotate) aiming only the image.

kguglielmo

awesome! Thank you!