Ruby Processing 을 사용하는 gem 소개 (및 애플리케이션)

이 글은 Ruby Advent Calendar 2020 15일째 되는 글이다.
오늘은 루비가 이걸 그리기 전에 쓰려고 해요.

차리다

미안합니다. Processing 아세요?
Processing은 캐서레아스와 벤자민 플라잉이 개발한 오픈소스 프로젝트로, 이전에는 MIT 미디어랩이 개발했다.전자 예술과 시각 디자인에 사용되는 프로그래밍 언어로 종합 개발 환경이다.예술가의 콘텐츠 제작을 위해 상세하게 설정된 함수를 배제했다.
( https://ja.wikipedia.org/wiki/Processing )
그 프로세싱의 기능rubysketch을 재현한 젬이 공개됐기 때문에 이번에 이걸 사용했다.

설치하다.

우선gem를 설치합니다.의존하는 로컬 확장 라이브러리를 만드는 데 시간이 좀 걸립니다.[1]
$ gem install rubysketch
만약gem가 순조롭게 설치되었다면 실행해 보세요.
hello.rb

# インストールした gem を読み込む
require 'rubysketch-processing'

# テキストを (10, 20) の座標に描画
text "hello, world!", 10, 20

$ ruby hello.rb
창에 문자가 표시되고 그려집니다.

Processing

준비가 됐으니 여기서부터 시작하는 그림을 만들기 시작한다.
우선 창의 중심에 사각형을 그립시다.

require 'rubysketch-processing'

# 矩形の中心を指定して描画するモードに変更
rectMode CENTER

# 描画位置をウィンドウの中心に移動
translate width / 2, height / 2

# 座標 (0, 0) に大きさ 100x100 の矩形を描画
rect 0, 0, 100, 100

다음은 크기를 바꾸는 동시에 직사각형을 겹쳐 그려 보십시오.

require 'rubysketch-processing'
rectMode CENTER
translate width / 2, height / 2

# 矩形の大きさを画面幅から -10 しながら重ねて描画
width.to_i.step(by: -10, to: 0) do |n|
  rect 0, 0, n, n
end

눈이 자꾸 깜박거려요.
이번에는 크기를 바꾸면서 회전을 시도해 보자.

require 'rubysketch-processing'
rectMode CENTER
translate width / 2, height / 2
width.to_i.step(by: -50, to: 0) do |n|
  rect 0, 0, n, n
  
  # 矩形を描画するたびに 0.1 ラジアン回転
  rotate 0.1
end

느낌이 좀 좋아요.
하얀색이면 외로우니까 다음에 색칠해 볼게요.

require 'rubysketch-processing'

# 色の指定モードをデフォルトの RGB から HSB に変更
colorMode HSB, 1

rectMode CENTER
translate width / 2, height / 2
width.to_i.step(by: -50, to: 0) do |n|

  # 矩形を描画するたびに色相を 0.0 から 1.0 まで変化させる
  fill n / width, 0.7, 1

  rect 0, 0, n, n
  rotate 0.1
end

HSB로 색상을 지정하면 자기도 모르게 하기 쉬운데, 너무 다채로워졌어요 w
여기서부터 회전량을 조절해 시작 이미지에 가깝게 만들지만, rotate()가 지정한 숫자를 조금씩 바꾸는 것은 반복적으로 실행하기 어려워 조금만 공을 들인다.

require 'rubysketch-processing'

# draw ブロックで囲むと毎秒 60回繰り返し呼ばれる
draw do
  colorMode HSB, 1
  rectMode CENTER
  translate width / 2, height / 2
  width.to_i.step(by: -10, to: 0) do |n|
    fill n / width, 0.7, 1
    rect 0, 0, n, n
    
    # 回転量にマウスの X 座標を渡す
    rotate p(mouseX / width / 10)
  end
end

마우스 좌표를rotate()에 전송하여 실시간으로 결과를 보고 수치를 조정할 수 있습니다.
이 방법이 괜찮은 값인'0.3464390625'를 찾았기 때문에 그 값으로 회전하여 최초의 그림과 같은 그림을 나타냈다.완성!

require 'rubysketch-processing'
draw do
  colorMode HSB, 1
  rectMode CENTER
  translate width / 2, height / 2
  width.to_i.step(by: -10, to: 0) do |n|
    fill n / width, 0.7, 1
    rect 0, 0, n, n
    
    # 決めた値を回転量に渡す
    rotate 0.3464390625
  end
end

아이폰을 써보도록 하겠습니다.

그동안 맥에서 일했지만 갑자기 여기서부터 아이폰으로 해 봤어요.
지금까지 사용해온 루비스ketch gem을 직접 편입한 동명RubySketch 앱도 앱스토어에 공개돼 설치해 사용하고 있다.
프로그램을 시작하고 같은 스크립트를 복사한 다음 실행하면 대체적으로 같은 느낌의 그림이 안전하게 표시됩니다!
그 상황은 이쪽입니다.

끝말

Processing은 도형 프로그램 설계를 시작할 때 난이도가 매우 낮고 매우 기쁘기 때문에 여러분들이 반드시 접촉하시기를 바랍니다.
또 루비스케치 앱은 루비스케치 젬을 이동하기 위해 크루비를 온전히 끼워 넣은 것[2]이어서 모바일 스마트폰의 루비 인터페이스로도 즐길 수 있을 것으로 보인다.
루비스케치 앱Processing Advent Calendar 2020에 대해서도 기사를 썼는데 가능하면 한번 보세요.
각주
그나저나 루비스ketch gem은 현재 Mac만 지원합니다.예전에는 윈도에도 대응하는 기능이 있었지만 윈도 기계가 집에 있는 지 오래되어 최근에는 윈도로 구축할 수 없게 되었다..↩︎
근데 Cruby 버전이 2.6.6인데 좀 낡았어요↩︎.