2008.05.03 모임내용
----------------------------------------------------------------------------------------------
- 교재 스터디 진행 (~377p) : 박동윤
- 중요한 내용 :
   321p - 픽셀의 컬러값 / 이미지를 얻어내는 함수 get() / set() 활용
   342p - 컬러값 활용
   347p - 다양한 필터 활용
   355p - 프로세싱에서 화면은 pixels[] 라는 배열로 모두 저장이 되어있다. 이를 활용해 이미지 조작 가능
             loadPixels(), pixels[index], updatePixels() 를 활용한 이미지 가공 활용
   368p - save("파일명.jpg") 와 saveFrame() 을 활용한 현재 화면 저장


공지사항
----------------------------------------------------------------------------------------------
- 이번 시간을 마지막으로 Processing - A Programming Handbook for Visual Designers and Artists
   책 스터디를 마무리 지었습니다.
   이후 395 페이지 부터는 class 등의 기타좀더 심화된  프로그래밍적 요소가 많고,
   당장은 지금까지 스터디한 내용들로도 충분히 흥미로운 작업을 할 수 있다고 생각됩니다.
   이후 부분의 내용은 앞으로 작업을 하다 필요한 경우가 생기면 개별적으로 스터디 하면 되겠습니다.

- 다음시간부터는 전시회 작업에대한 이야기를 진행할 예정인데, 아직 구체적인 작업 형태나 주제는
  정해지지 않았습니다만, 그래도 지금까지 공부한 내용들을 바탕으로 꼭 해보고 싶은 것들을
  평소에 생각해 보면 좋겠습니다.

- 다음시간에 맥주한잔 하죠 ^^
 


과제
----------------------------------------------------------------------------------------------


- 그동안 배웠던 내용들을 리뷰하는 기분으로 자유롭게 해보면 좋겠습니다.



참고코드
----------------------------------------------------------------------------------------------


이정은씨의 쿠타게임이나 김유정씨의 두더지잡기 게임 정리해서 올려드리겠습니다.
지난시간에 봤던 interaction 디자인 작가 참고싸이트들도 함께요.
(제가 지금 노트북 포멧을 해버려서 잠시만 ㅎㅎ^^;)




Posted by 알 수 없는 사용자



일전에 핸드폰에 있는 통화기록으로 만들어 볼 수 있는게 없을까 생각해 보았는데,

각각의 원을 통화한 전화번호로 놓고 원의 크기는 통화량, 원이 움직이는 속도는 통화 횟수에 비례하도록

하여 화면안에서 움직이면 재밌을 것 같아 만들어 본 것입니다만, 직장에 있을 때 해보던 거라 시간이 없어서

완성은 못하고 '이런 정도의 움직이 나오지 않을까' 하는 정도에서 그만두었습니다. ^^;;

이것에다가 지난 시간 배웠던  잔상이 남는 움직임을 추가해 본 것입니다.

저희가 배우지 않은 class란 것을 사용했습니다만, 기본적으로 지난 시간 배운 배열을 사용해서 각각의 원들을

만들고 원의 움직임에 필요한 함수를 따로 만들어 제작하였습니다.

(실행후 마우스로 화면을 클릭하면 원들이 움직이고 enter를 누르면 원들이 다시 배열됩니다. )
코드를 정리 못해서 좀 지저분 합니다;;


사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

 Pcircle[] r ;
 int dn = int(random(10,50)); //decide pnumbers received and sent
 int keypad = 200;   //keypad size
 int keycheck = 1;


 void setup()
 {
  //size(147.196);
 size(147,196+keypad);
 background(255);
  smooth();
 
  float v;          // default speed
  int total = 250;   // sum of calls
 // int stotal = 3600; //sum of sec
  r = new Pcircle[dn]; // declare r of class Pcircle
 
  for(int i = 0; i<dn ; i++){
    r[i] = new Pcircle(width/2, (height-keypad)/2, i+1, int(random(1, total-(dn-i))), int(random(80, 3600)),int(random(80,220)),int(random(80,200)),int(random(20,220)),1,1,1,1);
    total = total - r[i].call;
   // stotal = stotal - r[i].sec;
  }
//framerate(70); 
/*for mouseaction(stop & go)*/
  noLoop();
/*for mouseaction(stop & go)*/ 
 }
