add bin/logo-0

6 files changed, 489 insertions, 0 deletions

diff --git a/bin/logo-0/Gemfile b/bin/logo-0/Gemfile
new file mode 100644
index 0000000..0f2e0cc
--- /dev/null
+++ b/bin/logo-0/Gemfile
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+gem 'luigi-template'
diff --git a/bin/logo-0/Gemfile.lock b/bin/logo-0/Gemfile.lock
new file mode 100644
index 0000000..1179afe
--- /dev/null
+++ b/bin/logo-0/Gemfile.lock
@@ -0,0 +1,13 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    luigi-template (0.5.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  luigi-template
+
+BUNDLED WITH
+   2.1.4
diff --git a/bin/logo-0/README.md b/bin/logo-0/README.md
new file mode 100644
index 0000000..915e59d
--- /dev/null
+++ b/bin/logo-0/README.md
@@ -0,0 +1,17 @@
+pablotron.org logo
+==================
+[Ruby][] script to generate the site logo as an animated [SVG][].
+
+Usage:
+
+    # install dependencies in ./vendor
+    # (you only need to do this once)
+    bundle install
+
+    # write logo to "static/logo.svg"
+    bundle exec ./gen-logo.rb > ../../static/logo.svg
+
+[ruby]: https://ruby-lang.org/
+  "Ruby programming language"
+[svg]: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
+  "Scalable Vector Graphics"
diff --git a/bin/logo-0/gen-logo.rb b/bin/logo-0/gen-logo.rb
new file mode 100755
index 0000000..7dcffef
--- /dev/null
+++ b/bin/logo-0/gen-logo.rb
@@ -0,0 +1,181 @@
+#!/usr/bin/env ruby
+
+#
+# gen-logo.rb: generate svg logo
+#
+# 
+# notes: 
+# * used #4e86b1 as base color
+# * used color wheel to generate complimentary colors:
+#   https://www.sessions.edu/color-calculator/ 
+#
+
+require 'luigi-template'
+
+CONFIG = {
+  # svg dimensions
+  # FIXME: these aren't working
+  svg_width:  108,
+  svg_height: 90,
+
+  # show background?
+  bg: false,
+
+  # animation duration, in seconds
+  duration: 20,
+
+  # animation delay coefficients
+  #   delay = (y - 1) * YC + (x - 1) * XC
+  delay_coefficients: {
+    y: 1.0,
+    x: 0.2,
+  },
+
+  # animation color keyframes
+  colors: [
+    { c: '#ffffff', t: 0 },
+    { c: '#4e86b1', t: 0.333 },
+    { c: '#4eb179', t: 0.666 },
+    { c: '#ffffff', t: 1 },
+  ],
+
+  # dot sizes
+  dot_width: 12,
+  dot_height: 10,
+
+  # square coordinates
+  dots: [
+    # P (0)
+    { x: 1, y: 1 },
+    { x: 1, y: 2 },
+    { x: 1, y: 3 },
+    { x: 1, y: 4 },
+    { x: 1, y: 5 },
+    { x: 1, y: 5 },
+
+    # P (1)
+    { x: 2, y: 1 },
+    { x: 2, y: 3 },
+
+    # P (2)
+    { x: 3, y: 1 },
+    { x: 3, y: 2 },
+    { x: 3, y: 3 },
+
+    # T (0)
+    { x: 5, y: 1 },
+
+    # T (1)
+    { x: 6, y: 1 },
+    { x: 6, y: 2 },
+    { x: 6, y: 3 },
+    { x: 6, y: 4 },
+    { x: 6, y: 5 },
+
+    # T (2)
+    { x: 7, y: 1 },
+
+    # _ (0-7)
+    { x: 1, y: 7 },
+    { x: 2, y: 7 },
+    { x: 3, y: 7 },
+    { x: 4, y: 7 },
+    { x: 5, y: 7 },
+    { x: 6, y: 7 },
+    { x: 7, y: 7 },
+  ],
+}
+
+# build template cache
+TEMPLATES = Luigi::Cache.new({
+  svg: %{
+    <?xml version="1.0"?>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      viewBox="0 0 %{width} %{height}"
+    >
+      %{bg}
+
+      <g fill='white' stroke='black'>
+        %{dots}
+      </g>
+    </svg>
+  },
+
+  bg: %{
+    <rect x='0' y='0' width='100%' height='100%' fill='black'/>
+  },
+
+  dot: %{
+    <rect x='%{x}' y='%{y}' width='%{width}' height='%{height}'>
+      <animate
+        dur='%{duration}s'
+        begin='%{begin}'
+        values='%{values}'
+        keyTimes='%{times}'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+  },
+}.reduce({}) do |r, row|
+  r[row[0]] = row[1].strip.gsub(/(?<!\?\>)\s+/, ' ')
+  r
+end)
+
+# keyframe color values
+VALUES = CONFIG[:colors].map { |row|
+  row[:c]
+}.join(';').freeze
+
+# keyframe times
+TIMES = CONFIG[:colors].map { |row|
+  ('%1.3f' % row[:t]).gsub(/0+$/, '').gsub(/\.$/, '')
+}.join(';').freeze
+
+# get delay coefficients
+YC = CONFIG[:delay_coefficients][:y]
+XC = CONFIG[:delay_coefficients][:x]
+
+# generate svg
+svg = TEMPLATES[:svg].run({
+  # svg dimensions
+  width:  CONFIG[:svg_width],
+  height: CONFIG[:svg_height],
+
+  # background
+  bg: CONFIG[:bg] ? TEMPLATES[:bg].run({}) : '',
+
+  # dots
+  dots: CONFIG[:dots].map { |row|
+    y = row[:y] * CONFIG[:dot_height]
+    x = row[:x] * CONFIG[:dot_width]
+
+    # calculate animation delay
+    delay = (row[:y] - 1) * YC + (row[:x] - 1) * XC
+
+    TEMPLATES[:dot].run(row.merge({
+      x:        x - 5,
+      y:        y,
+      width:    CONFIG[:dot_width],
+      height:   CONFIG[:dot_height],
+
+      duration: CONFIG[:duration],
+      begin:    '%1.1fs' % [delay],
+      values:   VALUES,
+      times:    TIMES,
+    }))
+  }.join,
+})
+
+# apply cleanups to svg, then write it to stdout
+puts([
+  [ /> +</,    '><'   ],
+  [ /\s+>/m,  '>'     ],
+  [ / +\/>/,  '/>'    ],
+  [ / +<svg/, '<svg'  ],
+].reduce(svg) do |r, row|
+  # apply cleanup
+  r.gsub(row[0], row[1])
+end)
diff --git a/bin/logo-0/logo-0-orig.svg b/bin/logo-0/logo-0-orig.svg
new file mode 100644
index 0000000..7074561
--- /dev/null
+++ b/bin/logo-0/logo-0-orig.svg
@@ -0,0 +1,271 @@
+<?xml version='1.0'?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 100 100'>
+  <!-- bg -->
+  <rect x='0' y='0' width='100%' height='100%' fill='black'/>
+
+  <g fill='white' stroke='black'>
+    <!-- P (0) -->
+    <rect x='10' y='10' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='0.0'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='10' y='20' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='1.0'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='10' y='30' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='2.0'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='10' y='40' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='3.0'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='10' y='50' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='4.0'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+
+    <!-- P (1) -->
+    <rect x='20' y='10' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='0.1'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='20' y='30' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='2.1'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+
+    <!-- P (2) -->
+    <rect x='30' y='10' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='0.2'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='30' y='20' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='1.2'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='30' y='30' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='2.2'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+
+    <!-- T (0) -->
+    <rect x='60' y='10' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='0.5'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+
+    <!-- T (1) -->
+    <rect x='70' y='10' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='0.6'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='70' y='20' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='1.6'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='70' y='30' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='2.6'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='70' y='40' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='3.6'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='70' y='50' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='4.6'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+
+    <!-- T (2) -->
+    <rect x='80' y='10' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='0.7'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+
+    <!-- L (0-7) -->
+    <rect x='10' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.0'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='20' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.1'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='30' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.2'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='40' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.3'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='50' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.4'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='60' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.5'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='70' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.6'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+    <rect x='80' y='80' width='10' height='10'>
+      <animate
+        dur='60s'
+        begin='7.7'
+        values='#ffffff; #4e86b1; #4eb179; #ffffff'
+        keyTimes='0; 0.33; 0.66; 1'
+        attributeName='fill'
+        repeatCount='indefinite'
+      />
+    </rect>
+  </g>
+</svg>
diff --git a/bin/logo-0/logo-color.png b/bin/logo-0/logo-color.png
new file mode 100644
index 0000000..93091ad
--- /dev/null
+++ b/bin/logo-0/logo-color.png