How to make a ellipse go to a certain coordinate when the mouse goes to the top left of the screen?

becpal

Im kind of new to processing. I have an idea for a interactive piece of around 7 circles bouncing around the page which is what I have done so far. When my mouse goes to the top left of the screen I want the circle to go to a certain co-ordinate/place on the screen as the circles are going to make up an abstract form.. Is that possible to achieve? I'm just not sure how I would go about doing it.. I am assuming I would need to use MouseX, Mouse Y and functions and variables, perhaps?

Sorry! I have tried looking at a lot of tutorials and trying to wrap my head around this as it is for an Interactive assignment and I am new to Processing...

So help would be much appreciated! Thank you :)

Chrisir

yes, you use MouseX, Mouse Y

and if it's near the 0,0 you change the complete behaviour

and then a global var goToCoordinate tells you that the complete behaviour is different now

if (dist(mouseX,mouseY,0,0) 
     goToCoordinate=true;

and in draw()

void draw() {
     if (goToCoordinate) {
     // do one behaviour ...............
}
else 
{
      /// other..................
}
}

before setup()

    boolean goToCoordinate=false; 

becpal

``// bouncing circle 
float circle_x = 300;
float circle_y = 20;
float move_x = 4;
float move_y = -4;

// target position coordinate 
float targetX = 411.5;
float targetY = 301.49;



boolean goToCoordinate = false;

void setup() {
  size(800, 800);
  smooth();
}

void draw() {
  background(0, 0, 0);

  circle_x = circle_x + move_x;
  circle_y = circle_y + move_y;
}

if (circle_x > width) {
  circle_x = width;
  move_x = -move_x;
}
if (circle_y > height) {
  circle_y = height;
  move_y = -move_y;
}
if (circle_x < 0) {
  circle_x = 0;
  move_x = -move_x;
}
if (circle_y < 0) {
  circle_y = 0;
  move_y = -move_y;
}


if (dist(mouseX, mouseY, 0, 0) {
  goToCoordinate=true;
} else {
  goToCoordinate = false;
}

// circle 
strokeWeight(1.419704556465149);
stroke(195, 0, 22);
noFill();
ellipse(circle_x, circle_y, 210, 210);

}
}

I am doing something wrong, as I keep getting a error message saying expecting EOF, found 'if' and I did auto format it, trying to see it more clearly where the problem might be in my code..

I think I might have one too many curly brackets ... :|

with this code I only tried with one ellipse, instead of the seven that need to be in there...

GoToLoop

• Useful tip: Hit CTRL+T inside the PDE for auto-format. So it's easier to spot wrong indentations! :-B
• @ line #25, draw() scope is being closed earlier! All code below is orphaned & outside any functions!
• @ #45, needs an extra close parens and a condition is lacking for dist()!

Chrisir

here

// bouncing circle 
float circle_x = 300;
float circle_y = 20;
float move_x = 4;
float move_y = -4;

// target position coordinate 
float targetX = 411.5;
float targetY = 301.49;



boolean goToCoordinate = false;

void setup() {
  size(800, 800);
  smooth();
} // end of setup()

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

void draw() {
  background(0, 0, 0);

  circle_x = circle_x + move_x;
  circle_y = circle_y + move_y;

  if (circle_x > width) {
    circle_x = width;
    move_x = -move_x;
  }
  if (circle_y > height) {
    circle_y = height;
    move_y = -move_y;
  }
  if (circle_x < 0) {
    circle_x = 0;
    move_x = -move_x;
  }
  if (circle_y < 0) {
    circle_y = 0;
    move_y = -move_y;
  }


  if (dist(mouseX, mouseY, 0, 0) < 30 ) {
    goToCoordinate=true;
  } 
  else {
    goToCoordinate = false;
  }

  // circle 
  strokeWeight(1.419704556465149);
  stroke(195, 0, 22);
  noFill();
  ellipse(circle_x, circle_y, 210, 210);
}


//

Chrisir

closing bracket in line 25 was wrong

the dist is now 30, maybe too much

now only if (goToCoordinate) {......................

is missing, see above

becpal

Am I meant to use if (goToCoordinate) {...................... as part of a decision statement to make the ellipse go to the coordinate (400,400)... which is where I want the ellipse to go...? If so how exactly would I go about doing that?

Chrisir

just calculate the distance between (400,400) and the ellipse using -

and then add it to the ellipse pos x,y

when you use *0,7 here, you got a damping

;-)

Chrisir

it's better when you try it and then post what you've got instead of just asking

but now I explained it in detail

;-)

becpal

`    //DECLARE
    Ball myBall; 
    Ball myBall2; 
    Ball myBall3; 
    Ball myBall4; 
    Ball myBall5; 
    Ball myBall6;
    Ball myBall7;

    void setup() {
      size(800, 800);
      smooth();
      frameRate(60);

    //INITIALISE
      myBall = new Ball(200,700);
      myBall2 = new Ball(400,500);
      myBall3 = new Ball(600,200);
       myBall4 = new Ball(50,300);
      myBall5 = new Ball(400,400);
      myBall6 = new Ball(80,100);
       myBall7 = new Ball(90,600);

    }


    void draw() {
      background(0);

    //CALL FUNCTIONALITY 
      myBall. run();
      myBall2. run();
      myBall3. run();
      myBall4. run();
      myBall5. run();
      myBall6. run();
      myBall7. run();
    }
    class Ball {
      // GLOBAL VARIABLES; LOCATION, SPEED

      float x=0;
      float y=0;
      float r=7;
      float t=6;
      float speedX= 7; 
      float speedY= 9; 
      boolean = goToCoordinate; 

      //CONSTRUCTOR; HOW TO BUILD THE CLASS INT VARIABLES CALL VARIABLES 
      Ball(float _x, float _y) {

        x= _x; 
        y= _y;
      }


      //FUNCTIONS 
      void run() {
        display(); 
        move(); 
        bounce(); 
        gravity();
      }

      void gravity() { 
        speedY += 0.2;
      }
      void bounce() { 
        if (x> width) {
          speedX = speedX * -1;
        }  
        if (x<0) {
          speedX = speedX * -1;
        }
        if (y> height) {
          speedY = speedY * -1;
        }
        if (y<0) {
          speedY = speedY * -1;
        }
      }
      void move() {
        x+= speedX;  
        y+= speedY;
      }
    }

      if (dist(mouseX, mouseY, 50, 50) < 30 ) {
        goToCoordinate=true;
      } 
      else {
        goToCoordinate = false;
      }

      void display() {
        strokeWeight(1.419704556465149);
        stroke(255, 255, 255);
        noFill();
        ellipse(x+8, y+7, 210, 210);

      }

`