//////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////
 void draw(){
   fill(255, 12);
   rect(0,0,width,height);
   //background(255);
   if(keycheck == 1){
    for(int i = 0; i<dn ;i++){
     r[i].posUpdate();
    
    }
    for(int i = 0; i<dn ;i++){
     r[i].display();
    }
    basepad();
   }
   if(keycheck == -1){                    
     for(int i = 0; i<dn ;i++){
     r[i].lineUp();
    
    }
    for(int i = 0; i<dn ;i++){
     r[i].display();
    }
    basepad();
   }
  
 }
 ////////////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////////////
/*    mouseaction(stop & go)    */  
int lpcheck = 1;  // loop check variable
void mousePressed(){
  if(lpcheck == 1){
    loop();
   frameRate(70);
    lpcheck = lpcheck * (-1);
  }
  else{
    noLoop();
    lpcheck = lpcheck * (-1);
  }
}
/*    mouseaction(stop & go)        */


 class Pcircle
 {
     float xpos;   //x position of the circle
     float ypos;   //y position of the circle
     int   num;    // phone number
     int   call;   // number of calls
     int   sec ;   // total call time
     int tr,g,b;   // color of the circle
     int xdirection, ydirection;
     float v;      //velocity of the circle
     float cxpos;
     float cypos;
    
 
     Pcircle(float ixpos, float iypos, int inum, int icall, int isec, int itr, int ig, int ib,int ixdirection, int iydirection,float icxpos,float icypos) {
       xpos = ixpos;
       ypos = iypos;
       num = inum;
       call = icall;
       sec = isec;
       tr =itr;
       g = ig;
       b = ib;
       xdirection = ixdirection;
       ydirection = iydirection;
       cxpos = icxpos;
       cypos = icypos;
     
     }
   
     void display(){
       noStroke();
       fill(tr,g,b,190);
       //ellipse(xpos, ypos, 2*sqrt(sec), 2*sqrt(sec));  
       ellipse(xpos, ypos, sec/90, sec/90);
    
     }
     void posUpdate(){
      // float v = 50/sqrt(sec);      // velocity of the each circle
       float v = sqrt(call)/4;
       xpos = xpos + v*cos(360/dn*num)*xdirection;
       cxpos = xpos;
       ypos = ypos + v*sin(360/dn*num)*ydirection;
       cypos = ypos;
      
       if(xpos > (width-(sec/90)/2) || xpos<(sec/90)/2){
         xdirection *= -1;
       }
       if(ypos >((height-keypad)-(sec/90)/2) || ypos<(sec/90)/2){
         ydirection *= -1;
       }
     }
    
     void lineUp(){
       float a = (width/2)+60*cos(TWO_PI/dn*num);
       float b = ((height-keypad)/2)+60*sin(TWO_PI/dn*num);
       float ax = a - cxpos;
       float ay = b - cypos;
       if((abs(a-xpos)<=abs(ax/80)) && (abs(b-ypos)<=abs(ay/80))){
         xpos = a;
         ypos = b;
         }
         else{
           xpos = xpos+ax/80;
           ypos = ypos+ay/80;
           }
        }     
         
 }
 
 void keyPressed(){
   if(keyCode == ENTER){
     keycheck = -1;
   }
 }
        
    
      
 


  

Posted by 알 수 없는 사용자
Etc2008. 4. 29. 21:26

언젠가 디자인을 공부하게 되면 꼭 3D 그래픽을 공부해서
3D Navigation
을 구현한 웹사이트를 만드는 것이
1차적인 작은 꿈이었습니다만,
드디어 이루게 되었습니다. ^^

