Chorr's Archive

매달 회사에서 FT 관련 기술을 사용하는 퀴즈를 풀어보는 행사가 있습니다. 지난 퀴즈 (css 주제)에 이어서 이번엔 ascii art 가 주제로 선정되었습니다.

요즘 이미지 프로세싱에 꽂혀있던터라 ‘웹에서의 실시간 영상 렌더링’ 기술을 접목해보고 싶었고, 이와 가장 어울리는 소스는 Daum tv팟이라는 결론에 매쉬업 서비스 만들게 되었네요. 만들다 보니 주요 프로세스 코드보다 css 디자인에 더 신나서 -_ – 결국 실시간 렌더링 속도는 초당 2프레임을 왔다갔다하는 극악의 결과가 나왔네요;; (심지어 일부 환경에서는 브라우저가 뻗어버리는 현상까지!)

서비스 페이지 : http://lab.chorr.net/tvpascii

최신버전의 크롬과 사파리에서 볼 수 있습니다.

(2011년 5월 25일 글 가져옴)
HTML5 가 웹트렌드가 된지도 시간이 꽤 지나가고, 그 기간동안 많이 볼 수 있었던 글들이 “HTML5를 활용한 OOO”, “CSS3만 사용한 OOO” 이런 제목이 주류였습니다. 마냥 구경만 하고 있을 때, 마침! 결국 이 두손으로 만들어 볼 기회가 찾아와 후다닥 만들어 보았네요.

“HTML, CSS만 사용한 보케 드로잉~”
http://lab.chorr.net/ex/bokeh.html

마우스를 이리저리 움직여보면 빛망울들이 나타났다, 사라졌다, 하는 단순한 구조입니다. 몰랐는데 모던 브라우저에서 css3의 고유한 prefix (-moz, -webkit 같은) 없어도 이제 몇몇 속성은 지원하더군요. (세월이 빠르군요 빨라)
그리고 아무래도 280개의 DOM 엘리먼트와 transition 속성을 사용하다 보니 퍼포먼스는 브라우저가 좀 힘들어하는 상황입니다.

IE를 제외한 브라우저에서 볼 수 있습니다.