# Trying to make a cross on this grid

**URL:** <https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 18, 2020, 1:20pm UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676 "2020-10-18T13:20:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcospyder](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@marcospyder](https://discourse.processing.org/u/marcospyder)\
**Post date:** [October 18, 2020, 1:20pm UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676/1 "2020-10-18T13:20:34Z")

</div>

Just as the title explains. I managed to make one line go across the grid, but i’m not sure how to do the other line to create a cross. The idea is to make an expression just like “x===y” to automaticly make the other line to make a cross on the line grid.

The sketch link is: [p5.js Web Editor](https://editor.p5js.org/marcospyder/sketches/7KrrMQA4u)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 18, 2020, 1:42pm UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676/2 "2020-10-18T13:42:15Z")

</div>

Hello,

Explore the P5.js website.

This is in the Learn section:

_[https://p5js.org/learn/coordinate-system-and-shapes.html](https://p5js.org/learn/coordinate-system-and-shapes.html)_

You can try this in your code to help understand co-ordinates and print them:

```auto
  print(mouseX, mouseY);
  push();
  strokeWeight(5);
  stroke(255, 0, 0);
  point(windowWidth/2, windowHeight/2);
  pop();

```

It will not affect your code.  
You can look up the references.

`:)`

---

<div class="post-metadata">

**Author:** ![marcospyder](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@marcospyder](https://discourse.processing.org/u/marcospyder)\
**Post date:** [October 18, 2020, 3:06pm UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676/4 "2020-10-18T15:06:20Z")

</div>

This is not what i mean. I’m trying to make a cross with the line grid, the lines that form a cross will have a stroke of 200 while the others will have 0. I already made one line “x===y” but i can’t find the logic of making the other line to make a cross with the grid.

---

<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:** [October 18, 2020, 5:26pm UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676/5 "2020-10-18T17:26:11Z")

</div>

You made a diagonal line \ with a nested for loop so that x and y both increase.

Now your next line is /

It’s from the upper right corner to the lower left corner.

So you make a nested for loop again, the y is again increasing (same). BUT what about the x? Where does it start, where does it end, what do you have to add?

---

<div class="post-metadata">

**Author:** ![marcospyder](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@marcospyder](https://discourse.processing.org/u/marcospyder)\
**Post date:** [October 19, 2020, 12:26am UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676/6 "2020-10-19T00:26:55Z")

</div>

I know the grid is a 20x20 being 20 invisible cuz it gets out of the screen, but stroke=200 if x=1 will make a vertical line on the first column. The x start on the top-left corner.

---

<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:** [October 19, 2020, 10:42am UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676/7 "2020-10-19T10:42:53Z")

</div>

I see.

You draw the entire grid but you have one condition to mark the diagonal line ` \` :

```auto
          if (x===y)
            {
              stroke(0);
            }

```

Now for the other side " / " the y is also increasing (line is going down), but this time the x value is **decreasing** : it starts with num\_colunas and ends with 0.

can you express this in a formula where you use num\_colunas and x :

```auto
          if (num_colunas......... === y)
            {
              stroke(0);
            }

```

?

Chrisir

---

<div class="post-metadata">

**Author:** ![marcospyder](https://avatars.discourse-cdn.com/v4/letter/m/958977/32.png) [@marcospyder](https://discourse.processing.org/u/marcospyder)\
**Post date:** [October 19, 2020, 12:09pm UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676/8 "2020-10-19T12:09:09Z")

</div>

Thank you so much, i found the solution. Its really just a logical problem… it was that easy. Making a new variable “x2=num\_colunas-x” and then adding on the condition “if (x===y || x2===y)” will make the / line.  
My head was frying with this one, thank you so much.