Skip to content

Make Processing

2012.08.21 17:31

퍼즐 만들기

조회 수 2850 추천 수 0 댓글 3
Atachment
첨부파일 '13'
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print

이번 포스팅에서는 간단한 퍼즐을 만들어 보도록하겠다.

퍼즐에는 여러 종류가 있는데 이번에 만들 퍼즐은 어린 시절 한번쯤은 해 보았을.. 추억의 퍼즐이다.


414015_1187588977.jpg

본 포스팅에서 숫자가 아닌 이미지로 대체해서 만들어 보기로 하겠다.

사용할 이미지는 아이유 이다.


iu.jpg


가로 600 pix, 세로 600 pix 사이즈의 이미지를 가로,세로 200 pix의 정사각형으로 잘라서

0.png

1.png

2.png

3.png

4.png

5.png

6.png

7.png

8.png(공백이미지)



0.png 1.png 2.png

3.png 4.png 5.png

6.png 7.png 8.png


로 저장하고 마지막블럭은 밑의 이미지와 같은  공백 이미지로 대체한다.


8.png


퍼즐게임을 코딩 할때 우선적으로 생각해 할 것들이 있다.


그 중 가장 중요한 것은

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

클래스(class)에 어떤 조건들을 넣을 것인가?


1. 이미지(자른 이미지)

2. 이미지의 위치(x좌표, y좌표)

3. 움직일수 있는 사각형인가(공백사각형 주위의 퍼즐 사각형 이미지만 움직일수 있다.)

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


그러면 코딩을 작성해 보자!


1 단계

우선 9개의 이미지를 차례대로 배치해 보자.


0, 1, 2

3, 4, 5

6, 7, 8


int num = 9;  // 이미지 개수
PImage frame[] = new PImage[num]; // 저장 이미지 배열
Puzzle myPuzzle[] = new Puzzle[num]; // 클래스 배열

void setup()
{
  imageMode(CENTER);
  size(600, 600);
  for (int y = 0; y < 3; y++)  // 가로 3개
  {
    for (int x = 0; x < 3; x++)  // 세로 3개
    {
      frame[(x+y*3)] = loadImage((x+y*3) + ".png");  // 순서대로 이미지를 로드
      myPuzzle[(x+y*3)] = new Puzzle(frame[(x+y*3)], x * 200 + 100, y * 200 + 100); // 로드된 이미지를 넣어 클래스 생성
    }
  }
}

void draw()
{
  background(255);   // 배경은 흰색
  for (int i = 0; i < num; i++)
  {
    myPuzzle[i].display();  // 클래스 디슾플레이
  }
}

class Puzzle
{
  int xpos, ypos;  // 이미지 좌표
  PImage b; 
  
  Puzzle(PImage temp_b, int temp_xpos, int temp_ypos)
  {
    b = temp_b;
    xpos = temp_xpos;
    ypos = temp_ypos;
  }

  void display()
  {
    image(b, xpos, ypos);  // 프레임 이미지 보여줌
  }
}

위의 소스와 같이 된다. 프레임 이미지 각각 좌표를 할당하여 화면에 출력 한다.


2 단계

마우스 클릭영역을 설정한다.아래소스를  클래스에 추가한다.

마우스 클릭영역은 클래스에서 수정해서 모든 이미지에 공통으로 적용되게 한다.


