Beginners, processing, moving more than one object

Processing Coding Questions
1

hello, i am a super beginner at processing and java, but i have a reasonable background at C language, so i know some of the concepts of programing, but i decided learn something new, and i am trying to learn processing.

so, my problem today is this:
-i want to draw 2 (or more) rectangles on the window, and move it based on:
-if the mouse is pressed;
AND
-if the mouse X and Y its inside of the rectangle

so based on this i created the following program, but it has some bugs.
1- the 2 rectangle it can only be moved if i did not realesed the mouse out of the initial ractangle limits (its hard to explain)
2- the 2 rectangle , after being initialized, it will have the the X and Y always equals
3- if i cliked down of the limits of the 1 rectangle it will move, wich it is not suposed.
4-and others…

its weird that they are the same type of object but diferent bugs, its confusing me.

main

 Retangulo quadr = new Retangulo();
 Retangulo quadr2 = new Retangulo();

  

void setup(){

  size(1800,1000);
 
   quadr.incia_rect(0,0,255, 50, 50);
   quadr2.incia_rect(0, 255, 0, 300, 330);
}

void draw(){
 
   

  background(255);
   quadr.move_rect();
   quadr2.move_rect();
  
  //i was trying to debug the program with this, viewing the current position of each variable, but it seems that everything its ok :((
  println(mouseX, mouseY, quadr.xpos, quadr.ypos, quadr2.xpos, quadr2.xpos, quadr.f, quadr2.f);
  
}

  


//with this conditions i assume that the rectangle will be 100*50
//it has one condition for each object, (i dont know if this is the best way(or even a way xD) to do this, because i am still a noob :) )
 void mousePressed() {
  if(mouseX >= quadr.xpos & mouseX <= quadr.xpos+100 & mouseY >= quadr.ypos & mouseX <= quadr.ypos+50){
    quadr.f=true;
 }
    if(mouseX >= quadr2.xpos & mouseX <= quadr2.xpos+100 & mouseY >= quadr2.ypos & mouseX <= quadr2.ypos+50){
    quadr2.f=true;
 } 
}

void mouseReleased(){
  quadr.f=false;
  quadr2.f=false;
}

retangulo

 class Retangulo{

  float xpos;      //corrent x position of the rectangle
  float ypos;      //corrent y position of the rectangle
  boolean f=false;      //this variable it is to true when the mouse is pressed and the current positions of mouse are in beetween of the rectangle limits
 
  int clr;        //variables used to color the rectangle
  int clg;
  int clb;
  
  
  //funtion the initiates the rectangle in begining of the program
  //xinc and yinc are intial the positions of the rectangle
  void incia_rect(int r, int g, int b, float xinc, float yinc){
      fill(r,g,b);
     stroke(255, 0, 0);
    
    rect(xinc,yinc,100,50);
    
    xpos=xinc;
    ypos=yinc;
    clr=r;
    clg=g;
    clb=b;
  }

//this fuction its to move the rectangle while the condition its true

  void move_rect(){
  if(f==true){
       fill(0,0,255);
   stroke(255, 0, 0);
    rect(mouseX,mouseY,100,50);
    xpos=mouseX;
    ypos=mouseY;
   
    }else{
      fill(0,0,255);
   stroke(255, 0, 0);
    rect(xpos,ypos,100,50);
    }

  }
}
1 Like
2

here

