# I Have Done This Before

**URL:** <https://forum.kirupa.com/t/i-have-done-this-before/644138>\
**Category:** Uncategorized\
**Created:** [September 10, 2020, 3:20pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138 "2020-09-10T15:20:29Z")\
**Posts on this page:** 11\
**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 10, 2020, 3:20pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/1 "2020-09-10T15:20:29Z")

</div>

I have gone over this before so it pains me to have to backtrack but this code is meant to output 3 rectangles, each of a different color, sitting on a bookshelf - but nothing prints out - I checked my array and it looks OK so the fault must lie with the for loop but I don’t know what is amiss with that

```auto
fill(173, 117, 33); //draws bookshelf
rect(0, 120, width, 10);
var library = [ //array of 3 objects
  {
    title: "I Know Why The Caged Bird Sings",
    author: "R.Michener",
    stars: 4
  },
  {
    title: "Alaric the Goth",
    author: "Boin",
    stars: 4,
  },
  {
    title: "Caesar Invades Gaul",
    author: "Goldsworthy",
    stars: 4
  }
];
for (var i = 0; i < library.length; i++)
{
  fill(100 + 50i, 100 + 50i, 100 + 50i);
  rect(10 + 120 * i, 20, 90, 100);
}

```

---

<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 10, 2020, 3:38pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/2 "2020-09-10T15:38:25Z")

</div>

See something missing?

```javascript
fill(100 + 50i, 100 + 50i, 100 + 50i);

```

---

<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 11, 2020, 3:15am UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/3 "2020-09-11T03:15:14Z")

</div>

Oh yes - now that I have the incriminating evidence right in my face - of course - I totally blame my high school education for this where I was taught that the following are all equivalent

i50 i x 50 i(50) i\*50

by now you would think that I know that in JS, only the last form is allowed so I will NEVER make this error again😞 but when I have done the multiplication of i in the correct form, as in the code below, it still doesn’t print so there’s still an error in my approach

```javascript
fill(173, 117, 33); //draws bookshelf
rect(0, 120, width, 10);
var library = [ //array of 3 objects
{ title:”I Know Why The Caged Bird Sings”,
	author:”R. Michener”,
	stars:4	},
{ title:”Alaric the Goth”,
	author:”Boin”,
	stars:4	},
{ title:”Caesar Invades Gaul”,
	author:”Goldsworthy”,
	stars:4	}
	];
for(var i = 0; i < library.length; i++) 	
    {fill(100 + 50*i,100 + 50*i,100 + 50*i);
rect(10 + 120*i,20,90,100);
}

```

---

<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 11, 2020, 3:20am UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/4 "2020-09-11T03:20:38Z")

</div>

This looks like it now works as it should. Is there something you expect it to be doing that its not?

---

<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 11, 2020, 3:35pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/5 "2020-09-11T15:35:35Z")

</div>

![Screen Shot 2020-09-11 at 8.34.54 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/0/06c214c46cdb4cc404dfbfa6860df9485b54fd63.png)

---

<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 11, 2020, 6:50pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/6 "2020-09-11T18:50:51Z")

</div>

The above code is already doing this with grayscale colors. To get other colors you’d have to change your fill call to support different colors. (This could get a little complicated depending on what you’re after.)

You’ve also gotten text in the boxes in another thread so I think you’re close to being there.

---

<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 12, 2020, 6:38pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/7 "2020-09-12T18:38:13Z")

</div>

![Screen Shot 2020-09-12 at 11.36.09 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/1/1e2d23fab3207918edd19a095fb912488b9dd146.png)

```auto
fill(100, 100, 100);

rect(10,10,40,40);

fill(150, 150, 150);

rect(50,50,40,40);

fill(200, 200, 200);

rect(90,90,40,40);

fill(197, 237, 156);

rect(10,140,40,40);

fill(232, 177, 232);

rect(60,140,40,40);

fill(169, 177, 245);

rect(110,140,40,40);

```

so I have been looking at colors since you told me that

\<\< The above code is already doing this with grayscale colors. To get other colors you’d have to change your fill call to support different colors. (This could get a little complicated depending on what you’re after.) \>\>