http://www.cre8ive.kr

3D graphic Maya를 사용했고 기본적으로 사이트 전체는 Flash 로 만들어 졌으며,
컨텐츠는 PHP
MySQL database 기반으로 동적으로 로딩합니다.
Blog
쪽은 현재 Adobe 에서 적극적으로 Web 2.0 의 선두기술로 밀고 있는
Adobe Flex 를 이용해 구현하였습니다.

좋은하루되세요!
Posted by 알 수 없는 사용자

사용자 삽입 이미지

두더지잡기 게임 계속 만들어보고 있는데..
될듯이 안되서 ㅠㅠ 도움을 받고자 여기에 올립니다 ㅋㅋ

어쩔때는 되고 어쩔때는 안되는데,
원래는 두더지 위에서 마우스를 클릭하면, 잡힌 두더지(?) 그림이 떴으면 좋곘는데...
마우스를 꾹~ 계속 클릭하고 있어야 될 때도 있고...
아예 안될때도 있고 하는데 어찌해야 할지 몰라서 일단 올려봅니다.

틀린데 좀 지적해주세요~ +_+;;

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

void setup(){
  size(400,400);

}

int [] datax = {0, 100, 200, 300};
int [] datay = {0, 100, 200, 300}; // 불러올 이미지 x,y좌표값 Arrays
int x = 0, y = 0;

void draw(){

  PImage imgBackground;
  imgBackground = loadImage("backmogura.JPG"); //배경풀밭

  PImage mogura, mogura2;
  mogura = loadImage("mogura.jpg"); //그냥 두더지
  mogura2 = loadImage("mogura2.jpg"); //맞은 두더지

 image(imgBackground,0,0);
 
  frameRate(1); //이게 높아지면 난이도가 상승ㅋㅋ
 
   
  int mogurax = datax[int(random(0,3))];
  int moguray = datay[int(random(0,3))]; // 두더지 출현 위치 랜덤 16가지 지정
 

  image(mogura,mogurax,moguray); // 그냥 두더지가 나오게 함
 
 if (mouseButton == LEFT){ 

   if (((mouseX>mogurax)&&(mouseX<mogurax+100)) && ((mouseY>moguray)&&(mouseY<moguray+100)))
    {
      // mogurax, moguray가 이미지를 불러오는 기준점이 되기 때문에
      // 각각 mouseX,mouseY의 범위를 mogurax,moguray에서 100 더해준데까지 잡았습니다

 image(mogura2,mogurax,moguray); // 맞는 두더지가 나오게 함
  }
 
 }  
    
}

Posted by 알 수 없는 사용자

4.26 모임내용
----------------------------------------------------------------------------------------------
- 교재 스터디 진행 (~336p) : 김지연, 김지인, 류예림, 최윤정
- 중요한 내용 :
   245p - 시간을 얻어낼 수 있는 함수 (이를 활용해서 비주얼한 시계 제작이 가능 하겠죠)
   280p - fill의 opacity 조절을 통한 rect 드로잉으로 잔상효과 내기
   292p - sine 곡선의 진동값을 활용한 모션
   301p - Array (배열) 활용
   316p - Array 를 활용한 이미지 애니메이션
   328p - 간단한 타이포 애니메이션
   336p - mac os x 의 dock 애니메이션 구현 방법
   


공지사항
----------------------------------------------------------------------------------------------
- 다음주를 마지막으로 Processing - A Programming Handbook for Visual Designers and Artists
   책 스터디를 일단락 짓게 됩니다. 다음주 스터디 끝나고 맥주한잔 하죠 ^^

- 이후에는 전시회에 관한 계획과 작업 준비에 관한 이야기가 있을 예정입니다.


과제
----------------------------------------------------------------------------------------------


- background가 아닌 rect함수를 이용하여 잔상이 남는듯한 착시효과 주기

- 배열(array) 이용해보기

- sin곡선의 부드럽게 움직이는 특성을 살려 모션 제작해보기


