# Join crosses with random lines

**URL:** <https://discourse.processing.org/t/join-crosses-with-random-lines/25395>\
**Category:** Coding Questions\
**Created:** [November 13, 2020, 12:12pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395 "2020-11-13T12:12:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 13, 2020, 12:12pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/1 "2020-11-13T12:12:35Z")

</div>

Hi everyone, I have a simple question but which one I’m blocking on. I would like to join by a line the center of two crosses at random.

I’m still new to processing.

I’ve understood that

line (x + 23, y + 23, random (int x), random (int y));

does not work because from what I understand the int cannot be put into coordinates directly.

Thank you in advance for your reply.

```auto

int x, y;

void setup() {
  
  
  
  size(1122, 793);
  background(255);

  
}

void draw() {

for ( int y = 20; y <=790; y += 20) { // Position des point en y , largeur total du positionnement en y, espace entre deux point en y
  for ( int x = 20 ; x <= 1100; x += 20){ // Position des point en x , largeur total du positionnement en x, espace entre deux point en 
    
    line(x, y, x+6, y+6); // Croix
    line(x+6, y, x, y+6); // Croix
  }
}

// Draw gray box
stroke(153);

line(x+23, y+23, , );

}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 13, 2020, 1:19pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/2 "2020-11-13T13:19:12Z")

</div>

> [@Dimdimtri](#):
>
> join by a line the center of two crosses at random.

x1 = random(width);  
y1 = random…  
x2 = random(width);  
y2 = random…

line(x1, y1,x2,y2);

write a function cross and call it from draw()

cross (x1,y1);  
cross (x2,y2);

**The function cross**

(not tested)

```auto
void cross (float x, float y) {

    line(x, y, x+6, y+6); // Croix line \
    line(x+6, y, x, y+6); // Croix /

}

```

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 13, 2020, 4:14pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/3 "2020-11-13T16:14:58Z")

</div>

Thanks for your reply ,  
I tried your code and I have a line with a cross at each end. Thank you.

I don’t know if I misinterpreted your code or misspoken. I have already done all the crosses, I just wanted to know how to use the data to create random lines. I put a picture to help understand better.

The lines were added on the screenshot 😉

 ![Capture d’écran 2020-11-13 à 17.07.46](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5dbd21ad2a3e31f76415d12bc28fa370f9bc04cf.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 13, 2020, 4:18pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/4 "2020-11-13T16:18:39Z")

</div>

> [@Dimdimtri](#):
>
> how to use the data to create random lines

This part?

```auto

x1 = random(width);
y1 = random…
x2 = random(width);
y2 = random…

line(x1, y1,x2,y2);

```

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 13, 2020, 4:54pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/5 "2020-11-13T16:54:10Z")

</div>

Yes I understand the random classic  
I just want to understand how to put in the random this to take one of the points like X1 and another like X2 from those already existing

```auto
for ( int y = 20; y <=790; y += 20) { // Position des point en y , largeur total du positionnement en y, espace entre deux point en y
  for ( int x = 20 ; x <= 1100; x += 20){ // Position des point en x , largeur total du positionnement en x, espace entre deux point en 
    
  //line(x, y, x+6, y+6); // Croix
  //line(x+6, y, x, y+6); // Croix
  
  point(x+3, y+3);

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 13, 2020, 5:01pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/6 "2020-11-13T17:01:26Z")

</div>

Hi @Dimdimtri,

Few advices on your code :

Most of the time, you don’t want to have hard coded values inside of your code like the spacing between the crosses (here `20`) or the size of the crosses specially when they are referenced multiple times. Instead, use variables and this is what they are meant for.

Just define them at the top of your program :

```auto
int crossSpacing = 20;
int crossSize = 6;

```

The pros of this method is that if you need to change the size of the crosses, just do it at the beginning of the sketch instead of changing it in 4 places (and it could be worse…)

So you can use them in your loop :

```auto
for ( int y = crossSpacing; y <= height - crossSpacing; y += crossSpacing) {
  for ( int x = crossSpacing; x <= width - crossSpacing; x += crossSpacing) {
    line(x, y, x + crossSize, y + crossSize);  
    line(x + crossSize, y, x, y + crossSize);
  }
}

```

And then to draw random lines between the crosses, you can choose two random points on the grid (their x and y coordinates are multiple of `crossSpacing`) and draw a line :

```auto
void randomLineOnGrid(int gridSpacing) {
  // The size of the grid on x and y
  int xSize = width / gridSpacing;
  int ySize = height / gridSpacing;
  
  // Choose random coordinates inside that space
  int x1 = int(random(xSize)) * gridSpacing;
  int y1 = int(random(ySize)) * gridSpacing;
  
  int x2 = int(random(xSize)) * gridSpacing;
  int y2 = int(random(ySize)) * gridSpacing;
  
  // Display the line
  line(x1, y1, x2, y2);
}

```

You can then call this function however you want (that’s also why we write functions!)

You will probably notice that the lines are not centered on the crosses because you are drawing the crosses from the upper left corner but you can fix this alone 😉

Also another way to do this is to store the origin points of the crosses then choose two random elements in that array and display the line

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 13, 2020, 5:24pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/7 "2020-11-13T17:24:09Z")

</div>

Thanks Josephh ( again ) !

For the part of the crosses I understood everything and much simpler thank you.

However, I still don’t understand the part of the line. I use the lines you made but I can’t see anything.

To refocus the lines does not tell me anything I think I already know;)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 13, 2020, 5:53pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/8 "2020-11-13T17:53:29Z")

