돌돌쌤

프로세싱에서 글자를 다루는 방법을 알아보자

시스템 font 폴더의 폰트를 불러와 자체적으로

폰트파일을 저장하여 사용한다.

즉

프로세싱 메뉴 - tools -create Font 에서

시스템의 폰트를 선택하여 이름을 넣으면 vlw라는 확장자의 파일을 만들고

프로세싱 파일폴더에 저장한다.

이파일 명을 스케치에서 폰트로 불러오면 된다.

위 저장한 폰트를 사용하여

글씨가 마우스의 움직임에 따라 움직이도록 스케치 해보자.

스케치 소스

-----------------------------------------------------------------------------

PFont a;                   //불러올 폰트 변수 a 

void setup(){

  size(480,360);

  a = loadFont("AgencyFB-Bold-48.vlw");   

                                 // AgencyFB-Bold-48.vlw라는 이름의 (위 그림에서 저장한)폰트를 a에 불러옴

  textFont(a,80);           // a 폰트의 크기는 80

    //noLoop();

}

void draw(){

  fill(constrain(mouseX,0,255),50,200);   // 표현된글자에 색상을 줌 (마우스의 움직임에 따라 색이다르도록)

  text("Arduino", mouseX,80);                       // Arduino라는 글씨를 (mouseX,80)좌표에서 표현

  fill(constrain(mouseY,0,255),150,50);

  text("processing",mouseY,200);         // 마우스의 움직임에 따라 글씨가 움직이도록

}

----------------------------------------------------------------------------

영상

프로세싱 레퍼런스 http://processing.org/reference/

Typography 

PFont

Loading & Displaying

이전글  프로세싱 수학함수1

          프로세싱 수학함수2 (삼각함수)

삼각함수를 이용해 원을 그리고

마우스의 위치값에 따라 진자(표현된 그림이 진자처럼 보여)가 따라 다니도록

스케치 해보자.

스케치 소스

--------------------------------------------------------------------

void setup(){

  size(480,360);     // 창의 크기

  //background(255);

  //noLoop();

}

void draw(){

  background(255);

  float angle = 0;

  float arrowX = 0;

  float arrowY = 0;

  angle = atan2(mouseY-200, mouseX-200);  // (200,200)점을 원점으로 x축으로 부터의 각도를 계산

  arrowX = 200+cos(angle)*50;     // 원그림

  arrowY = 200+sin(angle)*50;      // 원그림

  line(200,200,arrowX,arrowY);     // 중심에서 원위의 작은 원까지 직선

  ellipse(arrowX,arrowY,10,10);    // 원위에 작은 원

}

--------------------------------------------------------------------

영상

이전글 : 프로세싱 수학함수1 

프로세싱에서 사용되는 수학함수와

삼각함수를 이용하여 원을 그려보자.

---------------------------------------------------------------------------------------------------

void setup() {

size(480, 320);

background(255);

// noLoop();

}

void draw() {

println(PI);               // 3.14

println(TWO_PI);     // 2*3.14

println(HALF_PI);    // 3.14/2

println(QUARTER_PI);    // 3.14/4

println(radians(90));        //일반각을 호도법으로

println(degrees(PI));       // 호도법을 일반각으로

println(degrees(radians(90)));   // 결국 90도

println(cos(PI));    // -1

println(sin(PI));    //  0

println(cos(radians(45)));    

println(sin(radians(45)));

println(tan(radians(45)));

println(acos(0.5));   // cos값이 0.5인 각도

println(asin(0.5));

println(atan(1));     //tan 값이 1인 각도는 45도 -> PI/4

println(atan2(mouseY-200,mouseX-200));  

                                  //atan2(y,x)는 x축에서 좌표 (x,y)의 각을 라디안으로 구함 

                                  // 단 atan2()함수는 y값 먼저 쓴다는 것에 주의!!

                                  // 즉, 위 함수는 (200,200)점을 원점으로 

                                  // 마우스의 x,y좌표의 각도를 구함

/*삼각함수를 이용한 원그리기

x= 중심x + (sin(각)*반지름);

y= 중심y + (cons(각)*반지름);  */

stroke(10);

int radius = 100;

for (int deg = 0; deg < 360; deg += 10) {

float angle = radians(deg);

float x = 200 + (cos(angle) * radius);

float y = 200 + (sin(angle) * radius);

//point(x,y);    // 0~360사이에 10도 간격으로

                  // 중심점이 (200,200)이고 

                  // 반지름이 100인 점을 찍어 원을 그림

ellipse(x, y, 3, 3);   // 10도 간격으로 작은 원을 그려 반지름이 100인 큰원을 표현

}

}

-------------------------------------------------------------------------------------------

화면

프로세싱 레퍼런스 http://processing.org/reference/

Trigonometry