개시하다

분자동력학법을 통해 이동 입자가 문자를 순간적으로 떠오르게 하는 애니메이션을 제작한다.분자동력학법이라고 해도 입자 간의 상호작용은 고려하지 않는다.
구체적으로 말하면 이런 애니메이션을 만든다.
Ballistic 버전

Diffusion 버전

소스를 밑에 놓다.
https://github.com/kaityo256/stringtext

방침.

어쨌든 글부터 그려.루비라면 카이로를 사용하는 게 편하겠죠.방법은 "컴퓨터 드랍 방법"와 같습니다.Cairo에 가입하지 않았다면 바로 있었을 텐데.

 sudo gem install cairo

그리고 적당한 크기의 캔버스에 적당한 글씨체로 문자를 그립니다.슈퍼컴퓨터라면 이런 느낌이죠.

require 'rubygems'
require 'cairo'
format = Cairo::FORMAT_RGB24
width = 400
height = 100
surface = Cairo::ImageSurface.new(format, width, height)
context = Cairo::Context.new(surface)
context.set_source_rgb(0, 0, 0)
context.rectangle(0, 0, width, height)
context.fill
context.set_source_rgb(1, 1, 1)
context.select_font_face('Meiryo')
context.move_to(5,90)
context.font_size = 96 
context.show_text('スパコン')

그러면 문자는 울타리화되어 있기 때문에 입자의 좌표로 꺼낸다.surface = Cairo::ImageSurface.new에서 꺼낸 surface 중 surface.data 중 0인지 아닌지는 그곳에 조금이 있는지 확인할 수 있다.
주의점surface.data은 String이고 정수와 비교하기 위해서는 읽어야 한다ord.이런 느낌이에요.

  height.times do |y|
    width.times do |x|
      i = x + y * width
      next if surface.data[i*4].ord ==0
      # 粒子の追加処理
    end
  end

이렇게 입자의 좌표를 빼내면 그 후에 마음대로 할 수 있다.

분자동력학 시뮬레이션

Ballistic 버전

우선 모든 입자를 간단하게 등속 직선 운동을 시키자.애니메이션 GIF를 할 때는 순환을 시키고 싶어 적절한 절차를 밟은 뒤 원래 있던 곳으로 돌아가고 싶었다.
높이 100, 너비 400픽셀의 이미지를 고려해 보세요.애니메이션을 200프레임으로 설정합니다.주기 경계 조건을 고려하여 200보에서 x좌표는 400, y좌표는 100의 정수배를 전진하면 원래의 위치로 돌아갈 수 있다.
따라서 x방향의 속도 vx는 -4, -2, 2, 4 등 4가지 중에서 무작위로 선택할 수 있다.또 y 좌표는 -2, -1.5, -1.0, -0.5, 0.51.0, 1.5, 2.0 등 8가지 중에서 무작위로 선택한다.두 개 다 200배면 x좌표는 400이고 y좌표는 100의 정수배이기 때문에 원래의 위치로 돌아간다.겸사겸사 색깔도 랜덤으로 바꿔주세요.Particle도 구조체를 만들어 그 배열을 만들자.

Particle = Struct.new(:x, :y, :vx, :vy, :r, :g, :b)

  height.times do |y|
    width.times do |x|
      i = x + y * width
      next if surface.data[i*4].ord ==0

      vx = [-1, 1, -2, 2].sample
      vy = [-1, 1, -0.5, 0.5, -0.25, 0.25, 0.75, -0.75].sample
      r = rand
      g = rand
      b = rand
      atoms.push Particle.new(x, y, vx, vy, r, g, b)
    end
  end

먼저 수퍼컴퓨터 문자가 표시됩니다.

이거 점점 붕괴될 거야.


그리고 글을 보기만 해도 심심해서 색인을 살짝 엇갈려 파일로 만들면 완성된다.

iter = 200
iter.times do |i|
  index = (i + 108) % iter
  filename = format("img%03d.png", index)
  puts filename
  step(atoms)
  save_png(filename, atoms)
end

그렇다면 이 방법은 가볍지만 모든 입자가 고른 속도로 직선운동을 하고 속도 벡터의 변주곡이 적기 때문에 몇 차례 이상한 도안이 나타난다.예를 들어 시간에 따라 "아, 글자를 숨기지 마세요"라는 느낌이 들 수 있다.

이런 상황을 방지하기 위해서 다른 방법을 고려해 보세요.

Diffusion 버전

방금 등속 직선 운동을 했으니 이제 무작위 산책을 합시다.하지만 그것을 순환시키려면 요소의 합이 0인 배열을 만들어 각 단계의 속도로 만들어야 한다.
뭐든지 간단히 반-2, 반2로 배열해서 카드를 섞으세요.

steps = 200
$a = Array.new(steps) do |i|
  if i < steps/2
    2
  else
    -2
  end
end

이 수조를 각 입자vx와 vy의 배열에 혼란시킨다.

  height.times do |y|
    width.times do |x|
      i = x + y * width
      next if surface.data[i*4].ord ==0

      vx = $a.shuffle.dup
      vy = $a.shuffle.dup
      r = rand
      g = rand
      b = rand
      atoms.push Particle.new(x, y, vx, vy, r, g, b)
    end
  end

그리고 한 걸음마다x, y에 vx[i], vy[i]를 더하면 됩니다.vx, vy의 합은 0이기 때문에 반드시 돌아올 것이다.
처음에'슈퍼컴퓨터'라는 문자가 나왔는데 서서히 붕괴되는 것도 마찬가지다.

이거 점점 붕괴될 거야.


붕괴하는 방식은 등속 직선 운동보다 느리다.또 확산이 확산해 퍼지기 때문에 가장 광범위한 상태라도 침투된 문자를 볼 수 있다.

총결산

분자동력학법에 따라 순간 문자가 떠오르는 애니메이션 GIF를 만들었다.왜 이런 걸 했는지 비밀이야.
방법을 생각하면 글이 하나씩 떠오르고 메시지가 되니 다양한 게임을 해보세요.