변수(variable)라는 것을 지난 포스팅 중에 언급한 적이 있습니다.

컴퓨터는 CPU(ALU)와 memory가 존재합니다. 이 둘 사이에서 데이터를 가져오고 저장하는 작업을 하는데

이 메모리에는 RAM과 SSD가 있습니다.

이 메모리에서 데이터를 가져오기 위해서는 주소값이 필요합니다.

어디에 어떤 데이터가 있는지 알아야지만 해당 데이터를 얻을 수 있기 때문이지요.

그러나 이 주소값은 00110111 과 같이 8개의 숫자로 되어있습니다.

외우기 엄청 어렵지요ㅠ

그래서 이런 어려움을 보안하기 위해 변수라는 것을 사용합니다.

우리가 쉽게 기억할 수 있는 문자를 이용하여 값을 지정하는 것이지요. 

이 변수는 실제로는 메모리에 값을 저장하는 장소, 즉 주소값이 됩니다.

컴퓨터가 자동으로 8진수 숫자로 변환시켜 줍니다.

변수는 상수(constant)와 다르게 값이 변화할 수 있습니다.

주소값만 안다면 해당 값에 가서 값을 바꿔버리는 것이 가능하죠.

그래서 변수는 여러번 반복해서 같은 값을 사용할 때 변경하여 관리하는 것이 용이합니다.

변수를 만들 때 규칙이 존재합니다.

위에 까지는 모든 프로그래밍 언어가 가지고 있는 변수의 보편적인 특성입니다.

이제 프로세싱(processing)에서의 변수를 만들 때 규칙에 대해 소개하겠습니다.

프로세싱에서의 변수는

1. 대문자, 소문자, _(언더바, under bar),$(달러, dollar)가 가능합니다.

2. 첫 문자에 숫자 사용은 불가능합니다.

3. 길이 제한이 없습니다.

4. 대 소문자는 별개로 취급합니다.(case-sensitive)

5. 2개의 단어를 조합하는 경우 앞 문자는 소문자, 뒷 문자는 대문자로 시작하는 것이 일반적인 규칙입니다.

전문적인 용어로 camel case라고 합니다. 형태가 낙타와 비슷하기 때문이죠.

이는 자바에서도 동일합니다.

e.g.)mouseX, mouseY

6. 예약어(keyword, reserved word)는 사용할 수 없습니다.

우선 용어 3개를 소개합니다.

variable(변수),

function(함수),

event-driven program

입니다.

이 용어들에 대한 설명은 추후에 하겠습니다.

지금은 이런게 있구나 하고 넘어가시면 됩니다.

픽셀이라는 것이 있습니다.

휴대폰 가게 등에서 카메라 화소 등을 얘기할때

한번 쯤 들어보셨을 것입니다.

이 픽셀은 모니터를 구성하는 기본 요소입니다.

예를 들어보겠습니다.

어떤 화면의 제일 왼쪽, 제일 위쪽을 0,0으로 둡니다. 

여기서 한칸 한칸씩 이동을 하게 되는데

이 칸 사이의 간격을 픽셀이라고 합니다. 

size() 함수라는 게 있습니다.

이 함수는 지난 번 포스팅한 코드에 있는데

크기를 지정하는 함수입니다.

()안에 가로, 세로 크기를 순서대로 입력하면

해당 크기를 픽셀단위 크기로 생성해줍니다.

그리고 point()라는 함수가 있습니다.

이는 점을 찍는 함수로

()안에 점을 찍을 위치를 가로, 세로의 위치로 지정합니다.

여기서 점이 너무 작아서 안보일 경우

strokeWeight()라는 함수를 이용하여 점의 굵기를

굵게 만들 수 있습니다.

()안에 얼마나 굵게 할지의 정도를 숫자를 통해 정하면 됩니다.

line()함수는 선을 긋는 함수입니다.

()안에는 순서대로 한 점의 x좌표, 한 점의 y좌표, 한 점의 x좌표, 한 점의 y좌표를 입력합니다.

그러면 해당 좌표에 점이 생기고 이 점 사이를 잇는 선이 생깁니다.

triangle()함수는 삼각형을 만드는 함수로

line함수와 마찬가지로 점을 생성하고 그 점 사이를 긋는 함수입니다.

대신 한 점에 대한 x,y 좌표가 또 추가되어

()안에 총 6개의 좌표가 들어가게 됩니다.

quad()함수는 사각형을 만드는 함수입니다.

triangle함수와 유사합니다.

당연히 8개의 좌표가 들어가게 되겠지요.

그리고 rect()라는 함수는 직사각형을 만드는 함수로

이 함수는 특이하게 ()안에 들어가는 값의 개수가 여러개 입니다.

4개의 경우 앞의 두 개가 좌상쪽의 점의 좌표, 나머지 두 개가 가로, 세로 길이가 됩니다.

5개의 경우 위의 4개는 동일하며 나머지 한 개의 값은 모서리의 둥근 정도가 됩니다.

8개의 경우 4개는 동일하며 시계방향으로 둥근 정도를 설정할 수 있습니다.

ellipse()함수는 타원을 만들어주는 함수입니다.

()안에 들어가는 값은 순서대로

타원의 중심의 x좌표, 타원의 중심의 y좌표,

타원의 가로너비, 타원의 세로 높이

가 됩니다.

타원의 너비, 높이가 같으면 원, 다르면 타원이 됩니다.

다음은 arc()함수로 이는 호를 만드는 함수입니다.

이 호는 특이한데 총 7개의 값이 ()안에 들어갑니다.

앞의 4개의 값은 ellipse()와 같습니다. 중심좌표와 길이죠.

