Greg Murray씨가 HTML5 Fish Tank라는 재밌는 예제 프로그램 베타판을 작성했습니다. 이 프로그램은 사용자가 자신만의 물고기를 만들고, 만든 물고기를 어항에 놓을 수 있는 프로그램입니다.
또한, 이 프로그램에는 저수준(low level)의 Canvas와 CSS3 전이/변형 효과가 사용되었습니다.
[code:js]
<div id="1275463173677" class="fish" style="-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: 485px; -webkit-transform: rotateY(0deg) translate(508px, 485px); ">
    <div style="position: absolute; margin-top: 27px; margin-left: 70px; "><canvas width="30" height="44" style="width: 30px; height: 66px; "></canvas></div>
    <div style="position: absolute; margin-top: 25px; margin-left: 2px; "><canvas width="71" height="71" style="width: 71.5px; height: 71.5px; "></canvas></div>
    <div style="position: absolute; margin-top: 40px; margin-left: 19px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
    <div style="position: absolute; margin-top: 59px; margin-left: 4px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
    <div style="position: absolute; margin-top: 45px; margin-left: 40px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
    <div style="position: absolute; margin-top: 19px; margin-left: 26px; "><canvas width="33" height="33" style="width: 33px; height: 33px; "></canvas></div>
    <div style="position: absolute; margin-top: 81px; margin-left: 40px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
</div>
물고기의 애니메이션은 다음과 같이 작성되었습니다.
[code:js] function goFish( target) {         if ( !target.lastPoint) {             target.lastPoint = target.currentPoint;         }         if ( target.timer ) {             clearTimeout(  target.timer );         }         target.currentPoint = getRandomPoint();         target.style.webkitTransitionDuration = target.currentPoint.d;         target.style.webkitTransformOrigin = target.currentPoint .x + " " + target.currentPoint.y;         var _scale = "";         if ( target.lastPoint.x> target.currentPoint.x ) {             _scale = "rotateY(-180deg)";         } else {              _scale = "rotateY(0deg)";         }          target.style.webkitTransform =  _scale + " translate(" + target.currentPoint.x + "px, " + target.currentPoint.y + "px)";         target.lastPoint = target.currentPoint;         target.timer = setTimeout( function () {             console.log( "saved the day" );             goFish( target);         },  ( target.currentPoint.d + 2000 ) ); }

from Build a Fish Tank with Canvas and CSS3
Posted by 행복한고니 트랙백 2 : 댓글 2
웹 어플리케이션을 보호하기 위해 많은 사람들이 즐겨쓰는 유리 방패가 CAPTCHAS 입니다. 일그러지고 찌그러진 글자를 표시해서 사용자로 하여금 그 글자를 입력하도록 한 다음에 폼을 전송하거나 데이터에 접근할 수 있게 합니다. 이 방법은 보통의 사용자들을 귀찮게 하고, 시각장애인이나 실독증 환자는 아예 접근이 불가능합니다. 이 방법은 또한 우리가 생각하는 것만큼 안전하지도 않습니다. PWNtcha는 OCR과 백엔드 시스템을 사용해서 여러  CAPTCHAS들을 계속해서 크랙하고 있습니다.

정말로 놀라운 것은 자바스크립트와 Canvas만 가지고도 크랙이 가능하다는 것입니다. ShaunF씨는 파일 호스팅 사이트인 Megaupload의 CAPTCHAS 암호를 자동으로 해독하는 GreaseMonkey 스크립트를 작성하셨습니다. 데모는 여기서 확인하실 수 있습니다.

John Resig씨가 이 스크립트를 분석하고 설명한대로, 몇 가지 재밌는 방법이 사용되었습니다.
  1. HTML 5 Canvas의 getImageData API를 CAPTCHA 이미지에서 픽셀 데이터를 가져오기 위해 사용했습니다. Canvas는 이미지를 포함할 수 있고, 그로부터 픽셀 데이터를 추출할 수 있습니다.
  2. 스크립트는 순수 자바스크립트로 작성된 신경망 구현체를 포함하고 있습니다.
  3. Canvas를 사용해 이미지로부터 추출한 픽셀 데이터는 신경망으로 전달되어 정확한 문자로 분리하고, 이 문자들은 광학 문자 인식(OCR)에서 사용됩니다.
