今月のアマゾン買い物履歴です。 HTML5 Canvas 本格的にCanvasに取り組もうという決意のもと購入しました。 まだほとんど読んでませんが、その決意の成果は如実に現れ始めています。読みます。 Canvasで落書き 2.2.1 - みかづきブログ その3 Canvas destinat…

DEMO JavaScript (function(win, doc, ns) { "use strict"; // x方向を反転させる function _reverseX(rad) { return (180 - rad) % 360; } // y方向を反転させる function _reverseY(rad) { return (360 - rad) % 360; } function Ball(obj) { var _this = …

前回つくったもの はパスが増えてくるとFPSがガッツリさがってしまうという問題があったため、ロジックに修正を加えました。 Canvasで落書き 2.2.0 - みかづきブログ その3マウスアップした際にCanvasの状態を1度ビットマップ化することによって、パスを現在…

以前、 UIViewの背景にグラデーションを設定したこと がありましたが、今回はCanvasに同じグラデーションを設定してみます。 UIViewの背景にグラデーションを設定しよう。 - みかづきブログ その3 DEMO HTML <canvas id="canvas"></canvas> JavaScript (function(win, doc) { "use strict"…

See the Pen hello world. by kimmy (@kimmy) on CodePen.なかなかよい感じになりました。 HTML <canvas id="main"></canvas> JavaScript (function(win, doc) { "use strict"; var main = doc.getElementById("main"), mainCtx = main.getContext("2d"), sub = doc.createElement("canv…

前回つくったもの にマウスのスピードに応じてLineの太さを変更する機能を追加しました。 Canvasで落書き 2.1.0 - みかづきブログ その3マウスをすばやく動かしたときほどLineが細くなります。

3ヶ月近く放置してしまいましたが、以前つくった落書き用Canvas をベジェ曲線にして滑らかにしてみました。 Canvasで落書き 2.0.1 - みかづきブログ その3

Canvasに打ったPointをつないでLineにするクラスをつくってみました。 Pointを直線でつなぐdrawLineメソッドと、ベジェ曲線でつなぐdrawQuadraticCurveを実装しています。 一応今後のことを考えてEventDisatcherを継承していますが、あんまり意味が無いよう…

指定した座標に点を打つクラスをつくってみました。 点の色も大きさも選べないシンプルなクラスですが、今後のことを考えてEventDisatcherを継承しています。 JavaScript (function(win, doc, ns) { "use strict"; function Point(x, y) { var _this = this;…

Milkcocoa をつかってリアルタイム通信のモックをつくってみました。 灰色の部分をクリックすると「HELLO」と表示されるシンプルなモックですが、ページ観覧車全員が同じ画面を見ることができます。（最大20人まで接続できるらしいです）なので自分がクリッ…

アニメーション等の管理用に、前回実行時からの経過時間、スタートしてからの時間、FPSを知ることのできるTickerクラスをつくってみました。 つかいかた var ticker = new ns.Ticker(24); // FPSを渡してインスタンスを生成 setup(); function setup() { tic…

見た目上なにも起こっていませんが、画像ファイルを選択するとconsoleにバイナリデータをしれっと表示するデモです。 DEMO

集中してプログラムを書くときBGMを聴きながら作業をすることが多いのですが、最近はもっぱらWEBサービスに頼っています。いくつかおすすめのサイトを紹介します。 オンガクスリ http://ongakusuri.com/ http://ongakusuri.com/いま一番必要な音楽と出会える…

僕は 6to5 というツールをつかっています。勧められるがままに。 GitHub - babel/babel: Babel is a compiler for writing next generation JavaScript. 導入方法 npmをつかってらくらく導入できます。 npm install -g 6to5 変換方法 6to5 main.js対象とな…

#{コマンド} > #{ファイル名}という感じで > をつかえば良いようです。 なので、 echo hello > hello.txtとかを実行すれば、 helloと書かれた hello.txt が生成されます。

こちらの記事 がなかなか好評なので、1年前恵比寿に住んでいた際によく通っていた店をまとめてみようと思います。 横浜駅周辺で激辛料理が食べたくなった時の為のまとめ 2014 - みかづきブログ その3 辛い イエローカンパニー 恵比寿店 イエローカンパニー …

前回つくったpreloadの仕組み だと、JavaScriptがpreloadする画像のパスを知っている必要がありました。（preloadするパスのリストを渡す必要があったため） JavaScriptで画像の読み込み終了を検知する - みかづきブログ その3 しかしこれだと、例えばcompas…

サイトで表示する画像を事前に読み込んでおいて、高速化しようと思ったときに書いたコードです。 1px × 1pxの大きさでよみ読み込んでますが、CSS側でうまく隠すことを前提としています。 プリロード用なので読み込みが終わった画像はドキュメントから削除し…

今更ながら、はてなブログにInstagram貼り付け機能があることに気づきました。 かつてスネオっぽいイラストを書いてInstagramに投稿することにはまっていた時期があったので、その時のアーカイブを貼り付けておこうと思います。 いかがでしょう。たまにはこ…

以前、 こんなクラス をつくりましたが、改良してみました。 続・YouTube Player APIをつかう - みかづきブログ その3 変更点 new できないように変更しました。 自動再生するか否かをオプションで指定できるように変更しました。 オプションの引数をオブジ…

前回紹介した環境 ですが、Mac上にサーバをたてれば、 http:// + MacのIPアドレス + ポート番号こちらでlocalhostにアクセスできます。 IEでの検証がめちゃくちゃ楽になりますね。MacのIPアドレスは、システム環境設定のネットワークから確認できます。 また…

PCを再設定するにあたり、IE検証環境をつくり直しました。 出番の多そうなWindows7のIE9を使えるようにするまでを例にとって手順を簡単にまとめておきます。 VirtualBox のインストール ダウンロード こちらのサイト からVirtualBoxをダウンロードします。Do…

以前、こんな記事 を書いてましたが、センタリングしたい要素のサイズが決まっている場合は今回の方法がいちばん簡単かもしれません。 CSSで子要素の縦位置をセンタリングしよう。 - みかづきブログ その3 DEMO HTML <div class="box"></div> CSS .box { position: absolute; top: 0…

AndoroidでCanvasをさくさく動かすためにいろいろ検証したことを一旦メモしておきます。 ※ Android 4.2.2 GALAXY NEXUS にて検証。 Canvasサイズが小さいほどパフォーマンスが良い 当たり前といえば当たり前なのですが、Canvasの大きさは最低限にしておいた…

昨日は Canvasで基本的な図形の描画 を行いましたが、今回は昨日つくったものをマスク的につかってみたいと思います。 Canvas rect 習作 - みかづきブログ その3 DEMO JavaScript (function(win, doc) { "use strict"; var img = new Image(), main = doc.ge…

canvasの習作として、背景色を塗り替えるモックを作成してみました。rectを描きまくってます。 まずは兎に角動くものをつくったので、ロジックとレンダリングがわかれてません。追々切り離していければと思います。 DEMO JavaScript (function(win, doc) { "…

beforeに対してtransformをかけて実装しました。 DEMO HTML <div class="wrapper"> <section class="red"> <h1>RED</h1> <p>sectionをななめに分割します。</p> </section> <section class="blue"> <h1>BLUE</h1> <p>sectionをななめに分割しときます。</p> </section> <section class="purple"> <h1>PURPLE</h1> <p>sectionをななめに分割してます。</p> </section> </div>

iPhone、Android共に、touchmoveのデフォルト動作を止めることでページスクロールを禁止することができます。すなわち、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); この記述でページスクロール…

JavaScriptをつかってパラパラ漫画のようなコマアニメーションを実装しようとした際、よく使われる3つの方法を比較してみました。

ひょんなことから文字列で表された16進数を10進数に変換する必要があったので、parseIntの基数を指定して変換してみました。 JavaScript (function() { "use strict"; // 16進数の文字列を10進数の数値に変換 var num = parseInt("fff", 16); // 10進数の数…