title: Turning a list of Integers into a List of Colors
body: <p>I have an image stored as a very large <code>List Int</code> and I would like to turn them into a <code>List Color</code>  However remember that <strong>rgb</strong> requires 3 arguments and <strong>rgba</strong> requires 4.  So let's try:</p>
  
  <pre><code>toColor : List Int -&gt; List Color
  toColor x =
    if List.isEmpty x then
      []
    else
      List.append ( rgba &lt;| List.take 4 x ) ( toColor &lt;| List.drop 4 x )
  </code></pre>
  
  <p>This definition is recursive.  We chomp 4 numbers, create an rgb color and append the results.  However if <code>x</code> is <code>List Int</code> we cannot write this:</p>
  
  <pre><code>rgba &lt;| List.take 4 x
  </code></pre>
  
  <p>Here is the kind of error  we get.  <strong><code>rgb</code></strong> is expecting three numbers and instead it gets a list</p>
  
  <pre><code>71|                   rgb &lt;| List.take 4 x 
                               ^^^^^^^^^^^^^
  (&lt;|) is expecting the right argument to be a:
  
      Int
  
  But the right argument is:
  
      List a
  </code></pre>
  
  <p>I wonder that taking out the first element of a <a href="http://package.elm-lang.org/packages/elm-lang/core/4.0.1/List" rel="nofollow"><code>List Int</code></a> returns a <code>Maybe Int</code></p>
  
  <pre><code>head : List a -&gt; Maybe a
  
  &gt; head [1,2,3,4]
  Just 1 : Maybe.Maybe number
  </code></pre>
  
  <p>Here is a modification of <strong>rgb</strong> which turns 3 <code>Maybe Int</code> into a <code>Color</code>.  Now, reading the image data, I think <strong>rgba</strong> is necessary but I just add one more.</p>
  
  <pre><code>rgb' : Maybe Int -&gt; Maybe Int -&gt; Maybe Int -&gt; Color
  
  rgb' a b c =
    case a of
      Nothing -&gt; rgb 0 0 0
      Just a' -&gt; case b of
        Nothing -&gt; rgb 0 0 0
        Just b' -&gt; case c of
          Nothing -&gt; rgb 0 0 0
          Just c' -&gt; rgb a' b' c'
  </code></pre>
  
  <hr>
  
  <p>this started when I was translating this <a href="https://bl.ocks.org/mbostock/42b6096fe66e978a3b77" rel="nofollow">d3js</a> example to Elm and I noticed it used some features which aren't currently supported in Elm. In particular <code>ctx.getImageData()</code> since you can't import and image to Canvas.  So this is part of my make-shift solution.  </p>