사실, Megaupload의 CAPTCHA는 매우 기본적입니다. 그렇지만, 자바스크립트로 그것을 크랙할 수 있다는 것은 여전히 인상적입니다. getImageData API는 좀 더 살펴봐야 할 것 같습니다.

from Captcha cracking in JavaScript with Canvas and neural nets
Posted by 행복한고니 트랙백 1 : 댓글 0
Wired의 Michael Calore 씨가 IE 팀이 참석한 "전문가에게 묻습니다" 웹 채팅에 대한 글을 작성하셨습니다.

주요 사항은 이렇습니다.
  • IE8은 CSS 2.1에 대한 완전한 전체 스펙 지원을 목표로 하고 있습니다.
  • IE8에서 가능한 CSS3는 쓰기 모드뿐입니다(세로 쓰기 지원을 위한 것입니다). IE는 이 기능을 5.x 버전때부터 지원해왔으며, 앞으로도 계속 지원할 것입니다.
  • IE8은 CSS의 border-radius을 지원하지 않습니다. 이 속성은 이미지를 사용하지 않고 경계선 모서리를 둥글게 만들 때 사용합니다. Microsoft의 Chris Wilson씨는 border-raduis가 "꽤 높은 순위로 배정되어있다"라고 했지만, IE8이 릴리스 된 후에나 진행될 듯 합니다.
  • IE9에 대한 공식적인 로드맵은 없습니다만, 네이티브 SVG 지원에 대한 가능성이 있습니다.
  • 새로운 자바스크립트 엔진도 나타날 것 같습니다. 사용자들은 이렇게 요구했습니다. "다른 브라우저들처럼 이제는 자바스크립트 컴파일에 대해서 고려해주세요. 사파리는 SquirrelFish를 도입했고 지난 주 SquirrelFish의 반응 V8에 육박하고 있죠. Mozilla는 ScreamingMonkey에 대한 작업을 시작했고요. IE9도 새 자바스크립트 엔진을 가지게 되나요?". 그에 대한 대답은 이렇습니다. "우리는 IE8과 그 이후 버전부터 자바스크립트 성능을 개선하는 일에 매우 집중하고 있습니다. 이 노력에 대한 뛰어난 앞으로의 결과물을 기대하고 있습니다."
SVG가 지원된다면 멋지겠네요. 제발 캔버스 지원이 되면 좋겠습니다. 부탁합니다, 크리스씨. 그 일을 돕기 위해 제가 Ajaxian에 뭐라고 쓰면 될까요? ;)

from What is coming up with IE8 and 9?
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

ShiftZoom 1.0 은 Christian Effenberger씨가 가장 최근에 작성한 도구로서, 웹 페이지상의 큰 이미지들을 확대/축소하거나 영역을 정해서 볼 수 있도록 합니다. 코드를 깔끔하게 보호하기 위해 겸손한(unobtrusive) 자바스크립트를 사용했습니다. 플러그인, 확장기능, 외부 리소스가 필요없습니다!

이것은 모든 주요 웹 브라우저에서 동작합니다 - Mozilla Firefox 1.5+, Opera 9+, IE 6+ 그리고 Safari. 또한 images & createElement & getElementById 가 지원되는 예전 브라우저도 지원합니다. 그 밖에는 자바스크립트가 사용되지 않아 방문자들은 멋진 것들이 있는지도 모르게 됩니다.

사용법은 간단합니다:

[code:xml]
<div><img onLoad="shiftzoom.add(this);" width="400" height="200" .../></div>

from ShiftZoom: Zoomify your oversize images
Posted by 행복한고니 트랙백 0 : 댓글 1

Ernest씨가 Canvas를 이용한 사진 콜라주 이후 다시 Canvas를 이용한 폴리곤 렌더링 성능을 다른 기술들과 비교해 테스트했습니다.

데모를 통해 직접 테스트를 실행해보시거나 저장된 테스트를 볼 수도 있습니다. 이 테스트는 IE에서는 VML, Firefox에서는 SVG, Safari와 리눅스용 Firefox에서는 이미지를 사용하는 Google Maps 인터페이스를 통해 이루어졌습니다.

사용자 삽입 이미지
우선 결과는 놀라웠습니다. Canvas 버전이 두드러지게 빨랐습니다. 하지만, 실제 서비스되는 Google Maps 버전은 사실 폴리곤만 그리는 것보다는 더 많은 처리를 합니다.

