Merge pull request #39 from mad-p/feature/stroke_map

木を見て森を見るヒートマップ stroke_map

Author: mad-p

TODO.md

@@ -1,9 +1,25 @@
-# 実装規模の図示
-
-プロジェクトルート以下のswiftファイルの実装規模をインフォグラフィックにしたい。
-
-* ソースコードをルート直下、1段目のサブディレクトリ、テストコードに分類
-* コメントだけから成る行をスキップして行数を数える
-* ツリーマップとして図示
-* 各種入力モードの実装は近い色に、Mode, Keymap, Clientなどの制御系も近い色になるように
+# 木を見て森を見るヒートマップ
 
+* `basic_chars.png` では、40x40のヒートマップを作成した。これと同様に、インデックスの順を変更した `stroke_map.png` を作成する
+* `render_1600_heatmap` とは別に `render_1600_stroke_heatmap` を用意する
+    * 共通に使えるコードはメソッド化する
+* `stroke_map.png` のヒートマップの各セルは50列32行に並ぶ
+* 5列4行をひとつの組として、その境界に罫線を引く。この組を「森」と呼称する
+    * 第2打鍵が同じキーである文字は同じ森の中にある
+    * 森の中の相対的なセルの位置が第1打鍵のキーの相対位置と一致する
+    * 全体図を森の並びと見なして、森の位置を見ると、第2打鍵のキーの相対位置と一致する
+    * 第1打鍵は「森の中の木」の位置、第2打鍵は「全体の中の森」の位置になる。まず木を見て、次に森を見ると、打鍵に対応するセルになっているので、「木を見て森を見るストローク表」と呼ぶ
+* 図全体の標題として「木を見て森を見るヒートマップ」と表示する
+* 0～1599のbasicCharCountのインデックスを、以下のように座標に変換する
+    * 第1打鍵のキーコードをk1、第2打鍵をk2とすると、index == k1 * 40 + k2 である
+    * k1 % 10が0～4であればp1 = 0、5～9であればp1 = 1とする。k2に関しても同様にp2を考える
+        * p1, p2が0であれば左手、1であれば右手に対応する
+    * x1 = k1 % 5, y1 = k1 / 10 (切りすて), x2 = k2 % 5, y2 = k2 / 10 とする
+    * (x1, y1)が森の中のキーの位置、(x2, y2)が全体の中の森の位置に対応する
+    * x = x2 * 5 + x1 + p2 * 25, y = y2 * 4 + y1 + p1 * 16 とする。
+        * 図の左上を(x, y) = (0, 0)とし、x軸は右方向、y軸は下方向に増加する
+        * これにより、xとyの範囲は 0 <= x <= 49、0 <= y <= 31 となる
+* 各セルに、そのインデックスに対応する文字を表示する
+* 指の名前のラベルは出力しない
+* RL、RR、LL、LRの象限名をヒートマップの上下に表示する
+    * RLは左下、RRは右下、LLは左上、LRは右上に表示

scripts/lib/renderers.rb

