# Logic Error in For Loop (bookshelf)

``````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?

`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.

``````

//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
//

``````
2 Likes

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

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

2 Likes

I have simplified the logic and come up with this

``````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 ;
}
}
``````
3 Likes

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

1 Like

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

1 Like

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 1 Like