Howto pass to class code (Draggingpic)

laimperiestro

Hello

I want to convert this code into class in order to use wherever is possible,

PImage sample;
int x, y; 
void setup() {
  size(1000, 600); 
  noStroke(); 
  sample=loadImage("G2.png");
  x=0;
  y=400;
} 
void draw() { 
  background(255); 
  image(sample, x, y, 50, 30);
} 
void mouseDragged() { 
  x=mouseX; 
  y=mouseY;
}

I rewrote this code this way, but it nor show mistakes neither works, and I don't konw what am I doing wrong...

Draggingpic Dragging = new Draggingpic(); 
void setup() {
  size(600, 600); 
  noStroke(); 
  Dragging.charge();  
}
void draw() { 
  background(255);   
  Dragging.mouseDragged();
}
class Draggingpic
{
  int x;
  int y;
  PImage sample;
  void Draggingpic(int posx,int posy,PImage sample2)
  { 
    x=posx;
    y=posy;
    sample = sample2;
  }  
  void charge()
  { 
    sample=loadImage("g2.png");  
  }
  void mouseDragged() 
  { 
    x=mouseX; 
    y=mouseY;    
  }
}

colouredmirrorball

It looks almost correct, except you forgot to call image() somewhere...

laimperiestro

Hi

I found that I haven't declare a new object for that class as variable and then in setup to call

Draggingpic Dragging;    //new object
PImage sample2;     //image 
void setup() {
  size(600, 600); 
  noStroke(); 
  sample2=loadImage("g2.png");
  Dragging = new Draggingpic(10,10,sample2);    //here appears an error now where is created an instance of that object
  //Dragging.charge();  
}

Now it just appeared a mistake, but I don't get howto declare an instance of that PImage there

Thanks

GoToLoop

https://forum.Processing.org/two/discussion/19271/coding-class-with-dragging

Chrisir

the constructor in the class withoud void

Draggingpic

laimperiestro

Hello

I replace this in setup

void setup() {
  size(600, 600); 
  noStroke(); 
  sample2=loadImage("g2.png"); 
  Dragging = new Draggingpic(10,10,sample2);
}

but the image still doesn't appear. Without void it'd work, but, no possible yet. Right now there are no errors, anyway no possible to see image nor of course drag it.

Chrisir

??

the constructor inside the class must be without void.

Chrisir

you need a line image(sample);

inside the class

in mouseDragged eg

laimperiestro

Hello

I delete that word, but as I say, it doesn't work yet. No image appearing on background, and obviously

Thanks

Chrisir

use image.....

loadImage is wrong!!!

the command is image(sample);

!!

laimperiestro

Hello

I wrote this in dragged...is it right, anyway....nothing, no image showing...

void mouseDragged() { sample2=loadImage("g2.png"); x=mouseX; y=mouseY; }

laimperiestro

Hi

Yhis is all my code now, where do I call the image?

Draggingpic Dragging;
PImage sample2; 
void setup() {
  size(600, 600); 
  noStroke(); 
  sample2=loadImage("g2.png"); 
  Dragging = new Draggingpic(10,10,sample2);
}
void draw() { 
  background(255);   
  Dragging.mouseDragged();
}
class Draggingpic
{
  int x;
  int y;
  PImage sample;
  Draggingpic(int posx,int posy,PImage sample3)
  { 
    x=posx;
    y=posy;
    sample = sample3;
  }
  void mouseDragged() 
  { 
    sample2=loadImage("g2.png");
    x=mouseX; 
    y=mouseY;        
  }
}

I guess is only one code line missing, but I don't know where...

Thanks

koogs

please highlight your code and press ctrl-o, don't rely on the backticks for formatting blocks of code.

laimperiestro

Hi

Draggingpic Dragging;
PImage sample2; 
void setup() {
  size(600, 600); 
  noStroke(); 
  sample2=loadImage("g2.png");
  Dragging = new Draggingpic(50,50,sample2);
}
void draw() { 
  background(255);   
  image(sample2,50,50,50,50);
  Dragging.mouseDragged();
}
class Draggingpic
{
  int x;
  int y;
  PImage sample;
  Draggingpic(int posx,int posy,PImage sample3)
  { 
    x=posx;
    y=posy;
    sample = sample3;
  }
  void mouseDragged() 
  { 
    x=mouseX; 
    y=mouseY;        
  }
}

