Source
Paper.js
Source
Paper.js ? About 超絶サンプル満載のベクター画像描画JavaScriptフレームワーク「Paper.js」。HTML5で描画するタイプのフレームワークです。 ベジエ曲線をマウス位置に応じてリアルタイムにぐにゃぐにゃ動かすサンプルやベクターグラフィックが動きまわるサンプル等、こうしたライブラリは将来使う予定がないという方もWEBに関わるなら絶対に見ておいたほうがよいと思います。 とにかくExamplesのページをChromeなどで開いてみてみましょう。 色々と可能性を感じてしまうサンプルでした。もちろん作る人のスキルやセンスも問われると思いますが、活用することで比較的楽につくることができそう。 関連エントリ ブラウザ上で物凄いアートが作れるHTML5ベースの描画ツール「The Endless Mural」 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQue
paper.jsでインタラクティブなグラフを描こう - Preferred Networks Research & Development
canvasベースのベクターグラフィクス描画用jsライブラリとして、既に各所で紹介されているpaper.jsですが、これを、ウェブに載せるグラフの描画に使ってみましょう、というお話です。 paper.jsではパスをつくって描画をしつつ、パスに対するhit testも可能ですし、アニメーションも実装することができます。プロジェクトサイトではオシャレなサンプルが多数掲載されていて、paper.jsで何ができそうなのかを簡単にざっくりと知ることが出来ます。 javascriptでインタラクティブなグラフを、というとGoogle Chart Toolsなど、既存のグラフ用ライブラリを使って簡単に済ませることもできますが、ひと手間加えて独自性のある表現を出したい場合は、paper.jsのようなライブラリを使ってみると良いかと思います。 試しにpaper.jsの学習がてら、下記リンク先にあるような棒グ
Paper.js — Examples
Examples Boolean Operations Candy Crash Satie Liked To Draw Chain Tadpoles Nyan Rainbow Rounded Rectangles Radial Rainbows Meta Balls Voronoi Future Splash Smoothing Spiral Raster Division Raster Q-bertify Path Intersections Path Simplification Hit Testing Bouncing Balls
Paper.jsは、HTML5 Canvas要素によるベクター・グラフィクスを扱うためのフレームワークだ。 応用領域としてはProcessing.jsに似たところがあるけれど、向こうはProcessingという元ネタがあるのに対して、こちらは純粋にHTML5 and JavaScriptに特化していることから、作りに無理がない（Processing.jsは、だいぶ「無理してる感」がある）。 ということで、HTML5でインタラクティブなベクター・グラフィクス遊びをするなら、こっちがおすすめかも。
HTML5でベクターグラフィックを描画する「Paper.js」です。 paper.jsと、サンプルHTML（Smoothing.html）の中に入っているjsを呼んで以下のHTMLを記述することで、描画できます。 HTML5 他にもいろいろできるようなので、ぜひ見てみてください。 Paper.js 先日遊びに行ったときにたまたまジミヘンのPurple Hazeが大音量でかかっていてしびれたので、勢いで久々にギターを買いました。51年リイシューのカスタムショップのテレキャスです。超久々にお茶の水に行って若者に紛れて購入。 オーディオインターフェースがいろいろ出ていて、ギターがつなげてコンデンサマイクもついているApogeeのONEをゲットしました。前からほしかったスタジオモニタのSONY MDR-CD900STも手に入れてテンションが上がっています。ひとまずGarageBandで何でもできる
Paper.js — About
Paper.js — The Swiss Army Knife of Vector Graphics Scripting. Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. Pa
How To Create Web Animations With Paper.js — Smashing Magazine
The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations had boxes around them like YouTube videos. HTML5 canvas changes everything about Web animation. The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations
Paper.jsはJavaScriptでインタラクティブなグラフィックスを描くライブラリ。 Paper.jsはJavaScript製のオープンソース・ソフトウェア。HTML5によってCanvasタグがデフォルトでサポートされるようになった。これでWeb上でのグラフィックスの表現力が大幅に向上する。だが高度な表現には高度な技術が伴うものだ。 ベジュ曲線が動くデモ 一つの絵を描くだけならばIllustratorのようなドローソフトウェアで描いてSVG出力するという手もあるだろう。だが本来はもっとインタラクティブなグラフィックスを描きたいと思うはずだ。それを可能にするのがPaper.jsだ。 Paper.jsはJavaScriptとCanvasタグを使ってマウスの動きに追従するようなグラフィックスを描くライブラリだ。実に数多くのデモが登録されており、マウスによってベジュ曲線を描くもの、マウスを追
Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael — Smashing Magazine
It’s all JavaScript once the page runs, but the frameworks take different paths to get there. Raphaël is written directly in JavaScript, but Paper.js uses PaperScript, and Processing.js uses its own script. They all support Firefox, Chrome and Safari, but Internet Explorer is an issue — Paper.js and Processing.js use the canvas tag and thus require IE 9. PaperScript is a JavaScript extension that
Paper.js — Tutorials
Getting Started An introduction into how Paper.js works together with PaperScript and JavaScript. Working with Paper.js Using JavaScript Directly PaperScript Interoperability Geometry Introductions into the basic geometric principles and methods Paper.js is based on. Point, Size and Rectangle Object Conversion Mathematical Operations Vector Geometry
「Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael」という記事で、Paper.js・Processing.js・Raphaëlが比較されています。 それぞれ、ソースを見ることが可能です。 Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael
wacomのプラグインを使うとjavascriptで筆圧などを取得できるってのを、昨日知りました。ちょうどpaper.jsで筆圧が使えないのを残念に思ってたところだったので、早速組み合わせてみました。微妙な書き味などは、これからチューニングが必要ですが、とりあえず。 あとSVGデータ生成機能も、まだ完全ではないのですがつけてみました。generate svg をクリックするとテキストエリアが出てくるので、コピーしてファイルを作ってください。 paper.jsで筆圧描画とSVGデータ生成サンプル ※ 私の環境のInternet Exprolerでは今のところ使えてません。ごめんなさい …描けるでしょうか？ webtabletプラグインは、最近のドライバを入れると同時に入るらしいです。らしい、っていうのは、私も最初うまく動かず、ドライバを入れ直したりしてるうちに動いたという感じなのです。wac
Paper.js — Tadpoles
Source
JavaScript - Canvas - The Canvas Element(PAINTING WITH YOUR MOUSE, Paper.js library) | Kamimura's blog
JavaScript - Canvas - The Canvas Element(PAINTING WITH YOUR MOUSE, Paper.js library)
GitHub - paperjs/paper.js: The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
Created by Jürg Lehni & Jonathan Puckey, Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves Paper.js is based on and largely compatible with Scriptographer, a scripting environment for Adobe Illustrator
![Paper.js [Scripts]](https://cdn-ak-scissors.b.st-hatena.com/image/square/640440672e1c92ea003ff25698489bc5f103c1c1/height=288;version=1;width=512/https%3A%2F%2Fwww.creativeapplications.net%2Fwp-content%2Fuploads%2F2011%2F06%2Fpaperjs02.png)
Paper.js — Future Splash
Source
Paper.js サンプルの有機的でなめらかな動きに惹かれてPaper.jsを学んでみようと思い立ちました。 あまり日本語での解説や事例が出てこないので日本ではそんなに使われてないのでしょうか。それとも世界でも使っている人は少ないのかな？まあ、あまりその辺の情勢はわかりませんが面白そうなのでとりあえずやってみようと思います。 公式サイトのサンプルやチュートリアルが充実しているので、まずは素直にチュートリアルをなぞる事から始めます。 使うために読み込むもの なにはともあれ公式からサンプルをダウンロード！使う為に必要なものは以下のとおり。 …というか最低限はpaper.jsだけで大丈夫ですね。準備が出来たらpaperscriptを書いていきます。 ※jsとしても書けるようですが、僕はpaperscriptで買いていこうと思います。 <head> <script type="text/javas
Paper.js — Features
Standing on the shoulders of Scriptographer and making use of HTML5 standards, Paper.js is a comprehensive open source vector graphics scripting framework. Document Object Model Paper.js provides a Document Object Model (also called a Scene Graph) that is very easy to work with. Create a project and populate it with layers, groups, paths, rasters etc. Groups and layers can contain other items and
Paper.jsで使うPaperScriptの特徴と、直接Javascriptで実行するときの違い - not good but great
Paper.jsとは? canvasを用いて、ベクターグラフィックをjsを簡単に描画できるようにしたライブラリです。 サンプルはどれもかっこいいです。 Paper.js — Examples PaperScriptを使う PaperScriptとは? Paper.jsではJavascriptを独自拡張したPaperScriptというものを使います。 メリット Point,Sizeに算術演算子(+ - * / %)が使えます。自身のスコープ内で自動的に実行されるので、グローバルスコープを汚染することがないです。ドキュメントが英語で長いので、いまいちよくわかりませんでした笑。 Paper.js — Working with Paper.js Preferred Networks Research & Development http://blog.npca.jp/archives/591 直接
paper jsを触ってみた。 | fumilicious
最近噂のpaper.jsを触ってみたら結構面白かったので、アップ。 paperjs.org サイトからダウンロードして色々遊んでみたら、結構サンプルがいっぱいあって面白かったので、自分で全部のサンプルをまとめてみました。 paper.jsサンプルまとめ paperjs.orgに乗ってないサンプルとダウンロードの方になくて、サイトのほうにあるサンプルをすべてまとめてみました。基本すべて（IEはシカトｗ）ブラウザーで動きます。 なんか、ホントにもうFlashいらないね。jsやらないとなー。 特にFutureSplashっていうヤツは、昔のどっかで見た事あるなーとおもったら、ここだった。 paperjs.orgも許可とって、the389.comのコードを使ってるみたいね。 勉強になる。っていうかやらないとな。
ちょっと前からPaper.jsをポチポチしてる。 http://paperjs.org/ Webでベクターでグニョグニョするのは、Flashの専売特許だったけど、 Canvasで似たような事が出来るのは、とてもよいね。 Paper.jsとよく比較されるのが、Raphael.js PaperとRaphaelの違い列挙 SVG描画とCanvas描画の違いー＞それによるブラウザ対応の違い Paperのが、サイトのセンスが良い Raphaelはダサい Raphal軽量 Paper書き方が独特 （Paperscriptというらしい配列丸ごと計算してくれる） Raphael触ってないから甲乙つけがたい Paper サンプルがかっちょよい。これだけでモチベアゲアゲ。 canvasのプラグインロクなのないけど、両方共よい。 こんなとこですかね。 ベクターは動きが気持ちいいですね。 ピクセルだとこうも気持ち
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超絶サンプル満載のベクター画像描画JavaScriptフレームワーク「Paper.js」:phpspot開発日誌
Paper.jsは、HTML5...
HTML5でベクターグラフィックを描画する「Paper.js」 – creamu
マウスのアクションに追従するインタラクティブなグラフィックスを描く·Paper.js MOONGIFT
Paper.js・Processing.js・Raphaëlの比較 – creamu
paper.js で筆圧描画とSVGデータ生成 - s.h’s page
Paper.js [Scripts]
Canvasでのベクター画像描画フレームワーク Paper.js を学んでみる（1） | ARAKAZE NOTE
Paper.js でベクトルグラフィック をやってみた雑感 - ヨハウィングの忘備録