</div>

> [@Dimdimtri](#):
>
> I can’t see anything.

Please post your entire code, so we can check it. Joseph is very experienced

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 13, 2020, 7:11pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/9 "2020-11-13T19:11:49Z")

</div>

Thanks guys

```auto
int crossSpacing = 20;
int crossSize = 6;

void setup() {
   
  size(1122, 793);
  background(255);

  
}

void draw() {

for ( int y = crossSpacing; y <= height - crossSpacing; y += crossSpacing) {
  for ( int x = crossSpacing; x <= width - crossSpacing; x += crossSpacing) {
    line(x, y, x + crossSize, y + crossSize);  
    line(x + crossSize, y, x, y + crossSize);
  }
}

}  

void randomLineOnGrid(int gridSpacing) {
  
  
  // The size of the grid on x and y
  int xSize = width / gridSpacing;
  int ySize = height / gridSpacing;
  
  // Choose random coordinates inside that space
  int x1 = int(random(xSize)) * gridSpacing;
  int y1 = int(random(ySize)) * gridSpacing;
  
  int x2 = int(random(xSize)) * gridSpacing;
  int y2 = int(random(ySize)) * gridSpacing;
  
  // Display the line
  
  line(x1, y1, x2, y2);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 13, 2020, 7:43pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/10 "2020-11-13T19:43:58Z")

</div>

Hello,

since you started the for loop not by 0 but with the spacing (`crossSpacing`), you need to add the spacing when calculating the random values

```auto
  // Choose random coordinates inside that space
  int x1 = int(random(xSize)) * gridSpacing+gridSpacing;
  int y1 = int(random(ySize)) * gridSpacing+gridSpacing;

  int x2 = int(random(xSize)) * gridSpacing+gridSpacing;
  int y2 = int(random(ySize)) * gridSpacing+gridSpacing;

```

Also you need to add `crossSize/2` to the values (to go to the center of the “X” and not to its upper left corner); I haven’t done this yet.

Warm regards,

Chrisir

**Full Sketch:**

```auto
int crossSpacing = 20;
int crossSize = 6;

void setup() {

  size(1122, 793);
  background(255);
}

void draw() {
  noLoop();
  for ( int y = crossSpacing; y <= height - crossSpacing; y += crossSpacing) {
    for ( int x = crossSpacing; x <= width - crossSpacing; x += crossSpacing) {
      line(x, y, x + crossSize, y + crossSize);  
      line(x + crossSize, y, x, y + crossSize);
    }
  }
  randomLineOnGrid(crossSpacing);
  randomLineOnGrid(crossSpacing);
  randomLineOnGrid(crossSpacing);
  randomLineOnGrid(crossSpacing);
}  

void randomLineOnGrid(int gridSpacing) {

  // The size of the grid on x and y
  int xSize = width / gridSpacing;
  int ySize = height / gridSpacing;

  // Choose random coordinates inside that space
  int x1 = int(random(xSize)) * gridSpacing+gridSpacing;
  int y1 = int(random(ySize)) * gridSpacing+gridSpacing;

  int x2 = int(random(xSize)) * gridSpacing+gridSpacing;
  int y2 = int(random(ySize)) * gridSpacing+gridSpacing;

  // Display the line
  line(x1, y1, x2, y2);
}
//

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 13, 2020, 8:44pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/11 "2020-11-13T20:44:27Z")

</div>

Yes, if you want to be even more modular, you can encapsulate the code in functions.

