돌돌쌤

이미지를 다루는 방법은 폰트와 별반 다르지 않다.

이전글 프로세싱 폰트다루기

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

PImage a;           // 이미지 변수 선언

void setup(){

  size(480,360);

  a = loadImage("_MG_0142.jpg");      // 변수 a에 이미지 불러옴

                                                     // 불러오는 이미지파일은 

                                             //이 스케치 파일이 저장된 폴더와 같은 위치에 저장되어 있어야 한다.

  noLoop();

}

void draw(){

  image(a,0,0);                   // 화면 (0,0)위치에 이미지 표시

  image(a, 200,60, a.width/2,a.height/2);    // 화면 (200,60)위치에 

                                            //너비는  a너비의 1/2, 높이는 a높이 1/2의 크기로 표시

}

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

표현 화면

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

Loading & Displaying

tint()

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

시스템 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);    // 원위에 작은 원

}

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

영상