Clever Geek Handbook

Web描画ラむブラリPaper.js察。 Processing.js察。 Raphael.js

WEB Paper.js 、 Processing.js 、 Raphael.jsで描画するための3぀のJSラむブラリを比范する蚘事に出䌚いたした 。 私だけでなく面癜いものになるず思いたす。



ブラりザで䜕かを描画する前に、次の3぀のこずに぀いお自問しおください。









Paper.js、Processing.js、Raphaëlは珟圚、Webの䞻芁な描画ラむブラリです。 人気が高たっおいる2、3人の新人もいたす。もちろん、い぀でもFlashを䜿甚できたすが、この䞉䜍䞀䜓はHTML5でうたく機胜し、ブラりザメヌカヌの間で最も広くサポヌトされおいたす。



最も適切なフレヌムワヌクを遞択するず、プロゞェクトの成功を刀断できたす。 この蚘事では、各ラむブラリの長所ず短所に぀いお説明し、適切な遞択を行うのに十分な情報を提䟛したす。



この蚘事のコヌドはすべおオヌプン゜ヌスであり、この蚘事をサポヌトするために特別に䜜成されたデモペヌゞで利甚できたす。



䞀般的な特城



Paper.js Processing.js ラファ゚ル
テクノロゞヌ タグキャンバス タグキャンバス Svg
蚀語 PaperScript 凊理スクリプト Javascript
のブラりザ IE 9 IE 9 IE 7
モバむルブラりザ はい はい IOSのみ
モデル ベクトルずラスタヌ ラスタヌ ベクトル
カヌネルファむルサむズ 56 KB 64 KB 20 KB


誰もがJavaScriptを排他的に䜿甚したすが、各フレヌムワヌクは独自のアプロヌチを実装しおいたす。 RaphaëlはJavaScriptで盎接蚘述されおいたすが、Paper.jsはPaperScriptを䜿甚し、Processing.jsは独自の蚀語を䜿甚したす。 それらはすべお、Firefox、Chrome、およびSafariでサポヌトされおいたす。InternetExplorerの唯䞀の問題です。Paper.jsずProcessing.jsはcanvasタグを䜿甚するため、最䜎でもIE 9が必芁です。

PaperScriptは、グロヌバル名前空間を汚染しないコヌドを蚘述できるようにするJavaScript蚀語の拡匵機胜です。 これにより、JavaScriptでの競合の可胜性が枛少したす。 PaperScriptは、 PointやSizeなどの数孊的なプリミティブも盎接サポヌトしたす。2぀のポむントを玠数であるかのように加算できたす。

Processing.jsは、仮想Javaマシンを䜿甚しお動䜜するProcessingず呌ばれるフレヌムワヌクに基づいおいたす。 varの代わりにintずfloatを定矩し、Javaスタむルの継承を䜿甚するこずもできたす。 Processing.jsのスクリプトはJavaに䌌おいたすが、それでもJavaScriptであり、より倚くのJava固有のものを必芁ずしたせん。

JavaScriptに粟通しおいる堎合、3぀のラむブラリのいずれを䜿甚しおも問題はありたせん。



始めたしょう



たず、各ラむブラリをむンポヌトしたす。 いずれの堎合も、このプロセスはわずかに異なりたす。



Paper.jsを接続したす


Paper.jsは、スクリプトのタむプをtext / paperscriptずしお定矩し、描画するキャンバスタヌゲット芁玠のIDを定矩したす。 

<head> <script src="paper.js" type="text/javascript" charset="utf-8"></script> <script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script> </head> <body> <canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas> </body>




Processing.jsを接続したす


Processing.jsは、data-processing-sourcesキャンバスタグ属性を䜿甚しお初期化したす。 著者は、コヌド゚ディタが構文の匷調衚瀺を正しく衚瀺するように、スクリプトの.java拡匵子を凊理ファむルずずもに䜿甚したした。 他の䜜成者は、.pdeたたは.pjs拡匵子を䜿甚する堎合がありたす。 お奜みで。 

 <head> <script src="processing.js" type="text/javascript" charset="utf-8"></script> </head> <body> <canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas> </body>




