본문 바로가기

프로그래밍/clojure

Quil [2] 기본적인 스케치 기능들

이전 내용: Quil 시작하기

이번에는 Quil의 Drawing 기능들에 대해 알아보도록 하겠습니다. 전에 사용했던 예제를 보면서 차근차근 살펴보도록 하겠습니다.

(ns quil-test.core
  (:use quil.core))

(defn setup []
  (smooth)                          ;;Turn on anti-aliasing
  (frame-rate 1)                    ;;Set framerate to 1 FPS
  (background 200))                 ;;Set the background colour to
                                    ;;  a nice shade of grey.
(defn draw []
  (stroke (random 255))             ;;Set the stroke colour to a random grey
  (stroke-weight (random 10))       ;;Set the stroke thickness randomly
  (fill (random 255))               ;;Set the fill colour to a random grey

  (let [diam (random 100)           ;;Set the diameter to a value between 0 and 100
        x    (random (width))       ;;Set the x coord randomly within the sketch
        y    (random (height))]     ;;Set the y coord randomly within the sketch
    (ellipse x y diam diam)))       ;;Draw a circle at x y with the correct diameter

(defsketch example                  ;;Define a new sketch named example
  :title "Oh so many grey circles"  ;;Set the title of the sketch
  :setup setup                      ;;Specify the setup fn
  :draw draw                        ;;Specify the draw fn
  :size [323 200])                  ;;You struggle to beat the golden ratio


Defsketch

먼저 defsketch 부분부터 살펴보도록 하겠습니다.

(defsketch example                  ;; defsketch를 이용하여 quil를 실행합니다.
  :title "Oh so many grey circles"  ;; 타이틀 이름을 지정해 줍니다.
  :setup setup                      ;; 처음 시작할때 실행될 함수를 지정해 줍니다.
  :draw draw                        ;; 지속적으로 실행될 함수를 지정해 줍니다.
  :size [323 200])                  ;; 창의 크기를 지정해 줍니다.

Quil은 defsketch 매크로를 사용해서 실행됩니다. defsketch를 사용할때 몇가지 키값들을 넣어줄 수 있습니다. defsketch에서 사용할 수 있는 키들은 다음과 같은 것들이 있습니다.


Setup

다음은 setup부분을 살펴보도록 하겠습니다.

(defn setup []
  (smooth)                          ;; 안티얼라이싱을 킵니다.
  (frame-rate 1)                    ;; 프레임레이트를 지정해 줍니다.
  (background 200))                 ;; 배경색을 지정해 줍니다.

setup은 quil이 실행될때 최초 한번 실행되는 함수입니다. 여기서는 간단하게 quil를 설정하는 역할만 하고 있습니다. (smooth)은 anti-alising (그림을 그릴때 부드럽게 그려지게 해줍니다.)을 켜주는 함수이고, frame-rate는 말 그대로 초당 실행될 프레임을 지정해 줄 수 있습니다. frame-rate에 따라 draw 함수가 얼마나 자주 호출되는지 결정됩니다.

(background 200)은 배경색을 지정해 주고 있습니다. 인자가 하나만 주어지면 r, g, b 값이 모두 같은 색으로 지정 됩니다. 다시 말하면 (background 200)이라고 입력하면 (r: 200, g: 200, b: 200)인 색이 지정됩니다. 만약 (r: 42, g: 52, b:83)인 색을 지정하고 싶으면 (background 42 52 83)이라고 지정하면 됩니다. 2개나 4개의 인자를 넣어주면 마지막 인자는 알파값(투명도)가 됩니다. 이것은 background에만 한정된 것이 아니고 다른 drawing 함수들에 모두 적용됩니다. 정리하면 다음과 같습니다.

  • (background 200) -> (r: 200, g: 200, b: 200)
  • (background 200 150) -> (r: 200, g: 200, b: 200, a: 150)
  • (background 42 52 83) -> (r: 42, g: 52, b: 83)
  • (background 42 52 83 150) -> (r:42, g:52, b:83, a: 150)


Draw

다음은 draw 부분을 살펴보도록 하겠습니다.

             
(defn draw []
  (stroke (random 255))             ;; 선 색을 랜덤하게 지정해 준다.
  (stroke-weight (random 10))       ;; 선 굵기를 랜덤하게 지정해 준다.
  (fill (random 255))               ;; 채우기 색을 랜덤하게 지정해 준다.

  (let [diam (random 100)           ;; 원의 지름을 랜덤하게 지정해 준다.
        x    (random (width))       ;; 원의 x값을 랜덤하게 지정해 준다.
        y    (random (height))]     ;; 원의 y값을 랜덤하게 지정해 준다.
    (ellipse x y diam diam)))       ;; 원을 그린다.

draw 함수는 매 프레임마다 호출되는 함수 입니다. 여기서는 매 프레임마다 원이 하나씩 그려지도록 하고 있습니다. 뭔가를 그리고자 할 때에는 세팅값들을 지정해 두고 그 이후에 그리는 함수를 이용하여 그림을 그리게 됩니다. 위의 코드에서 (stroke), (stroke-weight) (fill)은 그리고자 하는 것의 세팅을 설정해 주는 함수이고 마지막에 (ellipse)는 실제로 그림을 그리게 되는 함수입니다.

색을 지정해 주는 함수는 보통 3가지 형태로 존재합니다. fill 함수를 예를 들어 설명해 보겠습니다. fill 함수에는 fill, fill-int, fill-float 함수들이 있습니다. fill-int 에는 정수 인자가 들어가게 되며 (0 ~ 255)의 값이 들어가게 됩니다. fill-float에는 실수 인자가 들어가게 되며 (0 ~ 1.0)의 값이 들어가게 됩니다. fill 에는 정수나 실수 인자 모두 들어갈 수 있으며, 지정해준 인자에 따라 fill-int나 fill-float의 기능을 수행합니다. 정리하면 다음과 같습니다.

  • (fill 200) -> 채우기 색을 (r: 200, g: 200, b: 200)으로 지정한다.
  • (fill 0.5) -> 채우기 색을 (r: 127, g: 127, b: 127)으로 지정한다.
  • (fill-int 200) -> 채우기 색을 (r:200, g: 200, b: 200)으로 지정한다.
  • (fill-float 0.5) -> 채우기 색을 (r: 127, g: 127, b: 127)으로 지정한다.

아래는 다양한 세팅 함수들과 그리기 함수들입니다.

위에 나온 함수 외에도 많은 함수들이 존재합니다. 자세한 내용은 quil의 코드에서 확인할 수 있습니다. 주석이 잘 달려 있으니 보고 배우기 어렵지 않습니다.

https://github.com/quil/quil/blob/master/src/quil/core.clj


마치며

이번 시간에는 Quil에서 그림 그리는 기본적인 방법에 대해 알아보고 여러가지 그림 그리는데 사용되는 함수들을 살펴보았습니다. 이 정도만 알아도 quil을 이용하여 멋있는 그림을 그리는데 충분하다고 할 수 있습니다. 하지만 아직 많은 테크닉을 배워야 정말 멋있는 그림들을 그릴 수 있겠지요. 그리고 그림만 그려서는 재미가 없지요. 그림을 그리고 결과물을 저장할 수 있어야 다른 사람에게 자랑도 할 수 있고 성취감도 훨씬 높아지겠지요. 다음 시간에는 quil를 이용하여 그린 그림을 저장하는 방법에 대해 알아보도록 하겟습니다.