프로세싱[processing]을 이용한 안드로이드 앱 만들기 세번째 시간입니다.

이번시간에는 프로세싱의 막강(?)기능인 라이브러리 활용법에 대해 알아보도록 하겠습니다.

먼저 프로세싱 홈페이지에서 사용할 라이브러리를 찾아봅니다.

http://processing.org/

여러가지 라이브러리들이 참 많은데요

대표적으로 가장 많이 쓰게될 GUI라이브러리를 한번 사용해 보도록 하겠습니다.

해당링크를 클릭해보면 아래 사진처럼

라이브러리 샘플예제와 각종 설명이 가득한 홈페이지로 이동하게 됩니다.

디자인이참 맘에 드는군요...ㅎㅎㅎ

그럼 라이브러리를 설치해 보겠습니다.

프로세싱을 실행하신후 아래 메뉴를 선택해 줍니다.

메뉴를 선택하시면 설치할수 있는 라이브러리 목록이 뜨는데요

위에서 봤던 라이브러리는 아래 처럼 찾으시면 됩니다.

인스톨이 끝났으면 바로 테스트 해볼까요?

아래 예제 소스를 복사해서 붙여넣고 안드로이드 에뮬레이터로 실행해 주세요

import controlP5.*;

ControlP5 cp5;

Accordion accordion;

color c = color(0, 160, 100);

void setup() {
  size(400, 600);
  noStroke();
  smooth();
  gui();
}

void gui() {
 
  cp5 = new ControlP5(this);
 
  // group number 1, contains 2 bangs
  Group g1 = cp5.addGroup("myGroup1")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(150)
                ;
 
  cp5.addBang("bang")
     .setPosition(10,20)
     .setSize(100,100)
     .moveTo(g1)
     .plugTo(this,"shuffle");
     ;
    
  // group number 2, contains a radiobutton
  Group g2 = cp5.addGroup("myGroup2")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(150)
                ;
 
  cp5.addRadioButton("radio")
     .setPosition(10,20)
     .setItemWidth(20)
     .setItemHeight(20)
     .addItem("black", 0)
     .addItem("red", 1)
     .addItem("green", 2)
     .addItem("blue", 3)
     .addItem("grey", 4)
     .setColorLabel(color(255))
     .activate(2)
     .moveTo(g2)
     ;

  // group number 3, contains a bang and a slider
  Group g3 = cp5.addGroup("myGroup3")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(150)
                ;
 
  cp5.addBang("shuffle")
     .setPosition(10,20)
     .setSize(40,50)
     .moveTo(g3)
     ;
    
  cp5.addSlider("hello")
     .setPosition(60,20)
     .setSize(100,20)
     .setRange(100,500)
     .setValue(100)
     .moveTo(g3)
     ;
    
  cp5.addSlider("world")
     .setPosition(60,50)
     .setSize(100,20)
     .setRange(100,500)
     .setValue(200)
     .moveTo(g3)
     ;

  // create a new accordion
  // add g1, g2, and g3 to the accordion.
  accordion = cp5.addAccordion("acc")
                 .setPosition(40,40)
                 .setWidth(200)
                 .addItem(g1)
                 .addItem(g2)
                 .addItem(g3)
                 ;
                
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.open(0,1,2);}}, 'o');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.close(0,1,2);}}, 'c');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setWidth(300);}}, '1');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setPosition(0,0);accordion.setItemHeight(190);}}, '2');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.ALL);}}, '3');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.SINGLE);}}, '4');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {cp5.remove("myGroup1");}}, '0');
 
  accordion.open(0,1,2);
 
  // use Accordion.MULTI to allow multiple group
  // to be open at a time.
  accordion.setCollapseMode(Accordion.MULTI);
 
  // when in SINGLE mode, only 1 accordion 
  // group can be open at a time. 
  // accordion.setCollapseMode(Accordion.SINGLE);
}
 

void radio(int theC) {
  switch(theC) {
    case(0):c=color(0,200);break;
    case(1):c=color(255,0,0,200);break;
    case(2):c=color(0, 200, 140,200);break;
    case(3):c=color(0, 128, 255,200);break;
    case(4):c=color(50,128);break;
  }
}

void shuffle() {
  c = color(random(255),random(255),random(255),random(128,255));
}

void draw() {
  background(220);
 
  fill(c);
 
  float s1 = cp5.getController("hello").getValue();
  ellipse(200,400,s1,s1);
 
  float s2 = cp5.getController("world").getValue();
  ellipse(300,100,s2,s2);
}

에뮬레이터를 실행하면 아래와 같이 화면을 보실수 있습니다. 참쉽죠??...ㅎㅎㅎ

간단하게 안드로이드 프로세싱을 이용해 안드로이드 앱 만드는 법을 배워 봤는데요

프로세싱의 장점이라면 초보자도 아주 쉽게 앱만들기가 가능하다는점

각종라이브버리가 많다는점 등등 이있겠군요.

가끔 메일로 문의 하시는 분이 있는데 댓글을 활용해 주세요~~^^