Elements self positioning in equilateral triangle arrangement

cristiano_b · November 17, 2022, 5:33pm

Hi all,

I’m trying to produce a red draggable circle with two other circles dynamically adapting their positions to create equilateral triangle. Could you please suggest a better solution than the one i paste here?

Ideally, in the final code, all the circles should be draggable.
Thanks in advance for your help.

let x1 = 400;
let y1 = 200;
let x2 = 350;
let y2 = 350;
let x3 = 200;
let y3 = 350;
let spd = 3;


function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(4);
  let r = 20;
  push();
  fill('red');
  circle(x1, y1, r);
  pop();
  push();
  fill('blue');
  circle(x2, y2, r);
  pop();
  push();
  fill('green');
  circle(x3, y3, r);
  pop();
  

  if (mouseIsPressed) {
    
    var red_blue = createVector(x2 - x1, y2 - y1);
    var blue_green = createVector(x2 - x3, y2 - y3);
    var green_red = createVector(x3 - x1, y3 - y1);
   
    red_blue.normalize();
    blue_green.normalize();
    green_red.normalize();

    let d_rb = dist(x1, y1, x2, y2);
    let d_bg = dist(x2, y2, x3, y3);
    let d_gr = dist(x1, y1, x3, y3);
  
      if (d_rb - d_bg > 5) {
        x2 += blue_green.x * spd;
        y2 += blue_green.y * spd;
        x2 -= red_blue.x * spd;
        y2 -= red_blue.y * spd;
      } else if (d_rb - d_bg < -5){
        x2 -= blue_green.x * spd;
        y2 -= blue_green.y * spd;
        x2 += red_blue.x * spd;
        y2 += red_blue.y * spd;
      } 

      if (d_gr - d_rb > -5) {
        x3 -= green_red.x * spd;
        y3 -= green_red.y * spd;
        x3 -= blue_green.x * spd;
        y3 -= blue_green.y * spd;
      } else {
        x3 += green_red.x * spd;
        y3 += green_red.y * spd;
        x3 += blue_green.x * spd;
        y3 += blue_green.y * spd;
      }
  }
}


// To drag the red circle
function mouseDragged() {
  x1 = mouseX;
  y1 = mouseY;
}

Chrisir · November 17, 2022, 6:01pm

Replace with array of PVector

Then you can for loop over it

PVector[] list = new PVector[3]; (or whatever it is in p5.js)

Or make a class TriangleCorner that has a PVector in it and functions show() and mouseDragged()

The class represents one corner / circle

cristiano_b · November 18, 2022, 7:21am

Thank you Chrisir,

I think that if I create a triangle then all the circles will move at the same time (right?). The effect that I’m looking for is to move the red and then the other two will run to reach the right position and stop there.
Anyway I’ll try your suggestion …

Chrisir · November 18, 2022, 8:38am

I rather meant an array of the 3 points

quark · November 18, 2022, 4:21pm

This is a really challenging problem and if I was to code this I would want to create a class to represent the ‘cicle’. Although it could be coded without the need for class it would be a real challenge and the code would be large, hard to maintain and difficult to scale up.
IIt’s made harder with this requirement -

Have you created classes in p5.js before?

Chrisir · November 18, 2022, 8:23pm

here is a quick demo with an array of corner objects (of a class).

You can drag all 3 points.
You can see that draw() is much shorter now.
You have more of the intelligence of the Sketch inside the class
-1 means NONE or undefined

BUT

the points don’t move on their own (your part)
it’s processing java flavor, not p5.js

TriangleCorner[] list = new TriangleCorner[3];  
int drag_index = -1; 

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

void setup() {
  size(600, 800);

  background(0);
  stroke(255); 

  list[0] = new TriangleCorner(400, 200, color(255, 0, 0)); 
  list[1] = new TriangleCorner(350, 350, color(0, 255, 0));
  list[2] = new TriangleCorner(200, 350, color(0, 0, 255));
}

void  draw() {
  background(0);

  // dragging ? 
  if  (drag_index != -1) {
    list[drag_index].setToMouse();
  } //if  

  // show lines 
  linePVector(list[0].pos, list[1].pos);
  linePVector(list[1].pos, list[2].pos);
  linePVector(list[2].pos, list[0].pos);

  // show circles
  for (TriangleCorner tc : list) {
    tc.show();
  }//for
} // func 

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

