Logic Error in For Loop (bookshelf)

p5.js Coding Questions
1 
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?

2

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
3

Hi @Chrisir
Thank you for your really fast response :slight_smile:
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
image2706×1214 323 KB

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

2 Likes
4

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
5

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

1 Like
6

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
7

Thank you :slight_smile:
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 :slight_smile:

1 Like