Rev. 2.73

원피스 방영분은 작년까지만 해도 꼬박꼬박 챙겨 보다가 문득 떠올라서 주말에 1년치를 몰아서 봤습니다. 1년치라고 해봐야 30편 정도가 고작입니다만, 간만에 봐서 그런지 엄청나게 재미있었습니다. 샤본디 제도에서 멤버들이 모두 흩어지고 루피가 남자금지의 섬 아마존 릴리로 떨어지면서 이야기가 전개되는데 혼자서 박장대소해 보는 것도 참 오랜만이로군요. 지금까지와는 조금 다른 섹슈얼코미디 풍의 색다른 느낌이라서 그랬는지도 모르겠습니다. 특히, 아마존 릴리의 여왕이자 칠무해 멤버인 뱀공주 핸콕이 루피에게 반해버리는 이야기가 완전 골때립니다. 그러고 보니 어느새 원피스가 10주년이라네요. 와우~

attachment
원피스 - 남자금지의 섬 아마존 릴리

Comments

Thomas Fuchs씨는 주석을 포함하여 총 50라인으로 작성된 초경량 CSS 애니메이션 자바스크립트 프레임웍인 "Émile"를 만들고 공개했습니다. Émile는 CSS 프로퍼티들을 작성하고 시간 간격을 설정하는 것만으로 중간 과정의 애니메이션이 만들어 집니다. 그리고 사용자 정의 "easing"과 콜백을 완벽하게 수행합니다. 사실 Effect.morph 때문에 Script.aculo.us의 effect.js를 기본으로 로드하고 있는데, 몽창 덜어내버릴지를 심각하게 고민하고 있습니다. 덜어낸다고 삽질하다가 Scripty2가 홀랑 출시되어버리면 참 허무할텐데 말이죠.

HTML:

<script src="emile.js"></script>
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

Javascript:

emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
  duration: 500,
  after: function(){
    emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
      duration: 4000, easing: bounce
    });
  }
});
 
function bounce(pos) {
  if (pos < (1 / 2.75)) {
    return (7.5625 * pos * pos);
  } else if (pos < (2 / 2.75)) {
    return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
  } else if (pos < (2.5 / 2.75)) {
    return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
  } else {
    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
  }
}

Comments

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