geo_pattern 1.2.1 → 1.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 6321ec629bed93b949fb0af35e1930beb4c4bc17
+  data.tar.gz: 83b4d012dbf6d98585d2204da0f5f539baab5dd6
+SHA512:
+  metadata.gz: a2f516f74c4485678517044c9e726ae83ff851a5d0e3c71882eb0379f860f3a0b04c71ba32a93af85cfc101c009f8787bbe303f8638e2492bb8cd8b589207ada
+  data.tar.gz: ef40eefa6ff0cde718bec5916ab93eab6c84b843d0eb324d24a10ae406317765befbe04cc9b798bb122c2f7f6b750e8a25f07e57736e357ad9f00f4611f98d23

data/README.md

@@ -1,10 +1,13 @@
+[![](http://img.shields.io/gem/v/geo_pattern.svg?style=flat)](http://rubygems.org/gems/geo_pattern)
+[![](http://img.shields.io/gem/dt/geo_pattern.svg?style=flat)](http://rubygems.org/gems/geo_pattern)
+
 # GeoPattern
 
 Generate beautiful tiling SVG patterns from a string. The string is converted into a SHA and a color and pattern are determined based on the values in the hash. The color is determined by shifting the hue and saturation from a default (or passed in) base color. One of 16 patterns is used (or you can specify one) and the sizing of the pattern elements is also determined by the hash values.
 
 You can use the generated pattern as the `background-image` for a container. Using the `base64` representation of the pattern still results in SVG rendering, so it looks great on retina displays.
 
-See the [GitHub Guides](http://guides.github.com) site as an example of this library in action.
+See the [GitHub Guides](http://guides.github.com) site and the [Explore section of GitHub](https://github.com/explore) are examples of this library in action. Brandon Mills has put together an awesome [live preview page](http://btmills.github.io/geopattern/geopattern.html) that's built on his Javascript port.
 
 ## Installation
 
@@ -24,93 +27,109 @@ Or install it yourself as:
 
 Make a new pattern:
 
-    pattern = GeoPattern.generate("Mastering Markdown")
+```ruby
+pattern = GeoPattern.generate("Mastering Markdown")
+```
 
 To specify a base background color (with a hue and saturation that adjusts depending on the string):
 
-    pattern = GeoPattern.generate("Mastering Markdown", {:base_color => "#fc0"})
+```ruby
+pattern = GeoPattern.generate("Mastering Markdown", {:base_color => "#fc0"})
+```
 
 To use a specific background color (w/o any hue or saturation adjustments):
 
-    pattern = GeoPattern.generate("Mastering Markdown", {:color => "#fc0"})
+```ruby
+pattern = GeoPattern.generate("Mastering Markdown", {:color => "#fc0"})
+```
 
 To use a specific [pattern generator](#available-patterns):
 
-    pattern = GeoPattern.generate("Mastering Markdown", {:generator => "sine_waves"})
+```ruby
+pattern = GeoPattern.generate("Mastering Markdown", {:generator => GeoPattern::SineWavePattern})
+```
 
 Get the SVG string:
 
-    puts pattern.svg_string
-    # => <svg xmlns="http://www.w3.org/2000/svg" ...
+```ruby
+puts pattern.svg_string
+# => <svg xmlns="http://www.w3.org/2000/svg" ...
+```
 
 Get the Base64 encoded string:
 
-    puts pattern.base64_string
-    # => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...
+```ruby
+puts pattern.base64_string
+# => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...
+```
 
 You can then use this string to set the background:
 
-    <div style="background-image: <%=pattern.uri_image%>"></div>
+```html
+<div style="background-image: <%= pattern.uri_image %>"></div>
+```
 
 ## Available patterns
 
-### octogons
+*Note: As of version `1.3.0`, string references (e.g. `overlapping_circles`) are deprecated in favor of class references (e.g. `GeoPattern::OverlappingCirclesPattern`).*
+
+### GeoPattern::OctagonPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/octogons.png)
 
-### overlapping_circles
+### GeoPattern::OverlappingCirclesPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/overlapping_circles.png)
 
-### plus_signs
+### GeoPattern::PlusSignPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/plus_signs.png)
 
-### xes
+### GeoPattern::XesPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/xes.png)
 
-### sine_waves
+### GeoPattern::SineWavePattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/sine_waves.png)
 
-### hexagons
+### GeoPattern::HexagonPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/hexagons.png)
 
-### overlapping_rings
+### GeoPattern::OverlappingCirclesPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/overlapping_rings.png)
 
-### plaid
+### GeoPattern::PlaidPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/plaid.png)
 
-### triangles
+### GeoPattern::TrianglePattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/triangles.png)
 
-### squares
+### GeoPattern::SquarePattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/squares.png)
 
-### nested_squares
+### GeoPattern::NestedSquaresPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/nested_squares.png)
 
-### mosaic_squares
+### GeoPattern::MosaicSquaresPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/mosaic_squares.png)
 
-### concentric_circles
+### GeoPattern::ConcentricCirclesPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/concentric_circles.png)
 
-### diamonds
+### GeoPattern::DiamondPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/diamonds.png)
 
-### tessellation
+### GeoPattern::TessellationPattern
 
 ![](http://jasonlong.github.io/geo_pattern/examples/tessellation.png)
 
@@ -125,11 +144,17 @@ You can then use this string to set the background:
 
 ## Ports
 
-Brandon Mills is working on completing my original Javascript version:
+JavaScript port by Brandon Mills:
 https://github.com/btmills/geopatterns-js
 
-Bryan Veloso is porting the library to Python:
+Python port by Bryan Veloso:
 https://github.com/bryanveloso/geopatterns
 
-Anand Capur is porting the library to PHP:
+PHP port by Anand Capur:
 https://github.com/redeyeventures/geopattern-php
+
+Go port by Pravendra Singh:
+https://github.com/pravj/geo_pattern
+
+CoffeeScript port by Aleks (muchweb):
+https://github.com/muchweb/geo-pattern-coffee

data/lib/geo_pattern.rb

@@ -1,9 +1,10 @@
 require "geo_pattern/version"
 require "geo_pattern/svg"
-require "geo_pattern/pattern"
+require 'geo_pattern/pattern/pattern_helpers'
+require "geo_pattern/pattern_generator"
 
 module GeoPattern
-  def self.generate(string=Time.now.to_s, opts={})
-    GeoPattern::Pattern.new(string, opts)
+  def self.generate(string=Time.now, opts={})
+    GeoPattern::PatternGenerator.new(string.to_s, opts)
   end
 end

data/lib/geo_pattern/pattern/base_pattern.rb

@@ -0,0 +1,47 @@
+module GeoPattern
+  class BasePattern < Struct.new(:svg, :hash)
+    FILL_COLOR_DARK  = "#222"
+    FILL_COLOR_LIGHT = "#ddd"
+    STROKE_COLOR     = "#000"
+    STROKE_OPACITY   = 0.02
+    OPACITY_MIN      = 0.02
+    OPACITY_MAX      = 0.15
+
+    # Public: mutate the given `svg` object with a rendered pattern
+    #
+    # Note: this method _must_ be implemented by sub-
+    # classes.
+    #
+    # svg - the SVG container
+    #
+    # Returns a reference to the same `svg` object
+    # only this time with more patterns.
+    def render_to_svg
+      raise NotImplementedError
+    end
+
+    def hex_val(index, len)
+      PatternHelpers.hex_val(hash, index, len)
+    end
+
+    def fill_color(val)
+      (val.even?) ? FILL_COLOR_LIGHT : FILL_COLOR_DARK
+    end
+
+    def opacity(val)
+      map(val, 0, 15, OPACITY_MIN, OPACITY_MAX)
+    end
+
+    def map(value, v_min, v_max, d_min, d_max)
+      PatternHelpers.map(value, v_min, v_max, d_min, d_max)
+    end
+
+    protected
+    def build_plus_shape(square_size)
+      [
+        "rect(#{square_size},0,#{square_size},#{square_size * 3})",
+        "rect(0, #{square_size},#{square_size * 3},#{square_size})"
+      ]
+    end
+  end
+end

data/lib/geo_pattern/pattern/chevron_pattern.rb

@@ -0,0 +1,45 @@
+module GeoPattern
+  class ChevronPattern < BasePattern
+    def render_to_svg
+      chevron_width  = map(hex_val(0, 1), 0, 15, 30, 80)
+      chevron_height = map(hex_val(0, 1), 0, 15, 30, 80)
+      chevron        = build_chevron_shape(chevron_width, chevron_height)
+
+      svg.set_width(chevron_width * 6)
+      svg.set_height(chevron_height * 6 * 0.66)
+
+      i = 0
+      for y in 0..5
+        for x in 0..5
+          val     = hex_val(i, 1)
+          opacity = opacity(val)
+          fill    = fill_color(val)
+
+          styles  = {
+                "stroke"         => STROKE_COLOR,
+                "stroke-opacity" => STROKE_OPACITY,
+                "fill"           => fill,
+                "fill-opacity"   => opacity,
+                "stroke-width"   => 1
+          }
+
+          svg.group(chevron, styles.merge({"transform" => "translate(#{x*chevron_width},#{y*chevron_height*0.66 - chevron_height/2})"}))
+
+          # Add an extra row at the end that matches the first row, for tiling.
+          if (y == 0)
+            svg.group(chevron, styles.merge({"transform" => "translate(#{x*chevron_width},#{6*chevron_height*0.66 - chevron_height/2})"}))
+          end
+          i += 1
+        end
+      end
+    end
+
+    def build_chevron_shape(width, height)
+      e = height * 0.66
+      [
+        %Q{polyline("0,0,#{width/2},#{height-e},#{width/2},#{height},0,#{e},0,0")},
+        %Q{polyline("#{width/2},#{height-e},#{width},0,#{width},#{e},#{width/2},#{height},#{width/2},#{height-e}")}
+      ]
+    end
+  end
+end

data/lib/geo_pattern/pattern/concentric_circles_pattern.rb

@@ -0,0 +1,47 @@
+module GeoPattern
+  class ConcentricCirclesPattern < BasePattern
+    def render_to_svg
+      scale        = hex_val(0, 1)
+      ring_size    = map(scale, 0, 15, 10, 60)
+      stroke_width = ring_size / 5
+
+      svg.set_width((ring_size + stroke_width) * 6)
+      svg.set_height((ring_size + stroke_width) * 6)
+
+      i = 0
+      for y in 0..5
+        for x in 0..5
+          val     = hex_val(i, 1)
+          opacity = opacity(val)
+          fill    = fill_color(val)
+
+          svg.circle(
+                  x*ring_size + x*stroke_width + (ring_size + stroke_width)/2,
+                  y*ring_size + y*stroke_width + (ring_size + stroke_width)/2,
+                  ring_size/2, {
+                    "fill"   => "none",
+                    "stroke" => fill,
+                    "style"  => {
+                      "opacity" => opacity,
+                      "stroke-width" => "#{stroke_width}px"
+                    }
+                  })
+
+          val     = hex_val(39-i, 1)
+          opacity = opacity(val)
+          fill    = fill_color(val)
+
+          svg.circle(
+                  x*ring_size + x*stroke_width + (ring_size + stroke_width)/2,
+                  y*ring_size + y*stroke_width + (ring_size + stroke_width)/2,
+                  ring_size/4, {
+                    "fill"         => fill,
+                    "fill-opacity" => opacity
+                  })
+
+          i += 1
+        end
+      end
+    end
+  end
+end

data/lib/geo_pattern/pattern/diamond_pattern.rb

@@ -0,0 +1,56 @@
+module GeoPattern
+  class DiamondPattern < BasePattern
+    def render_to_svg
+      diamond_width  = map(hex_val(0, 1), 0, 15, 10, 50)
+      diamond_height = map(hex_val(1, 1), 0, 15, 10, 50)
+      diamond        = build_diamond_shape(diamond_width, diamond_height)
+
+      svg.set_width(diamond_width * 6)
+      svg.set_height(diamond_height * 3)
+
+      i = 0
+      for y in 0..5
+        for x in 0..5
+          val     = hex_val(i, 1)
+          opacity = opacity(val)
+          fill    = fill_color(val)
+
+          styles = {
+            "fill"           => fill,
+            "fill-opacity"   => opacity,
+            "stroke"         => STROKE_COLOR,
+            "stroke-opacity" => STROKE_OPACITY
+          }
+
+          dx = (y % 2 == 0) ? 0 : diamond_width / 2
+
+          svg.polyline(diamond, styles.merge({
+            "transform" => "translate(#{x*diamond_width - diamond_width/2 + dx}, #{diamond_height/2*y - diamond_height/2})"}))
+
+          # Add an extra one at top-right, for tiling.
+          if (x == 0)
+            svg.polyline(diamond, styles.merge({
+              "transform" => "translate(#{6*diamond_width - diamond_width/2 + dx}, #{diamond_height/2*y - diamond_height/2})"}))
+          end
+
+          # Add an extra row at the end that matches the first row, for tiling.
+          if (y == 0)
+            svg.polyline(diamond, styles.merge({
+              "transform" => "translate(#{x*diamond_width - diamond_width/2 + dx}, #{diamond_height/2*6 - diamond_height/2})"}))
+          end
+
+          # Add an extra one at bottom-right, for tiling.
+          if (x == 0 and y == 0)
+            svg.polyline(diamond, styles.merge({
+              "transform" => "translate(#{6*diamond_width - diamond_width/2 + dx}, #{diamond_height/2*6 - diamond_height/2})"}))
+          end
+          i += 1
+        end
+      end
+    end
+
+    def build_diamond_shape(width, height)
+      "#{width/2}, 0, #{width}, #{height/2}, #{width/2}, #{height}, 0, #{height/2}"
+    end
+  end
+end

data/lib/geo_pattern/pattern/hexagon_pattern.rb

@@ -0,0 +1,57 @@
+module GeoPattern
+  class HexagonPattern < BasePattern
+    def render_to_svg
+      scale       = hex_val(0, 1)
+      side_length = map(scale, 0, 15, 8, 60)
+      hex_height  = side_length * Math.sqrt(3)
+      hex_width   = side_length * 2
+      hex         = build_hexagon_shape(side_length)
+
+      svg.set_width((hex_width * 3) + (side_length * 3))
+      svg.set_height(hex_height * 6)
+
+      i = 0
+      for y in 0..5
+        for x in 0..5
+          val     = hex_val(i, 1)
+          dy      = x % 2 == 0 ? y*hex_height : y*hex_height + hex_height/2
+          opacity = opacity(val)
+          fill    = fill_color(val)
+
+          styles = {
+            "fill"           => fill,
+            "fill-opacity"   => opacity,
+            "stroke"         => STROKE_COLOR,
+            "stroke-opacity" => STROKE_OPACITY
+          }
+
+          svg.polyline(hex, styles.merge({"transform" => "translate(#{x*side_length*1.5 - hex_width/2}, #{dy - hex_height/2})"}))
+
+          # Add an extra one at top-right, for tiling.
+          if (x == 0)
+            svg.polyline(hex, styles.merge({"transform" => "translate(#{6*side_length*1.5 - hex_width/2}, #{dy - hex_height/2})"}))
+          end
+
+          # Add an extra row at the end that matches the first row, for tiling.
+          if (y == 0)
+            dy = x % 2 == 0 ? 6*hex_height : 6*hex_height + hex_height/2;
+            svg.polyline(hex, styles.merge({"transform" => "translate(#{x*side_length*1.5 - hex_width/2}, #{dy - hex_height/2})"}))
+          end
+
+           # Add an extra one at bottom-right, for tiling.
+          if (x == 0 && y == 0)
+            svg.polyline(hex, styles.merge({"transform" => "translate(#{6*side_length*1.5 - hex_width/2}, #{5*hex_height + hex_height/2})"}))
+          end
+          i += 1
+        end
+      end
+    end
+
+    def build_hexagon_shape(sideLength)
+      c = sideLength
+      a = c/2
+      b = Math.sin(60 * Math::PI / 180)*c
+      "0,#{b},#{a},0,#{a+c},0,#{2*c},#{b},#{a+c},#{2*b},#{a},#{2*b},0,#{b}"
+    end
+  end
+end