우리가 마크업만의 렌더링 시간을 분석한다면, SVG와 VML이 canvas와 canvas+excanvas.js보다 반드시 느린 것은 아닙니다. 성능의 차이는 마크업이 출력되기 전 폴리곤의 구현이 원인입니다.

그것이 실험을 가치없게 만들지는 않습니다. 여러분은 SVG나 VML보다 Canvas보다 빠른 것을 보일 수는 없습니다. 하지만 보다 직접적인 방식을 이용함으로써 현재의 API보다 더 나은 폴리곤 성능을 얻는 가능성을 보여줄 수 있습니다. 렌더링 엔진에 상관없이 사람들은 항상 더 빠른 폴리곤을 원합니다.

from Rendering performance in Canvas compared to SVG and VML
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
Emest Delgado 씨가 canvas로 재밌는 실험들을 했습니다. 그 중 하나가 사진 테이블같은 시스템을 작성하는 것이었습니다.

직접 데모를 실행해보실 수도 있습니다. 사진 몇 장으로 작업을 하고 내보낼 수도 있고, 외곽선을 추가하거나 회전, 모서리 변경 등의 작업을 바로바로 할 수 있습니다.

이에 대해 Emest씨가 자신이 한 일에 대해 설명해주셨습니다:
canvas로 이것을 구현하는 것은 두 가지 면에서 쉽지 않았습니다: 드래그&드롭과 성능이죠.이 문제들을 해결하려고 여러 방법을 사용했습니다. 결국 최상위 canvas 레이어에 활성화된 이미지를 올려서 그것만 렌더링하게 하는 멀티레이어 방법을 사용했습니다. 이는 한 아이템이 드래그될 때 매번 모든 이미지들을 다시 그리지 않고도 드래그&드롭이 실행될 수 있도록 합니다.
사용자 삽입 이미지

from Photo Collages with Canvas
TAG Canvas
Posted by 행복한고니 트랙백 0 : 댓글 0
John Resig씨가 Aza Raskin씨의 Algorithm Ink를 링크해주셨습니다. Cavans를 이용해 JavaScript로 만든 Context Free Art 프로젝트의 결과물입니다.

클릭만으로 즉시 그릴 수 있으며, 다른 작품을 볼 수도 있고, 여러분의 결과물을 저장할 수도 있습니다. 또한 그것을 다루는 코드도 편집할 수 있습니다:
rule scale{
	SPIKES{ s .03 }
}

rule SPIKES {
SPIKE {}
SPIKE { r 90 }
SPIKE { r 180 }
SPIKE { r 270 }
}

rule SPIKE {
LSPIKE {}
}
rule SPIKE {
LSPIKE { flip 90 }
}

rule LSPIKE {
SQUARE {}
LSPIKE { y 0.98 s 0.99 r 1}
}
rule LSPIKE 0.005 {
SPIKE { r 90 }
SPIKE { r -90 }
LSPIKE { y 0.98 s 0.99 r 1}
}

rule MOUSECLICK{
SPIKES{ s .025 }
}
from Algorithm Ink: Algorithm-driven Painting with Sharing and On-line Editing
Posted by 행복한고니 트랙백 0 : 댓글 0

JavaScript 프랙탈

2008.07.03 00:36 from [IT] Web Tech
사용자 삽입 이미지

