# Need to know how to make a draggable Tower of Hanoi game for a school project

**URL:** <https://discourse.processing.org/t/need-to-know-how-to-make-a-draggable-tower-of-hanoi-game-for-a-school-project/617>\
**Category:** Project Guidance\
**Tags:** homework\
**Created:** [June 2, 2018, 1:32am UTC](https://discourse.processing.org/t/need-to-know-how-to-make-a-draggable-tower-of-hanoi-game-for-a-school-project/617 "2018-06-02T01:32:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dankid\_123](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@Dankid\_123](https://discourse.processing.org/u/Dankid_123)\
**Post date:** [June 2, 2018, 1:32am UTC](https://discourse.processing.org/t/need-to-know-how-to-make-a-draggable-tower-of-hanoi-game-for-a-school-project/617/1 "2018-06-02T01:32:53Z")

</div>

Hi, I have a school project about to make a Tower of Hanoi game, I’ve made all the rings and stuff, but I have very little knowledge about dragging and other interaction options in Processing. I haven’t finished, but here is the rings. I’m not sure how to make the rings draggable.

```auto
int x = 100;

// represent the disks in each tower
int[] tower1 = {4, 3, 2, 1};
int[] tower2 = {0, 0, 0, 0};
int[] tower3 = {8, 0, 0, 0};
float r, g, b;
void setup() {
  size(600, 400);  
  rectMode(CENTER);
  r = random(0, 256);
  g = random(0, 256);
  b= random(0, 256);
}
void draw() {
  background(255);
  fill(r, g, b);
  //rect(400, 350, 166, 20);
  int y = 350;
  int yTwo = 350;
  int sizeTwo = 166;
  
  y = 350;
  // write a loop to loop 4 times
  for (int i = 0; i<tower1.length; i++) {
    int size = tower1[i] * 40;
    rect(x, y, size, 20, 7);
    y -= 50;
    r=random(0, 256);
    g=random(0, 256);
    b =random(0, 256);
  }
  
  y = 350;
  for (int i = 0; i<tower2.length; i++) {
    int size = tower2[i] * 40;
    rect(270, y, size, 20, 7);
    y -= 50;
    r=random(0, 256);
    g=random(0, 256);
    b =random(0, 256);
  }
  
  
  for (int u=0; u< tower3.length; u++) {
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 2, 2018, 2:08am UTC](https://discourse.processing.org/t/need-to-know-how-to-make-a-draggable-tower-of-hanoi-game-for-a-school-project/617/2 "2018-06-02T02:08:15Z")

</div>

Example of a thing you can drag:

```auto
float x,y;
boolean held;

void setup(){
  size(900,300);
  x = 150;
  y = 150;
  held = false;
}

void draw(){
  background(0);
  if(!held){
    x = lerp(x,(x<300)?(150):((x>600)?(750):(450)),.6);
    y = lerp(y,150,.6);
  }
  fill(64);
  ellipse(150,150,20,20);
  ellipse(450,150,20,20);
  ellipse(750,150,20,20);
  
  fill(128);
  if( over() ){ fill(200); }
  ellipse(x,y,100,100);
}

boolean over(){
 return(dist(x,y,mouseX,mouseY) < 50);
}

void mousePressed(){
  if( !held && over() ){
    held = true;
  }
}

void mouseDragged(){
  if( held ){
    x+=mouseX-pmouseX;
    y+=mouseY-pmouseY;
  }
}
    
void mouseReleased(){
  held = false;
}

```

---

<div class="post-metadata">

**Author:** ![Dankid\_123](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@Dankid\_123](https://discourse.processing.org/u/Dankid_123)\
**Post date:** [June 7, 2018, 11:26pm UTC](https://discourse.processing.org/t/need-to-know-how-to-make-a-draggable-tower-of-hanoi-game-for-a-school-project/617/3 "2018-06-07T23:26:28Z")

</div>

> [@TfGuy44](#):
>
> ```auto
> float x,y;
> boolean held;
> 
> void setup(){
> size(900,300);
> x = 150;
> y = 150;
> held = false;
> }
> 
> void draw(){
> background(0);
> if(!held){
> x = lerp(x,(x<300)?(150):((x>600)?(750):(450)),.6);
> y = lerp(y,150,.6);
> }
> fill(64);
> ellipse(150,150,20,20);
> ellipse(450,150,20,20);
> ellipse(750,150,20,20);
>   
> fill(128);
> if( over() ){ fill(200); }
> ellipse(x,y,100,100);
> }
> 
> boolean over(){
> return(dist(x,y,mouseX,mouseY) < 50);
> }
> 
> void mousePressed(){
> if( !held && over() ){
> held = true;
> }
> }
> 
> void mouseDragged(){
> if( held ){
> x+=mouseX-pmouseX;
> y+=mouseY-pmouseY;
> }
> }
>     
> void mouseReleased(){
> held = false;
> }
> 
> ```

Thank you, this helped me a lot!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 8, 2018, 2:25am UTC](https://discourse.processing.org/t/need-to-know-how-to-make-a-draggable-tower-of-hanoi-game-for-a-school-project/617/4 "2018-06-08T02:25:24Z")

</div>

Glad that the example from @TfGuy44 helped solve your problem.

Also relevant to draggable interaction in Processing: the Mouse Functions example sketch from the Processing examples list:

- [https://processing.org/examples/mousefunctions.html](https://processing.org/examples/mousefunctions.html)

…and the documentation for `mouseDragged()`:

- [https://processing.org/reference/mouseDragged\_.html](https://processing.org/reference/mouseDragged_.html)