시각화/프로세싱

▶프로세싱활용노트① - 나머지연산(모듈로, modulo) 이해하기

비주얼라이즈 2015. 1. 9. 12:33


▶프로세싱활용노트① -  나머지연산(모듈로, modulo) 이해하기


이번 글에서는 나머지연산(모듈로, modulo)에 대해서 정리해보려고 합니다.  나머지연산은 계수 연산자(modulus operator)에 관련된 내용이기때문에 프로세싱에서의 계수연산자에 대해 간략하게 살펴보고 시작하겠습니다.


계수는 특정 구간(스크린상의 도형, 배열 범위 안의 인덱스 값 등) 안에 수를 머물도록 하는 대단히 유용하면서 매우 단순한 개념으로, 나누기를 처음 배울 때 그 명칭을 칭하지 않고 개념을 배우는 것과 같다. 계수 연산자는 한 수를 다른 수로 나누었을 때 그 나머지를 계산하며, 정수와 실수에서 모두 사용할 수 있다.[각주:1]





여기서 간단한 나눗셈 개념이 적용됩니다.(매우간단합니다.)


20을 6으로 나머지 연산하면 몫은 2이며 식으로는 20 % 6 = 2 이다.


이런 형태의 A = B % C라는 수식에서 A는 C보다 절대 커질 수 없습니다. 이것이 바로 "나머지는 절대로 나누는 수보다 클 수 없다."라는 조건입니다. 이를 활용한 것이 오늘 살펴보기로 했던 나머지연산(모듈로, modulo)입니다. 이를 프로세싱 코드로 살펴볼까요?




Diniel Shiffman(2008)은 이 방법을 "배열 요소에 순서대로 접근할 때 마지막 요소에서 항상 0번째로 돌아올 필요가 잇을 때 마우 유용하다."라고 소개하고 있습니다.



나머지연산 활용 예제


백문이 불여일견이라고, 직접 예제를 함께 살펴보는 것만큼 이해해 도움이 되는 것은 없겠지요?




가장 먼저 할 것은 randoms라는 배열을 만들어주는 것입니다. index값은 임의 수를 사용해줍니다.

난수 :특정한 배열 순서나 규칙을 가지지 않는, 연속적인 임의의 수. 





void setup()부부에서 앞서 생성해준 randoms 배열에 for()구문을 활용하여 난수를 채워줍니다. 


그 뒤에는 frameRate값을 1로 설정해줍니다.




그다음으로 살펴볼 내용은 void draw()입니다. 


background(radoms[index]);부분에서 각 프레임마다 배열의 한 요소에 접근하도록 합니다. 여기서 프레임 당 하나의 요소가 될 수 있는 것은 setup()에서 frameRate(1)을 설정했기 때문입니다.


draw()자체도 반복문이지만, 예제 첫 부분에서  배열의 수를 4개로 설정했기때문에 원래는 배열의 크기만큼만 실행되고 멈추게 되지만 맨 아랫줄에 나온 'index = (index+1) % randoms.length;' 부분에 나온 나머지연산기능을 덕분에 순환할 수 있게 됩니다.



결과 영상을 살펴보면 다음과 같습니다.





[프로세싱 나머지연산예제 결과영상]



배열의 크기(4개)만큼 실행 후 멈추는 것이아니라 지속적으로 순환하는 모습을 볼 수 있습니다. (앞서 살펴본 예제의 배경색이 너무 밋밋해서 색상설정 부분만 바꿨습니다.) 이 같은 나머지연산(모듈로, modulo)는 다양한 프로세싱 작업에 활용된다고 하니 꼭 기억해두시길 바랍니다!



  1. 다니엘쉐프만 지음, 랜덤웍스 옮김 『프로세싱 날개를달다』, 랜덤웍스, 2008, p.266 [본문으로]