Rev. 2.73

ragdoll.gif

Gerard Ferrandez씨는 자바스크립트를 이용한 비주얼라이제이션의 달인입니다. jQuery와 같은 서드파티 자바스크립트 프레임웍 또는 라이브러리의 도움을 전혀 받지 않고 그만의 독특한 알고리듬으로 자바스크립트 애니메이션을 다양하게 구사하는데, 긴장감 있는 모션은 기본이고 마우스에 반응하는 3차원 공간을 구현하는 등 배울점이 많은 데모들과 그 소스(Creative Commons License)를 다수 공개하고 있습니다. 최근에 들어서는 물리엔진에 관심을 가지셨는지 수학과 물리를 접목한 봉제인형(Ragdoll)이라는 데모를 공개했는데 경악을 금할수가 없더군요. 자바스크립트는 단 500여 라인(주석포함)만으로 구성되어 있었습니다. 총 6,000라인이 넘는 자바스크립트 물리엔진인 Box2dJS가 무색할 정도로 정교합니다. 직접 체험해 보세요.

dolls.push(new Doll(nw * .5, 40, [
	[1,0,3,7,80,10,1, "#888", 0, 0],
	[5,3,20,1,60,8,1, "#888", 0, 1],
	[6,4,20,1,60,8,1, "#888", 0, 1],
	[3,1,20,4,40,10,1, "#FFF", 1, 1],
	[4,1,20,2,40,10,1, "#FFF", 1, 1],
	[9,7,30,2,80,8,2, "#888", 0, 1],
	[10,8,30,2,80,8,2, "#888", 0, 1],
	[7,2,30,8,30,13,1, "#F80", 1, 1],
	[8,2,30,1,80,13,1, "#F80", 1, 1],
	[2,1,30,3,40,20,2, "#FFF", 1, 1],
	[0,0,35,2,60,35,1, "#888", 1, 1],
	[11,1,1,2,25,0,1, "#000", 0, 0],
	[12,11,25,11,25,5,1, "#444", 0, 0]
]));

Comments