title: Creating a fog effect that varies with alpha
body: <p>I'm trying to implement "fog-of-war" in a mapping tool I'm developing.</p>
  
  <p>For each grid cell, if a cell is "fogged", the color is set to grey multiplied by the cell's current color. Otherwise, the cell color is set to whatever color the cell normally should be. </p>
  
  <p>Below is my <code>draw</code> function.</p>
  
  <pre><code>for x = 0, (self.gridSize - 1) * self.scale, self.scale do
          for y = 0, (self.gridSize - 1) * self.scale, self.scale do
              local mouseX, mouseY = camera:mousepos()
  
              local curCell = self:getCell(x, y, true)
              local state = Grid:getState(x, y, true)
  
              if fog and curCell.fogged then
                  local color = multiplyColors(curCell.color, {100,100,100,10})
                  color[4] = 150
                  if curCell:getState() == 1 then
                      love.graphics.setColor(color)
                  else
                      love.graphics.setColor({100, 100, 100, 100})
                  end
                  love.graphics.rectangle('fill', x, y, self.scale, self.scale)
              elseif math.floor(mouseX / self.scale) == math.floor(x / self.scale) and math.floor(mouseY / self.scale) == math.floor(y / self.scale) then
                  love.graphics.setColor(255, 0, 0, 30)
                  love.graphics.rectangle('fill', x, y, self.scale, self.scale)
  
              elseif state == 1 then
                  love.graphics.setColor(curCell.color)
                  love.graphics.rectangle('fill', x, y, self.scale, self.scale)
  
              elseif state == 0 and self.bGridLines then
                  love.graphics.setColor(100, 100, 100, 10)
                  love.graphics.rectangle('line', x, y, self.scale, self.scale)
              end
          end
      end
  </code></pre>
  
  <p>And here's the <code>multiplyColors</code> function </p>
  
  <pre><code>function multiplyColors(c1, c2)
      local newColor = {}
  
      newColor[1] = math.floor((c1[1] * c2[1]) / 255)
      newColor[2] = math.floor((c1[2] * c2[2]) / 255)
      newColor[3] = math.floor((c1[3] * c2[3]) / 255)
  
      return newColor
  
  end
  </code></pre>
  
  <p>While this creates <a href="http://i.imgur.com/cxaCrWa.png" rel="nofollow">an okay-looking effect</a>, I need the ability to set the fog opacity. </p>
  
  <p>For example, if I change the line <code>color[4] = 150</code> to <code>color[4] = 255</code>, the desired output should be <a href="http://i.imgur.com/gPymynp.png" rel="nofollow">something like this</a> instead of <a href="http://i.imgur.com/8VyDBfS.png" rel="nofollow">what I actually get when changing that line</a>. Likewise, changing the line to <code>color[4] = 0</code> yields <a href="http://i.imgur.com/Rpzz5bd.png" rel="nofollow">this</a> (which admittedly looks sorta neat) instead of <a href="http://i.imgur.com/mkWpHZJ.png" rel="nofollow">something like this.</a></p>
  
  <p>Here is a link to the complete repository: <a href="https://github.com/camdenb/DnD-Map-Creator" rel="nofollow">https://github.com/camdenb/DnD-Map-Creator</a></p>
  
  <p>Thanks!</p>