if (mouseX >= quadr2.xpos && mouseX <= quadr2.xpos+100 &&
    mouseY >= quadr2.ypos && mouseX <= quadr2.ypos+50) {

you have used mouseX one time too much (last one)

this is true for both if-clauses

you can also work with else if here

Remark

Instead of if (f==true) it’s shorter to write if (f)

Remark

there is a tutorial on objects, you could use a constructor instead of incia_rect

https://processing.org/tutorials/objects/

Remark

instead of int r,g,b use data type color.

https://processing.org/reference/color_datatype.html

Chrisir

P.S.

Full Sketch:


Retangulo quadr = new Retangulo();
Retangulo quadr2 = new Retangulo();

void setup() {
  size(1800, 1000);

  quadr.incia_rect(0, 0, 255, 50, 50);
  quadr2.incia_rect(0, 255, 0, 300, 330);
}

void draw() {
  background(255);
  quadr.move_rect();
  quadr2.move_rect();

  //i was trying to debug the program with this, viewing the current position of each variable, but it seems that everything its ok :((
  println(mouseX, mouseY, quadr.xpos, quadr.ypos, quadr2.xpos, quadr2.xpos, quadr.f, quadr2.f);
}

//with this conditions i assume that the rectangle will be 100*50
//it has one condition for each object, (i dont know if this is the best way(or even a way xD) to do this, because i am still a noob :) )
void mousePressed() {
  if (mouseX >= quadr.xpos && mouseX <= quadr.xpos+100 && 
    mouseY >= quadr.ypos && mouseY <= quadr.ypos+50) {
    quadr.f=true;
  } else if (mouseX >= quadr2.xpos && mouseX <= quadr2.xpos+100 &&
    mouseY >= quadr2.ypos && mouseY <= quadr2.ypos+50) {
    quadr2.f=true;
  }
}

void mouseReleased() {
  quadr.f=false;
  quadr2.f=false;
}

//=====================================================

class Retangulo {

  float xpos;      //corrent x position of the rectangle
  float ypos;      //corrent y position of the rectangle

  boolean f=false;      //this variable it is to true when the mouse is pressed and the current positions of mouse are in beetween of the rectangle limits

  int clr;        //variables used to color the rectangle
  int clg;
  int clb;

  //funtion the initiates the rectangle in begining of the program
  //xinc and yinc are intial the positions of the rectangle
  void incia_rect(int r, int g, int b, 
    float xinc, float yinc) {
    fill(r, g, b);
    stroke(255, 0, 0);

    // rect(xinc, yinc, 100, 50);  // NO 

    xpos=xinc;
    ypos=yinc;

    clr=r;
    clg=g;
    clb=b;
  }

  //this fuction its to move the rectangle while the condition its true

  void move_rect() {
    if (f) {
      fill(0, 0, 255);
      stroke(255, 0, 0);
      rect(mouseX, mouseY, 100, 50);
      xpos=mouseX;
      ypos=mouseY;
    } else {
      fill(0, 0, 255);
      stroke(255, 0, 0);
      rect(xpos, ypos, 100, 50);
    }
  }
  //
}//class
//
1 Like
3

OMG TY so much, i checked that function almost 10 times, and everyding was wrong for 1 letter xD.
about using the constructor, i tried to implemented it, but it it was causing an weird error, something like
“java.lang.runtimeexception”, and “java.lang.reflect.InvocationTargetException”, so i decided to do it this way, and maybe later try to improve it.
Ty so much again

4

Glad it helped!

Here is a new version

  • with color,
  • constructor
  • and mouseOver() function in the class

Chrisir



Retangulo quadr = new Retangulo(color(0, 0, 255), 50, 50); // blue 
Retangulo quadr2 = new Retangulo(color(0, 255, 0), 300, 330); // green 

void setup() {
  size(1800, 1000);
}//func 

void draw() {
  background(255);
  quadr.moveAndDisplayRect();
  quadr2.moveAndDisplayRect();

  // i was trying to debug the program with this, viewing the current position of each variable, but it seems that everything its ok :((
  // println(mouseX, mouseY, quadr.xpos, quadr.ypos, quadr2.xpos, quadr2.xpos, quadr.dragAndDrop, quadr2.dragAndDrop);
}//func 

void mousePressed() {
  if (quadr.mouseOver()) {
    quadr.dragAndDrop  = true;
  } else if (quadr2.mouseOver()) {
    quadr2.dragAndDrop = true;
  }
}//func 

void mouseReleased() {
  quadr.dragAndDrop  = false;
  quadr2.dragAndDrop = false;
}//func 

//=====================================================

class Retangulo {

  float xpos;      //corrent x position of the rectangle
  float ypos;      //corrent y position of the rectangle

  boolean dragAndDrop=false;   //this variable it is to true when the mouse is pressed and the current positions of mouse are in beetween of the rectangle limits

  //variable used to color the rectangle
  color colorRectangle; 

  //constr 
  //funtion initiates the rectangle in begining of the program
  //xinc and yinc are intial the positions of the rectangle
  Retangulo(color colorRectangleinc, 
    float xinc, float yinc) {

    xpos=xinc;
    ypos=yinc;

    colorRectangle=colorRectangleinc;
  }//constr 

  //this fuction moves the rectangle while the condition dragAndDrop is true and displays it 
  void moveAndDisplayRect() {
    // move
    if (dragAndDrop) {
      xpos=mouseX;
      ypos=mouseY;
    }

    //display 
    fill(colorRectangle);
    stroke(255, 0, 0);  //RED 
    rect(xpos, ypos, 100, 50);
  }//method

  boolean mouseOver() {
    // returns true or false 
    //with this conditions i assume that the rectangle will be 100*50
    return 
      mouseX >= xpos && mouseX <= xpos+100 && 
      mouseY >= ypos && mouseY <= ypos+50;
  }//method
  //
}//class
//
1 Like
5

ohh, i like this version with the constructor, and especially the

mouseOver()

funtion , from now on i will implement everything i learned here
ty so much once more

1 Like