Selecting & Moving 2D Primitives

hmaz · October 14, 2019, 10:33am

Can someone please help me develop my script so that i can select individual entities and move them around the canvas using the mouse. Thankyou

SCRIPT:

//LIBRARIES
import controlP5.*;
//VARIABLES
int c = color(100);
//OBJECT VARIABLES
GColumn myGColumn;
//LIBRARY VARIABLES
ControlP5 cp5;
//SETUP
void setup() {
  size(1400, 1000);
  frameRate(10);
  strokeCap(ROUND);
  //CONTROLP5 SETUP
  cp5 = new ControlP5( this );
  cp5.addColorWheel("c", 1000, 800, 100 ).setRGB(color(128, 0, 255));
  //INITIALISE COMPONENT VARIABLES
  myGColumn = new GColumn();
}
void draw() {
  background(0);
  fill(c);

  myGColumn.Display();

  pushMatrix();
  translate(157, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(157*2, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(157*3, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(156*4, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(156*5, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(156*6, 0);
  myGColumn.Display();
  popMatrix();
}

(NEW TAB “GCOLUMN”)

//CLASS NAME
class GColumn {

  //VARIABLES
  int c;
  int x;
  int y;
  int rectAX;
  int rectAY;
  int rectAW;
  int rectAH;
  int rectBX;
  int rectBY;
  int rectBW;
  int rectBH;
  int circAX;
  int circAY;
  int circW;
  int circH;
  int circBX;
  int circBY;

  //DEFINE CONSTRUCTORS
  GColumn() {
    c = color(100);
    x = 0;
    y = 0;
    rectAX = 25;
    rectAY = 980;
    rectAW = 53;
    rectAH = 38;
    rectBX = 25;
    rectBY = 770;
    rectBW = 36;
    rectBH = 370;
    circAX = 25;
    circAY = 962;
    circW = 53;
    circH = 20;
    circBX = 25;
    circBY = 578;
  }

  //DEFINE FUNCTIONS
  void Display() {
    rectMode(CENTER);
    strokeWeight(1);
    rect(rectAX, rectAY, rectAW, rectAH);
    rect(rectBX, rectBY, rectBW, rectBH);
    strokeWeight(0);
    ellipse(circAX, circAY, circW, circH);
    ellipse(circBX, circBY, circW, circH);
  }
}

kll · October 14, 2019, 10:59am

-a- sorry this code posting does not work,
we can not copy paste it back into the PDE and try your code.
you should edit above
and delete your code,
press the
</> Preformatted text button
and copy / paste from PDE into the

```
type or paste code here
```

-b- you make one class, and call it with

myGColumn = new GColumn();

so you have ONE object.

with translate… you draw that at 7 places,

so you NOT have 7 objects you could move around

-c- as first step
make a Array or ArrayList with that class objects.

a basic structure would be:

class GColumn {
  float x,y;
  GColumn(float _x, float _y) {
    x = _x;
    y = _y;
  }
  void display() {
    point(x,y);
  }
}

int many = 7;
ArrayList<GColumn> myThings= new ArrayList<GColumn>();

void setup() {
  for ( int i = 0; i< many; i++ ) myThings.add( new GColumn(10,10+i*10) );
}

void draw() {
  for ( int i = 0; i< many; i++ ) myThings.get(i).display();
}

Waboqueox · October 14, 2019, 11:27am

I also would put in the classes a function:

 boolean clciked(){
   if( dist(mouseX,mouseY, MycirclularCenterX , MycirclularCenterY)
       > MyCircularObjectRadius) {
     return true; }
 else return false;
}

To check if the cursor is on your object ( If the item isn’t circular, like a rectangle or other shape, adjust the if to your case)

Then call another function to actualize the new position, example:

void update(int a, int b){
  this.centerX = a;
  this.centerY = b;
}

Your objects should have a function to be displayed, example:

class Circle{
  int centerX, centerY;
  
  void display(){
  ellipse (centerX, centerY , 100,100);
}
}

And then, in the mouseClicked or mouseDragged…

void mouseClicked(){
  if( Circle.clciked() ){
    Circle.update(mouseX, mouseY);
  }
}

Well, something similar, maybe the syntax isn’t correct or the arguments for the function clicked doesn’t have to be those… But I think this can provides you an idea about how to do

Hope this helps

Waboqueox · October 14, 2019, 11:41am

Well, here is a functional example:

Circle C1;

void setup() {
  size(displayWidth, displayHeight);
  C1 = new Circle(100,100,100);

}

void draw() {
  background(155,20,180);
  C1.display();
}

void mouseDragged() {
  C1.update();  
}

And the class example:

class Circle{
  int centerX,centerY,ellipseDiameter;
  
  Circle(int a, int b, int c){
    centerX = a;
    centerY = b;
    ellipseDiameter = c;
  }
  
  void display(){
    ellipse(centerX,centerY,ellipseDiameter,ellipseDiameter);
  }
  
  boolean clicked(){
    if( dist(mouseX,mouseY,centerX,centerY) < ellipseDiameter/2){
      return true;
    }else return false;    
  }
  
  void update(){
    if (this.clicked()){
      this.centerX = mouseX;
      this.centerY = mouseY;
    }
  }
}

Chrisir · October 14, 2019, 5:16pm

that was the original post’s code:

//LIBRARIES
import controlP5.*;

//VARIABLES
int c = color(100);

//OBJECT VARIABLES
GColumn myGColumn;

//LIBRARY VARIABLES
ControlP5 cp5;

//SETUP
void setup() {
  size(1400, 1000);

  frameRate(10);
  strokeCap(ROUND);

  //CONTROLP5 SETUP
  cp5 = new ControlP5( this );
  cp5.addColorWheel("c", 1000, 800, 100 ).setRGB(color(128, 0, 255));

  //INITIALISE COMPONENT VARIABLES
  myGColumn = new GColumn();
}

void draw() {
  background(0);

  fill(c);
  myGColumn.Display();

  pushMatrix();
  translate(157, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(157*2, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(157*3, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(156*4, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(156*5, 0);
  myGColumn.Display();
  popMatrix();

  pushMatrix();
  translate(156*6, 0);
  myGColumn.Display();
  popMatrix();
}

// (NEW TAB “GCOLUMN”) ==========================================================

//CLASS NAME
class GColumn {

  //VARIABLES
  int c;

  int x;

  int y;

  int rectAX;

  int rectAY;

  int rectAW;

  int rectAH;

  int rectBX;

  int rectBY;

  int rectBW;

  int rectBH;

  int circAX;

  int circAY;

  int circW;

  int circH;

  int circBX;

  int circBY;

  //DEFINE CONSTRUCTORS
  GColumn() {

    c = color(100);

    x = 0;

    y = 0;

    rectAX = 25;

    rectAY = 980;

    rectAW = 53;

    rectAH = 38;

    rectBX = 25;

    rectBY = 770;

    rectBW = 36;

    rectBH = 370;

    circAX = 25;

    circAY = 962;

    circW = 53;

    circH = 20;

    circBX = 25;

    circBY = 578;
  }

  //DEFINE FUNCTIONS
  void Display() {

    rectMode(CENTER);

    strokeWeight(1);

    rect(rectAX, rectAY, rectAW, rectAH);

    rect(rectBX, rectBY, rectBW, rectBH);

    strokeWeight(0);

    ellipse(circAX, circAY, circW, circH);

    ellipse(circBX, circBY, circW, circH);
  }//method
}//class
//

Chrisir · October 14, 2019, 5:28pm

This new version expresses the purpose of using a class stronger:

we bring the position inside each object and don’t use translate in draw() for the position.
we have several objects (each column is an object) and not one object that is shown in different places
the objects are all in an array
improved constructor

(that has all been mentioned)

To read more about objects and object oriented programming, see https://www.processing.org/tutorials/objects/

Chrisir


//LIBRARIES
import controlP5.*;

//VARIABLES
// none 

//OBJECTS 
GColumn[] myGColumns = new GColumn[5];

//LIBRARY VARIABLES
ControlP5 cp5;

//SETUP
void setup() {
  size(1400, 1000);

  strokeCap(ROUND);

  //CONTROLP5 SETUP
  cp5 = new ControlP5( this );
  cp5.addColorWheel("c", 1000, 800, 100 ).setRGB(color(128, 0, 255));

  //INITIALISE COMPONENT VARIABLES
  for (int i=0; i<myGColumns.length; i++) {
    myGColumns[i] = new GColumn( 157*i + 12, 0 );
  }//for
}//func 

void draw() {
  background(0);

  for (GColumn myGC : myGColumns) {
    myGC.Display();
  }//for
}//func 

// (NEW TAB “GCOLUMN”) ==========================================================

//CLASS NAME
class GColumn {

  //VARIABLES
  color c;

  int x;
  int y;

  int rectAX;
  int rectAY;

  int rectAW;
  int rectAH;

  int rectBX;
  int rectBY;

  int rectBW;
  int rectBH;

  int circAX;
  int circAY;

  int circW;
  int circH;

  int circBX;
  int circBY;

  //DEFINE CONSTRUCTORS
  GColumn( int x_, int y_) {

    // color 
    c = color(random(255), random(100), 0);

    // pos
    x = x_;
    y = y_;

    rectAX = 25;
    rectAY = 980;

    rectAW = 53;
    rectAH = 38;

    rectBX = 25;
    rectBY = 770;

    rectBW = 36;
    rectBH = 370;

    circAX = 25;
    circAY = 962;

    circW = 53;
    circH = 20;

    circBX = 25;
    circBY = 578;
  }

  //DEFINE FUNCTIONS
  void Display() {
    pushMatrix(); 
    translate(x, y); 
    rectMode(CENTER);
    fill(c); 
    strokeWeight(1);
    rect(rectAX, rectAY, rectAW, rectAH);
    rect(rectBX, rectBY, rectBW, rectBH);
    strokeWeight(0);
    ellipse(circAX, circAY, circW, circH);
    ellipse(circBX, circBY, circW, circH);
    popMatrix();
  }//method
}//class
//

Chrisir · October 14, 2019, 7:54pm

And here you can finally

select / unselect the columns and
change the color of the selected column with the colorwheel

//LIBRARIES
import controlP5.*;

// CONSTANTS 
final int NONE = -1; 

//VARIABLES
int selected=NONE; // which column is selected?   

float [] posColorWheel;  // ColorWheel properties  
int widthColorWheel;
int heightColorWheel;

//OBJECTS in an array 
GColumn[] myGColumns = new GColumn[5];

//LIBRARY VARIABLES
ControlP5 cp5;

//SETUP
void setup() {
  size(1400, 1000);

  strokeCap(ROUND);

  //CONTROLP5 SETUP
  cp5 = new ControlP5( this );
  cp5.addColorWheel("c", 1000, 800, 100 ).setRGB(color(128, 0, 255));

  //
  posColorWheel = cp5.get(ColorWheel.class, "c").getPosition(); 
  printArray(posColorWheel);
  widthColorWheel = cp5.get(ColorWheel.class, "c").getWidth();
  heightColorWheel = cp5.get(ColorWheel.class, "c").getHeight();

  //INITIALISE COMPONENT VARIABLES
  for (int i=0; i<myGColumns.length; i++) {
    myGColumns[i] = new GColumn( 157*i + 12, 0, i );
  }//for
}//func 

void draw() {
  background(0);

  for (GColumn myGC : myGColumns) {
    myGC.Display();
  }//for
}//func 

//------------------------------------------------------------

void mousePressed() {
  // is mouse over color wheel? 
  if (overColorWheel())
    return; // leave here 

  // reset 
  selected=NONE;

  // search selected
  int i=0; 
  for (GColumn myGC : myGColumns) {
    if (myGC.over()) { 
      selected = i; 
      return;
    }
    i++;
  }//for
}//func 

boolean overColorWheel() {
  // is mouse over color wheel? 
  return mouseX>posColorWheel[0] && 
    mouseX<posColorWheel[0]+widthColorWheel && 
    mouseY>posColorWheel[1] && 
    mouseY<posColorWheel[1]+ heightColorWheel  ;
}//method 

void controlEvent(ControlEvent theEvent) {
  if (theEvent.isController()) { 
    // changing the value
    if (theEvent.getController().getName()=="c") {
      // color c = cp5.getController("c").getRGB();
      color c = cp5.get(ColorWheel.class, "c").getRGB();
      if (selected!=NONE) {
        myGColumns[selected].c = c;
      }//if
    }
  }
}

// (NEW TAB “GCOLUMN”) ==========================================================

//CLASS NAME
class GColumn {

  //VARIABLES
  color c;

  int x;
  int y;

  int id;  // its ID 

  int rectAX;
  int rectAY;

  int rectAW;
  int rectAH;

  int rectBX;
  int rectBY;

  int rectBW;
  int rectBH;

  int circAX;
  int circAY;

  int circW;
  int circH;

  int circBX;
  int circBY;

  //DEFINE CONSTRUCTORS
  GColumn( int x_, int y_, 
    int id_) {

    // color 
    c = color(random(255), random(100), 0);

    // pos
    x = x_;
    y = y_;

    id=id_;

    rectAX = 25;
    rectAY = 980;

    rectAW = 53;
    rectAH = 38;

    rectBX = 25;
    rectBY = 770;

    rectBW = 36;
    rectBH = 370;

    circAX = 25;
    circAY = 962;

    circW = 53;
    circH = 20;

    circBX = 25;
    circBY = 578;
  }

  //DEFINE FUNCTIONS
  void Display() {
    pushMatrix(); 
    translate(x, y); 
    rectMode(CENTER);
    fill(c); 
    if (selected==id)
      stroke(255); 
    else 
    noStroke();
    strokeWeight(1);
    //rect(rectAX, rectAY, rectAW, rectAH);
    rect(rectBX, rectBY, rectBW, rectBH);
    strokeWeight(0);
    ellipse(circAX, circAY, circW, circH);
    ellipse(circBX, circBY, circW, circH);
    popMatrix();
  }//method

  boolean over() {
    return mouseX>x-rectBX-rectBW/2 && 
      mouseX<x+rectBX+rectBW/2 && 
      mouseY>y+rectBY-rectBH/2 && 
      mouseY<y+rectBY+rectBH/2  ;
  }//method 
  //
}//class
//

hmaz · October 14, 2019, 10:20pm

Oh my gosh, i cant thank you all enough for your assistance. Thankyou Thankyou!!
I apologise for incorrect posting protocols as i have never posted and am only very very new to processing.

Topic		Replies	Views
Selecting & Moving 3D Primitives - urgent Libraries	9	751	October 15, 2019
Need help with game project Coding Questions homework	43	1537	November 16, 2020
Beginners, processing, moving more than one object Coding Questions	4	578	March 3, 2019
Need some help with this program idea \| i'm a beginner! Coding Questions homework	10	439	August 13, 2020
2d array movement help Coding Questions	4	364	October 24, 2020

Selecting & Moving 2D Primitives

Related topics