[ 디자인 프로그래밍 / 프로세싱 / Processing ] 4주차

colorMode

colorMode 에는 RGB 와 HSB 모드 두가지가 있는데, RGB 는 흔히 우리가 아는 RED , GREEN, BLUE 3가지 색의
혼합으로 색을 표현하는 방법으로 fill ( R ,G , B) 혹은 fill ( R, G, B, A ) 로 색을 표현할 수 있다.

HSB 는 색도(Hue), 채도(Saturation), 명도(Brightness/Value)  를 통한 방식이다. 

HSB를 아주 잘 표현한 예시 라고 하는데 글쎄...모르겠다.

HSB 는 위와같이 나타나 있다 실제로 코드상에서 사용 하기 위해서는

colorMode(HSB,100) ;

 fill(359/360.0 * 100 , 82, 93 ) ;

이런식으로 써야 내가선택한 색이 나오게 된다.

H 에 해당 하는 부분이 360도 Degree 인데, 이를 백분율로 바꿔줘야 하기 때문이라고한다.

그렇다 그냥 RGB를 쓰고 HSB를 안쓰면된다.

radians(degree)

라디안 단위와 각도를 단위변환을 위한 녀석으로, 이 과정을 거치지 않고 그냥 sin ( 10 ) 이런식으로하면 생각한 움직임이 나오지 않게 된다.

물체의 회전 ( 프로세싱 회전 ) 

물체가 회전하는 모습을 표현하려면 어떻게 해야할까, 그렇다. 삼각함수를 이용해야한다.
간단한 예시로 

 ellipse( 100  , 200 , 100 , 100  * sin(b) ) ;  이렇게 하면 세로로 회전할 것이고

 ellipse(100   , 200  , 100  * sin(b), 100 ) ; 이렇게하면 가로로 회전할 것이다.

속도 ? 속도...! 움직이는 속도를 다르게 !

물체가 그냥 움직이기만 하는건 쉽다 좌표값에 지속적인 어떤 값을 더하거나 빼면 되니까 ! 그런데,

그냥 일정학 속도가 아닌 움직이게 하려면 가속도를 가해주면 된다.

가속도는 예를 들면 목표값과 현재 위치를 빼서 그 비율을 이용하는 방법이 있다. 

두번째 예제 코드를 보면 쉽게 도전 할 수 있다.

x += ( 목표 - x ) * 가속도값

이렇게 하면 된다 

예제코드_스프링,회전하는원,sin 운동하는원, 랜덤하게 움직이는 폭탄

 
 
void setup(){
 size(800,600); 
}
 
 int a  = 15 ;
int b = -250 ;
int c = -1 ;
 
int xx = 400 ;
int yy = 300 ; 
 
boolean flag_x = false ;
boolean flag_spring = false ;
boolean flag_circle2 = false ;
int temp1 ;
int temp2 ;
 
void draw(){
 background(255,255,255);
 for( int i = 0 ; i <50 ; i++){
   line( 50 + a * i , 50 , 150 + a * i , 450 ) ;  
   line(  150 + a * i , 450 ,  50 + a * (i+1) , 50 ) ;  
 }  
 
  if( c >= 750  )
    flag_x = true ;
 else if ( c <= 0 )
     flag_x = false  ;
   if( flag_x )
     c -= 10 ;
   else
     c += 10 ;
     
  if( a >= 400  )
    flag_spring = true ;
 else if ( a <= 0 )
     flag_spring = false  ;
     
   if( flag_spring )
     a -= 2 ;
   else
     a += 2 ;
     
  if( 200+b >= 600  )
    flag_circle2 = true ;
 else if ( 200+b <= 0 )
     flag_circle2 = false  ;
     
   if( flag_circle2 )
     b -= 5 ;
   else
     b += 5 ;
 
 colorMode(RGB);
 fill(91,38,152 ) ;
 ellipse(100   , 200 + b , 100  * sin(b), 100 ) ;
 
 colorMode(HSB,100) ;
 fill(267/360.0 * 100 , 74, 59 ) ;
 ellipse(300  ,200 + b,100 ,100  * sin(b) ) ;  
 colorMode(RGB);
 
 
 fill(91,38,152 ) ;
 ellipse(0+c  , (width/2 + 50 * sin(radians(c)))  , 100 , 100  ) ;
 
 
 fill ( 0 ) ;
 
 temp1 = ( int ) random ( -30,30 ) ;
 temp2 = ( int ) random ( -30,30 ) ;
 
 ellipse( xx = ( xx + temp1 ) , yy = ( yy + temp2 ) , 100,100 )  ;
 line ( xx , yy, xx, yy- 90 ) ;
 
 fill(255,0,0);
 noStroke();
 triangle(xx,yy - 100 , xx + 20 , yy -80, xx - 20 , yy -80 ) ; 
 triangle(xx,yy - 75 , xx + 20 , yy -90, xx - 20 , yy -90 ) ; 
 stroke(1);
 if( xx >= 790 || xx <= 20 || yy <= 10 || yy >= 590 ){
  xx = width/2 ;
  yy = height/2 ;
 }
 
}

예제코드_마우스 따라 그려지는 원, 가속과 감속, 멋짐

void setup (){
 size( 800,600) ; 
}
 
float x = 0.1f ;
float y = 0 ;
float targetX, targetY ;
float easing = 0.05f ;
 
void draw(){
  targetX = mouseX ;
  targetY = mouseY ;
  x += (targetX - x) * easing ;
  y += (targetY - y) * easing ;
 // ellipse ( x , y , 2*x , 2*y ) ; 
  ellipse ( x , y , 0.5 + x/3 ,0.5 +  y/3 ) ; 
}