stylesheet-drawing.rb

#!/usr/bin/env ruby
# sample: http://gyazo.com/0e2f2ea0e7b7ef7100877acbf858587a.png
require 'open-uri'
require 'image_size'

def make_shade(times, process_shape, process_color)
  times.times.inject('') do |result, i|
    result + <<-DIV
      <div class="shade" 
      style="height:#{process_shape.yield(i)}px;border-color:#{process_color.yield(i)};"
      ></div>
    DIV
  end
end

def main(image_url)
  (w, h) = ImageSize.new(open(image_url).read).get_size
  include Math
  print <<-HTML
    <style type="text/css">
    .container .image {
      float: left;
      margin: 0 5px 5px 0;
    }
    .shade {
      width: 0;
      border: 1px dashed #000;
      float: left;
    }
    </style>
    <div class="container">
      <!-- Dripping -->
      <div class="image" style="background-image: url(#{image_url});height: #{h}px;width: #{w}px;">
      #{make_shade(
        w.div(2).floor,
        lambda {|i|
          x = PI * (i - w.div(20)) / 80
          (h / 7) * (sin(x) + sin(2 * x) + 2.5)
        },
        lambda {|i| 
          "hsl(45, 40%, #{45 + (45 * sin(PI * i / w.div(2))).floor}%)"
        }
      )}
      </div>
      <!-- Rainbow -->
      <div class="image" style="background-image: url(#{image_url});height: #{h}px;width: #{w}px;">
      #{make_shade(
        w.div(2).floor,
        lambda {|i|
          ((i - 110) ** 2) / (40000/h + 1) + 25
        },
        lambda {|i|
          "hsl(#{((360 * i) / w.div(2) + 60) % 360 }, 100%, 50%)"
        }
      )}
      </div>
    </div>
    <div style="clear:both;"></div>
  HTML
end

main ARGV.shift