because I don’t even know what grayscale colors are as opposed to just plain colors. So I thought that I would print them out and the result for the grayscale colors are the 3 diagonal rectangles on top. So yes, I can see why they are grayscale because they look sort of gray. What I would like are colors that look more like the 3 horizontal rectangles but I can’t figure out how to finesse the

```javascript
{fill(100 - 50*i,200 - 50*i, 50*i);

```

to get this result

---

<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 12, 2020, 7:26pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/8 "2020-09-12T19:26:00Z")

</div>

This is where it gets complicated 😉

Colors represented in RGB, which is what `fill()` is using, uses 3 _color components_ to create a full color. The 3 components are Red, Green, and Blue, hence the R, G, and B. In 24 bit color, this allows for 256 values for each component, or values of 0 - 255. 24 bit color means there are 24 bits involved or `2^24` which is 16777216. This is the same as 256 \* 256 \* 256. Each color given 8 bits, or `2^8`, which is 256.

For `fill()` each argument is a component value of the RGB color. The first is Red, the second is Green, and the third is Blue. If you set any one of these values to its max value 255 and the others to 0, you’ll get a color that is all that color

```javascript
fill(255, 0, 0) // full red
fill(0, 255, 0) // full green
fill(0, 0, 255) // full blue

```

If you don’t give any component any color, it makes black

```javascript
fill(0, 0, 0) // full black

```

And combinations of the values gives other colors

```javascript
fill(255, 255, 0) // yellow (red + green)
fill(0, 255, 255) // cyan (green + blue)
fill(255, 0, 255) // magenta (red + blue)

```

All full colors make white

```javascript
fill(255, 255, 255) // full white

```

And of course anything in between 0 and 255 for each component, if the same, will make grays

```javascript
fill(50,50,50) // dark gray
fill(128, 128, 128) // middle gray
fill(200,200,200) // light gray

```

If you have a loop with a value of i that goes from 0 to some other value, and you want to convert that to colors, you would need to figure out how to do that. There is no easy way to say, hey, i is now one greater, so give me the next color, because there i no standard for what that next color would be and everyone’s idea for what the next color should be could be different.

Since you already have an idea of what your colors should be, I’d suggest putting those values in an array and then getting them out in your loop. Just like you can get your titles out from your other array of objects, you can get colors out of a color array.

```javascript
var colors = [
  { r: 201, g: 235, b: 160 },
  { r: 229, g: 179, b: 231 },
  { r: 169, g: 180, b: 243 }
]

for(var i = 0; i < 3; i++) {
  fill(colors[i].r, colors[i].g, colors[i].b)
  // ...

```

Here the r, g, and b properties of the objects in the colors array map to the arguments used in `fill()`. Then in the loop, you get the current color for that loop iteration using `colors[i]` and reference those r, g, and b properties for each argument of the `fill()` call.

---

<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 13, 2020, 4:35pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/9 "2020-09-13T16:35:38Z")

</div>

fill(255, 255, 0) // yellow (red + green)  
fill(0, 255, 255) // cyan (green + blue)  
fill(255, 0, 255) // magenta (red + blue)

 ![Screen Shot 2020-09-13 at 9.34.33 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/5/58ea4cd114bb040e3c0238d65e417e5cc6c8a413.png)

So I ran the above 3 lines of code and decided that yes - those are very attractive colors and they are the ones I want for my books - there’s no way on earth that I am going to get those 3 lines of code with this

for(var i = 0; i \< library.length; i++)   
{fill(100 + 50i,100 + 50i,100 + 50i);

approach so I really admire your solution of placing the exact fill parameters in an array and then calling them out with the i variable - I thought that an alternative approach would be to simply list the desired fill as a fourth property of the object - like this

fill(173, 117, 33); //draws bookshelf  
rect(0, 120, width, 10);  
var library = [ //array of 3 objects

{ title:”I Know Why The Caged Bird Sings”,  
author:”R. Michener”,  
stars:4,  
color: fill(255, 255, 0) }, // yellow

{ title:”Alaric the Goth”,  
author:”Boin”,  
stars:4,  
fill(0, 255, 255) }, // cyan

{ title:”Caesar Invades Gaul”,  
author:”Goldsworthy”,  
stars:4,  
fill(255, 0, 255) } // magenta  
];

for(var i = 0; i \< library.length; i++)   
fill(library[i].color);  
rect(10 + 120\*i,20,90,100);  
}

