Ввод строки на передний план внутри цикла for

Question

Я пытаюсь создать книжную полку из массива книг, которые я создал, и нанести по диагонали книгу, если «рекомендуемое» свойство для книги «ложно». Вы можете увидеть в моем for цикле, что я пытаюсь сделать это с помощью следующих если заявление:

if(books[i].recommended === false) 
{ 
    fill(0, 0, 0); 
    line(bookX,bookY,bookX+90,bookY+100); 
} 

Однако моя проблема заключается в том, что линия создать в цикле for идет в фоновом режиме, за мои книги, и таким образом, невидимым. Как я могу заставить его выйти на передний план?

Полный код ниже:

//I create my array with my books 
var books = []; 

for(var y = 1;y<=20;y++) 
{ 
    books.push(
     { 
      title: "Book "+y, 
      stars: random(4), 
      author: "Author "+y, 
      color: color(random(255), random(255), random(255)), 
      recommended: !!Math.floor(Math.random() * 2) 
     } 
     ); 
} 

// Loop to draw 3 shelves 
var shelfY = 105; 
while (shelfY<=360) 
{ 
    fill(173, 117, 33); 
    rect(0, shelfY, width, 10); 
    shelfY +=120; 
} 

// Loop to draw all my books 
var bookX = 5; 
var bookY = 5; 
for (var i = 0; i<books.length; i++) 
{ 
    fill(books[i].color); 
    rect(bookX, bookY, 90, 100); 
    fill(0, 0, 0); 
    text(books[i].title, bookX+5, bookY+9, 70, 100); 
    text(books[i].author, bookX+5, bookY+24, 70, 100); 

    for (var j = 0; j < books[i].stars; j++) 
    { 
     image(getImage("cute/Star"), bookX+3 + j * 20, bookY+70,20, 30); 
    } 

    bookX += 100; 

    if(bookX>400) 
    { 
     bookX = 5; 
     bookY += 120; 
    } 

    if(books[i].recommended === false) 
    { 
     fill(0, 0, 0); 
     line(bookX,bookY,bookX+90,bookY+100); 
    } 
} 

Answer 1

вы рисуете линию после увеличения bookX и Буки, так что это не будет обращено в нужном месте.

Попробуйте положить ваши если (книги [я] .recommended и т.д ... перед тем bookX + = 100, и он будет работать

Вот окончательный код:

//I create my array with my books 
 
var books = []; 
 

 
for(var y = 1;y<=20;y++) 
 
{ 
 
    books.push(
 
     { 
 
      title: "Book "+y, 
 
      stars: random(4), 
 
      author: "Author "+y, 
 
      color: color(random(255), random(255), random(255)), 
 
      recommended: !!Math.floor(Math.random() * 2) 
 
     } 
 
     ); 
 
} 
 

 
// Loop to draw 3 shelves 
 
var shelfY = 105; 
 
while (shelfY<=360) 
 
{ 
 
    fill(173, 117, 33); 
 
    rect(0, shelfY, width, 10); 
 
    shelfY +=120; 
 
} 
 

 
// Loop to draw all my books 
 
var bookX = 5; 
 
var bookY = 5; 
 
for (var i = 0; i<books.length; i++) 
 
{ 
 
    fill(books[i].color); 
 
    rect(bookX, bookY, 90, 100); 
 
    fill(0, 0, 0); 
 
    text(books[i].title, bookX+5, bookY+9, 70, 100); 
 
    text(books[i].author, bookX+5, bookY+24, 70, 100); 
 

 
    for (var j = 0; j < books[i].stars; j++) 
 
    { 
 
     image(getImage("cute/Star"), bookX+3 + j * 20, bookY+70,20, 30); 
 
    } 
 

 
    if(books[i].recommended === false) 
 
    { 
 
     fill(0, 0, 0); 
 
     line(bookX,bookY,bookX+90,bookY+100); 
 
    } 
 

 
    bookX += 100; 
 

 
    if(bookX>400) 
 
    { 
 
     bookX = 5; 
 
     bookY += 120; 
 
    } 
 

 
}

.