Those Pesky Stars

1

So I have come along with this project quite nicely and at the moment, the enclosed code gives me the following -

Screen Shot 2020-09-19 at 7.12.39 AM

the final task is to get the 4 stars into the other 2 books. Previously, I did get the stars in all 3 books using a function and then calling that function 3 times but apparently it takes less lines of code and is neater to do with a nested loop. I tried doing that with my c variable in a for loop at the bottom of my code and it does place the stars in the first book. The challenge remains as to how to get it in the other 2 books. There is a gap of 30 between the books and I just can’t figure out how to get this space into my code -

fill(173, 117, 33); //draws bookshelf
rect(0, 140, width, 10);

var library = [ //array of 3 objects
    { 
        title:"I Know Why The Caged Bird Sings",
        author:"R. Michener",
        stars:4,
        color:color(10,10,10)	
    },

    { 
        title:"Alaric the Goth",
        author:"Boin",
        stars:4,
        color: color(10,250,140)
    },

    { 
        title:"Caesar Invades Gaul",
        author:"Goldsworthy",
        stars:4,
        color:color(250,250,140)
    }
];

for(var i = 0; i < library.length; i++) 
{fill(255 - 100*i,200 - 50*i,50 + 150*i);
rect(20 + 120*i,20,90,120); // 3 books (90 x 120)
textSize(15);
fill(library[i].color);
text(library[i].title,20 + 120*i,30,90,60); // 3 titles(90 x 60)
text(library[i].author,20 + 120*i,90,90,30); // 3 authorsfor(var c = 0; c < 4; c++)  
    for(var c = 0; c < 4; c++)  {
    image(getImage("space/star"), 22 + 22.5*c,110,18.5,28);
    }
}
2

You have to do the same thing you did to offset the boxes, use 120*i to offset the x position. Also make sure you’re using library[i].stars instead of hardcoding 4 in your inner loop.

3 
var library = [ //array of 3 objects
    { 
        title:"I Know Why The Caged Bird Sings",
        author:"R. Michener",
        stars:4,
        color:color(10,10,10)	
    },

    { 
        title:"Alaric the Goth",
        author:"Boin",
        stars:4,
        color: color(10,250,140)
    },

    { 
        title:"Caesar Invades Gaul",
        author:"Goldsworthy",
        stars:4,
        color:color(250,250,140)
    }
];

for(var i = 0; i < library.length; i++) 
{
    fill(255 - 100*i,200 - 50*i,50 + 150*i);
    rect(20 + 120*i,20,90,120); // 3 books (90 x 120)
    textSize(15);
    fill(library[i].color);
    text(library[i].title,20 + 120*i,30,90,60); // 3 titles(90 x 60)
    text(library[i].author,20 + 120*i,90,90,30); // 3 authors

    for(var library[i].stars = 0; library[i].stars < 4; library[i].stars++)  {
        image(getImage("space/star"),22 + 22.5*c + 120*i,110,18.5,28);
    }
}

so 2 lines were changed in accordance with your suggestion
First - the last line was changed from

image(getImage("space/star"), 22 + 22.5*c,110,18.5,28);

to

image(getImage("space/star"),22 + 22.5*c + 120*i,110,18.5,28);

to add the (120*i) spacer

Second - library[i].stars was substituted for c so that

for(var c = 0; c < 4; c++)

became

for(var library[i].stars = 0; library[i].stars < 4; library[i].stars++)

I am sure that you did not mean for me to use - library[i].stars - in this fashion but I can’t understand its use in the for loop. Furthermore, I can’t see why my original line

for(var c = 0; c < 4; c++)

wouldn’t work once I placed the (120*i) spacer factor into

image(getImage("space/star"), 22 + 22.5*c,110,18.5,28);

since when I run the calculations suggested by the above 2 lines, as to where the stars would be located, it seems to place them correctly within the book widths

4

I said use library[i].stars instead of 4, not instead of c. :wink: c is your loop variable that you create to go through a stars-number of loops, just like i is your loop variable for going over library.length number of library items

for(var c = 0; c < library[i].stars; c++)
5

OK - please don’t tear your hair out at the following dumb question but since library[i].stars is always a 4 - what is the difference between the following lines ?

for(var c = 0; c < library[i].stars; c++)

for(var c = 0; c < 4; c++)

aren’t both going to loop through 4 times ?

6

That’s a perfectly reasonable question. The truth is, right now, there’s absolutely no difference. Doing it both ways will work the same because it just so happens that all the values for stars is 4. However, if you get more library items, or the data in the current library items changes, you might have different star values. Referring to the stars in the library items rather than just saying 4 ensures that you’re using the correct star count. Otherwise, if it’s always 4, why have the stars property in the library items to begin with? It could just be left out and everyone would just use 4 directly.

1 Like
7

That is so illuminating! I didn’t realize the flexibility inherent in the
library[i].stars usage - I’ll play with this newfound knowledge and see how it plays out with the graphic representation of the code - thanks !

1 Like