Rafaël Rozendaalさんの作品が面白い 海外のアーティストであるRafaël Rozendaalさんの作品がおもしろくて、最近見始めました。 http://www.newrafael.com/自分でも真似して作ってみようかと思いました。真似と言っても、ソースコードを見るわけではなく、動…

function draw(){ requestAnimationFrame(draw); alert("hogege"); }; draw(); 関数宣言をしてから、「draw();」するやり方をいつもしていました。 (function draw(){ requestAnimationFrame(draw); alert("hogege"); })(); 無名関数を使って、後で「draw();…

SIMD.JSで高速化 Exciting! RT @anssik: We're seeing ~4-10x JavaScript performance speedup with SIMD.JS: https://t.co/ZKoO0FdfNC— Jesse L Rosenberg (@nervous_jesse) 2014, 3月 29 SIMD.JSというものを使えば、JSのパフォーマンスが上がるというツイ…

媒介変数を使う 高校の数学で媒介変数(パラメータ)によって図形を表す問題をやったことがあります。それをプログラミングに適用したら、コードも簡単だし、おもしろいこともできるのではないかと思いました。 RETURN 円の媒介変数表示

demo

以前CSSでぐにょぐにょする円を作りました。 demo 今回はPaper.jsで作ってみました。 Paper.js Sketch

demo A Pen by naoyashiga. 久しぶりにgistを使ってみました。

今までに作ったブロック崩し 最近はブロック崩しを作っていました。 Javascriptでブロック崩しを作ったよ - not good but great玉の数を増やしたりしてました hitOptionsを使い当たり判定を厳密にし、弾丸同士を完全弾性衝突させる - not good but great 問題…

demo Paper.js Sketch http://jsdo.it/naoyashiga/z9op 当たり判定を厳密にする options.bounds: Boolean – hit test the corners and side-centers of the bounding rectangle of items (item.bounds). hitTestの使い方を調べていると、オプションとしてbou…

demo GitHubにも公開してあります。 GitHub - naoyashiga/BreakBrick: using Paper.js

demo セグメントをドラッグで曲げることができます。

方向ベクトルを使ってアイテムを動かす demo Paper.js Sketch code var text = new PointText({ point:view.center, justification:"center", fontSize:30, fillColor:"black" }); var destination = Point.random() * view.size; function onFrame(event){ …

demo 円が動きます。円の色は背景の画像の平均色です。円で囲まれた範囲内の平均色となります。

画像の読み込み方 Rasterを使う Paper.jsの特徴はベクトルデータを扱えることで描画が綺麗で高速であるということです。

Symbolのメリット Symbolはアイテムをたくさん複製したいときに、メモリを節約することができます。

最前面、最背面レイヤー demo Paper.js Sketch code var path = new Path.Circle(new Point(80,50),35); var secondPath = new Path.Circle(new Point(120,50),35); project.activeLayer.firstChild.fillColor = "red"; project.activeLayer.lastChild.fillC…

BlendModeを指定する CSSのblend modeと種類は同じ String('normal', 'multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten', 'difference', 'exclusion', 'hue', 'saturation', 'luminosity', '…

単位ベクトルの作成 単位ベクトルの作成はベクトルで何かやりたいときには役に立つと思います。特にベクトルの方法だけ知りたくて、長さは別に定義したいときなどに使われるのではないでしょうか。

Orbit of Mouse Drag function onMouseDrag(event){ path.add(event.middlePoint); } event.middlePoint describes the point in the middle between event.lastPoint and event.point.

ドラッグの軌跡を追う function onMouseDrag(event){ path.add(event.middlePoint); } onMouseDragだけ抜粋しました。一つ前の点と現在の点との中点を描画します。 軌跡の両側に点を打つ Paper.js Sketch

用語解説 Paper.jsでマウスのドラッグスピードに合わせて、線の太さが変わるように頑張ってみた - not good but great 上記エントリで用語解説はしたのですが、リファレンスの別ページに詳しく載っていたので、改めて書きます。 middlePointとは? event.midd…

お絵かきツールをつくる demo マウスのドラッグで線を引けるようにしています。 Paper.js Sketch var path; function onMouseDown(e){ path = new Path({ strokeColor:"black", strokeWidth:10 }); } function onMouseDrag(event) { path.add(event.point); …

まずは用語解説 セグメントとは? Paper.jsにおいて出てくるセグメントとは、イラストレーターにおけるセグメントと同じ意味だと思います。セグメントはポイントとポイントを結ぶ線です。ここでいうポイントはイラストレータで言うアンカーポイントを指します…

セグメントを消す demo code var circle = new Path.Circle(new Point(100,70),50); circle.strokeColor = "black"; circle.selected = true; //左 circle.removeSegment(0); //上 //circle.removeSegment(1); //右 //circle.removeSegment(2); //下 //circl…

Pathを描画する smooth()で正方形を円にする smooth()を使うことで、ポイントとポイントを繋ぐ線が滑らかになります。 http://paperjs.org/tutorials/paths/working-with-path-items/ いろんな図形を描く http://paperjs.org/tutorials/paths/creating-prede…

Paper.jsとは? canvasを用いて、ベクターグラフィックをjsを簡単に描画できるようにしたライブラリです。サンプルはどれもかっこいいです。 Paper.js — Examples PaperScriptを使う PaperScriptとは? Paper.jsではJavascriptを独自拡張したPaperScriptという…

背景 下までスクロールしたら、新しくTableViewに要素を追加しようと思いました。 insertRowAfterがうまくいかない 調べると「insertRowAfter」というのが出てきました。 insertRowAfter( index, row, [animation] ) : voidParameters index : Number Index …

前回までの問題 前回の問題は下の通りでした limitの制限がJRAと楽天競馬の二つを合わせたフィードに適用されていないこと 二つのフィードを日時順にソートできていないこと ・前回エントリ YQLで複数フィードを読み込む件数を指定しても反映されない、ソー…

CommonJS準拠に書き直してみよう 前回エントリでCommonJSについて少し知ることが出来ました。それまで書いていたコードをCommonJSに従って書き変えることにしました。具体的にはexportsで関数を作成して、requireで読み込むことをします。・前回エントリ Tit…

CommonJS準拠に書き直してみよう 前回エントリでCommonJSについて少し知ることが出来ました。それまで書いていたコードをCommonJSに従って書き変えることにしました。具体的にはexportsで関数を作成して、requireで読み込むことをします。・前回エントリ Tit…