Class
  • 강좌게시판
  • Tip&Tech
  • Download
  • Tip&Tech
  • HOME > Class > Tip&Tech > 3차원 베지어 곡선 알고리즘
[알고리즘] 3차원 베지어 곡선 알고리즘
글쓴이 기술레벨커뮤니티레벨레인에디터 날 짜 12-03-27 11:02 조 회 2149
간편URL http://www.phpschool.com/link/tipntech/75330 복사

SyntaxHighlight로 보기

Link1 http://www.cafen.net/product/others.html?type=canvas&init=off&ca=fr&li… (205)

베이지 곡선은 여러개의 점으로 부터 곡선을 유도할 수 있습니다.

제가 필요해서 만든 건데 곡선을 만들어 내는 알고리즘을 설명 드리겠습니다.



cafen.cPoint = function(x,y,z) {
this.x = x;
this.y = y;
this.z = z;
}

cafen.cPoint.prototype = {
x : null, y : null, z : null,
getMiddle : function (tPoint, rate) {
return this.clone().minus(tPoint).zoom(1-rate).plus(tPoint);
},
clone : function() {
return new cafen.cPoint(this.x, this.y, this.z);
},
plus : function(tPoint) {
return this.addx(tPoint.x).addy(tPoint.y).addz(tPoint.z);
},
minus : function(tPoint) {
return this.addx(tPoint.x *(-1)).addy(tPoint.y *(-1)).addz(tPoint.z *(-1));
},
zoomXyz : function(x,y,z) {
if (x != null)
this.x *= x;
if (y != null)
this.y *= y;
if (z != null)
this.z *= z;
return this;
},
zoom : function(rate) {
return this.zoomXyz(rate, rate,rate);
},
addx : function(x) {
if (x != null)
this.x += x;
return this;
},
addy : function(y) {
if (y != null)
this.y += y;
return this;
},
addz : function(z) {
if (z != null)
this.z += z;
return this;
}
}


function getBezier(percent,points) {
var len = points.length;
var nPoint = points;
while(nPoint.length > 1) {
var mPoint = [];
for(var i = 0 ; i < nPoint.length -1 ; i++)
mPoint.push(nPoint[i].getMiddle(nPoint[i+1], percent));
nPoint = mPoint;
}
return nPoint[0];
}

이 알고리즘의 핵심은 여러개의 점을 받아서 각각의 중간 점을 잡아내서 그 점의 갯수가 1 될때까지 수행을 합니다.

웹상에서 찾아보니 2차원과 점이 3개나 4개인것 만 설명 되어 있어서 점의 갯수에 상관없이 계산될 수 있도록 설계하였습니다.
이 프로그램은 3차원 곡선을 만들어 냅니다.

위에 첨부된 그림은 하나의 곡선인데 보는 시각에 따라서 그려진 곡선입니다. 즉 좌측 우측 상단 하단에서 보여지는 3차원 곡선입니다.

자세한 그림은 링크를 참조 바랍니다.

링크에서 키보드의 화살표을 움직이면 좌표가 움직여서 보여 집니다.

전체댓글수 8

  • 기술레벨커뮤니티레벨봄ㅤ돌ㅤ 12-03-27 11:28

    소스보기

  • 언제 써먹을지 모르겠지만
    좋은 정보 감사합니다.
  • 기술레벨커뮤니티레벨개념상실곰 12-03-27 11:38

    소스보기

  • 컹 3차 좌표 베이저 곡선 ㅎㄷㄷ 잘 써먹겠슴미다 ㅋ 캔버스쓸때 써먹으면 좋것네여
  • 기술레벨커뮤니티레벨레인에디터 12-03-27 11:43

    소스보기

  • 예 저도 3차원 캔버스를 만드느라 만든 겁니다. 위 링크에서 캔버스 위에 있는 top, left 라고 되어 있는 부분을 클릭하면 캔버스가 3차원으로 움직이게 설계되어 있습니다. 아직까지는 어디에 사용할까 고민 중입니다. 선 개발 후 사용처 생각...
    감사합니다.
  • 기술레벨커뮤니티레벨레인에디터 12-03-27 11:45

    소스보기

  • IE, FireFox, Chrome 에서 잘 작동은 하고 있는데 현재 clip 부분에서 막혀 있는 상황입니다. 즉 3차원 mesh 부분이 처리 IE에서 안되더군요.  IE9 이상에서는 된다고 하는데.. 그 이하 버전에서는 도저히 방법이 안보이고 있습니다.
  • 기술레벨커뮤니티레벨개념상실곰 12-03-27 12:04

    소스보기

  • ie8 까지는 포기하시면 편해염

    좋은 자료 캄샤함미다 ㄳㄳ
  • 기술레벨커뮤니티레벨.NETSCHOOL 12-03-28 09:31

    소스보기

  • IE 모든 버전 3D 그래픽 아예 지원 안합니다. 캔버스와 CSS 모두 2D만 지원합니다.
  • 기술레벨커뮤니티레벨유창화 12-03-27 11:40

    소스보기

  • 대단하십니다.
    제가 도전해 보지 못한 분야네요.
    감사합니다.
  • 기술레벨커뮤니티레벨알찬돌삐 12-03-27 15:34

    소스보기

  • 헉.................
  • 게시물 12,476건 RSS
