Blue Filter explainer

Puzzle Explainer
#1

The aim of this puzzle: Reveal the hidden image by adjusting all boxes with a 0 blue value to be over 200.
Walkthrough of the solution: The main goal of Blue Filter is to draw out an “enhanced” version of the boxes stored in anArrayOfObjects; in this case, enhanced means bringing out the blue-ness of some of the boxes. There are two main parts of your code:

First, find a way to draw a box for each object stored in the array called anArrayOfObjects. You can’t see exactly what’s inside the array, but from the name, you can imagine it’s a list of RGB objects that look something like:

{
  red: 123,
  green: 24,
  blue: 0
}

Using a for...of loop and drawBox(), you should be able to see what’s inside of the array.

Once you’ve done that, you want to find a way to check if a box has zero in its blue component, and then bump it way up so it’s really blue (something over 200, we’ll use 255). The way you do that is with an if statement. You want to check if element.blue === 0 and if it is, set element.blue = 255 Remember that === is checking if two things are equal and = is storing the right side into the left side.

Now you have your two main parts, and you just need to know how to combine them. What you want is to put your if statement check inside of the for...of loop because you need to check every object. Then, you need to decide if it should go before or after the drawBox() command. You want to do the check and adjustment to the blue value before you draw, otherwise how will you see what you’ve changed? One important thing to remember is that drawBox() can only draw colors or RGB objects (like the individual objects listed in the array).

Review cards:
If you’re looking to practice on a few previous cards to help you with Blue Filter, these four should help you – especially Basic Image Decoder and Going Green. When you solve these, make sure you understand what each part of the code does and when the order matters.

  • Ukraine to Haiti (assignment)
  • String Looping (for...of)
  • Image Decoder (for...of with nested if)
  • Going Green (if with member expression in condition)

Sample code solution:
(Tap below to reveal)

This is the final card in this course (woohoo!) — to test your knowledge there is no sample solution code

JavaScript Concepts: Binary Expression (=), Code Block (for loop, if statement), Calling Functions, Conditionals (===), Identifiers, Loops, Member Expression, Variable Declaration
Grasshopper Concepts: drawBox()

Puzzle Explainer - Blue Filter
#2

This feels absolutely impossible. I don’t get what I’m missing or doing wrong, and the hints aren’t helping me get unstuck at all. I’m determined to figure this out one way or another without a better way to get through it with help it might just take me forever and ever.

#3

Please help before I lose my sanity trying to get this solved.

#4

Hi @Krystal_Schwartz — please keep your sanity!

Blue Filter is an especially tricky puzzle, so don’t feel bad for struggling with it — there is another post that goes into slightly more detail how to approach the puzzle, hopefully that will help, and you can find it here: https://support.grasshopper.app/t/puzzle-explainer-blue-filter/198

If that doesn’t help though definitely let me know :slight_smile: .

#5

I’ve spent so much time and thought I understood everything, but now I don’t even get what this project is asking me to do… at all. I am going over the review cards then I will try again

#6

Hi @Danny — this additional explainer might help too, along with reviewing the previous puzzles Basic Image Decoder and Going Green. Blue Filter is the hardest lesson in the Fundamentals course so don’t feel bad for struggling with it!

1 Like
#7

You have to reassign the element.blue value within the for loop after establishing the if statement

2 Likes
#8

Just focus on the colour to which u have to filter and replace that with other value to to revel the hidden image.

And u face any problem post here…

#9

Ok so I am completely stuck on this and I can’t move forward. I seem to be able to work things out if I have something to modify or adjust but this one I am really at a dead end. I have an idea of what I need to do and I have searched the previous lessons but I can’t put it together and make it work. Personally I think this was a huge jump.
I don’t know what I’m going to do. Maybe I can keep working for awhile or maybe I will try another app. Any suggestions would be so helpful, or if anyone wants to take the time and walk me through that would be great.
Thanks. Love the app

#10

Hi @Rana019!

Firstly congrats on making it so far through the Fundamentals course — that’s really awesome!!

And Blue Filter is by far the hardest puzzle in Fundamentals, so don’t feel too bad about getting stuck on it. Hopefully I can help a little to point you in the right direction.

In Blue Filter, although there is no starter code, there is a variable called anArrayOfObjects ‘hidden’ from you. If you were to see this variable it would look something like this:

var anArrayOfObjects = [
{ red : 100,
  blue : 15,
  green : 0 } ,
{ red : 50,
  blue : 0,
  green : 10 } ,
{ red : ....

I’ve only listed two RGB objects here, but in Blue Filter there are a lot more. If you remember from the lesson Custom Colors, you can create a box of almost any color using RGB objects — the same principle is being used in Blue Filter!

The first step to solving this puzzle is to draw out all the RGB objects inside anArrayOfObjects. You can do this via a for loop, like this:

for (var element of anArrayOfObjects) {
    drawBox(element)
}

This will loop through each element in the array (where each element is an RGB object) and then draw a box with the associated color.

The second part of Blue Filter is to update the blue value for some (but not all) of the RGB Objects. If the blue value is equal to zero (i.e. blue : 0 ) then you need to update it’s value to be 200 or higher. In the example above you’d want to update the second RGB object because it’s blue value is zero, but not the first RGB object (as it’s blue value is 15).

Since you only want to make a change sometimes, you’ll need to use an if statement. Inside the test of the if statement (the parentheses) you need to access the blue value of each element being looped through; you can do this using element.blue. You can then check if the blue value is equal to zero using ===. So the if statement inside your for loop would look something like:

for (var element of anArrayOfObjects) {
    if (element.blue === 0) {

    }
    drawBox(element)
}

The final step is to actually update the element.blue value to be equal to or greater than 200 — you’ll do this inside the curly brackets of the if statement.

Hopefully this helps you understand how to solve Blue Filter!

#11

THANK YOU Grasshopper Heather!
I have to run to the school but I will dig into this tonight.

#12

Hi Heather Grasshopper. I wanted to follow up with you and see if you can
answer one more teeny question for me. The good news is that I had all the
correct ideas. For the last part making the blue value 200 or more, I want
to use this code (as an example):
for (var i = 0; i < 10; i = i + 1) however I have no way to draw < or > or

  • for that matter
    This is the problem I have had with this puzzle since the beginning. I only
    have === and =
    I’m pretty familiar with the operation of the buttons to write the code
    since i"ve done this first part twice, for the life of me I cannot find a
    way to write the last part.
    I swear I am not crazy!

Thanks,
Rana Buckner
I

#13

Hi @Rana019

Great question!! And I can see why Blue Filter is a little confusing in this manner.

I think it might help if I explain a little about ‘conditional operators’ and how they work. You’ve used several different conditional operators in Grasshopper already: === !== < > . Conditional operators compare the two values on either side of them, for example x > 5 is comparing x to 5, to see if x is greater than 5.

Conditional expressions (like x > 5 ) will always be either true or false. They don’t change the value of any of the identifiers they are checking.

There is another type of operator that you’ve used a lot too, thats the assignment operator: = . The assignment operator is different than conditional operators as it’s not comparing values, but instead assigning the left side to “hold” the right side. So, x = 5 would make x “hold” 5.

In the case of Blue Filter, it is asking for any value equal or greater than 200, and for that value to be assigned to element.blue. Since you need to assign a value, you’ll need to use = .

But how is the value of 200 or more defined? You decide! You simply enter a numeric value of 200 or greater — you don’t need to use conditional operators like > in this case.

#14

Heather you are a superhero! Thank you so much for taking the time to
explain the details to me. Onto SVG!
Rana

1 Like