딱히 설명 드릴게 없군요. ^^;; JavaScript 20 liners에 올라간 것 중 하나입니다:
[code:js]
//      chain( func )
//      make func chainable by making it return itsReturnValue||this
function chain( func )
{
        return function()
        {
                return func.apply( this, arguments )||this;
        }
}
 
 
//      initialize everything
onload = function()
{
        //      initialize the contexts and the fractal
        window.fx =
        {
            'barCtx':      document.getElementById('bar'      ).getContext('2d'),
            'fooCtx':      document.getElementById('foo'      ).getContext('2d'),
            'logicCtx':  document.getElementById('logic'  ).getContext('2d'),
            'renderCtx':        document.getElementById('render').getContext('2d'),
            'fractal':    [0,0,0,0,2,0,0,0,0],
            CanvasRenderingContext2D:   (window.CanvasRenderingContext2D?CanvasRenderingContext2D.prototype:document.getElementById('bar'  ).getContext('2d').__proto__)
        }
 
        //      set( what, to )
        //      sets a property of the CanvasRenderingContext2D, making such operation chainable
        window.fx.CanvasRenderingContext2D.set = function( what, to )
        {
                this[what] = to;
        }
 
        //      switchTo( context )
        //      return another CanvasRenderingContext2D, making such operation chainable
        window.fx.CanvasRenderingContext2D.switchTo = function( context )
        {
                return context;
        }
 
        //      chain a bunch of CanvasRenderingContext2D methods
        for( chainThat in {set:1,switchTo:1,clearRect:1,save:1,translate:1,rotate:1,drawImage:1,scale:1,restore:1,fillRect:1,moveTo:1,lineTo:1,beginPath:1,closePath:1,stroke:1,fill:1,arc:1} )
        {
                window.fx.CanvasRenderingContext2D[chainThat] = chain( window.fx.CanvasRenderingContext2D[chainThat] );
        }
 
        //      let's get the party started
        render();
}
 
 
//      render()
function render()
{
        //      the time is now
        var     now    = new Date().getTime();
 
        //      mutate the outer cells of the rug
        fx
                .fractal[ Math.floor(Math.random()*8+5)%9 ] = Math.floor( Math.random()*3 );
 
        //      softly kills the previous generations of the rug
        fx
                .fooCtx
                        .set( 'fillStyle', 'rgba(0,0,0,.1)' )
                        .fillRect( 0, 0, 192, 192 )
                        .set( 'fillStyle', '#653' )
                .switchTo( fx.barCtx )
                        .clearRect( 0, 0, 192, 192 );
 
        //      render 1st generation of the rug
        for( var i=-1; i&lt;9; fx.fooCtx.fillRect( (++i%3)*64+1,Math.floor(i/3)*64+1,(fx.fractal[i]&1)*62,(fx.fractal[i]&1)*62 ))
        {
        }
        //      render next generations of the rug
        for( var j=0; j++&lt;3; fx.fooCtx.drawImage( fx.barCtx.canvas,0,0 ) )
        {
                for( var i=-1; ++i&lt;9; fx.barCtx.drawImage( fx.fooCtx.canvas,0,0,192,192, (i%3)*64+1,Math.floor(i/3)*64+1, (fx.fractal[i]&2)*31, (fx.fractal[i]&2)*31 ) )
                {
                }
        }
 
        //      render rotozoomed rug
        fx
                .logicCtx
                        .set( 'globalCompositeOperation', 'source-over' )
                        .clearRect( 0, 0, 256, 192 )
                        .save()
                        .translate( 96, 96 )
                        .rotate( (now/5841%2)*Math.PI )
                        .scale( 1+2*((now/1274)%1), 1+2*((now/1274)%1) )
                        .drawImage( fx.fooCtx.canvas,0,0,192,192, -288,-288,576,576 )
                        .drawImage( fx.fooCtx.canvas,0,0,192,192, -96 ,-96 ,192,192 )
                        .drawImage( fx.fooCtx.canvas,0,0,192,192, -32 ,-32 ,64 ,64  )
                        .restore()
                        .set( 'globalCompositeOperation', 'copy' )
                //      prepare for hypnoglow
                .switchTo( fx.renderCtx )
                        .set( 'globalCompositeOperation', 'source-over' )
                        .clearRect( 0, 0, 192, 192 )
                        .drawImage( fx.logicCtx.canvas, 0, 0 )
                        .set( 'globalCompositeOperation', 'lighter' );
 
        //      hypnoglow
        for( var i=-1; ++i&lt;6; fx.renderCtx.drawImage( fx.logicCtx.drawImage( fx.logicCtx.canvas, 0, 0, 192>>i, 192>>i, 0, 0, 96>>i, 96>>i ).canvas, 0, 0, 96>>i,  96>>i, 0, 0, 192, 192 ) )
        {
        }
 
        //      here we go again
        setTimeout( render, 25 );
}

from Hypno trip down the fractal rug
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

또 다시 Jacob Seidelin 씨의 작품입니다. 아예 JavaScript 게임이라는 분야를 만들 작정으로 보일 정도네요. ^^;; 이번 작품은 수퍼 마리오 카트입니다. 당연히 JavaScript를 이용했습니다.

대부분의 렌더링은 canvas 엘리먼트를 이용했으며, FF2, FF3, Opera(9.27과 beta) 그리고 Safari 3.1.1에서 동작합니다. Safari에서는 카트 스프라이트에 사소한 결함이 있습니다만, 게임을 즐기는 데는 지장이 없을 것 같습니다. 또한, WebKit nightly 빌드를 이용하신다면, 최신판인지 확인해보시길 바랍니다. 최근의 몇몇 버전들은 canvas에 문제가 있었습니다. IE 지원은 고려하고 있지 않습니다. 죄송합니다.

