Pattern

Pattern Generator + Theme structure

by soulwire

CoffeeScript

d = document
c = d.createElement 'canvas'
g = c.getContext '2d'

c.height = window.innerHeight
c.width = window.innerWidth
d.body.appendChild c
  
# Theme
class Theme

  constructor: ( @colors ) ->
    
  clone: ->

    # Shuffle / rotate colors here...
    new Theme do @colors.concat
    
# Pattern  
class Pattern
  
  size: [ 40, 40 ]
  background: '#95CCCB'
    
  draw: ( ctx, theme ) ->
    
    width = ctx.canvas.width
    height = ctx.canvas.height
      
    ctx.fillStyle = @background
    ctx.fillRect 0, 0, width, height
  
    for y in [0..height] by @size[1]
      
      for x in [0..width] by @size[0]

        do ctx.save
        ctx.translate x, y
        @cell ctx, theme
        do ctx.restore
      
  cell: ->

# Dots
class Dots extends Pattern
      
  size: [ 40, 40 ]
  background: '#95CCCB'
      
  cell: ( ctx, theme ) ->
      
    #h = Math.random() * 360 | 0
    #s = Math.random() * 100 | 0
    #l = Math.random() * 100 | 0
    #a = 0.6 + Math.random() * 0.4

    c = theme.colors[ Math.random() * theme.colors.length | 0 ]
    r = Math.random() * @size[0]
    a = Math.random()
      
    ctx.globalAlpha = a
    ctx.fillStyle = c
    ctx.beginPath()
    ctx.arc 0, 0, r, 0, Math.PI * 2
    ctx.fill()

# Test
theme = new Theme [ '#95CCCB', '#F2EFDF', '#EED593', '#B09979', '#B51952' ]
dots = new Dots
dots.draw g, theme.clone()