Rev. 2.73

js3d.gif

Joonas Lehtinen씨는 플래시나 SVG, Canvas를 사용하지 않고 생짜 자바스크립트만으로 3D스타일 애니메이션을 만들었습니다. 3D로 사용할 이미지를 너비 1픽셀씩 순차적으로 잘라내고 384개 이미지 태그를 HTML에 마크업한 후, 몇몇 수학 계산식이 사용 된 아래와 같은 함수를 지속적으로 호출하여 좌측 그림처럼 나타나는 회전목마 애니메이션을 태스트 했습니다. CPU 자원을 엄청나게 차지하네요. 정말 이렇게까지 해야하나요?

// Draw a frame
function draw(x) {
	var prevx=0;
	for (i=0;i<384;i++) {
		var rad = i*3.14/384;
		var nextx = Math.round((1-Math.cos(rad))*180);
		var h=Math.round(40+50*Math.sin(rad));
		var s = document.getElementById("slice-"+((i+x*2)%384));
		s.height=h;
		var w = Math.round(nextx-prevx);
		if (w==0) {
			s.style.display="none";
		} else {		
			s.style.display="block";
			s.width= w;
			s.style.top=""+(50-Math.round(h/1.5))+"px";
			s.style.left=""+(prevx)+"px";
		}
		prevx=nextx;
	}
}

// Animate the images
var frame=0;
function animate() {
	draw(frame++);
	setTimeout("animate()",1);
}

// Initialize the image slices
for (i=0;i<384;i++) {
	var s = document.getElementById("slice-"+i);
	s.style.position="absolute";
	s.style.display="none";
}

animate();

덧, 아이쿠, John Dyer씨 또한 픽셀단위 div컬럼을 사용하여 3D 파노라마까지 구현하셨네요. Prototype기반으로 클래스화 된 코드를 작성하여 손쉽게 인스턴스를 생성하는 구조입니다.(다행히도 픽셀 단위로 이미지를 클리핑하지는 않았군요.) 보다 빠른 브라우저의 인터프리터 및 그래픽 처리능력이 절실합니다.

var pano = new JsPano('Courtyard',1240,300,350,300,5);

Comments

buddy.gif

AjaxIM은 누구나 웹상에 설치해서 사용할 수 있는 Ajax기반 인스턴트 메신저(IM)입니다. PrototypeScriptaculous, Prototype Window, SoundManager2 등의 자바스크립트 라이브러리가 사용되고 있으며, 백-엔드 플랫폼은 PHP로 작성되었습니다. 친구 목록을 그룹으로 관리할 수 있는 목록창과 이모티콘 삽입, 텍스트 스타일을 커스토마이즈하여 대화할 수 있는 대화창으로 구성되어 있습니다. 다국어 설정, 테마 변경, 사용자 차단, 관리자 패널 등의 기능을 제공합니다. 실험을 위해 저도 설치해 보았는데요. im.firejune.com에서 테스트해 볼 수 있으며, 저와 대화 하시려면 'firejune'을 초대하시면 됩니다. 어딘가에 응용할 곳이 있을 듯 한데요.

Comments