void click()
  {
    if(mouseX > xpos - 100 && mouseX < xpos + 100 && mouseY > ypos - 100 && mouseY < ypos + 100)
    {
      stroke(#ffcc33);
      strokeWeight(3);
      fill(255, 50);
      rect(xpos-100, ypos-100, 198, 198);
    }
  }여기에 코드를 입력해주세요


그리고 draw문에 아래와 같이. myPuzzle[i].click();를 추가한다.

void draw()
{
  background(255);
  for (int i = 0; i < num; i++)
  {
    myPuzzle[i].display();
    myPuzzle[i].click();
  }
}

소스가 추가되면 아래와 같이 마우스를 오버한 영역에 노란색 사각형이 활성화 되게 된다.


puzzle_05.jpg 


3 단계

9개의 사각형에 모두 활성화 되고 있는 것을 움직일 수 있는 사각형 퍼즐에만 적용시키고

클릭 했을때 사각형을 움직이게 해야한다.


여기에서 주목해야 할 점은 사각형 퍼즐을 움직이게 하는 것이다. 하지만 여기에서 꼼수(?)가

필요하다. 과연 사각형을 움직이게 하는 것이 맞는가? 이다.

결론부터 이야기하면 사각형을 움직이는 것이아니라. 공백 사각형과 퍼즐 사각형의 위치를 바꿔버리면 되는 것이다.

다시 정리하면, 바꾼다는 것은 좌표만 교체하면 된다는 말이된다.


그럼 이론상 공백 사각형(8) 으로 이동할 수 있는 사각형은 0~7 번까지중 공백 사각형 위와 아래에 있는 5번과 7번이다.


0, 1, 2

3, 4, 5

6, 7, 8


퍼즐의 이동 가능 여부는 dist 함수를 이용해서 구할 수가 있다.

퍼즐하나의 크기가 200px이기 때문에 200px보가 큰 202px 안의 공간에 위치하는 퍼즐 사각형을 움직일수 있게 하면되는 것이다.

각 퍼즐의 위치는 아래 이미지와같이 퍼즐 이미지의 중심점을 기준으로 잡으면된다.

dist.jpg 


이러한 조건을 클래스에 추가하게 되면 된다.

그리고 클릭했을 때 퍼즐의 움직임은 앞에서 이야기 한것과 같이 기존 퍼즐과 공백 퍼즐의 위치 값만 교체하게 되면 된다.

아래 소스는 최종 소스이다.


int num = 9;
PImage frame[] = new PImage[num];
Puzzle myPuzzle[] = new Puzzle[num];

void setup()
{
  imageMode(CENTER);
  size(600, 600);
  for (int y = 0; y < 3; y++)
  {
    for (int x = 0; x < 3; x++)
    {
      frame[(x+y*3)] = loadImage((x+y*3) + ".png");
      myPuzzle[(x+y*3)] = new Puzzle(frame[(x+y*3)], x * 200 + 100, y * 200 + 100);
    }
  }
}

void draw()
{
  background(255);
  for (int i = 0; i < num; i++)
  {
    myPuzzle[i].display();
    myPuzzle[i].click(myPuzzle[8]);
  }
}

class Puzzle
{
  int xpos, ypos;
  PImage b;
  
  Puzzle(PImage temp_b, int temp_xpos, int temp_ypos)
  {
    b = temp_b;
    xpos = temp_xpos;
    ypos = temp_ypos;
  }

  void display()
  {
    image(b, xpos, ypos);
  }

  void click(Puzzle p)
  {
    if(mouseX > xpos - 100 && mouseX < xpos + 100 && mouseY > ypos - 100 && mouseY < ypos + 100 && dist(xpos, ypos, p.xpos, p.ypos) < 202)
    {
      stroke(#ffcc33);
      strokeWeight(3);
      fill(255, 50);
      rect(xpos-100, ypos-100, 198, 198);
    }
    if(mousePressed && mouseX > xpos - 100 && mouseX < xpos + 100 && mouseY > ypos - 100 && mouseY < ypos + 100 && dist(xpos, ypos, p.xpos, p.ypos) < 202)
    {
      int temp_x = xpos;
      int temp_y = ypos;
      xpos = p.xpos;
      ypos = p.ypos;
      p.xpos = temp_x;
      p.ypos = temp_y;
    }
  }
}


TAG •
  • profile
    smileblue 2012.11.04 01:14
    소스파일 다운로드
    http://makeprocessing.com/code_sharing/1778
  • ?
    inSeong 2013.06.07 21:18
    안녕하세요. 이 퍼즐 만드는 것과 관련해서 질문이 있는데요. 혹시 퍼즐들 각각이 클릭을 통해서 움직이지 않고, 스스로 (무작위)로 움직이게 할 수 있는 방법도 있습니까?
  • profile
    smileblue 2014.07.27 13:03
    가능합니다. 그렇게 하기 위해서는 퍼즐 관련 알고리즘을 적용시켜야 해서 전혀 다른 프로그램이 될것 같네요..^^

프로세싱 팁

노하우와 팁을 올리는 공간입니다.

  1. 이미지 좌/우 반전 함수

    카메라 인풋을 사용하다가 보면 이미지가 좌우가 바뀐 상태로 나오는 것을 볼수 있습니다. 특히 키오스크 제작이나 셀프 카메라의경우 거울을 보는 듯이 표현을 해야하는데 항상 카메라는 다른 사람이 보는 시각으로 영상을 뿌려주기 때문에 좌우가 반대인것...
    Date2015.07.23 Bysmileblue Reply0 Views680
    Read More
  2. iBook에 프로세싱 스케치 넣기(processing.js)

    자바 스크립트니 작동되겠네요...이런 아이디어가 ㅎㅎㅎㅎ
    Date2014.03.25 Bysmileblue Reply1 Views1030
    Read More
  3. 프로세싱 PDE X 모드

    프로세싱의 개발환경 PDE(Processing Development Environment)은 다른 개발 프로그램에 비해 용량이 작고 빠른 실행만큼 열악한 것이 사실이다. 하지만 프로세싱은 이러한 것을 개선하고 더 많은 개발 환경을 제공하자고 mode 를 만들 만들어서 안드로이드 및...
    Date2014.02.14 Bysmileblue Reply1 Views1234
    Read More
  4. 한글폰트 만들 때 옵션(Create Font)

    프로세싱으로 코딩을 하다보면 트위의 글이나 페이스북의 데이터를 가져와서 한글로 작성해야 하는 경우가 종종 생긴다. createFont 함수를 사용해도 되지만 필요없는 문자까지의 메모리를 잡아 먹기 때문에 개인적으로는 flv 파일을 생성해서 사용하는 ...
    Date2014.01.28 Bysmileblue Reply0 Views1291
    Read More
  5. TIP 120을 이용한 PWM 제어

    오옷!!!! 나중에 프로세싱과 연동해서 올려 봐야겠네요..ㅋㅋㅋ http://bildr.org/2011/03/high-power-control-with-arduino-and-tip120/ Breathing Light from Adam Meyer on Vimeo. ** 이미지 출처 ; http://protolab.pbworks....
    Date2013.08.05 Bysmileblue Reply1 Views1120
    Read More
  6. Sublime Text 2에서 프로세싱 코딩을 하는 방법

    프로세싱 개발환경이 그렇게 좋은 편은 아니라서 항상 외부 에디터를 찾고 있는데 최근에 Sublime Text 2를 사용하고 있습니다. 아직 프로세싱 자체의 불편함에 적응되어 있서 자동으로 생성되는 기능에 적응이 되어 있지는 않지만 기존의 개발자 분...
    Date2013.07.14 Bysmileblue Reply1 Views2041
    Read More
  7. 이미지 크기와 개수에 맞게 자동으로 스케치 창크기 조정 되는 소스

    스크린의 크기에 따라서 쉽게 이미지 크기를 조정할수 있는 소스 코드입니다. 프로세싱 워크샵 때 나왔던 질문 내용을 코딩해서 공유 드립니다. 이미지의 가로 , 세로 개수와 확대 비율을 적어주면 자동으로 창크기를 조정해서 출력해 줍니다. PIma...
    Date2013.03.14 Bysmileblue Reply0 Views1720
    Read More
  8. 프로세싱에서 한글 출력하기 팁

    오늘 프로세싱에서 영문이 아닌 한글 데이터를 출력할 일이 있어서 간단한 팁을 설명드립니다. 프로세싱에서 글씨를 출력 하기 위해서 PFont를 사용해서 출력을 합니다. tools > create font 를 이용해서 vlw파일을 만들어 아래 소스로 파일을 로드합...
    Date2013.02.26 Bysmileblue Reply2 Views2799
    Read More
  9. 시간에 따라 움직이는 속도 조정하기

    move_time.pde with ProcessingJS move_time.pde (5초와 10초 후에 원이 빨라 집니다~~) 밑에 팁에서 일정 시간이 지난 후에 이벤트가 일어나는 예제를 했었습니다. 이번 예제는 millis()를 이용해서 시간에 따라서 원이 움직이는 속...
    Date2013.02.23 Bysmileblue Reply0 Views1251
    Read More
  10. [링크] 프로세싱으로 만든 마리오

    http://processingjs.nihongoresources.com/test/PjsGameEngine/docs/tutorial/mario.html 전에 소스공유 게시판에 processingJS 관련해서 링크를 했었는데 자세히 살펴보니 재미 있는 것이 있어서 올립니다. 나중에 테스트 해보고 포스팅 해야...
    Date2013.02.12 Bysmileblue Reply0 Views1669
    Read More
  11. 일정 시간이 지난 후 이벤트 일어나게 하기(시간 계산하기)

    딱히 제목을 정하기 어려운 예제라서 제목이 이상하게 길어 졌네요^^;;;; 프로세싱에는 millis()라는 함수 가 있습니다. 프로세싱에서 실행 버튼을 눌러 프로그램을 실행하면 그 시간부터 얼마만틈의 시간이 지났는지를 1/1000초로 표시해 주게 됩니다....
    Date2013.01.12 Bysmileblue Reply0 Views2275
    Read More
  12. 타이틀 바의 이름 바꾸기

    프로세싱 프로그램을 만들어서 실행하면 일반적으로 저장된 파일명으로 타이틀 제목이 뜨게 된다. 하지만 파일명의 경우 띄어 쓰기도 되지 않고 버전별로 표시하는 경우가 많아서 최종 아웃 풋 할 때 보기좋지 않게 프로그램명이 지정되는 경우...
    Date2012.12.26 Bysmileblue Reply0 Views1323
    Read More
  13. 중력 가속도 적용 시키기~

    수학과 과학은 고등학교 이후로 본적이 없었다. 하지만 생활하면서 가끔 접하는 단어들이 있지 않은가? 싸인, 코싸인, 중력가속도, 뫼비우스, 피타고라스, 2차 방정식들.. 예전에는 모두 알고 있던 단어라서 가끔 대화에서 사용 되는 단어정도이다.. ...
    Date2012.11.12 Bysmileblue Reply2 Views6099
    Read More
  14. 퍼즐 만들기

    이번 포스팅에서는 간단한 퍼즐을 만들어 보도록하겠다. 퍼즐에는 여러 종류가 있는데 이번에 만들 퍼즐은 어린 시절 한번쯤은 해 보았을.. 추억의 퍼즐이다. 본 포스팅에서 숫자가 아닌 이미지로 대체해서 만들어 보기로 하겠다. 사용할 이미지...
    Date2012.08.21 Bysmileblue Reply3 Views2850
    Read More
  15. 현재 스케치 폴더 경로 가져오기 sketchPath

    코딩을 하다 보면 언제나 꽁수를 생각하게 된다. 특히 많은 파일을 컨트롤 하다가 보면 절대경로나 상대 경로를 사용하게 되는데. 상대경로는 프로그램을 옮기더라도 편리하게 사용할수 있는 장점이 있고 절대경로는 같은 프로그램에서 반복되는 불필요한 파...
    Date2012.08.17 Byblue Reply0 Views1199
    Read More
  16. 파일명 자리수 맞추기

    파일명 자리수 맞추기란? 코딩을 하다보면 연속적으로 이미지 파일을 불러와야 하는 경우가 있다. 특히 영상 파일을 시퀀스 이미지로 불러오거나 촬영된 사진을 불러오거나 할 경우이다. 파일명이 0,1,2,3,4,5.....jpg 이런 식으로 끝나면 고맙겠지만...
    Date2012.08.08 Byblue Reply0 Views1370
    Read More
  17. 1394 멀티 캠 만들기

    아마도 국내에서는 판매하지 않고 있는 것으로 알고 있습니다. 저도 뉴욕에 있을 때 구입한 2개가 전부이고 이번에 분해를 해 버렸습니다. 제품은 Unibrain Fire - i 입니다. 카메라를 분해하고 두개를 나란히 놓고 합판에 붙였습니다. 프로세싱에서 테스트 해...
    Date2012.05.01 Bysmileblue Reply0 Views1788
    Read More
  18. 자신이 코딩한 프로그램 프레임 속도 보기

    프로세싱에 코딩을 올인하게 되면서 플래쉬나 에펙등의 다른 프로그램에서 만들던 작업이나 영상을 프로세싱으로 만드는 일을 하고 있다. 구현하기 쉬운 툴을 이용해서 좋을 결과물을 얻는 다면 좋겠지만, 인터렉션이라는 특성 때문에 프로그래밍 툴을 이용해...
    Date2012.04.15 Bysmileblue Reply0 Views1902
    Read More
  19. 노이즈(noise)를 만들자!!

    프로세싱으로 노이지를 만들자!! 학부 때 사진 전공자로서 노이즈라는 단어 조차를 싫어한다. 영상을 찍을때도 어두운 곳의 노이즈는 뭐라 말할 수 없는 답답함을 안겨주었다. 그래서 꼭 CMOS 보다는 CCD 카메라를 선호 하던 때도 생각난다. 심...
    Date2011.11.13 Bysmileblue Reply1 Views3472
    Read More
  20. QR code encoder 를 만들어 보자

    Pratt에서 "이고르"라는 러시아 분이 계신다. QR code로 작업을 하는데 QR code를 실시간으로 생성하기 원해서 나에게 프로세싱으로 생성이 가능한지에 대한 문의를 했다.(영어로 이야기 하지만 러시아 어를 듣는 기분이다. ;;;) 자료를 찾다보니 인코더에 대...
    Date2011.11.03 Bysmileblue Reply0 Views3231
    Read More
Board Pagination ‹ Prev 1 2 Next ›
/ 2

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Copyright (c) 2012 Make Processing. All Right Reserved.

smileblue

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소