We are about to switch to a new forum software. Until then we have removed the registration on this forum.

- All Categories 25.7K
- Announcements & Guidelines 13
- Common Questions 30
- Using Processing 22.1K
- Programming Questions 12.2K
- Questions about Code 6.4K
- How To... 4.2K
- Hello Processing 72
- GLSL / Shaders 292
- Library Questions 4K
- Hardware, Integration & Other Languages 2.7K
- Kinect 668
- Arduino 1K
- Raspberry PI 188
- Questions about Modes 2K
- Android Mode 1.3K
- JavaScript Mode 413
- Python Mode 205
- Questions about Tools 100
- Espanol 5
- Developing Processing 548
- Create & Announce Libraries 211
- Create & Announce Modes 19
- Create & Announce Tools 29
- Summer of Code 2018 93
- Rails Girls Summer of Code 2017 3
- Summer of Code 2017 49
- Summer of Code 2016 4
- Summer of Code 2015 40
- Summer of Code 2014 22
- p5.js 1.6K
- p5.js Programming Questions 947
- p5.js Library Questions 315
- p5.js Development Questions 31
- General 1.4K
- Events & Opportunities 289
- General Discussion 365

I got this square with four points Im looping and connecting with lines. My idea was to create rectangles and place them over the lines to be able to use different fills such as lerp etc.

Im getting the distance between the different vectors and are using that as length of the rectangles. Then my idea was to calculate the angle between the different points and use that for rotating each rectangle into place but my rotation get messed up.

Any hint for solving this?

```
PVector[] loc = new PVector[4];
void setup() {
size(500, 500);
background(255);
loc[0] = new PVector(100, 100);
loc[1] = new PVector(400, 100);
loc[2] = new PVector(100, 400);
loc[3] = new PVector(400, 400);
fill(100);
stroke(200);
for (int i = 0; i < loc.length; i++) {
strokeWeight(1);
ellipse(loc[i].x, loc[i].y, 10, 10);
for (int j=i+1; j < loc.length; j++) {
strokeWeight(2);
stroke(2);
line(loc[i].x, loc[i].y, loc[j].x, loc[j].y);
float distance = loc[i].dist(loc[j]);
float a = PVector.angleBetween(loc[i], loc[j]);
pushMatrix();
noFill();
strokeWeight(2);
stroke(1);
rectMode(CENTER);
rotate(a);
rect(loc[i].x, loc[i].y, distance,10);
popMatrix();
}
}
}
void draw() {
}
```

Thanks

## Answers

I assume this will help.

Notice that the translate call moves the origin to the corner of the main square. This is then the point that rotation happens around.

The translate can push them into place, even though it´s not at the correct place :). But it doesnt solve the rotation where the angles is a bit messed up. I made the window a bit bigger so it´s easierto see.

(Need to keep this line though. Otherwise you get to many and duplicate rects)

`for (int j=i+1; j < loc.length; j++) {`

Demo below. Choosing the proper reference will make things a bit easier. The order of the vectors in the function matter.

Kf

Ah, sorry, I didn't properly understand that/how you wanted to connect them. Hopefully Kf's post helped you more.

Thanks! That worked. Just for me to understand. I translated your sketch to "my own words". I get the angles right this time but the image is not kept together.

I understand this:

`PVector aux=PVector.sub(loc[i], loc[j]);`

subtracts the two vectorsBut what exactly does the new vector(1,0) do? float a = PVector.angleBetween(new PVector(1,0), aux);//aux.mag();

how can I edit my sketch for keeping the lines in place with the method below?

A line is between two points.

The angle is with respect to certain reference frame.

Most people use cartesian: x is positive to the right (with respect to 0,0) and Y is positive up

In Processing Y is positive down (left handed ref frame?)

It doesn't matter, we just need a way to measured the angle consistently.

Step 1: Choose your reference point. I translate my reference from 0,0 in my sketch to the first vector

Step2: Calculate the second vector based with respect to the first vector. Here I used subtract

Step 3: Measured the angle. In my cartesian way of thinking this... I chose vector (1,0) aka. the positive x axis with respect to my first vector.

NOTE:What is wrong with angleBetween(v,u);

Nothing wrong. You are just measuring something that is not in a cartesian frame. Actually, you are measuring the angle between both vectors, both vectors measured from the 0,0 point in your sketch.

Kf

Thanks! That makes sense.

I have now also edit my sketch, changed the translate index to:

`translate(loc[j].x, loc[i].y);`

so now Im getting all the rectangles in the right place.Thanks for your help with the rotation!