How to handle distance between three elements mousemoveable

edited January 2014 in How To...

Hi, i'm loading 3 PShape moveable using the MouseFunction/Example ( and i want this elements to change tone and dimension when moved (based on the distance between each others). it's a week i'm searchin' around the web to find a solution but now i'm here asking... i tried dist but it doesn't work, and i can't imagine a way to handle this becouse my shape appear in this way:

shape(svg, bx, by, boxSize, boxSize); //same dicitures, basic script of the example

i can work on the tone using fill and on the dimension directly adding values to boxSize but i can't extract the distance value becouse of bx and by

please help me, best, Filippo



  • edited January 2014

    Be warned, I've never dealt w/ PShape enough yet.

    Best approach would be creating a class to store all of those properties like x, y, w, h, c.
    Then, use a double loop to get distance between each other and change their c fields accordingly.

    The only online similar example I've got is about Dot bouncing objects which draws a line() linking them when they're close:

  • edited February 2014 Answer ✓

    Hi, here is an example that I hope is self explanatory, please also read the comments (I got here from another thread). The example only covers dragging of individual shapes (asked for in the other thread) but not the changes in color or dimension based on their distances - this though should be possible by extending the code given below.

    import java.util.*;
    ArrayList<Shape> shapes = new ArrayList<Shape>();
    Shape current;
    void setup() {
      size(400, 400);
      // store all your shapes inside an ArrayList shapes, below we load and add
      // 3 svg files (I copied the bot1.svg file to this sketch folder).
      // class Shape (see below) is a container for the svg PShape, its position and size. 
      shapes.add(new Shape(loadShape("bot1.svg")).setSize(50, 50).setPosition(40, 40));
      shapes.add(new Shape(loadShape("bot1.svg")).setSize(100, 100).setPosition(100, 100));
      shapes.add(new Shape(loadShape("bot1.svg")).setSize(20, 20).setPosition(50, 300));
    void draw() {
      for (Shape s:shapes) {
    void mouseDragged() {
      // when the mouse is dragged, check if Shape current is not null
      // and points to 1 of the shapes inside list shapes
      if (current!=null) {
        // adjust the position of the shape
        current.addPosition(mouseX-pmouseX, mouseY-pmouseY);
    void mousePressed() {
      // read the shapes List in reverse order and check 
      // if a shape has been activated
      ListIterator<Shape> l = shapes.listIterator(shapes.size());
      while (l.hasPrevious ()) {
        Shape shape = l.previous();
        boolean insideRect = inside(mouseX, mouseY, shape.x, shape.y, shape.width, shape.height);
        boolean insideCircle = inside(mouseX, mouseY, shape.x, shape.y, shape.width);
        // check if the mouse is inside the shape 
        // (use insideRect or insideCircle here depending on the nature of your shape)
        if (insideRect) {
          current = shape;
          // move shape to the end of the list so that it will be drawn
          // last and on top of all the other shapes inside the List shapes.
          Collections.rotate(shapes.subList(shapes.indexOf(shape), shapes.size( ) ), -1);
          // leave the loop
    void mouseReleased() {
      // release the reference from object current and reset to null.
      current = null;
    // intersection with a rectangular shape (position = top left corner)
    boolean inside(float theX0, float theY0, float theX1, float theY1, float theW, float theH) {
      return theX0>theX1 && theX0<theX1+theW && theY0>theY1 && theY0<theY1+theH;
    // intersection with a circular shape (position = top left corner)
    boolean inside(float theX0, float theY0, float theX1, float theY1, float theR) {
      return dist(theX0-theR/2, theY0-theR/2, theX1, theY1)<theR/2;
    // a Shape container, containing position, size and 
    // source of the shape. 
    class Shape {
      PShape shape;
      float x, y, width, height;
      Shape(PShape theShape) {
        shape = theShape;
        width = shape.width;
        height = shape.height;
      Shape setSize(int theWidth, int theHeight) {
        width = theWidth;
        height = theHeight;
        return this;
      Shape setPosition(int theX, int theY) {
        x = theX;
        y = theY;
        return this;
      Shape addPosition(int theX, int theY) {
        x += theX;
        y += theY;
        return this;
      void draw() {
        translate(x, y);
        shape(shape, 0, 0, width, height);
  • Thank you so much sojamo for your help, now i'll study precisiously how did you obtain this.Your comment are very good but i'm not okay using something i did not understand totally becouse it became impossible to go further!

    best, Filippo

Sign In or Register to comment.