colouredmirrorball

Add a method void display() to your Draggingpic class where you call image(sample,x,y);. Then call Dragging.display() somewhere in your draw method.

laimperiestro

Hello:

It works but not properly, I mean, at first appears the image but the point is that I need to drag while click pressed and droped when click button is released, not all time as it is shown now.

Thanks

Lord_of_the_Galaxy

You actually need to check when someone clicks on the image (use mousePressed()), then calculate the difference b/w original and new mouse coordinates when the mouse is released/dragged.

laimperiestro

Hi

I really am wondering why to add one more event mousePrresed if in the original code isn't included, and it works perfectly.

Thanks

Lord_of_the_Galaxy

Well then try this:

void draw(){
  background(255);
  Dragging.display();
  //No Dragging.mouseDragged() here
}

//now add this
void mouseDragged(){
  Dragging.mouseDragged();
}
//Rest of code is same.  

I also recommend that you check out the tutorials on the Processing page.

Chrisir

Hello,

The code above (from Nov 25) is not good code.

When you read the tutorial on objects (classes, OOP), you'll see you can improve the code.

Especially line 11: image(sample2,50,50,50,50); belongs into the class. In fact you don't use x,y in the class at all. You even don't use the image in the class.

As soon as you want to use multiple images you'll run into troubles.

Here is my sketch:

DraggingPic dragging;

void setup() {
  size(600, 600); 
  noStroke(); 
  dragging = new DraggingPic(50, 50, "g2.png");
}

void draw() { 
  background(255);   
  dragging.display();
  dragging.mouseDragged();
}

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

void mousePressed() {
  dragging.draggingpicMousePressed();
}

void mouseReleased() {
  dragging.draggingpicMouseReleased();
}

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

class DraggingPic
{
  int x;
  int y;
  PImage sample;

  // controls whether we are dragging (holding the mouse)
  boolean hold; 

  // constructor
  DraggingPic(int posx, int posy, 
    String imageNameAsString)
  { 
    x=posx;
    y=posy;
    sample = loadImage(imageNameAsString);
    sample.resize(55, 0);
  }// constructor

  void display() {
    image(sample, x, y);
  }

  void draggingpicMousePressed() {
    if (mouseX>x&&mouseY>y&&
      mouseX<x+sample.width && mouseY<y+sample.height) {
      hold=true;
    }
  }

  void draggingpicMouseReleased() {
    hold=false;
  }

  void mouseDragged() 
  {
    if (hold) {
      x=mouseX; 
      y=mouseY;
    }
  }//method
  //
}
// 

Chrisir

Lord_of_the_Galaxy

@Chrisir He wanted quite literally the original code thrown into a class, and that requires not having mousePressed() or mouseReleased()(even if it does not work). And besides, if he followed @colouredmirrorball, he would have already removed that image(sample2,50,50,50,50) and replaced it with a display function inside the Draggingpic class.
P.S. @Iamperiestro You ought to learn how to name your classes and variables more properly and conventionally.

laimperiestro

Hi

I don't feel comfortable with Chrisir answer (despite is proposed a new class to handle drag and drop, that's what I was asking for), because the fact is to write few lines instead to spread along, I originally had a code, then obtained twice the size of the code using class, now I have three times that size, that's why I say so, anyway I thank the effort for helping me with this staff. The point is to learn to write code using classes whenever is possible, because the code is reusable, looks more organized and is widely used if you need to draw on many objects with same properties

Thanks

Lord_of_the_Galaxy

@Iamperiestro Did you try my answer? That is just a little larger than yours and does the exact same thing. @Chrisir has given the correct answer as far as the problem of dragging images goes, but it was a bit different from the original code. So I don't see why you are uncomfortable with it.

Chrisir

It is not a bad thing that the code is longer though.

In fact, I often feel longer code is better readable and more explicit than shorter code.

Lord_of_the_Galaxy

And perhaps more importantly, it is very easy to reuse this longer code. It may seem longer now, but try with some 20-30 images. Then the hard coded version will be even more difficult to understand, and maybe even longer.

