1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

錯視Advent Calendar 2016

Day 22

直線で構成された文字デザインと鈍角過小視

Last updated at Posted at 2016-12-21

錯視の Advent Calendar がちょっとさみしいので横入りいたします。

直線だけで構成された文字デザインてありますよね。

たとえば 0(ゼロ)なんかはこんな感じ。

donkaku.png

この字形は完全に直線(線分)だけで構成されており,すべての角は 135 度です。

しかし,角が異様にツンツンして見えませんか。
そして,各線分の端部がわずかに反っているように見えませんか。大げさに言えば,漫画なんかで使う「ババーン」ってやつみたいな。(アレをなんと呼ぶんだろう? 印刷業界ではこの手のものをバクダンというみたいだけど)

これは鈍角(どんかく)の角度が小さめに見えてしまう「鈍角過小視」のためであると思います。

〈直線で構成された文字〉をデザインするとき,敢えてこのようなツンツン感・ババーン感をもたせたいならそれでいいのですが,そうでなく本当に直線で構成されているように見せたいなら,微妙な曲線でデザインする必要があるんだと思います。が,それを構成して見せるのは私の能力を超えるので,やめておきます。

※角度の錯視には,鈍角過小視の真逆で,小さい角が大きめに見えてしまう「鋭角過大視」もあります。

描画コード

この絵は Ruby で cairo ライブラリーを使って描きました。

あらかじめ

gem install cairo

としてから以下を実行してください。(もちろん Gemfile に gem 'cairo' って書いてやってもいいですが)

require "cairo"

include Math

size = 200

surface = Cairo::ImageSurface.new Cairo::FORMAT_ARGB32, size, size
context = Cairo::Context.new surface

thickness = size * 0.16
instroke1 = size * 0.15
instroke2 = instroke1 + (sqrt(2) - 2) * thickness

x1 = size * 0.3
x2 = x1 - instroke1
x3 = x1 - thickness
x4 = x3 - instroke2

y1 = size * 0.4
y2 = y1 - instroke1
y3 = y1 - thickness
y4 = y3 - instroke2

context.instance_eval do
  # 地色
  rectangle 0, 0, size, size
  set_source_color :white
  fill
  # 外側の輪郭
  translate size * 0.5, size * 0.5
  points = [[x2, -y1], [x1, -y2], [x1, y2], [x2, y1], [-x2, y1], [-x1, y2], [-x1, -y2], [-x2, -y1]]
  move_to *points.shift
  points.each{|x, y| line_to x, y}
  set_source_color :black
  fill
  # 内側の輪郭
  points = [[x4, -y3], [x3, -y4], [x3, y4], [x4, y3], [-x4, y3], [-x3, y4], [-x3, -y4], [-x4, -y3]]
  move_to *points.shift
  points.each{|x, y| line_to x, y}
  set_source_color :white
  fill
end

surface.write_to_png "donkaku.png"
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?