```auto
// Global variables
int crossSpacing = 20;
int crossSize = 6;

void setup() {
  size(1122, 793);
}

void draw() {
  // White background
  background(255);

  // Display the crosses
  displayCrosses();

  // Display 10 lines
  displayRandomLines(10);

  // Break the loop, it's not interactive here
  noLoop();
}  

/*
Display the crosses
 */
void displayCrosses() {
  for ( int y = crossSpacing; y <= height - crossSpacing; y += crossSpacing) {
    for ( int x = crossSpacing; x <= width - crossSpacing; x += crossSpacing) {
      line(x, y, x + crossSize, y + crossSize);  
      line(x + crossSize, y, x, y + crossSize);
    }
  }
}

/*
Draw a random line between crosses
 */
void randomLineOnGrid() {
  // The size of the grid on x and y
  int xSize = width / crossSpacing;
  int ySize = height / crossSpacing;

  // Choose random coordinates inside that space
  // Add half of the size of a cross
  int x1 = int(random(xSize)) * crossSpacing + crossSize / 2;
  int y1 = int(random(ySize)) * crossSpacing + crossSize / 2;

  int x2 = int(random(xSize)) * crossSpacing + crossSize / 2;
  int y2 = int(random(ySize)) * crossSpacing + crossSize / 2;

  // Display the line
  line(x1, y1, x2, y2);
}

/*
Display n random lines by calling the previous function
 */
void displayRandomLines(int n) {
  for (int i = 0; i < n; i++) {
    randomLineOnGrid();
  }
}

```

I commented the code, so I hope it’s more clear!

If you are not really sure how to use functions, check this link :

- [https://www.w3schools.com/java/java\_methods.asp](https://www.w3schools.com/java/java_methods.asp)

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 13, 2020, 10:08pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/12 "2020-11-13T22:08:28Z")

</div>

Thanks guys !

Tomorrow I read all this calmly to understand and I will answer you! Thank you again for your answers

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 14, 2020, 2:38pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/13 "2020-11-14T14:38:25Z")

</div>

Hi guys! @josephh @Chrisir  
I took a nice white sheet of paper and I took all the code from zero! And I say a big thank you, because in the end I learned how to put my code (and the next ones) in order. I learned some basics that I was missing. Thank you again to both of you! 🙂

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 14, 2020, 3:15pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/14 "2020-11-14T15:15:10Z")

</div>

Last question for which I can’t find the variable, where I have to modify the code to delimit the lines in the crossroads area?

I tried to modify the

```auto
  int xSize = width / crossSpacing;
  int ySize = height / crossSpacing;

```

but nothing

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 14, 2020, 3:43pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/15 "2020-11-14T15:43:19Z")

</div>

Do you mean restrict the area in which the random lines can be created?

If so, you can restrict the range of a random coordinates like this :

```auto
// the random value will be limited by 5
// So you'll have a margin of 5 crosses
int x1 = int(random(5, xSize - 5)) * crossSpacing + crossSize / 2;

```

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 14, 2020, 5:14pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/16 "2020-11-14T17:14:03Z")

</div>

Thanks, I don’t know if it’s luck or not, but thinking about it a bit I found:

```auto
  int x1 = int(random(1, xSize)) * crossSpacing + crossSize / 2;
  int y1 = int(random(1, ySize)) * crossSpacing + crossSize / 2;

  int x2 = int(random(1, xSize)) * crossSpacing + crossSize / 2;
  int y2 = int(random(1, ySize)) * crossSpacing + crossSize / 2;

```

and for the moment it has always remained on a cross!

Thanks again 🙂

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 14, 2020, 5:24pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/17 "2020-11-14T17:24:27Z")

</div>

Yes you are right, it’s because when we are displaying the crosses, we start the for loop at `crossSpacing`. (to add a gap between the borders of the window and the crosses)

Then if you generate a random number between `[1, xSize[` for example, the position will always be shifted by 1 space.

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 26, 2020, 9:21am UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/18 "2020-11-26T09:21:46Z")

</div>

Hello josephh, I wanted to ask you a question. You know (and I think so), how to do a random but only use a cross once. to avoid over-exposure? thank you in advance.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 27, 2020, 6:03pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/19 "2020-11-27T18:03:54Z")

</div>

Hi again,