(축소된) 코드의 용량은 11kb이지만 지난달의 마리오 게임과는 다르게 몇개의 외부 이미지 파일을 사용했습니다. 이것은 게임을 보다 부드럽게 즐기기 위한 테스트이지만, 어쨌든 파일 크기는 중요하지 않습니다. 제가 보기엔 꽤 괜찮습니다.

몇 가지의 렌더링 옵션을 설정할 수 있습니다. "Quality" 는 얼마나 많은 수직선이 렌더링 되느냐를 다루고, "Screen scale"은 화면의 크기를 다룹니다. 둘 다 시각적인 효과와 성능을 맞바꾸는 옵션들입니다.

달려보실래요?

from JavaScript Super Mario Kart on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2
사용자 삽입 이미지

John Resig 씨가 7달간 작업해오던 Processing의 포팅을 완료했습니다. Processing은 "전자 예술(electroinc arts)과 시각 디자인 커뮤니티를 위한 프로그래밍 언어와 통합 개발 환경" 이며, 시각적인 요소로 컴퓨터 프로그래밍의 기초를 가르치고 전자 스케치북의 기반을 제공하기 위해 만들어졌습니다. Processing의 확실한 목표중 하나는 시각적 피드백의 즉각적인 만족감을 통해 프로그래밍을 시작하는 비개발자들을 위한 도구로서의 역할입니다."

Processing.js는 그 작업을 브라우저에서 하도록 하려고 Canvas와 분명한 JavaScript를 사용했습니다.

John씨가 이 퍼즐의 두 조각에 대해 말했습니다:

The Processing Language

프로젝트의 첫번째 부분은 Processing 언어로 쓰여진 코드를 JavaScript로 동적 변환하기 위한 파서를 작성하는 것이었습니다. 파서에는 코드를 주물럭거려 브라우저가 이해할 수 있는 형태로 내놓는 상당히 많은 양의 멋진 정규표현식이 포함되어있습니다.

Processing 언어에 흥미로운 면이 매우 많이 있고, 그들 중 많은 부분이 기본 데모에서 다루어졌습니다.

아래가 다루어진 언어 기능의 몇가지 입니다:

  • 타입과 타입 캐스팅 - 타입 정보는 일반적으로 무시되지만, 변수 선언과 캐스팅(자주 다루는)에서는 중요해집니다.
  • 클래스 - 완벽한 클래스 체계가 지원됩니다(인스턴스화 가능, etc. just fine).
  • 메소드 오버로딩과 복수 생성자 - 클래스 내부에서 복수의 메소드(혹은 생성자)를 정의할 수 있습니다 - 인자 길이에 기반해 적합한 메소드를 호출합니다.
  • 상속 - 고전적인 형태의 상속도 지원합니다.

주의: 도저히 지원할 수 없었던 Processing의 기능도 한가지 있습니다: 변수명 오버로딩. Processing에서는 변수와 함수가 같은 이름을 사용할 수 있습니다(예. float size = 0; float size(){}). 이를 지원하려면 심각한 부하가 있을 수 밖에 없고, 그렇게 시작하는 것이 일반적으로 좋은 습관은 아닙니다.

The Processing API

프로젝트의 두번째 부분은 풀 2d 프로세싱 API 였습니다. 여기에는 모든 종류의 메소드들이 포함되었습니다:

  • Shapes drawing
  • Canvas manipulation
  • Pixel utilities
  • Image drawing
  • Math functions
  • Keyboard and mouse access
  • Objects (point, arrays, random number generators)
  • Color manipulation
  • Font selection and text drawing
  • Buffers

from Processing.js: Port of the Processing language to JavaScript and Canvas on Ajaxian
Posted by 행복한고니 트랙백 1 : 댓글 0
PNG로 압축된 Prototype 코드 이미지
위 이미지는 124kb의 Prototype 라이브러리를 30kb의 8bit PNG 이미지로 만든 것입니다.

Jacob Seidelin씨가 이미지로부터 JavaScript 코드를 읽을 수 있는 스크립트를 작성했습니다. 이 작업에, 그는 canvas의 getImageData() 메소드를 사용했다고 합니다.