I am using a class for the 7 balls I have bouncing around, will the balls still go to the coordinates I want them to go to if their in a class or will this be a problem?

Also how do I calculate the distance between 400,400 and the ellipses if its bouncing around the sketch? SORRY :( IT'S ALL VERY CONFUSING TO ME, NO MATTER HOW HARD I TRY TO UNDERSTAND IT. Sorry for all the questions, my teacher at uni doesn't really help -_-

So your help really means a lot to me.

Chrisir

your code doesn't run

this was outside a class or a function which is not allowed

if (dist(mouseX, mouseY, 50, 50) < 30 ) {
        goToCoordinate=true;
      }
      else {
        goToCoordinate = false;
      }

that won't work:

boolean = goToCoordinate; 

you closed the class in line 87 but this belongs inside the class

      void display() {
        strokeWeight(1.419704556465149);
        stroke(255, 255, 255);
        noFill();
        ellipse(x+8, y+7, 210, 210);

      }

you didn't hit CTRL+T inside the PDE for auto-format. So it's easier to spot wrong indentations

Do you want to move all balls to 400,400 when mouse is pressed? Then goToCoordinate belongs outside the class obviously

;-)

Chrisir

this is the start

boolean goToCoordinate = false; 


//DECLARE
Ball myBall; 
Ball myBall2; 
Ball myBall3; 
Ball myBall4; 
Ball myBall5; 
Ball myBall6;
Ball myBall7;

void setup() {
  size(800, 800);
  smooth();
  frameRate(60);

  //INITIALISE
  myBall = new Ball(200, 700);
  myBall2 = new Ball(400, 500);
  myBall3 = new Ball(600, 200);
  myBall4 = new Ball(50, 300);
  myBall5 = new Ball(400, 400);
  myBall6 = new Ball(80, 100);
  myBall7 = new Ball(90, 600);
}


void draw() {
  background(0);


  if (goToCoordinate) {

    // new behaviour - to do 

    myBall.goToCoordinate(); 
    myBall2.goToCoordinate(); 
    myBall3.goToCoordinate(); 
    myBall4.goToCoordinate(); 
    myBall5.goToCoordinate(); 
    myBall6.goToCoordinate(); 
    myBall7.goToCoordinate();
  }

  else {

    // normal behaviour

    //CALL FUNCTIONALITY 
    myBall. run();
    myBall2. run();
    myBall3. run();
    myBall4. run();
    myBall5. run();
    myBall6. run();
    myBall7. run();
  }

  if (dist(mouseX, mouseY, 50, 50) < 30 ) {
    goToCoordinate = true;
  } 
  else {
    goToCoordinate = false;
  }
}

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

class Ball {
  // GLOBAL VARIABLES; LOCATION, SPEED

  float x=0;
  float y=0;
  float r=7;
  float t=6;
  float speedX= 7; 
  float speedY= 9; 

  //CONSTRUCTOR; HOW TO BUILD THE CLASS INT VARIABLES CALL VARIABLES 
  Ball(float _x, float _y) {

    x= _x; 
    y= _y;
  }


  //FUNCTIONS 
  void run() {
    display(); 
    move(); 
    bounce(); 
    gravity();
  }

  void gravity() { 
    speedY += 0.2;
  }

  void bounce() { 
    if (x> width) {
      speedX = speedX * -1;
    }  
    if (x<0) {
      speedX = speedX * -1;
    }
    if (y> height) {
      speedY = speedY * -1;
    }
    if (y<0) {
      speedY = speedY * -1;
    }
  }

  void move() {
    x+= speedX;  
    y+= speedY;
  }

  void display() {
    strokeWeight(1.419704556465149);
    stroke(255, 255, 255);
    noFill();
    ellipse(x+8, y+7, 210, 210);
  }

  void goToCoordinate() {
    display();
  }
} // class 
// =======================================================
//

Chrisir

the idea is that you have two kinds of behaviour for the circles.

• normal: bouncing around

• special: mouse in corner: they go to 400,400

Therefore:

• your code must reflect that you have two kinds of behaviour

• your code must let the circles do different things depending on the current kind of behaviour

• your code must be able to switch between two kinds of behaviour

• the var goToCoordinate tells you which kind of behaviour we use at the moment

Your tasks

The first kind of behaviour (bouncing) you have

The 2nd kind of behaviour (go to 400,400) you need

I told you how to do the second:

calculate the distance between (400,400) and the ellipse using -

and then add it to the ellipse pos x,y

when you use *0,7 here, you got a damping

so it's

    x+=(400-x) * 0.26;
    y+=(400-y) * 0.26;
    display();

;-)

becpal

Ooooh! Thank you :)