그 다음에는 순서대로

호가 시작하는 각도, 호가 끝나는 각도, 호의 형태입니다.

호의 형태는 OPEN/CHORD/PIE가 있습니다.

호의 형태는

OPEN은 겉의 테두리만 있고 시작과 끝점 사이의 선은 테두리가 없게 됩니다.

PIE는 일반적인 호의 형태로 전체 테두리가 생깁니다.

CHORD는 시작과 끝점을 직선으로 잇고 주변 테두리도 선이 생기는 형태. 즉 활꼴이 생깁니다.

여기서 호의 각도를 정수값이 아닌 PI를 이용해서 원주율값(π)으로 표현할 수 있는데

HALF_PI는 4/1 파이(π)

PI는 파이(π)

TWO_PI는 2파이(π)가 됩니다. TAU라고 쓸 수도 있습니다.

숫자를 결합하여 PI+HALF_PI(4분의 3파이(π))와 같이 표현할 수도 있습니다.

만약 도형의 내부를 비우고 싶을 경우

그릴 도형의 코드 위에

noFill()이라는 함수를 쓰면

내부가 비워진 채로 생성이 됩니다.

그럼 본격적으로 프로세싱으로 프로그램을 작성해보겠습니다.

기본적인 틀은

keyword(reserved)

의 형태로 되어있습니다.

여기서 keyword는 size나 ellipse와 같은 것들로 일반적으로 함수를 의미합니다.

그리고 reserved란 함수에 들어가는 값으로 이 값을 통해 어떤 결과를 출력합니다.

예를 들어

void setup(){
	size(800,400);
}


void draw(){
    ellipse(mouseX, mouseY, 80,80);
}

라고 작성을 할 경우

마우스를 움직이는 대로 원이 생성되는 것을 볼 수 있습니다.

이때, ellipse가 keyword에 속하고

mouseX부터 80까지 괄호에 있는 것들이 reserved에 속합니다.

그리고 size가 keyword에 속하고

800,400이 reserved에 속하지요.

위의 코드에 보시면 void setup(), void draw()라는 것을 보실 수 있습니다.

여기에 의문이 생기실텐데 void setup()이란

마치 하나의 도화지라고 생각하시면 됩니다.

그림을 그릴때 허공에 그릴 수 없고 도화지와 같은 그릴 곳이 필요합니다.

이 도화지와 같은 역할을 setup이 하고

void setup()을 전문적인 용어로 함수라고 칭합니다.

그리고 void draw() 또한 함수인데

이는 값을 입력받는 함수로

위의 ellipse를 이용하여

mouse의 X좌표와 Y좌표에 따라 원을 생성하게 해줍니다.

추후에 자세하게 설명을 하겠습니다.

여기서 또 모든 코드들이 소문자로 이루어진 것을 보실 수 있는데

앞서 processing은 대소문자를 구분한다고 설명했습니다.

이러한 특성을 case-sensitive(대소문자 구분)라고 합니다.

여기서 추가로 설명하면 위의 코드는 사용자의 동작(마우스의 움직임)에 따라

결과가 바뀌는 것을 알 수 있습니다.

이러한 코드를 active모드로 짠 코드라고 합니다.

컴파일러(compiler): 코드를 통째로 한번에 읽어들여서 번역하므로 장점은 실행속도가 매우 빠르지만 단점은 번역하는데 속도가 느립니다.

인터프리터(interpreter): 코드를 한줄씩 읽어들여서 번역하는 것으로 장점은 디버깅(debugging), 즉 오류가 어디서 나왔는지 파악하기 쉽습니다. 번역 속도는 빠르지만 실행속도는 느립니다.

프로그래밍 언어의 종류는 매우 많습니다. TIOBE라는 사이트에서 여러 언어들을 찾아볼 수 있습니다.

높은 등급의 언어(High Level Programming Language): 인간이 이해가 쉽고 쓰기 쉬운 프로그래밍 언어로 C나 자바, 파이썬 등 보편적인 프로그래밍 언어들이 이에 속합니다. 

낮은 등급의 언어(Low Level Programming Language): 기계와 좀 더 가까운 언어로 인간이 알아듣기는 어렵지만 기계가 알아듣고 실행시키는 언어입니다. 영화 매트릭스에 나오는 0과1로 되어있는 언어, 즉 binary code(이진수 코드)가 여기에 속합니다.

Semantics: 어떠한 의미를 가지는지, 의미가 타당한지를 판단합니다.

Syntax: 문법적으로 맞는지를 판단합니다.

먼저 processing이 어디서 나왔는지 부터 알아봅시다.

processing은 Java에서 파생된 언어입니다.

그리고 이 Java는 C에서 파생된 언어로 

결과적으로 C에서 나왔다고 볼 수 있습니다.

미국의 MIT에서 개발된 언어로 전산 전공자가 아닌

비 전산 전공자들이 디자인에 코딩을 접목시키고 싶은 사람,

반대로

전산 전공자들이 반대로 시각화를 코딩에 접목시키고 싶은 사람을 위한

언어라고 할 수 있습니다.

설치 사이트는

http://processing.org/download 입니다.

들어가시면 위와 같은 페이지가 나오는데

이 페이지에 자신의 컴퓨터에 맞는

설치 파일을 클릭하면 zip파일의 형태로 다운로드가 됩니다.

다운로드 받은 zip파일을 원하는 곳에 압축해제를 하면 끝입니다.

압축해제한 폴더 안에는 다음과 같은 파일들이 들어있습니다.

이 중에 processing.exe 파일을 더블클릭하면 processing이 실행됩니다.