and with this code, I had expected to see  
the bookshelf  
3 nicely spaced books with the colors I had chosen

but I am not getting anything - so I wonder what is amiss this time?

---

<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 13, 2020, 5:22pm UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/10 "2020-09-13T17:22:54Z")

</div>

Your syntax is a little off (the first one is almost right), and you don’t want to call fill() when making the library object - thats what you want to call in your loop. What you want color in your library to be is the values for the color you’d send to fill().

In my previous example I used separate values for r, g, and b. But you can also use a single color value which would be easier to do in this case (probably in that case too, but I was trying to keep things simple). You would use the color() function to make that rather than calling fill(). The return value from color() is something you can throw into a fill() call as one value rather than separate r, g, and b values.

```javascript
  fill(173, 117, 33); //draws bookshelf
  rect(0, 120, width, 10);
  var library = [ //array of 3 objects

  { title:"I Know Why The Caged Bird Sings",
      author:"R. Michener",
      stars:4,
      color: color(255, 255, 0)	}, // yellow

  { title:"Alaric the Goth",
      author:"Boin",
      stars:4,
      color: color(0, 255, 255)	}, // cyan

  { title:"Caesar Invades Gaul",
      author:"Goldsworthy",
      stars:4,
      color: color(255, 0, 255)	} // magenta
      ];

  for(var i = 0; i < library.length; i++) {	
    fill(library[i].color);
    rect(10 + 120*i,20,90,100);
  }

```

---

<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 14, 2020, 2:27am UTC](https://forum.kirupa.com/t/i-have-done-this-before/644138/11 "2020-09-14T02:27:57Z")

</div>

So I am uncertain as to how to complete the bookshelf + 3 books of different colors on that bookshelf. Using your hints I thought that I would have it right but no - here is the code but it does not print out the graphic that I want

—————————————————————————————————————————-

fill(173, 117, 33); //draws bookshelf  
rect(0, 120, width, 10);  
var library = [ //array of 3 objects

{ title:“I Know Why The Caged Bird Sings”,  
author:“R. Michener”,  
stars:4,  
color: color(255, 255, 0) }, // yellow

{ title:“Alaric the Goth”,  
author:“Boin”,  
stars:4,  
color: color(0, 255, 255) }, // cyan

{ title:“Caesar Invades Gaul”,  
author:“Goldsworthy”,  
stars:4,  
color: color(255, 0, 255) } // magenta  
];

```
  for(var i = 0; i < library.length; i++) 
fill(library[i].color);
rect(10 + 120*i,20,90,100);

```

}

// but nothing prints out

————————————————————————————————————————————————

so then I looked up the color function and thought that I could use it like this - which frankly seems to be a more complex way of achieving the result that I want but when you are at your wits end, you’ll try anything 🙁 - so anyhow, here is the second block of code but it doesn’t do it for me either

————————————————————————————————————————————————

var firstBook = color(170, 80, 150);  
var secondBook = color(100, 120, 190);  
var thirdBook = color(250, 240, 20);  
fill(173, 117, 33); //draws bookshelf  
rect(0, 120, width, 10);  
var library = [ //array of 3 objects  
{ title:”I Know Why The Caged Bird Sings”,  
author:”R. Michener”,  
stars:4,  
color: firstBook }

{ title:”Alaric the Goth”,  
author:”Boin”,  
stars:4,  
color: secondBook }

{ title:”Caesar Invades Gaul”,  
author:”Goldsworthy”,  
stars:4,  
color:thirdBook  
];

for(var i = 0; i \< library.length; i++)  
fill(library[i].color);  
rect(10 + 120\*i,20,90,100);  
}

// but nothing prints out