← Back to challenges

Image Manipulation: 255 Shades of Grey (Part 2)

JavaScriptHardalgorithmsarrayslogicloops

Instructions

Images can be described as 3D arrays.

// This image has only one white pixel:

[
  [[255, 255, 255]]
]
// This one is a 2 by 2 black image:

[
  [[0, 0, 0], [0, 0, 0]],
  [[0, 0, 0], [0, 0, 0]]
]

Your task is to create a function that takes a 3D array representation of an image and returns the grayscale version of that.

Examples

grayscale([
  [[0, 0, 0], [0, 0, 157]],
  [[1, 100, 0], [0, 10, 0]]
]) ➞ [
  [[0, 0, 0], [52, 52, 52]],
  [[34, 34, 34], [3, 3, 3]]
]

Notes

  • A valid RGB value ranges from 0 to 255 (inclusive).
  • If the given array contains out of bound values, convert them to the nearest valid one.
  • Previous challenge in this series: Image Manipulation: Invert (Part 1)
  • Grayscaling an image is adjusting to have the same amount of (Red, Green, Blue) from their combined average to produce different shades of gray.
javascript
Loading editor…
to run
Walks through the solution with reasoning and edge cases.