diff options
Diffstat (limited to 'bin/logo-0')
-rw-r--r-- | bin/logo-0/Gemfile | 7 | ||||
-rw-r--r-- | bin/logo-0/Gemfile.lock | 13 | ||||
-rw-r--r-- | bin/logo-0/README.md | 17 | ||||
-rwxr-xr-x | bin/logo-0/gen-logo.rb | 181 | ||||
-rw-r--r-- | bin/logo-0/logo-0-orig.svg | 271 | ||||
-rw-r--r-- | bin/logo-0/logo-color.png | bin | 0 -> 3436 bytes |
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 Binary files differnew file mode 100644 index 0000000..93091ad --- /dev/null +++ b/bin/logo-0/logo-color.png |