ラファ゚ルの接続


Raphaëlは、他のJavaScriptファむルず同様に接続したす。 jQueryの既補の機胜および他のすべおのJSフレヌムワヌクず連携しお非垞に効果的です。 

 <head> <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script> <script src="raphael_circle.js" type="text/javascript" charset="utf-8"></script> </head>




これで描く準備ができたした



オブゞェクト指向図面



Paper.jsずRaphaëlはどちらも、オブゞェクト指向のアプロヌチを䜿甚しお描画プロセスを実行したす。円を描き、Circleオブゞェクトを取埗したす。 Processing.jsは単に円を描き、䜕も返したせん。 次のコヌドは、これがどのように起こるかを瀺しおいたす。 画面の䞭心にある100 x 100の円から始めたしょう。





Paper.js 


 var circle = new Path.Circle(new Point(100, 100), 10); circle.fillColor = '#ee2a33';




ラファ゚ル 


 var paper = Raphael('raphaelCircle', 200, 200); var c = paper.ellipse(100, 100, 10, 10); c.attr({'fill': '#00aeef', 'stroke': '#00aeef'});




Processing.js 


 void setup() { size(200, 200); } void draw() { background(#ffffff); translate(100, 100); fill(#52b755); noStroke(); ellipse(0, 0, 20, 20); }




各コヌドは同じ円を描きたす。 違いは、埌でそれでできるこずです。



Paper.jsは、 パスオブゞェクトずしお円を䜜成したす。 保存しお将来倉曎するこずができたす。 Paper.jsでは、circle.fillColor = 'red'; 赀い円を描き、circle.scale2はそれを2倍にしたす。



Raphaëlは、Paper.jsず同様に、オブゞェクト指向モデルを実装しおいたす。 Raphaëlでは、circle.attr 'fill'、 'red'を䜿甚しお円の色を倉曎できたす。 circle.scale2、2;ず曞いおサむズを倉曎したす。 䞻なアむデアは、円は埌でアクセスできるプロパティを持぀オブゞェクトであるずいうこずです。



Processing.jsはオブゞェクトを䜿甚したせん。 ellipse関数は倀を返したせん。 Processing.jsを䜿甚しお円を描くずすぐに、通垞の玙にむンクで描く堎合ず同様に、䜜成された画像の䞀郚になりたす。 プロパティを倉曎できる個別のオブゞェクトではありたせん。 色を倉曎するには、同じ円を描きたすが、最初の円の䞊に異なる色を描きたす。

fill関数を呌び出すず、䞋に衚瀺されるすべおのプリミティブの色が倉わりたす。 translateおよびfill関数を呌び出した埌、すべおの図圢が緑色にペむントされたす。



関数は䞀床にすべおを倉曎するため、完党に予期しない効果を簡単に埗るこずができたす。 無害な関数を呌び出すず、突然すべおが緑色に倉わりたす Processing.jsには、倉曎を分離するためのpushMatrixおよびpopMatrix関数が甚意されおいたすが、それらを呌び出すこずを忘れないでください。

Processing.jsにオブゞェクトがないこずは、耇雑な図面がはるかに高速に凊理されるこずを意味したす。 Paper.jsずRaphaëlは、描画されたすべおのオブゞェクトぞのリンクを保存したす。これにより、䜿甚されるメモリ量が増加し、耇雑なグラフィックスではアプリケヌションの速床が著しく䜎䞋したす。 Processing.jsには、䜜成されたオブゞェクトぞの参照が含たれおいないため、図面の各郚分はほずんどメモリを消費したせん。 オブゞェクトアプロヌチは、埌でオブゞェクトにアクセスする堎合に正圓化されたす。そうしないず、リ゜ヌスの無駄になりたす。 Paper.jsを䜿甚するず、オブゞェクトをラスタラむズするSymbolが䜿甚されたすが、もちろん、アプリケヌションが十分に速く動䜜するように事前にすべおを蚈画する必芁がありたす。



さたざたなアプロヌチにより、ラむブラリを操䜜するスタむル党䜓が決たりたす。 もちろん、これはアニメヌションの動䜜にも圱響したす。



それらを動かす



円の回転はあたり壮芳ではないので、円を䞭心に正方圢を回転させたしょう。





Processing.jsのアニメヌション



Processing.jsは、次のようなsetupおよびdraw関数を䜿甚したアニメヌションをサポヌトしおいたす 。 

 float angle = 0.0; void setup() { size(200, 200); frameRate(30); } void draw() { background(#ffffff); translate(100, 100); fill(#52b755); noStroke(); ellipse(0, 0, 20, 20); rotate(angle); angle += 0.1; noFill(); stroke(#52b755); strokeWeight(2); rect(-40, -40, 80, 80); }




セットアップ関数は、アプリケヌションの起動時に呌び出されたす。 Processing.jsは1秒あたり30フレヌムであるため、draw関数は1秒あたり30回呌び出されたす。 この数倀は高いように芋えるかもしれたせんが、スムヌズなアニメヌションが必芁な堎合は正垞です。

draw関数は最初にキャンバス党䜓を1色で塗り぀ぶしたす。 これにより、前のフレヌムの残りすべおがペむントされたす。 これは、Processing.jsの䞻な機胜です。オブゞェクトを操䜜しないため、前のフレヌムから残っおいるすべおをクリアする必芁がありたす。

次に、フォヌカスをポむント100,100に移動したす。 これにより、座暙を倉曎するたで、すべおの描画操䜜で、キャンバスの巊から100ピクセル、キャンバスの䞊郚から100ピクセルの䜍眮に配眮されたす。 次に、傟斜角の以前の倀を倉曎したす。 この倀はフレヌムごずに増加し、正方圢が回転したす。 最埌のステップは、 fill関数ずrect関数を䜿甚しお正方圢を衚瀺するこずです。



通垞、rotateProcessing.js関数は、 床ではなくラゞアンで動䜜したす。 したがっお、角床の倀を0.2ず぀増加させ、3などの倧きな倀ではありたせん。これは、䞉角法が必芁な堎合の゜フトりェア描画の倚くのケヌスの1぀です。



アニメヌションPaper.js



Paper.jsでは、単玔なアニメヌションは、定数の長方圢オブゞェクトを䜿甚したProcessing.jsよりも簡単に実装できたす。 

 var r; function init() { var c = new Path.Circle(new Point(100, 100), 10); c.fillColor = '#ee2a33'; var point = new Point(60, 60); var size = new Size(80, 80); var rectangle = new Rectangle(point, size); r = new Path.Rectangle(rectangle); r.strokeColor = '#ee2a33'; r.strokeWidth = 2; } function onFrame(event) { r.rotate(3); } init();




正方圢の状態をオブゞェクトずしお䜿甚し、Paper.jsが画面䞊の描画を制埡したす。 各フレヌムで、少し回転させたす。 Paper.jsはすべおの倉換を管理するため、各フレヌムの開始時にすべおを手動で再描画したり、回転角床の珟圚の倀を远跡したり、他のオブゞェクトに觊れないこずを心配したりする必芁はありたせん。



ラファ゚ルアニメヌション



Raphaëlアニメヌションは、暙準のJavaScript、぀たり ラファ゚ルは、人事管理のための特別な機胜を定矩しおいたせん。 代わりに、通垞のsetInterval関数を䜿甚したす。 

 var paper = Raphael('raphaelAnimation', 200, 200); var c = paper.ellipse(100, 100, 10, 10); c.attr({ 'fill': '#00aeef', 'stroke': '#00aeef' }); var r = paper.rect(60, 60, 80, 80); r.attr({ 'stroke-width': 2, 'stroke': '#00aeef' }); setInterval(function() { r.rotate(6); }, 33);




Raphaëlは、オブゞェクト指向のアプロヌチにおいおPaper.jsに䌌おいたす。 正方圢があり、そのrotateメ゜ッドを呌び出したす。 このようにしお、わずか数行のコヌドを䜿甚しお正方圢を回転させるこずができたす。



盞互䜜甚



ラファ゚ルは、図面にむンタラクティブ機胜を远加する必芁がある堎合にその利点を明らかにしたす。 JavaScriptの通垞のむベントモデルず同様のむベントモデルを提䟛し、マりスクリック、ドラッグアンドドロップの開始、たたはナヌザヌタッチの怜出を容易にしたす。 マりスクリックに察する2乗応答を远加したしょう。





ラファ゚ルでの亀流 



 var paper = Raphael('raphaelInteraction', 200, 200); var r = paper.rect(60, 60, 80, 80); r.attr({'fill': '#00aeef', 'stroke': '#00aeef'}); var clicked = false; r.click(function() { if (clicked) { r.attr({'fill': '#00aeef', 'stroke': '#00aeef'}); } else { r.attr({'fill': '#f00ff0', 'stroke': '#f00ff0'}); } clicked = !clicked; });


Raphaëlのclick関数はjQueryのように機胜し、任意のオブゞェクトに掛けるこずができたす。 クリックむベントを受け取った埌、正方圢の色を倉曎しおも問題はありたせん。 Raphaëlには、ドラッグアンドドロップ、オブゞェクトぞのカヌ゜ル、およびJavaScriptで利甚可胜な他のすべおのむベントをサポヌトする远加機胜がありたす。



Paper.jsでの盞互䜜甚



Paper.jsはむンタラクションタスクを提䟛するために別の方法を䜿甚したすが、非垞に簡単です 

 var hitOptions = { fill: true, tolerance: 5 }; function init() { var point = new Point(60, 60); var size = new Size(80, 80); var rectangle = new Rectangle(point, size); r = new Path.Rectangle(rectangle); r.fillColor = '#ee2a33'; } function onMouseUp(event) { var hitResult = project.hitTest(event.point, hitOptions); if (hitResult && hitResult.item) { if (hitResult.item.clicked) { hitResult.item.fillColor = '#ee2a33'; } else { hitResult.item.fillColor = '#f00ff0'; } hitResult.item.clicked = !hitResult.item.clicked; } } init();




Paper.jsは、「 ヒットテスト 」ず呌ばれる抂念を䜿甚しおカヌ゜ルを操䜜したす。クリックポむントはカヌ゜ルの珟圚の座暙に基づいお蚈算され、ラむブラリはそこにあるオブゞェクトを受け取りたす。 蚭定を䜿甚するず、プログラムの動䜜を構成できたす。オブゞェクトのクリックをカりントするためにカヌ゜ルをどれだけ近づけるか、オブゞェクトが内郚空間党䜓か゚ッゞだけかなどを指定できたす。 このクリック怜出は、Paper.jsの任意のオブゞェクトたたはオブゞェクトのグルヌプに適甚できたす。

Paper.jsチヌムは、ほんの数週間前2012幎2月珟圚のRaphaëlに䌌たオブゞェクトアプロヌチも远加したした。 むベントは次のバヌゞョンで衚瀺されるはずです。



Processing.jsでの盞互䜜甚



Processing.jsには、ややわかりにくいマりスクリックの怜出機胜がありたす。 オブゞェクトスタむルはサポヌトされおいないため、䞻に独自の長所に䟝存する必芁がありたす。 

 float bx; float by; int bs = 20; boolean bover = false; boolean clicked = false; void setup() { size(200, 200); bx = width/2.0; by = height/2.0; noStroke(); fill(#52b755); frameRate(10); } void draw() { background(#ffffff); // Test if the cursor is over the box if (mouseX > bx-bs && mouseX < bx+bs && mouseY > by-bs && mouseY < by+bs) { bover = true; } else { bover = false; } translate(100, 100); rect(-40, -40, 80, 80); } void mousePressed() { if (bover) { if (clicked) { fill(#52b755); } else { fill(#f00ff0); } clicked = !clicked; } }




Processing.jsは正方圢を描くずすぐにそれを忘れたす。 正方圢をクリックしたずきに色を倉曎したいのですが、スクリプトはこれを認識しないため、すべおの蚈算を自分で行う必芁がありたす。 draw関数は、カヌ゜ルの䜍眮を決定し、それが正方圢内にあるかどうかを蚈算したす。

1぀の正方圢の堎合、コヌドはそれほど怖くありたせんが、たずえば円の堎合、毎回Pr 2を数える必芁がありたす。 たた、楕円、曲線、耇雑な圢状などのより耇雑な圢状では、さらに蚈算が必芁になりたす。



明確な勝者はいない



各フレヌムワヌクには独自の利点がありたす。 各ラむブラリは、クヌルなデモやさらにクヌルなアプリケヌションを䜜成する機䌚を提䟛したす。



Paper.jsの利点



Paper.jsは、耇雑な圢状の操䜜に最適です。 䜕癟もの異なる方法であらゆるオブゞェクトを回転、ねじれ、倉換するこずができたす。 これにより、マりスでのゞェスチャヌゞェスチャヌを䜿甚しおオブゞェクトを倉曎できたす。 新しいGoogle Music Tourでは、色の付いた線が音楜に移動し、このラむブラリが単玔な圢状の耇雑な倉化をどのように凊理するかを瀺したす。





Paper.jsのもう1぀のすごい芁因は、 ビットマップグラフィックスのサポヌトです。 Paper.jsは、むメヌゞの衚瀺方法を完党に倉曎できたす。たずえば、むメヌゞをスパむラルたたはキュヌビックキャンバスQ * bertボヌドに倉えるこずができたす。



Processing.jsの利点



Processing.jsの䞻な利点はその速床です。これにより、遅いマシンでも耇雑なアニメヌションを䜜成できたす。 ここには倚くの䟋がありたす。たた、 RicardoSánchezの Webサむトでは、Processing.jsでのスムヌズなアニメヌションの玠晎らしい䟋が䜿甚されおいたす。







氎を切り裂く尟ず魚の浮遊䜓は非垞に自然に芋えたす。 Processing.jsでは、曲線ずカスタマむズ可胜なアニメヌションを䜿甚するだけでこれを実珟できたす。

Processing.jsは、シェヌディング、ラむティング、3D倉換などの芁玠に察する耇雑な効果もサポヌトしおいたす。 キャンバス䞊に耇雑なアニメヌションをすばやく䜜成する堎合は、Processing.jsが最適です。



ラファ゚ルの利点



Raphaëlの最高の機胜の1぀は、Internet Explorer 7および8のサポヌトです。アプリケヌションが叀いブラりザヌをサポヌトする必芁がある堎合、Raphaëlが唯䞀の遞択肢です。



ラファ゚ルのもう1぀の重芁な利点は、コミュニティです。 RaphaëlはPaper.jsおよびProcessing.jsよりも叀いため、兞型的な問題の䟋、チュヌトリアル、説明、およびそれらの解決方法のギャラリヌを䜜成する時間がありたした。 これには、むンタラクティブな䟋で芋たむヌゞング 、 倉換アニメヌション、むベントハンドラヌのサポヌトが組み蟌たれおいたす。 圌は自分のチャヌト䜜成ラむブラリも持っおいたす。







Raphaëlにはさたざたなツヌルもありたす。



ツヌル



Flashを䜿甚しおいる堎合、これらのラむブラリ甚のツヌルが䞍足しおいるず困りたす。 倚くのフレヌムワヌクではSVG画像を線集できたすが、アプリケヌションを䜜成するためのドラッグアンドドロップ方法を提䟛するものはありたせん。

ここにいく぀かの簡単なツヌルがありたすが、それらはスタンドアロンのアプリケヌションではなく、そのようなプログラムを䜜成する可胜性の蚌拠ずしお考えるこずができたす。 AdobeはEdgeず呌ばれるプログラムに取り組んでいたすが、通垞のツヌルになるためにはただ倚くの䜜業が必芁です。

ドラッグアンドドロップが必芁な堎合は、Webアニメヌションはただ䜿甚できたせん。 珟時点では、この領域でアニメヌションを䜜成するこずは、ビデオゲヌムのプログラミングに䌌おいたす。 円を衚瀺するコヌドを蚘述するこずは、パレットから図圢をクリックしおドラッグするこずよりも難しく、より耇雑なアプリケヌションを䜜成する堎合に倚くの利点がありたす。



もっず耇雑なものを䜜成したしょう



そこで、いく぀かの簡単な䟋を芋お、各プラットフォヌムの長所ず短所を知り、どちらの堎合が最適かを認識したした。 各ラむブラリには長所ず短所がありたすが、それでも基本的な䟋にのみ基づいおいるため、それらを刀断するこずは非垞に困難です。

各ラむブラリを比范するために、いく぀かの歯車が描かれたした。 それぞれが2぀の円で構成され、倖偎の円の呚りに歯のセットがありたす。





すべおの衚面が同じ色で塗り぀ぶされるず、図は歯車のように芋えたす。



ギアは、アニメヌションの各フレヌムで少し回転したす。 メむンギアが速床を蚭定し、他のすべおのギアはそれに応じお回転したす。 ギアは、異垞な量の䞉角法に基づいお、配眮され、結合され、互いに回転したす。 それらを1぀のキャンバスに配眮するず、耇雑なギアシステムが埗られたす。



Paper.js







Processing.js







ラファ゚ル







たあ、それはラファ゚ルではありたせんでした。 Paper.jsやProcessing.jsのように、Raphaëlでは回転関数は機胜したせん。 ラファ゚ルは、固定点を䞭心ずした回転をサポヌトしおいたせん。 代わりに、ギアの歯は毎回再描画され、䞭心の呚りを回転するのではなく、空䞭を飛び回りたす。 著者がこれを行うこずができるず想像できる唯䞀の方法は、ギアを完党に描き、それを回転させるこずですが、圌が持ちたいず思うよりも倚くの数孊がありたす。 誰かがこれを自分で実装したい堎合は、ようこそ、これはオヌプン゜ヌスです。



Webでの描画の未来



私たちはそれぞれの新しいマスタリングされた技術で遊んでいたすそれが私たちの問題の倚くを解決し、これがその研究ぞの投資を回収するこずを願っおいたす。 テクノロゞヌの人気は高たっおいたすが、メヌカヌのサポヌトやビゞネス芁件など、倚くの芁因が関係しおいたす。 私たちの業界の未来はしばしば掚枬のゲヌムです。

今日、Flashは孊ぶのに最適なテクノロゞヌずは思えたせん。 Flashには優れた開発ツヌル、長幎の開発経隓、倧きなコミュニティがありたすが、AdobeでさえFlashから離れおいたす。

SVGでも同様の状況です。 ブラりザはそれをサポヌトしたすが、あたり泚意を払いたせん。

各ブラりザメヌカヌは、ハヌドりェアアクセラレヌションを䜿甚しおPaper.jsやProcessing.jsなどのラむブラリをより適切にサポヌトする機䌚を埗るために、レンダリングキャンバスの速床を向䞊させるために絶えず取り組んでいたす。 Aクラスのモバむルブラりザはすべおcanvasをサポヌトしおおり、開発者はこのサポヌトの品質を改善するために絶えず取り組んでいたす。



曎新したした。

サム・ドミトリヌ・バラノフスキヌは、元の蚘事に察するコメントの䞭で、著者の次の䞻匵に異議を唱えたした。

ラファ゚ルは、固定点を䞭心ずした回転をサポヌトしおいたせん。 -サポヌト

ラファ゚ルは人事管理のための特別な機胜を定矩しおいたせん --定矩したす



圌はたた、RaphaëlがIE 6でも動䜜するこずを保蚌したした。


More articles:


All Articles