Adding a thick black line to the bottom of an image

I am learning the basics of JavaScript on Coursera in hopes of passing an entrance exam into coding program. I’m VERY new to this and have been cruising along until now. This assignment is on loops and conditionals. The exercise instructions are as follows:

Write code that starts with the image “astrachan.jpg” shown below on the left and replaces the bottom ten rows with black pixels, resulting in the image shown on the right. Note that the color black has a red value of 0, a green value of 0 and a blue value of 0. Also note that the pixel in the top left corner has x-value 0 and y-value 0.

6GHq97J_TIqh6veyfzyK3Q_bf6ffb938906460eac33aa23443c8664_astrachanAddBlackLine

The code below has been started for you. It creates the variable image of type SimpleImage from the image file astrachan.jpg. It then loops over all the pixels replacing only the pixels in the bottom ten rows with black pixels. Then it prints the resulting image. You need to replace the comment // missing code with the missing code.

CODE:

var image = new SimpleImage(“astrachan.jpg”);

// missing code

print(image);

Here is what I have so far but I just get a big black rectangle:

var image = new SimpleImage(“astrachan.jpg”);

for (var pixel of image.values()) {
if (pixel.getX() >= 240);
if (pixel.getY() >= 350);
pixel.setRed(0);
pixel.setGreen(0);
pixel.setBlue(0);

}

print(image);

//I have tried multiple ways and it’s just not clicking. Can someone point me in the correct direction?

  • Is SimpleImage a third-party library?
    • If so, what’s its full interface?
  • Is print defined for you somewhere?

What is it you want this line to do?

Same as above.


You might want to review the if statement’s syntax: if...else - JavaScript | MDN

If the loop image object and the pixel methods do what i suppose them to do, it looks like your conditions and loop are wrongly declared. The way i read them :

if (pixel.getX() >= 240) => do nothing
if (pixel.getY() >= 350) => do nothing
for all iterations do: 
  pixel.setRed(0);
  pixel.setGreen(0);
  pixel.setBlue(0);

You want to make a condition block like:

if (pixel is bellow certain vertical line) {
  set it black
}

var height=image.getHeight();
for (var pixel of image.values())
{
if(pixel.getY()>=height-10)
{
pixel.setRed(0);
pixel.setGreen(0);
pixel.setBlue(0);

}
}