moving image using class

Programming Questions

puma123

in Programming Questions • 1 years ago

hi all i am trying to move this image but it's not working. here is my code
//define a square class for animation
class Square {

/*----------properties-------*/
float x; //x location
float y; //y location
float speed; // speed of movement
int squareSize; // size of the square
color fillColor = color (255, 128, 0); // color of square
color strokeColor = fillColor;
boolean xRight = true; // where true = to the right and false = to the left
int easeFactor = 20; //amount of ease
/*------------contructor--------------*/
public Square(float newX, float newY, int newSize, float mySpeed) {
x = newX;
y = newY;
squareSize = newSize;
speed = mySpeed;
}
public void updatePosition() {
// find the distance from the target to the square
float distanceX = width-x;
// ease towards the target
float stepX = distanceX/easeFactor;
//...if the square position + step to it won't sent it over the edge...
if (x + squareSize + stepX < width) {
//move it by the step
x += stepX;
}
else { //othwerwise it will go over the edge, so just move to the edge
x = width - squareSize;
}
}
/*------------Methods--------------*/
public void move (float newX, float newY) {
newX = x;
newY = y;
if (xRight) { // if moving to the right
// if the x position has gone off the screen then we reset the square to the left had side of the screen
if (x + squareSize > width) {
// switch directions
xRight = false;
}
else {
x+=speed; // update the x position - x = x + 1;
}
}
else {
if (x < 0) {
// switch directions
xRight = true;
}
else {
x-=speed; // update the x position - x = x + 1;
}
}
}
public void display() {
PImage logo;
logo = loadImage("logo2.png");
image(logo);
}
//declare a var type square to hold our square
Square firstSquare;
//Square secondSquare;
//Square thirdSquare;
//Square fourthSquare;
//Square fifthSquare;
int genericSize = 40;
void setup() {
size(400, 400);
background(0);
firstSquare = new Square(0, random(0, height-genericSize), genericSize, random(0, 10));
// secondSquare = new Square(0, random(0, height-genericSize), genericSize, random(0, 10));
// thirdSquare = new Square(0, random(0, height-genericSize), genericSize, random(0, 10));
// fourthSquare = new Square(0, random(0, height-genericSize), genericSize, random(0, 10));
// fifthSquare = new Square(0, random(0, height-genericSize), genericSize, random(0, 10));
}
void mousePressed () {
// int easeFactor = 20;
firstSquare.move(mouseX, mouseY);
// easeFactor = mouseX-easeFactor;
}
void draw() {
background(0);
//draw the square
firstSquare.display();
//move the square
firstSquare.move(mouseX, mouseY);
}

Replies(9)

PhiLho

Well, usual advice: don't load an image on each frame!
Move the image declaration to the class field section, or even to the global level.
Then load the image in the constructor or in setup().

And use the correct syntax for image() call...
For example, use the x, y coordinates to specify where to draw it.
BTW, you seem to have inverted the assignments in move(): you assign the current x, y to the parameters of the function, while it should be the reverse, I think.

puma123

Re: Re: moving image using class

1 years ago

if i understood you is that what you mean
//constructor
public Square(float newX, float newY, int newSize, float mySpeed) {
    x = newX;
    y = newY;
    squareSize = newSize;
    speed = mySpeed;
    logo = loadImage("logo2.png");
    image(logo, 50, 50);
}

and what do you mean by correct syntax for the image?

PhiLho

Re: moving image using class

1 years ago

Yes, except you still draw it in display(), not in the constructor.

" what do you mean by correct syntax for the image?"
That the line image(logo); above isn't valid in Processing. You need coordinates to tell where to draw the image, as you did on your reply.

puma123

Re: Re: moving image using class

1 years ago

yeah but it's still not doing what i want it to do? I want this image to bounce on x axis and when i click somewhere it follow the mouse.

PhiLho

Re: moving image using class

1 years ago

Show the current state of your code.

puma123

Re: Re: moving image using class

1 years ago

here is the code i removed pimage i added a custom method or function to make the logo in the method. and when i called it in display nothing happens.

//define a square class for animation
class Square {
/*----------properties-------*/
float x; //x location
float y; //y location
float speed; // speed of movement
int squareSize; // size of the square
color fillColor = color (255, 0, 0); // color of square
color strokeColor = fillColor;
boolean xRight = true; // where true = to the right and false = to the left
/*------------contructor--------------*/
public Square(float newX, float newY, int newSize, float mySpeed) {
x = newX;
y = newY;
squareSize = newSize;
speed = mySpeed;
}
/*------------Methods--------------*/
public void move (int newX, int newY) {
if (xRight) { // if moving to the right
// if the x position has gone off the screen then we reset the square to the left had side of the screen
if (x + squareSize > width) {
// switch directions
xRight = false;
}
else {
x+=speed; // update the x position - x = x + 1;
}
}
else {
if (x < 0) {
// switch directions
xRight = true;
}
else {
x-=speed; // update the x position - x = x + 1;
}
}
}
// ----------------------------------------------------------------------
// METHODS
// ----------------------------------------------------------------------
public void display() {
rectMode(CENTER);
fill(fillColor);
stroke(strokeColor);
rect(x, y, squareSize, squareSize);
}
}
//public void customLogo(int x, int y, int squareSize ) {
//
//
// color fillColor = color (255, 0, 0); // color of square
// color strokeColor = fillColor;
//
// rectMode(CENTER);
// fill(fillColor);
// stroke(strokeColor);
// rect(x, y, squareSize, squareSize);
// textAlign(CENTER);
// fill(255);
// text("U", 200, 200);
//}
// ----------------------------------------------------------------------
// GLOBAL VARIABLES
// ----------------------------------------------------------------------
Square firstSquare;
int genericSize = 40;
// ----------------------------------------------------------------------
// BUILT-IN FUNCTIONS
// ----------------------------------------------------------------------
void setup() {
size(400, 400);
background(0);
int centerX = width/2;
int centerY = height/2-genericSize;
firstSquare = new Square(0, random(centerX, centerY), genericSize, random(0, 10));
}
void mouseDragged () {
firstSquare.move(mouseX, mouseY);
}
void mousePressed () {
firstSquare.move(mouseX, mouseY);
}
void draw() {
background(0);
//draw the square
firstSquare.display();
//move the square
firstSquare.move(mouseX, mouseY);
}

PhiLho

Re: moving image using class

1 years ago

Well, the rectangle is moving, bouncing on the sides.
If I replace the content of display() to call customLogo(x, y, squareSize); and make the first two parameters of this function to be float instead of int, it works too.
The U is fixed, I don't know if that's intended.
Also you don't use the parameters of move().

puma123

Re: moving image using class

1 years ago

i think i got it to working. Cheers for help mate :). A question though, is it possible to stop the animation i mean moving square once i click or drag and when i stop dragging it starts bouncing back and forth again?

PhiLho

Re: moving image using class

1 years ago

You can set a global boolean, eg. bBounce, set to true.
If true, call move() on it. If false, don't call it. The boolean is set to false when dragging start, reset to true when it ends.

Top Reply