void mousePressed() {
  // search circle 

  drag_index=-1; // reset

  int i=0;
  for (TriangleCorner tc : list) {
    if (tc.nearMouse()) {
      drag_index=i; // set 
      return;
    }//if
    i++;
  }// for
}//func 

void mouseReleased() {
  drag_index=-1; // end dragging
}

void linePVector (PVector pv1, PVector pv2) {
  line(pv1.x, pv1.y, 
    pv2.x, pv2.y);
}//func 

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

class TriangleCorner {
  // 
  PVector pos;
  float r = 20;
  color col;

  //constr
  TriangleCorner (float x_, float y_, 
    color col_) {
    pos = new PVector(x_, y_);
    col = col_;
  }//constr

  void show() {
    fill(col);
    ellipse(pos.x, pos.y, r, r);
  }

  void setToMouse() {
    pos.x=mouseX; 
    pos.y=mouseY;
  }

  boolean nearMouse() {
    // returns true or false 
    return 
      dist(mouseX, mouseY, pos.x, pos.y) < 20;
  }//method
  //
}//class
//

cristiano_b · November 19, 2022, 1:56pm

Thank you Quark, I have created classes but in general I’m a very beginner … I’ll try to explore the thing a little more.

cristiano_b · November 19, 2022, 1:59pm

Ahhh … now I understand.
Ok thank you for the code, it seems a nice inspiration.

quark · November 19, 2022, 3:09pm

When looking at a problem like this it is good to try and describe the system / solution algorithms in natural language so here I go. I will call them balls for clarity.

Problem statement

We have a system of 3 balls positioned at the vertices of an equilateral triangle.
When any one of the balls is dragged then the other two will move to maintain their relative positions
The 2 following balls movement will exhibit some form of inertia so arrive at the correct position some time after the dragged ball stops.

Initial thoughts
Since any ball can be dragged then there is no significant difference between balls and so we can have a single class to represent them. The only difference is in the behaviour between dragged and following balls.

Any realistic solution should be able to

handle any number of balls i.e. scalable.
any arrangement of stationary balls, not just the equilateral triangle

Possible mechanism
To simplify the discussion we will restrict ourselves to the 3 ball system. In out system we will have 4 objects, the 3 balls and a fourth which I will call the anchor which is invisible. To keep everything simple the anchor will be represented by another class which has the following attributes

position [x,y]
array of balls in the system - each ball remembers its current position on the screen
array of ball at rest positions [rx, ry] these are relative to the anchor position [x,y]

On every frame we update the balls position with the following algorithm

for every ball
  if the ball is being dragged then
    calculate the new position of the ball
    move the anchor so the ball is at its correct rest position relative to the ball
  if the ball is not being dragged then
    if the ball is not at its rest position relative to the anchor then move towards it.

I would create this system in stages

Create the Ball class with the basic attributes
- a vector for its current screen position
Create the Anchor class with the basic attributes - a vector its position
- a vector for its current screen position
- an array of balls making up the system
- an array of vectors for the rest position for each ball
Add a draw method to the Ball class
Add a method to the Anchor to add a ball and its relative at rest postion
Test this by creating and displaying simple systems (different arrangements of balls)
Add a method to enable a ball to be dragged (several ways to do this)
Add the update method to the Ball class but move the following balls instantaneously to their correct position
Test the ball drag
Modify the update method to add ‘inertia’ for the following balls
Test it all out

I think you willl find this quite a challenge but it makes for a nice roadmap

cristiano_b · November 19, 2022, 5:31pm

Wow, thank you for the suggestions.
Let me see what I can do.

Have a wonderful weekend Peter.

cristiano_b · December 2, 2022, 11:18am

Here is a first experiment:
https://kunelab.webflow.io/resources/sysgame

It needs a little more work and in the end we don’t need to have every node draggable.

quark · December 2, 2022, 12:16pm

It looks great - well done

Topic		Replies	Views
Trouble rotating an array of objects Coding Questions	2	457	November 11, 2018
Randomly arrange imported shapes on canvas Coding Questions	7	672	April 29, 2019
Storing positions on an array and then calling the value (grid) Coding Questions	8	397	September 8, 2021
Clicking on and moving rotated shapes Coding Questions	0	321	April 26, 2020
I don't get what's wrong with my code (move rect) Coding Questions	4	481	January 8, 2022

Elements self positioning in equilateral triangle arrangement

Related topics