번호분류제목글쓴이날짜조회
12,476 알고리즘 [1원팁] php 동적인 상속 [6] 기술레벨커뮤니티레벨RGB255 13-05-18 192
12,475 스크립트 js 함수,메소드 명세, 표준인지 MSIE 지원 되는지... [5] 링크 기술레벨커뮤니티레벨송효진 13-05-15 295
12,474 DBMS 초보자를 위한 mysql에서의 비트연산 활용 [4] 기술레벨커뮤니티레벨전진하는아르고 13-05-13 453
12,473 알고리즘 페이스북이 만든 PHP 가상머신인 HipHop For PHP 를 소개합니다. [6] 링크 기술레벨커뮤니티레벨egoing 13-05-13 572
12,472 브라우저 google chrome high contrast plugin 사이트 고대비화 도구 [3] 링크 기술레벨커뮤니티레벨송효진 13-05-12 296
12,471 알고리즘 Codeigniter 2.1.3 기반 공개보드 [1] 링크 기술레벨커뮤니티레벨마냐 13-05-11 456
12,470 기타 코드가 손에 안 익으신다구요.. 이것 한번 해 보심이. [2] 링크 기술레벨커뮤니티레벨폭스테리어 13-05-09 676
12,469 서버운영 git 을 이용한 서버간 동기화 스크립트. 자동 commit, push, res… [2] 첨부파일 기술레벨커뮤니티레벨송효진 13-05-08 531
12,468 알고리즘 CodeIgniter 에서 캐쉬를 사용하는 방법을 수업으로 만들었습니… [2] 링크 기술레벨커뮤니티레벨egoing 13-05-08 357
12,467 설치/설정 NGINX와 PHP-FPM [19] 링크 인기 기술레벨커뮤니티레벨egoing 13-04-25 1458
12,466 정보 Chart.js - 6가지 종류의 예쁜 차트 [5] 링크 인기 기술레벨커뮤니티레벨킁킁탐정 13-04-24 1224
12,465 정보 List.js - List/Table를 편리하게! [5] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 994
12,464 정보 Rivets.js - View Logic [2] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 653
12,463 정보 Moment.js - 시간의 모든것 [8] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 763
12,462 정보 Collecting All Cheat Sheets [8] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 544
12,461 스크립트 jQuery.outerHTML() 링크 기술레벨커뮤니티레벨송효진 13-04-22 707
12,460 HTML CSS 를 활용하는 간단(?)한 애니매이션 효과 [11] 링크 기술레벨커뮤니티레벨폭스테리어 13-04-19 933
12,459 기타 일에 집중하게 도와주는 크롬 플러그인 [3] 링크 기술레벨커뮤니티레벨폭스테리어 13-04-18 950
12,458 HTML HTML 기반 모바일 어플 프로토타입을 만드실때 쓸만한것 [5] 링크 기술레벨커뮤니티레벨폭스테리어 13-04-17 787
12,457 정보 테스트 도메인과 쿠키의 상관관계 [4] 기술레벨커뮤니티레벨전진하는아르고 13-04-17 484
 
12345678910
글쓰기
SEARCH 검색하기