42¢ glxn.net

hacking kitchen tiles with coffeescript

It was finally time to spruce up ye’ ole’ kichen. I had bought the tiles in shades of brown and white. The area to tile was about 50cm tall and 250cm wide. The tiles were 10cm x 10cm with 3mm spacers for the grout. Now all that remained was to find a pattern. I tried with pen and grid paper, but could not seem to find a pattern I liked. Then the idea struck me that this would be a great opportunity to hack a bit. I decided I wanted to encode something as binary ascii in the tiles, while making a tile pattern I found appealing. I ended up using this awesome Boilerplate project using CS, AMD, Mocha and Testem by @smucode to create a small app that takes some input and converts it to binary ascii before rendering some tiles with a bit of border.


Please keep in mind that the whole thing was thrown together in an evening, so don’t expect the world. The code is on github, and running live here

The result

I was rather pleased with the end result, but better than that is that my wife ended up loving it. When I told her that I had encoded a message in the tiles, she said “you’re such a nerd” with a smile :)

The Code

The whole app is just 33 lines of coffee, and looks like this:

define ['underscore', 'jquery'], (_, $) ->
  class App
    init: =>
      main = $("#main")
      input = $("#input")
      stats = $("#stats")
      input.keyup =>
        val = @convert(input.val())
        for v in val
          main.append("<span class='#{if v is '0' then "light" else "dark"}'></span>")
        stats.text(JSON.stringify(@stats(val), null, 2))

    convert: (input) ->
      output = ''
      for char in input
        bin = char.charCodeAt(0).toString(2)
        output += "00000000#{bin}".substring(char.charCodeAt(0).toString(2).length)

    stats: (val) =>
      stats = _.countBy val, (v) =>
        if v is '0' then "zeros" else "ones"
      _.extend stats,
        count: val.length
        ratio: @reduce(stats.zeros, stats.ones).join('/')

    reduce: (num, denom) =>
      gcdFn = (a,b) ->
        if b then gcdFn(b, a % b) else a
      gcd = gcdFn num, denom
      [num / gcd, denom / gcd]

Driven forth by a test suite about equal in size:

define ['cs!src/coffee/app'], (App) ->
  describe 'App', ->

    it 'should be defined', ->

    it 'should convert text to binary ascii', ->
      app = new App
      ascii = app.convert 'foo'
      ascii.length.should.equal 24
      ascii.should.match /^[01]+$/g
      ascii.should.equal '011001100110111101101111'

    it 'should create stats from input', ->
      app = new App
      stats = app.stats '011001100110111101101111'
      console.log stats
      stats.should.have.property 'count'
      stats.count.should.equal 24
      stats.should.have.property 'zeros'
      stats.zeros.should.equal 8
      stats.should.have.property 'ones'
      stats.ones.should.equal 16
      stats.should.have.property 'ratio'
      stats.ratio.should.equal '1/2'

    it 'should reduce ratio', ->
      app = new App
      reduced = app.reduce 8, 16
      reduced.should.eql [1, 2]
comments powered by Disqus

Moar stuffs

12 Sep 2017 Building an executable WS client using maven and metro
07 Jun 2015 Deploy an Ember app to gh-pages using npm run-script
06 Jun 2015 JSON Contract testing using unit tests to assert full stack integration across REST services
03 May 2015 simple http serve a directory from terminal
07 Jan 2014 civu, a CLI for cloning git repositories from jenkins views
06 Jan 2014 PyramidSort, a Sublime Text plugin for for reformatting text
05 Jan 2014 Git commit-message hook for JIRA issue tags
31 May 2013 hacking kitchen tiles with coffeescript
30 May 2013 Nuke, ps grep kill something
24 May 2013 mvnr: recursive mvn command runner
23 May 2013 Query By Example for JPA
22 May 2013 gitr: recursive git command runner
21 May 2013 Keeping gh-pages branch in sync with master
19 May 2013 Migrated from wordpress to jekyll and github pages
14 Aug 2012 Using Sublime Text 2 as git commit message editor
10 Mar 2012 QRGen, a small wrapper on top of ZXING for generating QRCodes in java
04 Jan 2012 My Bash PS1 with git branch info
17 Aug 2010 Making a swing project using IntelliJ IDEA GUI builder with maven, Including executable jar
01 May 2010 Using Arquillian to test against a remote jboss container from within IDEA
06 Apr 2010 WELD/CDI lightningtalk from Know IT 2010 annual conference
03 Apr 2010 Solving Sudoku using java swing and junit
01 Mar 2010 Simple CDI/WELD login example
01 Mar 2010 Implementing @RequestParam in CDI/WELD using Qualifier and InjectionPoint as @HttpParam
01 Nov 2009 Seam Maven Refimpl