상세한 진행과정입니다:
첫번째 단계는 이 작업을 위한 최적의 이미지 포맷을 찾는 것이었습니다. 최적이라 함은 손실이 없으면서도 압축률이 좋은 것을 의미합니다. 웹 환경이므로, 우리의 선택지가 많지 않았고, JPEG는 손실이 있었기 때문에 우리는 GIF나 PNG를 선택해야 했습니다.
PNG에는 24bit와 8bit의 두가지 옵션이 있습니다. 24bit RGB 색상을 사용하면, 픽셀당 3byte의 데이터를 저장할 수 있고, 8bit의 인덱스 색상을 사용하면 픽셀당 1byte를 저장할 수 있습니다.
Photoshop에서의 간단한 테스트를 통해 우리는 100x100 크기의 24bit 색상이 있는 무작위 노이즈 이미지는 20KB 정도로 압축이 되고, 300x100 크기의 흑백 무작위 노이즈 이미지는 5KB로 압축된다는 것을 알게 되었습니다. 보통의 5bit GIF는 8bit PNG보다 조금 무거워서 우리는 PNG를 선택하게 되었습니다.

이제 JavaScript를 PNG 파일의 색상 데이터로 변환해야 합니다. 목적을 달성하기 위해 저는 JavaScript 파일을 읽어들여, PNG 파일을 만들고 각각의 픽셀이 0-255의 값을 가져가 스크립트의 각 문자에 대응하도록 했습니다.

여기서 문제가 발생했는데, 이미지가 트루 칼라 이미지로 만들어졌고 우리는 그것을 8bit 인덱스 이미지로 변환해야 했지만 PHP는 정확하게 변환하지 못했습니다. 아마도 PHP/GD를 이용해 팔레트 사용 이미지를 만들 수 있는 방법이 있을 것 같지만, 아직까지 보지는 못했습니다. 현재의 해결책은 Photoshop 같은 프로그램으로 이미지를 만들어 8bit로 변환하는 것입니다.

이제 우리는 훌륭하고 PNG 파일 형태로 압축된 JavaScript를 가지게 되었습니다. 이번엔 클라이언트로 다시 이들을 내보내야 합니다. Canvas 엘리먼트에서, drawImage()를 사용해서 그림을 그린 후, getImageData()를 사용해서 모든 픽셀 데이터를 읽을 수 있습니다. 이 데이터들은 각 픽셀이 4가지 요소(RGBA)를 가지는 큰 배열 형태의 값입니다. 우리가 4가지 값씩 읽어들여, eval()로 이들을 하나로 묶어 집어넣습니다. 그럼 완료군요.
그리고 읽기 함수는 여기에 있습니다.

주의: 이 방법은 단순히 재미를 위해서 시도한 것이므로, 실제로 사용해도 된다는 것은 아닙니다. 그를 염두에 두고, 마리오 게임에서 동작되는 것을 보십시오.

from Compression using Canvas and PNG on Ajaxian
TAG Canvas
Posted by 행복한고니 트랙백 0 : 댓글 2
사용자 삽입 이미지

위의 사진은 여러분에게 청황(靑黃)색맹이 이미지를 보는 방법을 보여줍니다. Michael Deal씨가 다음을 포함한 가능한 가장 공통적인 색상 함수의 대부분을 지원하는 Color Matrix Library를 만들었습니다:

Hue, Saturation, Brightness, Contrast, Exposure, Temperature, Tint, Channels, Blindness, Colorize, Threshold, 그리고 Invert

Michael씨는 그 다음에 색맹에게 우리의 사이트가 어떻게 보이는지 시각적으로 보여주기 위해 Color Matrix를 사용해서 canvas 라이브러리를 만들었습니다.

의학적인 처리분야라 번역하기가 힘들어 생략했습니다. (__):

from Using canvas to test your site with colorblind folks on Ajaxian
Posted by 행복한고니 트랙백 1 : 댓글 0
from Busy.js: Loading indicators with Canvas on Ajaxian

사용자 삽입 이미지

