Trying to make a cross on this grid

p5.js Coding Questions
1

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

2

Hello,

Explore the P5.js website.

This is in the Learn section:

https://p5js.org/learn/coordinate-system-and-shapes.html

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

  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.

:)

4

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.

5

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?

6

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.

1 Like
7

I see.

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

          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 :

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

?

Chrisir

1 Like
8

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.

1 Like