Quantcast
Channel: TM's Workspace » HTML5
Browsing all 10 articles
Browse latest View live

quake2-gwt-port

 GoogleCodeにquake2-gwt-portというプロジェクトがある。  どうも、Jake2というpure JavaなQuake2ゲームエンジンを Google Web Toolkit (GWT)を使ってJavaScriptに変換し、HTML5で動かすという試みらしい。  で、実行中の動画がYoutubeにアップされている。HTML5って、こんなことも出来るのかーと少し驚いた。  

View Article


Image may be NSFW.
Clik here to view.

HTML5Canvasで樹木を書いてみる

最近、HTML5が盛り上がってきている感じなので、習作として、HTML5のCanvas要素を利用し、再帰関数で樹木を描いてみる。 元ネタは、Wonderflの投稿、再帰関数です。 リンクをクリックすると、樹木が描画されるが、処理は結構遅い。  →実行        

View Article


Image may be NSFW.
Clik here to view.

HTML5-Canvasでグラフィクス

 HTML5のCanvas要素を使用したCGアニメーションを作成してみた。 元ネタは、Wonderflの投稿、closure graphicsです。  リンクをクリックすると、実行されます。Google Chromeでは軽快に動きましたが、IEはexcanvas.jsを使う関係か、とても重いです(白黒版は、そこそこ動いた)。  →実行(カラー)  →実行(白黒)    

View Article

Image may be NSFW.
Clik here to view.

Android-x86でHTML5-Canvasを試してみた

 Androidのブラウザは、たしかWebkitを基盤にしていたと思い出し、「HTML5のCanvas要素は表示されるのか?」「Javascriptの実行速度は?」といった点が気になったので、前回のエントリ「HTML5-Canvasでグラフィクス」をAndroid-x86のブラウザで表示してみた。        サイトをAndroid-x86のブラウザで表示したところ。...

View Article

Image may be NSFW.
Clik here to view.

HTML5-Canvasでグラフィクス2

HTML5のCanvas要素で、樹木が揺れるアニメーションを作成してみた。 元ネタは、Wonderflの投稿、Tree in the breezeです。 リンクをクリックすると、樹木が描画され、アニメーションします。 Google Chromeでは、十分実用的な速度で処理されています。  →実行        

View Article


Image may be NSFW.
Clik here to view.

HTML5-Canvasでグラフィクス3

Wonderflのshapevent氏の投稿「Connect The Dots」をJavaScriptに移植してみた。 ブラウザで無料ではじめるActionScript 3.0 ソースコードは以下のとおり。 GoogleChromeのCanvasは処理が十分に速く快適。マウスイベントはJQueryで拾っているけれど、event.pageXの挙動があまりうまく行かず、...

View Article

Image may be NSFW.
Clik here to view.

HTML5-Canvas版Mouse Toy

Wonderflのshapevent氏の投稿「Mouse Toy」をJavaScriptに移植してみた。 実行は、下記リンクより。ソースコードは以下のとおり。 →実行 なお、IE用のCanvasは、excanvas.jsではなく、revulo氏のflashcanvas.jsを利用させて頂いている。       var ctx; var width=480; var height=480; var...

View Article

Image may be NSFW.
Clik here to view.

JavaScript:カラフルなタイル

 jsdo.itの投稿用に、以前作ったActionScriptのコードをJavaScript+Canvasに移植してみた。  実行は以下のリンクから。  JavaScript+Canvasでも、軽快に動作するもんだなあ。また、Processing.jsを使うより、直接Canvasを操作した方が処理が少し速いように感じる。  実行 → ここから        

View Article


Image may be NSFW.
Clik here to view.

JavaScriptで画像の色調補正を行うクラスを書いてみた。

 JavaScriptで色調補正を行うクラスを作ってみた。  Google Chromeでしか動作確認していないけど、Canvasでピクセルを操作するのは、さすがに重いです。  Jsdo.itに投稿することを考えていたけれど、外部ドメインから読み込んだ画像からImageData関連メソッドを呼ぶとセキュリティエラーが出るので、今回は見送り。  →実行     ■hsv.js var...

View Article


Image may be NSFW.
Clik here to view.

GPS位置情報を記録するWebアプリ習作

 今日は早めに家に帰り着いたので、久しぶりに何かプログラムを作りたいと思い、JQueryMobileを使った、GPSの位置情報を記録する簡単なWebアプリを作ってみました。  記録ボタンを押すとその地点の位置情報が記録され、グーグルマップへのリンクが作成されるという簡単なものです。また、逆ジオコーディングで地名を検索し、データをLocalStorageに記録しています。...

View Article
Browsing all 10 articles
Browse latest View live