나날이 Canvas에 대한 예제들이 늘어갑니다. 아마도 MS가 Canvas 진영에 참가하는 일이 생긴다면, 엄청나게 불붙을 것 같다고 추측해봅니다. VML을 조금만 다듬으면 금새 Canvas 가 될 것 같은데 말입니다.
_______________
Christian Effenberger 씨가 조금 더 캔버스다운 물건을 들고 돌아왔습니다. Busy.js를 릴리스했지요. Build.js는웹페이지의 HTML 엘리먼트에 로딩 이미지를 추가/제거할 수 있는 라이브러리입니다(오버레이 색상 & 투명효과 포함). 여러분의 코드를 깔끔하게 유지하기 위해 겸손한 JavaScript를 사용했습니다. 플러그인이나 확장기능도 필요없고 다른 외부 리소스도 필요없습니다.

사용법
[code:js]
var ctrl = getBusyOverlay(document.getElementById('box'));
ctrl.remove();

기능

  • Canvas와 VML 지원 (동일하게 보임)
  • 쉽고 빠른 구현 (Ajax 프로그램에 완전 적합)
  • gif 애니메이션 제작을 위한 이미지 에디터 사용에 시간을 들일 필요가 없음
  • 개별 스타일을 위한 다양한 파라미터로 매우 유연함
  • 부모 엘리먼트 스타일에 관계없이 적절한 로딩 이미지 제공
  • 다음 블럭 레벨 부모 엘리먼트를 찾기 위해 DOM 트리 상위로 이동
  • 부모 객체를 시각적(오버레이), 기술적(마우스 이벤트)으로 정지
  • 심지어 (moz/webkit)-border-radius이 활성화되어있는 HTML 엘리먼트와도 동작
  • 구식 브라우저에서는, 단순한 사각형 모양 표시
  • HTML 엘리먼트에 로딩 이미지를 추가하거나 삭제하는게 죽여주게 쉬움

Posted by 행복한고니 트랙백 1 : 댓글 0
from Canvas2Image: Save out your canvas data to images on Ajaxian

테스트 이미지

EnZine을 쓰고 이미지로 변환한 결과물


Jacob Seidelin씨의 또 다른 작업입니다. 그는 <canvas> 데이터를 이미지로 내보낼 수 있는 라이브러리인 Canvas2Image를 만들었습니다. 즉, 이런 식으로 canvas 이미지를 만들 수 있다는 얘기입니다:
var strDataURI = oCanvas.toDataURL();
// returns "https://t1.daumcdn.net/cfile/tistory/2674B34156E693F70A"

전체 API를 사용한 예제입니다:
/*
 * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
 */

var oCanvas = document.getElementById("thecanvas");

Canvas2Image.saveAsPNG(oCanvas);  // PNG 이미지 저장 대화창이 나타납니다.

Canvas2Image.saveAsJPEG(oCanvas); // JPEG 이미지 저장 대화창이 나타납니다.
                                  // Firefox만 가능.

Canvas2Image.saveAsBMP(oCanvas);  // BMP 이미지 저장 대화창이 나타납니다.


// PNG로 변환된 <img> 엘리먼트 반환
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);  

// JPEG로 변환된 <img> 엘리먼트 반환(Firefox만 가능)
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true);
                                                      
// BMP로 변환된 <img> 엘리먼트 반환
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true);


// 모든 함수는 너비와 높이를 인자로 줄 수 있습니다
// 모든 이미지는 크기에 맞게 축소/확대 됩니다:

// 100x100 크기의 PNG 이미지 저장
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

Posted by 행복한고니 트랙백 0 : 댓글 0
from Super Mario; 14KB of JavaScript on Ajaxian

사용자 삽입 이미지
Jacob Seidelin씨가 재밌는 것을 만들어냈습니다. 14KB의 코드로 닌텐도의 히트작인 수퍼 마리오 게임을 만들었네요.

한 개의 JavaScript 파일에 작게 유지되는 실험을 하나 했습니다. 어떠한 이미지를 비롯 어떠한 외부 파일도 사용되지 않았으며, 모든 것은 canvas 엘리먼트와 구식 방법인 div 생성/배열(IE에서)으로만 렌더링됩니다. 스프라이트는 인코딩된 문자열에 저장되며 각 스프라이트 당 4색상만 허용하는 포맷을 이용합니다. 하지만 각 스프라이트별로 40~60 바이트 정도의 용량은 차지합니다.

우리는 base64로 인코딩된 (URI 형태의) MIDI 음악도 있습니다. IE에서는 음악이 없고, 브라우저마다 조금씩의 사소한 문제가 있는 것 같지만, 작업 예정에 있습니다.

Posted by 행복한고니 트랙백 0 : 댓글 0