▶함께배우는 프로세싱 :: ControlP5 라이브러리#1 ControlP5라이브러리 : controlFont.

함께배우는 프로세싱 :: ControlP5 라이브러리#1

 ControlP5라이브러리 : controlFont.

 * by andreas schlegel, 2012

 

▶

이번에 함께 살펴보려고하는 것은

프로세싱 'ControlP5'라이브러리 입니다.

 

import controlP5.*;

라이브러리를 설치하셨다면,

프로세싱에서 controlP5라이브러리를 불러옵니다.

ControlP5 cp5;

controlP5.Button b;

int buttonValue = 1;

boolean isOpen;

int myColorBackground = color(0,0,0);

cp5라는 이름으로 ControlP5를 활용할 것입니다.

boolean isOpen은 슬라이드가 열릴지, 닫힐지를 설정하게 됩니다.

전체 내용이 길지 않기때문에

쭉~한번 훑어볼까요?

void setup() {

  size(700,400);

  smooth();

 

setup 셋팅은 위와 같이 했습니다.

(익숙한 형태로 하셔도 무방합니다.)

  cp5 = new ControlP5(this);

  STEP 1. 요렇게 ControlP5 컨트롤러를 생성 해줍니다.

  cp5.addButton("button")

     .setPosition(20,20)

     .setSize(100,30)

     .setId(1);

      STEP 2. 슬라이드를 불러올 '버튼'을 세부설정하기

.setPosition() : 버튼의 위치지정하기(x,y)

.setSize(): 버튼의 크기 지정하기(w,h)

.setId(): controlP5의 다른 기능과 연결시키기 위한 ID

  b = cp5.addButton("buttonValue")

         .setPosition(100,190)

         .setSize(200,200)

         .setId(2);

      STEP 3. 슬라이드 설정해주기

(위에서 살펴본 버튼의 기능과 동일합니다.)

.setPosition() : 슬라이드의 위치지정하기(x,y)

.setSize(): 슬라이드의 크기 지정하기(w,h)

.setId(): controlP5의 다른 기능과 연결시키기 위한 ID

/* true/false 설정부분은 smooth()기능 활성화를 뜻함*/

  PFont pfont = createFont("Arial",20,true);

  ControlFont font = new ControlFont(pfont,241);

STEP 4. 활용하고 싶은 글꼴을 준비하기

프로세싱에서와 다르지 않게 PFont를 이용했으며

예제에서는 Arial폰트를 사용했습니다.

그리고  createFont()부분에 있는 'true'는

smooth()기능의 활성화여부를 설정합니다.

 

 // change the font and content of the captionlabels

  // for both buttons create earlier.

  cp5.getController("button")

     .getCaptionLabel()

     .setFont(font)

     .toUpperCase(false)

     .setSize(24)

     ;

    STEP 5. 버튼의 글꼴이나 내용을 수정하고자 할때!

  b.captionLabel()

   .setFont(font)

   .setSize(25)

   .toUpperCase(false)

   .setText("Slide")

   ;

    STEP 6. 슬라이드의 글꼴이나 내용을 수정하고자 할때!

여기서 원하시는대로 글꼴의 크기와

사이즈, 종류등을 변경할 수 있습니다.

  b.captionLabel().getStyle().marginLeft = 4;

  b.captionLabel().getStyle().marginTop = 36;

*컨트롤러의 style속성을 이용, 캡션 위치를 조정

맨 뒤의 marginLeft, Top은 익숙한 용어이지요?

이를 통해 여백을 수정할 수 있습니다.

void draw() {

  background(buttonValue*10);

  b.position().x += ((isOpen==true ? 0:-200) - b.position().x) * 0.2;

}

STEP 5. 버튼B의 애니메이션 부분

이를 통해 b의 포지션이 자연스럽게 이동할 수 있게됩니다.

public void button(float theValue) {

  isOpen = !isOpen;

  cp5.controller("button").setCaptionLabel((isOpen==true) ? "닫힘":"열림");

}

STEP 6. controlP5기능의 활용

첫줄인 isOpen은 boolean형태이기때문에 참 또는 거짓을 반환하게되며

이에따라서(두 번째 줄)button에 표시될 text가 변하게 됩니다.

isOpne이 참이면, 캡션은 열린다. 

캡션이 열렸으면 버튼의 text는 '닫힘'이 되고

반대로 캡션이 닫혀있으면 버튼의 text는 '열림'이 됩니다.

결과영상입니다^^

ControlP5라이브러리의 예제는 이 말고도 정말 다양한데요~

개인적으도 정말 유용하게 사용하고 있습니다.

이를통해서 다른 기능들과의 연결을 고려해볼 수 있지않을까요?ㅎㅎ

어서하나하나 섭렵해나가야겠네요!

파이팅입니다%^^