Warning: reset() expects parameter 1 to be array, boolean given in /home/users/2/mods.jp-makoto-tanaka/web/wordpress/wp-content/themes/xeory_base/lib/functions/head.php on line 143
このエントリーをはてなブックマークに追加

読了: 約 2 分

結構前ですが、paper.jsが話題になっていたのを思いだし、
テストとして動かしてみようと思ったのでサンプルのものを使って色を変えただけのものを
創ってみました。

サンプル

作成してみたサンプルです。papar.jsのサイトにも
あるので是非参考にしてみてください。

今回作成してみたものです。
pathのcolorを変えてみただけなのですが(笑)
paper.jsサンプル

簡単な創り方

<script type="text/paperscript" canvas="canvas-1">
<canvas resize="true" id="canvas-1"></canvas>

JavaScriptの宣言の際にcanvas=”ほにゃらら”と書いて、
canvasタグのidと同一名称にする様です。

Mouse Interaction

僕はマウスと連動した動き、音楽と連動した描画処理を行いたいと思っていたので、
結構参考になりました。

基本形は以下の形のようです。

function onMouseDown(event) {
    // Code executed when the user presses the mouse
}

function onMouseDrag(event) {
    // Code executed when the user drags the mouse
}

function onMouseUp(event) {
    // Code executed when the user releases the mouse
}

MouseEventのサンプルは下記をご確認ください。
こちら

iPhone4Sでの動作検証

ちなみにiPhone4Sでも綺麗に動きました。
こういったUIはiPhoneから見るWEBアプリでは今までありませんでしたね。

画像を背景に配置して、カーソルを手や黒板消しなどに見立てて消すスライダーなどといった
アイデアが創れるのではないでしょうか。
(ニーズがあるかはわかりませんが(笑))

最近WantedlyというWEBサービスを通して、面白法人カヤックさんでJS勉強会に参加した際にやっていたのが、面白いUIのスライドショーを作成するという事でした。

Clearの記事を書いたのもそうですが、既存にあるものをそのまま同じように創っていては付加価値は低いままですよね。

それこそ、スライドショーなんてライブラリーを使ってしまえばいくらでも出来てしまいますし、
何が本当に大切で必要なのかを見極めて制作していかないといけないなと再認識しました。

JSの記事が多くなってきましたが、そっちに舵を切ろうかなと思う次第でした(笑
それではまた

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'