# Those Pesky Stars

**URL:** <https://forum.kirupa.com/t/those-pesky-stars/644255>\
**Category:** Uncategorized\
**Created:** [September 19, 2020, 2:32pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255 "2020-09-19T14:32:29Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [September 19, 2020, 2:32pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255/1 "2020-09-19T14:32:29Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/e/e09cd5b86d751f5e3363325d09631c4546993c41.png)

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 -

```javascript
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);
    }
}

```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 19, 2020, 2:50pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255/2 "2020-09-19T14:50:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [September 20, 2020, 2:34pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255/3 "2020-09-20T14:34:56Z")

</div>

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

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

```

to

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

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

```

became

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

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

```

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

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

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 21, 2020, 1:39pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255/4 "2020-09-21T13:39:18Z")

</div>

I said use `library[i].stars` instead of 4, not instead of `c`. 😉`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++)
```

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [September 21, 2020, 6:32pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255/5 "2020-09-21T18:32:44Z")

</div>

> [@John\_Stern](#):
>
> `for(var c = 0; c < 4; c++)`

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 ?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 21, 2020, 6:56pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255/6 "2020-09-21T18:56:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [September 21, 2020, 8:03pm UTC](https://forum.kirupa.com/t/those-pesky-stars/644255/7 "2020-09-21T20:03:32Z")

</div>

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 !