중에 한가지 이상 사용하여 자유롭게 모션 제작해보기



<참고코드 - 슈퍼마리오 만들기>

지난번 <참고코드 - 초간단 키보드 방향키로 도형 움직이기> 에서
단지 움직이는 도형을
마리오 이미지로 바꾼 것 입니다.

아주 단순한데, 배경이미지를 한번 그려주고 마리오 이미지를 그려주는 방식이고,
마리오의 움직임을 표현하기위해 마리오 이미지는 2장을 번갈아 보여줍니다.
물론, 마리오 이미지는 키보드 좌우가 눌릴때 마다 x 좌표를 변화시켜서 보여주고요.

참고로, 이러한 캐릭터를 이미지로 만들때 중요한것은 테두리 밖의 여백이 투명하게 처리되어야
배경이 보이므로 포토샵에서 투명배경에 캐릭터만 올리고 투명도를 지원하는 gif 나 png 로 저장해야 됩니다.

사용자 삽입 이미지


// 변수들 선언
int x, y=375;
int toggle=1;
PImage imgBackground;
PImage marioSprite1, marioSprite2;

void setup()
{
  size(800,500);
  frameRate(60);
  imgBackground = loadImage("mario_map.jpg"); // 배경 이미지
  marioSprite1 = loadImage("Mario_sprite1.png"); // 마리오 이미지1
  marioSprite2 = loadImage("Mario_sprite2.png"); // 마리오 이미지2
}

void draw()
  image(imgBackground,0,0); // 먼저 배경을 그린다
   
  if(keyPressed == true)
  {
    if(key == CODED)
    {
      if(keyCode == LEFT) // 키보드 왼쪽 방향키가 눌리면
      {
        x-=10;     // x 좌표 10만큼 빼준다
      }
      else if(keyCode == RIGHT)
      {
        x+=10;      // x 좌표 10만큼 더해준다     
      }
    }
  }

  if(toggle==1) // 마리오 이미지 1,2 를 번갈아서 보여주기 위한 변수
  {
    image(marioSprite1,x,y); // 마리오 이미지 1
    toggle=0;
  }
  else
  {
    image(marioSprite2,x,y); // 마리오 이미지 2
    toggle=1;
  }
}



위의 코드처럼 간단히 배경을 그리고 캐릭터를 특정 위치에 그려줌으로써
기본적인 게임의 골격이 시작됩니다.

위를 응용하면 오락실에 있는 슈팅게임도 만들 수 있겠지요? (충돌과 처리는 제외하고 일단 움직임만)
일단 배경을 그려주는 것과 좌우 방향키로 캐릭터 이미지를 그려줄 수 있으니
이를 응용해보면,

1. 세로로 아주 긴 배경이미지를 만들어서 draw 함수에서 그려주되 y 좌표를 증가시켜줌으로써
   배경이 아래로 조금씩 스크롤 되게 한다

2. 캐릭터를 우주선 이미지로 바꾼다. 좌우 이동은 위의 마리오에서 이미 구현 했죠.

3. 스페이스바나 기타 키를 눌렀을때 미사일이 나가도록 한다.
   일반적으로 미사일은 아래의 우주선에서 윗 방향으로 쭉 나가니까
   미사일 이미지를 만들고 load해서 그려주되 우주선의 현재 x 좌표에서 시작하고
   y 를 - 시켜주면 미사일이 위로 쭉 올라가겠죠.

4. 적들 이미지들도 만들어서 위에서 아래로 y 를 + 시켜주면서 움직여 내려오게 해주면 되겠죠.
   여러 적들을 만들때는 오늘 배운 array 를 쓰고,  random 을써서 임의의 x 좌표에서 나타나게
   할 수 있겠죠.

5. 여기까지 하면 기본적인 슈팅게임 모양은 갖춰집니다.



아래는 예제에서 사용된 이미지들 입니다.
--------------------------------------------------------

사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지



 
Posted by 알 수 없는 사용자