# Problem making the ticks fit on the grid

**URL:** <https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501>\
**Category:** Coding Questions\
**Created:** [February 1, 2020, 8:29pm UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501 "2020-02-01T20:29:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Priscilla\_van\_Gritte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/priscilla_van_gritte/32/7783_2.png) [@Priscilla\_van\_Gritte](https://discourse.processing.org/u/Priscilla_van_Gritte)\
**Post date:** [February 1, 2020, 8:29pm UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/1 "2020-02-01T20:29:50Z")

</div>

Regards, I have problems with ticking shoes on the grid. For example using the following code.

```auto
public void setup(){
  size(1000, 600, JAVA2D); 

   background(17,34,51); // Color de fondo principal 
   rect(-1, 95, 1001, 355,1); // Tamaño del rectángulo blanco donde se grafican los datos
   stroke(196,196,196); // Color de la línea del cuadriculado
   fill(258,258,258);//Color del Texto 
   textSize(13); 
 
   for (int i = 0; i < 1000; i=i+7) { // Dibuja el enrejado vertical de la zona de graficación  
  line(7+i, 95,7+i, 449);
  }  
  for (int i = 0; i < 350; i=i+7) { // Dibuja el enrejado horizontal de la zona de graficación  
  line(0, 98+i, 1000, 98+i);
  }
  
  stroke(98); // Color de la línea del cuadriculado
  
     for (int i = 15; i < 999; i=i+34) { // Dibuja el enrejado vertical de la zona de graficación  
     line(20+i, 95,20+i, 450);
    }  
      for (int i = 0; i < 350; i=i+34) { // Dibuja el enrejado horizontal de la zona de graficación  
      line(0, 95+i, 1000, 95+i);
  }
  
  
}

```

You can create this:

 ![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a5afecd64610629f71889927207fcbb5e61c216b.png)

But as it is possible to appreciate, in the end the grid does not fit perfectly, it is important to emphasize that I need that there are 30 large black squares in the dimensions specified in the code.

 ![error 1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/018a688e6d7638b2f2ece891d6d972ad737e48a7.jpeg)

And I need that within each large black square, there are five grays inside and they don’t fit either.

 ![error 2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/546c0d21b7406f59d455d40bc44b0bc82178685d.jpeg)

I really appreciate the help.

---

<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:** [February 1, 2020, 10:25pm UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/2 "2020-02-01T22:25:37Z")

</div>

Hello,

Consider this:

```auto
public void setup() 
  {
  size(1000, 600, JAVA2D); 
  background(255);

  for (int i = 0; i < 1000; i=i+7) 
    {  
    if (i%5 == 0) 
      strokeWeight(2);
    else
      strokeWeight(1);
    line(7+i, 95, 7+i, 449);
    }  
  }

```

Make friends with the modulo operator:  
[https://processing.org/reference/modulo.html](https://processing.org/reference/modulo.html)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fcaee57d2688d8b08c0b58f515a7b93a911cf230.png)

---

<div class="post-metadata">

**Author:** ![Priscilla\_van\_Gritte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/priscilla_van_gritte/32/7783_2.png) [@Priscilla\_van\_Gritte](https://discourse.processing.org/u/Priscilla_van_Gritte)\
**Post date:** [February 1, 2020, 11:25pm UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/3 "2020-02-01T23:25:41Z")

</div>

Hello thank you very much.

---

<div class="post-metadata">

**Author:** ![Priscilla\_van\_Gritte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/priscilla_van_gritte/32/7783_2.png) [@Priscilla\_van\_Gritte](https://discourse.processing.org/u/Priscilla_van_Gritte)\
**Post date:** [February 1, 2020, 11:32pm UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/4 "2020-02-01T23:32:11Z")

</div>

Hello, your answer can definitely help me achieve what I need, but how could I get 30 frames to the end of the screen? In his example there are 28 frames and if I modify the number at the end, the frames vary a lot “for (int i = 0; i \<1000; i = i + 6)”, for example if I put a six, it returns 33 frames and no 30.

---

<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:** [February 1, 2020, 11:49pm UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/5 "2020-02-01T23:49:18Z")

</div>

You are adding x offsets in loop.

Consider:

- You want a total of 5\*30 divisions; that is the upper limit on loop.
- Increment loop by 1
- Space the lines along the x axis by multiplying by i instead of adding in loop.

Think about this while doing it and what happens in each loop.

I used 5\*i for the x-axis, try values that best suit your project:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/911efb29cdc76ab1784375f373885fc5dd2b4e05.png)

---

<div class="post-metadata">

**Author:** ![Priscilla\_van\_Gritte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/priscilla_van_gritte/32/7783_2.png) [@Priscilla\_van\_Gritte](https://discourse.processing.org/u/Priscilla_van_Gritte)\
**Post date:** [February 1, 2020, 11:57pm UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/6 "2020-02-01T23:57:14Z")

</div>

I do not understand how he managed to reach 30, however in his example despite the fact that there are 30, they shrunk and did not reach the end of the screen, how could he do to achieve 30 and reach the end of the screen?  
It was not clear to me where I should multiply “i”, I try it in different places but I don’t have good results. ☹

---

<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:** [February 2, 2020, 12:08am UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/7 "2020-02-02T00:08:20Z")

</div>

He is me. 🙂

Last tip of the day:

```auto
//Spacing You need to do the math here for correct spacing. :)
float x = 4.3; 
line(x*i, 0, x*i, height);

```

Please post your progress on just the vertical lines.

---

<div class="post-metadata">

**Author:** ![Priscilla\_van\_Gritte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/priscilla_van_gritte/32/7783_2.png) [@Priscilla\_van\_Gritte](https://discourse.processing.org/u/Priscilla_van_Gritte)\
**Post date:** [February 2, 2020, 12:24am UTC](https://discourse.processing.org/t/problem-making-the-ticks-fit-on-the-grid/17501/8 "2020-02-02T00:24:41Z")

</div>

Achieved 🙂 !!! Thank you very much for the help.

 ![re](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9a1c83799d9adcd0c1ab21bb2a0737d510f78cf0.png)

```auto
public void setup() 
  {
  size(1000, 600, JAVA2D); 
  background(255);
  float x = 1.1;
    
    
    for (int i = -1; i < 1000; i=i+6) 
    {  
    if (i%5 == 0) 
      strokeWeight(1);
    else
      strokeWeight(0);
    line(x*i, 95, x*i, 449);
    
    }  
    
  }

```