laimperiestro

Hi

Thanks for explanations and suggestions

laimperiestro

Hello

It's right Chrisir and Lord_of_the_Galaxy, I tried that code and it worked very good with and object array, the original code didn't permit to select-drag over a certain area, just wherever.
I put here some code which shows two animal (dam and hunter) whom would be dressed before starting a competition...and their new look is saved

int animalchoose;
PImage container1;
PImage container2;
PImage partialSave1;
PImage partialSave2;

DraggingPic[] myPicArray = new DraggingPic[16];   //objects array

void setup() 
{
    size(1000, 600); 
    noStroke(); 
    int colfirst,rowfirst;
    colfirst=450;
    rowfirst=100;
    //creating instances of objects
    for (int i=0; i < 4; i++) 
    {
      myPicArray[i] = new DraggingPic(colfirst,rowfirst=rowfirst+50,"a"+str(i)+".png");
    }
    rowfirst=100;
    for (int i=4; i < 8; i++) 
    {
      myPicArray[i] = new DraggingPic(colfirst+100,rowfirst=rowfirst+50,"a"+str(i)+".png");
    }
    rowfirst=100;
    for (int i=8; i < 12; i++) 
    {
      myPicArray[i] = new DraggingPic(colfirst+200,rowfirst=rowfirst+50,"a"+str(i)+".png");
    }
    rowfirst=100;
    for (int i=12; i < 16; i++) 
    {
      myPicArray[i] = new DraggingPic(colfirst+300,rowfirst=rowfirst+50,"a"+str(i)+".png");
    }

    container1=loadImage("c1.png");  
    container2=loadImage("c2.png");    
}

void draw() 
{ 
    background(255);
    textSize(22);
    fill(0, 102, 153);
    text("Try it on some clothing dragging and dropping and dress them",150, 50);
    image(container1,50,100,250,200);
    image(container2,50,400,250,200);

    for (int i=0; i < 16; i++) {
       myPicArray[i].display();
       myPicArray[i].mouseDragged();
    }
    if(animalchoose!=0)
     {
       save();
     }     
}

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

void mousePressed() 
{
    for (int i=0; i <16; i++) 
    {
      myPicArray[i].draggingpicMousePressed();
    }
}

void mouseReleased() {
    for (int i=0; i < 16; i++) 
    {
      myPicArray[i].draggingpicMouseReleased();
    }
  //identify which competitor has been selected
    stroke(200);
    if(mouseX>50 && mouseX<300 && mouseY>100 && mouseY<300)
    {     //dam choosen      
       animalchoose=1;
       println ("Dam has been selected ");
    }
    if(mouseX>50 && mouseX<300 && mouseY>400 && mouseY<600)
    {     //hunter choosen
       animalchoose=2;
       println ("Hunter has been selected ");
    }
}

// ===========================================
 //save image area each time a new detail is incorporated to their look
void save()
{    
     if(animalchoose==1)
     {
        partialSave1 = get(50,100,250,200);//save image area
        partialSave1.save("runner1.png");
        println( "Pic has been saved");
        animalchoose=0; 
     }
     if(animalchoose==2)
     {
       partialSave2 = get(50,400,250,200);//save image area![](![](https://postimg.org/image/g97ue78md/))
       partialSave2.save("runner2.png");
       println( "Pic has been saved");
       animalchoose=0;
     }
}

class DraggingPic
{
    int x;
    int y;
    PImage sample;

    // controls whether we are dragging (holding the mouse)
    boolean hold; 

    // constructor
    DraggingPic(int posx, int posy, 
      String imageNameAsString)
    { 
      x=posx;
      y=posy;
      sample = loadImage(imageNameAsString);
      sample.resize(55, 0);
    }// constructor

    void display() 
    {
      image(sample, x, y);
    }

    void draggingpicMousePressed() 
    {
      if (mouseX>x&&mouseY>y&&
        mouseX<x+sample.width && mouseY<y+sample.height) 
      {
        hold=true;
      }
    }

    void draggingpicMouseReleased() 
    {
      hold=false;
    }

    void mouseDragged() 
    {
      if (hold) 
      {
        x=mouseX; 
        y=mouseY;
      }
    }//method
}

Thanks