@@ -248,6 +248,164 @@ def self.render_1600_heatmap(pct_1600, out_path:, width: 1000, font_magick: nil,
     annotate_png(out_path, annotations, font_magick: font_magick)
   end
 
+  # ---------------------------------------------------------------------------
+  # 木を見て森を見るストローク表ヒートマップ: 50cols x 32rows
+  # pct_1600:   1600要素の割合配列 (basicCharCount を正規化したもの)
+  # char_table: Hash { index(0..1599) => char }  セル内文字ラベル用
+  #
+  # 座標変換:
+  #   k1 = index / 40, k2 = index % 40
+  #   p1 = k1%10 < 5 ? 0 : 1  (0=左手, 1=右手)
+  #   p2 = k2%10 < 5 ? 0 : 1
+  #   x1=k1%5, y1=k1/10,  x2=k2%5, y2=k2/10
+  #   x = x2*5 + x1 + p2*25   (0..49)
+  #   y = y2*4 + y1 + p1*16   (0..31)
+  # ---------------------------------------------------------------------------
+  def self.render_1600_stroke_heatmap(pct_1600, out_path:, width: 1200, font_magick: nil,
+                                      title: '木を見て森を見るヒートマップ', scale: :linear,
+                                      char_table: nil)
+    raise ArgumentError, "pct_1600 must be 1600 elements (got #{pct_1600.length})" unless pct_1600.length == 1600
+
+    n_cols = 50
+    n_rows = 32
+
+    # 象限ラベル行（上・下それぞれ）と標題行を確保
+    title_ps   = 18
+    title_h    = title ? title_ps + 10 : 0
+    qlabel_h   = 20   # 象限ラベルの高さ
+    pad_left   = 10
+    pad_right  = 10
+    pad_top    = title_h + qlabel_h + 4
+    pad_bottom = qlabel_h + 4
+
+    grid_w  = width - pad_left - pad_right
+    cell_w  = (grid_w.to_f / n_cols).floor
+    cell_h  = cell_w
+    height  = pad_top + cell_h * n_rows + pad_bottom
+
+    img   = ChunkyPNG::Image.new(width, height, ChunkyPNG::Color::WHITE)
+    max_v = pct_1600.max.nonzero? || 1.0
+
+    # --- セルの塗りつぶし ---
+    grid = Array.new(n_cols * n_rows, 0.0)   # (x, y) -> pct
+    1600.times do |idx|
+      k1 = idx / 40
+      k2 = idx % 40
+      p1 = k1 % 10 < 5 ? 0 : 1
+      p2 = k2 % 10 < 5 ? 0 : 1
+      x1 = k1 % 5;  y1 = k1 / 10
+      x2 = k2 % 5;  y2 = k2 / 10
+      x  = x2 * 5 + x1 + p2 * 25
+      y  = y2 * 4 + y1 + p1 * 16
+      grid[y * n_cols + x] = pct_1600[idx]
+    end
+
+    n_rows.times do |gy|
+      n_cols.times do |gx|
+        v   = grid[gy * n_cols + gx]
+        t   = v / max_v.to_f
+        col = heat_color(t, scale: scale)
+        x0  = pad_left + gx * cell_w
+        y0  = pad_top  + gy * cell_h
+        (0...cell_w).each do |px|
+          (0...cell_h).each { |py| img[x0 + px, y0 + py] = col }
+        end
+      end
+    end
+
+    # --- 罫線（森の境界） ---
+    thin_sep  = ChunkyPNG::Color.rgba(120, 120, 120, 200)
+    thick_sep = ChunkyPNG::Color.rgba(0,   0,   0,   255)
+
+    # 縦線: x = 5, 10, 15, 20 | 25(太) | 30, 35, 40, 45
+    (0...n_cols).step(5) do |gx|
+      next if gx == 0
+      color = (gx == 25) ? thick_sep : thin_sep
+      x = pad_left + gx * cell_w
+      (pad_top...(pad_top + n_rows * cell_h)).each { |yy| img[x, yy] = color if x < width }
+    end
+
+    # 横線: y = 4, 8, 12 | 16(太) | 20, 24, 28
+    (0...n_rows).step(4) do |gy|
+      next if gy == 0
+      color = (gy == 16) ? thick_sep : thin_sep
+      y = pad_top + gy * cell_h
+      (pad_left...(pad_left + n_cols * cell_w)).each { |xx| img[xx, y] = color if y < height }
+    end
+
+    img.save(out_path)
+
+    annotations = []
+
+    # --- 標題 ---
+    if title
+      tx = (width / 2) - (title_ps * title.length * 0.3).to_i
+      annotations << { x: [tx, 4].max, y: 4, text: title, color: 'black', pointsize: title_ps }
+    end
+
+    # --- 象限ラベル ---
+    # p1=0(左手)=上半分(y<16), p1=1(右手)=下半分(y>=16)
+    # p2=0(左手)=左半分(x<25), p2=1(右手)=右半分(x>=25)
+    # ラベル位置: 上(y<pad_top)と下(y>pad_top+n_rows*cell_h)
+    ql_ps   = 13
+    left_cx  = pad_left + 12 * cell_w + cell_w / 2   # 左半分中央
+    right_cx = pad_left + 37 * cell_w + cell_w / 2   # 右半分中央
+    top_y    = title_h + 4
+    bot_y    = pad_top + n_rows * cell_h + 4
+
+    [
+      { text: 'LL', x: left_cx,  y: top_y },
+      { text: 'LR', x: right_cx, y: top_y },
+      { text: 'RL', x: left_cx,  y: bot_y },
+      { text: 'RR', x: right_cx, y: bot_y },
+    ].each do |q|
+      tx = q[:x] - (ql_ps * q[:text].length * 0.35).to_i
+      annotations << { x: [tx, 0].max, y: q[:y], text: q[:text], color: 'black', pointsize: ql_ps }
+    end
+
+    # --- セル内文字ラベル ---
+    if char_table
+      char_ps = [[cell_w * 3 / 4, 6].max, 12].min
+      1600.times do |idx|
+        ch = char_table[idx]
+        next unless ch
+
+        k1 = idx / 40
+        k2 = idx % 40
+        p1 = k1 % 10 < 5 ? 0 : 1
+        p2 = k2 % 10 < 5 ? 0 : 1
+        x1 = k1 % 5;  y1 = k1 / 10
+        x2 = k2 % 5;  y2 = k2 / 10
+        gx = x2 * 5 + x1 + p2 * 25
+        gy = y2 * 4 + y1 + p1 * 16
+
+        v  = grid[gy * n_cols + gx]
+        t  = v / max_v.to_f
+        t  = (scale == :log && t > 0) ? Math.log(t * (Math::E - 1) + 1) : t
+        text_color = t > 0.6 ? 'white' : 'black'
+
+        x0 = pad_left + gx * cell_w
+        y0 = pad_top  + gy * cell_h
+        tx = x0 + (cell_w / 2) - (char_ps * 0.5).to_i
+        ty = y0 + (cell_h / 2) - (char_ps * 0.5).to_i
+        annotations << { x: [tx, pad_left].max, y: [ty, pad_top].max,
+                         text: ch, color: text_color, pointsize: char_ps }
+      end
+    end
+
+    annotate_png(out_path, annotations, font_magick: font_magick)
+  end
+
+  # stroke_map wrapper
+  def self.render_stroke_map(pct_1600, out_path:, width: 1200, font_magick: nil,
+                             title: '木を見て森を見るヒートマップ', scale: :linear)
+    require_relative 'tcode'
+    char_table = Tcode.all_chars
+    render_1600_stroke_heatmap(pct_1600, out_path: out_path, width: width,
+                               font_magick: font_magick, title: title,
+                               scale: scale, char_table: char_table)
+  end
+
   # Bigram heatmap (wrapper)
   def self.render_bigram(bigram_pct, out_path:, width: 1000, font_magick: nil, title: nil, scale: :linear)
     render_1600_heatmap(bigram_pct, out_path: out_path, width: width,

scripts/plot_strokes.rb

@@ -216,6 +216,14 @@
   Renderers.render_basic_chars(basic_char_percent, out_path: basic_chars_path, width: options[:width],
                                font_magick: options[:font_magick], title: '基本文字ヒートマップ',
                                scale: options[:scale])
+
+  # 木を見て森を見るストローク表
+  stroke_map_path = File.join(out_dir, 'stroke_map.png')
+  puts "Rendering stroke_map -> #{stroke_map_path}"
+  Renderers.render_stroke_map(basic_char_percent, out_path: stroke_map_path, width: options[:width],
+                              font_magick: options[:font_magick],
+                              title: '木を見て森を見るヒートマップ',
+                              scale: options[:scale])
 else
   warn 'basicCharCount total is zero; skipping basic_chars chart'
 end

scripts/tests/run_tests.rb

@@ -148,7 +148,7 @@ def assert(desc, result)
 
     assert('script exits with code 0', exit_code == 0)
 
-    %w[heatmap.png fingers.png rows.png panes.png alternation.png bigram.png basic_chars.png percentile.png].each do |fname|
+    %w[heatmap.png fingers.png rows.png panes.png alternation.png bigram.png basic_chars.png stroke_map.png percentile.png].each do |fname|
       path = File.join(out_dir, fname)
       assert("#{fname} was generated", File.exist?(path) && File.size(path) > 1000)
     end