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

SyntaxHighlight로 보기

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

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

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



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,490건 RSS
번호분류제목글쓴이날짜조회
12,490 스크립트 jquery 1.9+ 용 $.browser - Browser Selector [3] 새글 첨부파일 기술레벨커뮤니티레벨공수니 13-06-19 60
12,489 정보 Codeigniter기반 탱크V CMS 입니다. [10] 링크 기술레벨커뮤니티레벨꾸숑2 13-06-18 353
12,488 스크립트 JavaScript Tips (5) - 메소드 후킹 구현하기 링크 기술레벨커뮤니티레벨문학청년 13-06-17 264
12,487 브라우저 주의]mobile webkit cookie 에 대하여. safari, chrome form act… [7] 기술레벨커뮤니티레벨송효진 13-06-15 289
12,486 스크립트 js 에서 window, document, parent, contentWindow 등등의 속성 … [2] 기술레벨커뮤니티레벨송효진 13-06-06 537
12,485 스크립트 iframe 의 부모태그에 접근하기. [4] 기술레벨커뮤니티레벨송효진 13-06-05 568
12,484 기타 layoutit 만드실때 유용한 툴입니다. 에디터가 사라질지도 --;; [4] 링크 기술레벨커뮤니티레벨폭스테리어 13-06-04 750
12,483 함수 explode 3번째 인자. a=b=c=d ==> "a" => "b=c=d" [13] 링크 기술레벨커뮤니티레벨송효진 13-05-27 752
12,482 정보 1원) scss 사용 중... [2] 기술레벨커뮤니티레벨레어닉 13-05-24 753
12,481 DBMS mysql 에서의 in 과 조인의 선택을 위한 테스트 [19] 이미지 기술레벨커뮤니티레벨전진하는아르고 13-05-22 853
12,480 브라우저 css browser selector js to css_browser_selector.class.php [5] 링크 기술레벨커뮤니티레벨송효진 13-05-21 530
12,479 브라우저 IE9 이하 jquery placeholder 0.3 [4] 링크 기술레벨커뮤니티레벨송효진 13-05-20 640
12,478 함수 redis_cache (그누보드 함수캐쉬. redis 버젼) 기술레벨커뮤니티레벨아빠불당 13-05-20 472
12,477 설치/설정 redis 설치 [1] 기술레벨커뮤니티레벨아빠불당 13-05-20 551
12,476 알고리즘 [1원팁] php 동적인 상속 [6] 기술레벨커뮤니티레벨RGB255 13-05-18 762
12,475 스크립트 js 함수,메소드 명세, 표준인지 MSIE 지원 되는지... [5] 링크 기술레벨커뮤니티레벨송효진 13-05-15 586
12,474 DBMS 초보자를 위한 mysql에서의 비트연산 활용 [4] 기술레벨커뮤니티레벨전진하는아르고 13-05-13 780
12,473 알고리즘 페이스북이 만든 PHP 가상머신인 HipHop For PHP 를 소개합니다. [7] 링크 인기 기술레벨커뮤니티레벨egoing 13-05-13 1007
12,472 브라우저 google chrome high contrast plugin 사이트 고대비화 도구 [3] 링크 기술레벨커뮤니티레벨송효진 13-05-12 494
12,471 알고리즘 Codeigniter 2.1.3 기반 공개보드 [2] 링크 기술레벨커뮤니티레벨마냐 13-05-11 827
 
12345678910
글쓰기
SEARCH 검색하기