# Logic Error in For Loop (bookshelf)

**URL:** <https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425>\
**Category:** Coding Questions\
**Created:** [January 3, 2023, 12:58pm UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425 "2023-01-03T12:58:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![01010100-01000010](https://avatars.discourse-cdn.com/v4/letter/0/3e96dc/32.png) [@01010100-01000010](https://discourse.processing.org/u/01010100-01000010)\
**Post date:** [January 3, 2023, 12:58pm UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425/1 "2023-01-03T12:58:58Z")

</div>

```auto
var CanvasB = 500;
var CanvasH = 400;
var Rand = 30;
var Seiten = [25, 5, 61, 20, 100, 4, 3, 3, 3, 50, 30, 20, 40, 6, 70];

function setup() {
  createCanvas(CanvasB, CanvasH);
}

function draw() {
  background(220);

  var pos = 0; // Startpunkt links Regal
  var Regal = 20;
  var abst = 4;
  var abzug = 0;
  var start = 20

  strokeWeight(2);
  
  for (let i = 0; i < Seiten.length; i++) {
    //Anzahl Linien
    for (let x = 1; x <= Seiten[i] * abst; x += abst) {
  
      if (pos + x + 20 > CanvasB) {
        //Wenn linien aus Canvas ragen
        Regal += 40;
        pos = 20;
        abzug = x;
      }

      line(
        pos + x - abzug, 
        Regal, 
        pos + x - abzug, 
        Regal + 30);
    }
    pos += Seiten[i] * abst + 2 * abst ;
  }
}

```

Hi, everyone  
I have a problem in my code and I can’t figure out how to solve it.

I have a list of page numbers of books, I would like to draw a line for every page of a book. Between pages there is a space of 4px and when a new book starts, the space is doubled. If a line extends beyond the edge of the canvas I want to start a new line. But I can’t get the first line to start after 20px like the other lines  
can someone help me rewrite the code to make it work?

---

<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:** [January 3, 2023, 1:06pm UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425/2 "2023-01-03T13:06:47Z")

</div>

> [@01010100-01000010](#):
>
> I can’t get the first line to start after 20px like the other lines

`pos = 20; // Startpunkt links Regal ` ?

I guess

You don’t use start=20 at all.

When there is a line break you also say pos=20.

```auto

//int Rand = 30;

int[] Seiten = {
  25, 5, 61, 20, 100, 4, 3, 3, 3, 50, 30, 20, 40, 6, 70
};

void setup() {
  size(500, 400);
}

void draw() {
  background(220);
  background(#E3AA0E);

  int posX = 20; // Startpunkt links Regal
  int regalY = 20; // Startpunkt
  int abstand = 4;
  int abzug = 0;
  // int start = 20;

  strokeWeight(1);
  noStroke(); 
  fill(220); 
  for (int i = 0; i<6; i++) {
    rect(posX-4, (regalY-4) + i*40, 
      width - 2*(posX-2) + 2, 38);
  }

  strokeWeight(2);
  stroke(0); 

  for (int i = 0; i < Seiten.length; i++) {
    //Anzahl Linien
    for (int x = 1; x <= Seiten[i] * abstand; x += abstand) {

      if (posX + x + 20 > width) {
        //Wenn Linien aus Canvas ragen
        regalY += 40;
        posX = 20;
        abzug = x;
      }

      line(
        posX + x - abzug, 
        regalY, 
        posX + x - abzug, 
        regalY + 30);
    }//for 
    // next book
    posX += Seiten[i] * abstand + 2 * abstand ;
  }//for
}//func 
//

```

---

<div class="post-metadata">

**Author:** ![01010100-01000010](https://avatars.discourse-cdn.com/v4/letter/0/3e96dc/32.png) [@01010100-01000010](https://discourse.processing.org/u/01010100-01000010)\
**Post date:** [January 3, 2023, 1:43pm UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425/3 "2023-01-03T13:43:50Z")

</div>

> [@Chrisir](#):
>
> ```auto
> strokeWeight(1);
> noStroke(); 
> fill(220); 
> for (int i = 0; i<6; i++) {
> rect(posX-4, (regalY-4) + i*40, 
> width - 2*(posX-2) + 2, 38);
> }
> 
> ```

Hi @Chrisir  
Thank you for your really fast response 🙂  
Yes you are right, this was the original plan, but then i have some other problem,

with pos=0 i have clean rows:

but with pos=20 there is some bug because from the row 2 till end it breaks to early

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/4/4469fafc61ac60fc3e49bccc7d9f61970fb6c358.png)

do you see where in the code i have the bug?  
best regards

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 3, 2023, 2:40pm UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425/4 "2023-01-03T14:40:29Z")

</div>

I have simplified the logic and come up with this

```auto
var CanvasB = 500;
var CanvasH = 400;
var Rand = 30;
var Seiten = [25, 5, 61, 20, 100, 4, 3, 3, 3, 50, 30, 20, 40, 6, 70];

function setup() {
  createCanvas(CanvasB, CanvasH);
}

function draw() {
  background(220);

  var pos = 20; // Startpunkt links Regal
  var Regal = 20;
  var abst = 4;
  var abzug = 0;
  var start = 20
  
  strokeWeight(2);
  for (let i = 0; i < Seiten.length; i++) {
    //Anzahl Linien
    for (let x = 1; x <= Seiten[i]; x++) {
      if (pos + 40 > CanvasB) {
        Regal += 40;
        pos = 20;
      }
      line( pos, Regal, pos, Regal + 30);
      pos += abst;
    }
    pos += 2 * abst ;
  }
}

```

---

<div class="post-metadata">

**Author:** ![01010100-01000010](https://avatars.discourse-cdn.com/v4/letter/0/3e96dc/32.png) [@01010100-01000010](https://discourse.processing.org/u/01010100-01000010)\
**Post date:** [January 3, 2023, 3:02pm UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425/5 "2023-01-03T15:02:45Z")

</div>

This one works Perfectly 🤩  
Thank you very much for your work!

---

<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:** [January 3, 2023, 5:42pm UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425/6 "2023-01-03T17:42:17Z")

</div>

I like the entire bookshelf idea.

But when a normal book has 130 or 400 pages, your concept will fail…

Anyway, may I ask where you are going with this?

Chrisir

---

<div class="post-metadata">

**Author:** ![01010100-01000010](https://avatars.discourse-cdn.com/v4/letter/0/3e96dc/32.png) [@01010100-01000010](https://discourse.processing.org/u/01010100-01000010)\
**Post date:** [January 4, 2023, 9:49am UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425/7 "2023-01-04T09:49:40Z")

</div>

Thank you 🙂  
Yes i know, i will dived the pages with 10, so it will be possible to use it.

I want to learn p5.js for data visualization projects and use this visualisation it to understand how it works 🙂