Processing은 예능(Art)분야를 지원하기 위해 강력한 그래픽을 지원하는 특이한 C/C++ 기반의 소프트웨어로서 예능 분야 사람들이 컴퓨터 배선 및 코딩을 지원하도록 하는 아두이노 보드의 출현과 어떤 점에서는 맥락을 같이한다. 즉 둘 다 예능 분야를 타겟으로 시작된 컴퓨터 코딩 분야의 혁신이라는 점인데, 여기서 거론 되는 예능 분야의 의미는 컴퓨터를 이해하지 못하는 수동적인 예능 영역을 의미하는 것이 아니라 아예 출발점에서부터 컴퓨터를 포함시켜버리고 시작하는 혁신적이면서도 미래지향적인 예능 영역을 뜻한다. 그러므로 Processing 과 같은 소프트웨어의 개발 초창기부터 아티스트이면서 컴퓨터 프로그래머인 재능있는 개발자들의 기여에 힘입은 바가 크다.
아무리 좋은 소프트웨어라 해도 첫 시작에 집어치우기 십상이다. 특히 Processing에 포함된 P5.js 만 해도 겉보기는 쉬워 보이지만 막상 시작하려면 암중 절벽이라는 느낌을 받을 수 있다. 필자도 마찬가지이다. 그래도 당일 몇 시간 투자해서 간단한 텍스트 입출력이나 도형 그래픽 처리는 할 수 있어야 하는 것 아닌가? 좀 시간이 흐르면 아두이노와 시리얼 인터페이스가 가능해야 하리라 예상한다.
P5js도 예제를 제공하는데 첫시작부터 작동이 되지를 않아 1시간 이상을 허비했다. 어쨌든 P5js를 시작할 수 있도록 누구나 따라해 볼 수 있는 아주 간단한 두 개의 예제를 데모하도록 하자.
P5*js를 시작해 보기 위한 아주 간단한 첫 번째 예제를 살펴보자. Processing 편집 창의 우측 Java 박스를 열어 p5.js를 선택하여 새로운 창을 열어보자.
새로이 나타나는 창은 Processing Java 와 비슷하게 C/C++ 영역인 setup() 과 draw()로 이루어지며 뭔가 다르게 탭에 index.html을 포함하고 있다.
뭔가 다른 점을 확인하기 위해서 index.html를 누르고 들어가 보자.
헐! HTML+Java Script 코딩 틀이 나타남을 볼 수 있다. 이런 구조는 앞으로 아두이노 와이파이 사물인터넷 코딩을 하게 된다면 맞닥뜨리게 되는 구조와 유사하다. 차이점이라면 하나의 편집기라는 프레임 속에 C/C++ 영역과 HTML/Java Script 영역이 공존하는 구조를 연상시킨다. 즉 C/C++ 코딩과 HTML 에 의한 웹화면과 더불어 Java Script 에 의한 다이나믹한 코딩을 가져갈 수 있는 가능성이 엿보인다.
이 단계에서 시험적으로 실행이 가능한 가장 간단한 예제를 코딩해서 저장 후 실행해 보기로 한다.
첫째로 createCanvas(200,200) 이라는 명령을 사용하여 Processing Java 스타일의 스크린이 아닌 웹 스타일의 화면을 생성하고 여기에다 HTML 헤딩 출력과 아울러 사각형 도형을 생성해 보자.
function setup() {
createCanvas(200,200); // 캔바스 웹화면 생성
}
function draw() {
rect(5,5,190,190); //사각형 출력
}
index.html HTML 편집기 영역에서 아래와 같이 (body)와 (/body) 사이에 (h1)- Welcome to Steemit!(/h1)을 입력하자.
(body)
(h1) Welcome to Steemit! (/h1)
(/body)
※ 깍지형 태그 대신 괄호를 사용하였음.
시험용 코드 입력이 끝났으면 begin_01 파일 명으로 저장하고 실행 버튼을 눌러 보자.
다음과 같이 그래픽도 가능한 웹 형태가 나타남을 볼 수 있다. 웹 영역안에 (200,200) 크기에 해당하는 Canvas 영역이 있으며 그 안에서 사각형이 출력되어 있음을 알 수 있다.
이 예제를 통해 P5*js 의 특징적인 일면을 관찰하였다.
두 번째 입력창 및 그래픽 처리 예제를 살펴보자. ex03_input_Button 이 예제는 웹화면에 입력 박스를 제공하며 문자가 입력되고 submit 버튼을 누르면 웹화면에 다양한 각도로 온 화면 가득 임의의 위치에 텍스트를 그래픽 처리하여 보여 준다.
하지만 불러온 파일을 실행시키기 전에 comment line에서 설명했듯이 약간의 편집이 필요하다.
우선 ex03_input_Button 파일을 불러서 적절한 파일명input_Button_01을 부여하여 저장한 후에 편집 작업을 하도록 하자.
빨간 박스 친 HTML 태그 (a⚫⚫⚫) ▴▴▴ (/a) 명령을 복사해서 index.html 의 (body)와 (/body) 사이에 위치시킨다. 아울러 반드시 저장 작업을 실행하자. HTML 편집기에서는 p5*js뿐만 아니라 NotePad++ 에서도 반드시 저장을 해야 실행이 가능한 점을 상기하자.
input_Button_01 의 Java Script 에서도 입력 박스의 y 좌표 즉 높이를 65에서 85로 시각적으로 보기가 좋도록 수정하였다.
마우스 버튼을 클릭하면 greet 함수를 불러와 웹화면에서 텍스트와 그래픽 처리를 실행하한다. 따라서 function greet() 가 뒤따르며 function draw() 부분이 별도로 없다는 점에 유의하자.
다시 저장 후 이 파일을 실행하자.
박스에 Steemit을 입력하고 submit 버튼을 눌러 ekda과 같은 웹화면을 관찰하자.
아주 간단한 두 개의 예제를 선보였다.
p5*js가 구조적으로는 Processing Java 또는 아두이노와 닮았고 문법적인 측면에서는 java Script와 유사점이 많은 듯하다.
빠른 시일 내에 아두이노와 시리얼 인터페이스가 가능해지면 웹에서 ON OFF 버튼을 생성하여 LED를 제어할 수있는 코드를 시도할 계획이다.