> [@Dimdimtri](#):
>
> to avoid over-exposure

Do you mean avoid crossing lines?

---

<div class="post-metadata">

**Author:** ![Dimdimtri](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@Dimdimtri](https://discourse.processing.org/u/Dimdimtri)\
**Post date:** [November 29, 2020, 6:18pm UTC](https://discourse.processing.org/t/join-crosses-with-random-lines/25395/20 "2020-11-29T18:18:24Z")

</div>

Sorry, for the late reply, long weekend.

I modified the original code a little, I use it as a base code for my personal exercises. Now I no longer make lines but rectangles. And I was wondering if it was possible with the random function once a number has been chosen to exclude it to avoid taking it twice (in this case not to choose the same cross twice).

```auto
// Global variables for points

int crossSpacing = 82;
int crossSize = 6;

int rectangleSize = 82;

float a = 13.66;
float b = 10.87;

// Export Svg

//import processing.svg.*;

void setup() {
  
  
  size(1122, 793);
  smooth(1);
  //beginRecord(SVG, "filename.svg");
  
}

void draw() {
  // White background
  background(255);

  // Display the crosses
  displayCrosses();

  // Display n rectangleV
  displayRandomrectangleV(10);
  
  // Display n rectangleH
  displayRandomrectangleH(10);
  
  // Display n FIRSTCERCLE
  displayRandomFIRSTCERCLE(10);
  

  // Break the loop, it's not interactive here
  noLoop();
}  

/*
Display the crosses
 */
void displayCrosses() {
  for ( int y = crossSpacing; y <= height - crossSpacing; y += crossSpacing) {
    for ( int x = crossSpacing; x <= width - crossSpacing; x += crossSpacing) {
      line(x, y, x + crossSize, y + crossSize);  
      line(x + crossSize, y, x, y + crossSize);
    }
  }
}

/*
Draw a random rectengleV between crosses
 */
void randomrectangleVGrid() {
  // The size of the grid on x and y
  int xSize = width / crossSpacing;
  int ySize = height / crossSpacing;

  // Choose random coordinates inside that space
  // Add half of the size of a cross

  int x1 = int(random(1,xSize-1)) * crossSpacing + crossSize / 2;
  int y1 = int(random(1,ySize-1)) * crossSpacing + crossSize / 2;

  
  // Display the line
  
   
   
    for (float i = 0; i < 90; i = i+a) {
      line(x1 + i, y1, x1 + i, y1 + rectangleSize );
      
  }    
  
  noFill();

}

/*
Display n random rectangleV by calling the previous function
 */
void displayRandomrectangleV(int n) {
  for (int i = 0; i < n; i++) {
    randomrectangleVGrid();
    
    
  }
}

/*
Draw a random rectengleH between crosses
 */
void randomrectangleHGrid() {
  // The size of the grid on x and y
  int xSize = width / crossSpacing;
  int ySize = height / crossSpacing;

  // Choose random coordinates inside that space
  // Add half of the size of a cross

  int x2 = int(random(1,xSize-1)) * crossSpacing + crossSize / 2;
  int y2 = int(random(1,ySize-1)) * crossSpacing + crossSize / 2;

  
  // Display the line
  
   
   
    for (float i = 0; i < 90; i = i+a) {
      line(x2, y2 + i, x2 + rectangleSize, y2 + i);
      
  }    
  
  noFill();

}

/*
Display n random rectangleH by calling the previous function
 */
void displayRandomrectangleH(int n) {
  for (int i = 0; i < n; i++) {
    randomrectangleHGrid();
    
    
  }
}

/*
Draw a random firstcercle between crosses
 */
void randomFIRSTCERCLEGrid() {
  // The size of the grid on x and y
  int xSize = width / crossSpacing;
  int ySize = height / crossSpacing;

  // Choose random coordinates inside that space
  // Add half of the size of a cross

  int x3 = int(random(1,xSize-1)) * crossSpacing + crossSize / 2;
  int y3 = int(random(1,ySize-1)) * crossSpacing + crossSize / 2;

  
  // Display the line
  
   //rect(x3, y3, rectangleSize, rectangleSize);
   
    for (float i=2; i<13; i+=2) {
    
   
    arc(x3+rectangleSize, y3+rectangleSize, i*a, i*a, radians(180), radians(270));

      
  }    
  
  noFill();

}

/*
Display n random firstcercle by calling the previous function
 */
void displayRandomFIRSTCERCLE(int n) {
  for (int i = 0; i < n; i++) {
    randomFIRSTCERCLEGrid();
    
    
  }
}

```

[Next page](https://discourse.processing.org/t/join-crosses-with-random-lines/25395.md?page=2)