hmaz
October 14, 2019, 10:33am
1
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
2
-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();
}
2 Likes
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
2 Likes
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;
}
}
}
1 Like
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
//
1 Like
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
//
1 Like
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
//
3 Likes
hmaz
October 14, 2019, 10:20pm
8
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.
1 Like