Connect squares with mouse click

Programming Questions

onesilent..

Connect squares with mouse click

in Programming Questions • 7 months ago

Hi all,

I just started learning processing (again), and now i have some questions. I have one class called Square and it draws squares when clicked and it stores them in an ArrayList. The ArrayList adds it's elements dynamically. Now i wanted to add PVector lines from one point to another. When i create two squares on different coordinates i want them to connect with a line. When i create three squares i want them all to be connected. So by my logic i stored the coordinates in point1 and point2. But i don't know how to do this, so help :). Here is the code:

float size;
float speedX;
float speedY;
Square(float tempX, float tempY, float tempSize){
posX = tempX;
posY = tempY;
size = tempSize;
}
void display(){
rectMode(CENTER);
fill(0);
noStroke();
rect(posX, posY, size, size);
}
}

And the main sketch

ArrayList square;
PVector[] point1;
PVector[] point2;
float randomX = random(0, 600);
void setup(){
size(600, 600);
background(255);
smooth();
square = new ArrayList();
point1 = new PVector[100];
point2 = new PVector[100];
}
void draw(){
background(255);
for(int i=0; i < square.size(); i++){
Square s = (Square) square.get(i);
s.display();
}
}
void mouseReleased(){
if(mouseButton == LEFT){
square.add(new Square(mouseX, mouseY, random(10, 25)));
for(int i=0; i < square.size(); i++){
point1[i] = new PVector(mouseX, mouseY);
println("First" + point1[i].get());
}
for(int y=0; y < square.size(); y++){
point2[y] = new PVector(mouseX, mouseY);
println("Second" + point2[y].get());
}
}
}

Replies(4)

Chrisir

Re: Connect squares with mouse click

7 months ago

I recommend a class Connection which is in an arraylist named
connections

there you store the indices of the rects to be connected

class Connection {
int fromIndex;
int toIndex;
color colorOfThisConnection;
// ......................
}

when you add a rect, loop over all old rects that you have and connect them with the new one.
For each connection add a connection to the arraylist named
connections

btw
later each rect might have one connection point on the right side, the left side or upper and lower side (the middle of each side) - so you can have lines that don't cross the rects (or draw the lines before the rects)

Greetings, Chrisir

onesilent..

Re: Connect squares with mouse click

7 months ago

I am not sure i follow you. Although i know how to make an ArrayList, i am still confused as how to connect the two rectangles. If you have an example of how i can store the current coordinates of the mouse and the previous ones that would do. However i am still new and learning. Thank you for your help.

asimes

Re: Connect squares with mouse click

7 months ago

Your Squares already have all the information for making lines, you just have to access posX and posY once you have two or more Squares. This doesn't require an if statement either, just a for loop that only starts if square.size()-1 > 0.

ArrayList<Square> square = new ArrayList<Square>();
void setup() {
size(600, 600);
// These only need to be called once in setup
rectMode(CENTER);
smooth();
fill(0);
}
void draw() {
background(255);
// Type casting the ArrayList avoids needing to type cast here
for (int i = 0; i < square.size(); i++) square.get(i).display();
// Lines
stroke(0);
for (int i = 0; i < square.size()-1; i++) {
Square s1 = square.get(i);
Square s2 = square.get(i+1);
line(s1.posX, s1.posY, s2.posX, s2.posY);
}
}
void mouseReleased() {
if (mouseButton == LEFT) square.add(new Square(mouseX, mouseY, random(10, 25)));
}
// I guessed what the top of the class should be since it is missing in the copy / paste
class Square {
float posX, posY, size;
Square(float tempX, float tempY, float tempSize) {
posX = tempX;
posY = tempY;
size = tempSize;
}
void display() {
noStroke();
rect(posX, posY, size, size);
}
}

onesilent..

Re: Connect squares with mouse click

7 months ago

Thank you a lot for the reply, this solves the problem. And yes the posX and posY already have that information for the coordinates. Thank you again.

Top Reply