Chrome+HTML5 Developers Live Japan #5【Canvasを使ったモバイルHTML5ゲームの最適化 for Chrome Mobile】 このセッションでは、Google I/O で展示した HTML5 版 Blood Brothers のデモを実機で紹介しながら、スマートフォンにおける Canvas を用いた細かい最適化の方法を中級者向けに解説します。
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
ke-tai.org > Blog Archive > JavaScriptを使ってQRコードを作れる「jQuery.qrcode」
JavaScriptを使ってQRコードを作れる「jQuery.qrcode」 Tweet 2011/4/18 月曜日 matsui Posted in ソフト紹介, 記事紹介・リンク | No Comments » もはやモバイルとは切っても切れない関係となっているQRコードですが、JavaScriptを使ってQRコードを作れるjQueryプラグイン「jQuery.qrcode」というものがあるようです。 ダウンロードはこちらのgithubのサイトから行えます。 → github jeromeetienne / jquery-qrcode [github.com] 簡単な解説はこちらです。 → jquery.qrcode.js – Jerome Etienne [jeromeetienne.github.com] このQRコードは実際に「jQuery.qrcode」を使って表示しています。
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」:phpspot開発日誌
heatmap.js | HTML5 Canvas Heatmap Library ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」。 ユーザのマウス位置をヒートマップという形で表示してサイトの利用方法を解析する方法がありますが、そのヒートマップを描画できるライブラリが公開されています。 取得されたデータを元にヒートマップを描画できるのは当然ながら、マウスを動かしてリアルタイムにブラウザに描画されるデモも一見の価値があります サイト上の以下のボタンを押しましょう。 リアルタイムでヒートマップが描画されます。Chromeだととってもなめらか アクセス解析的な利用はモチロンのこと、何か他のものにも使ってみると面白い効果が得られたりするのかも。 関連エントリ クリック位置のヒートマップを作成できるオープンソースやサービス色々
canvasを使って地下鉄の路線図のようなグラフィックを描けるjQueryプラグイン・Subway Map Visualization - かちびと.net
面白かったのでご紹介。地下鉄路線図 のようなグラフィックを簡単に描ける、と いうユニークなjQueryプラグインのご紹介 です。なかなか珍しいですね・・・地下鉄 の路線図はインフォグラフィックでもよく 使用されていますね。 HTML5のcanvasを使って路線図のようなグラフィックを簡単なマークアップで描けます。駅に当たる場所にはリンクも貼れるので、上手く使えば面白いコンテンツが出来るかも知れないですね。 駅名部分がリンクになっていますよ。画像は使っておらず、HTML5のcanvasで書いていますのでIEには対応していません。 使い方 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jqu
canvasを使って地下鉄の路線図を描けるjQueryプラグインで東京の地下鉄の路線図を描いてみた
デモ 手元にあったFirefoxとChromeで表示の確認をしています。 東京の地下鉄の路線図を描いてみた 結構ごっちゃごちゃになってしまいました。それだけ入り組んでるという事で・・・駅はそれぞれWikipediaの各駅にリンクしています。 紹介サイト こちらのサイトで詳しく紹介されています。 canvasを使って地下鉄の路線図のようなグラフィックを描けるjQueryプラグイン・Subway Map Visualization 配布サイト JavaScript自体は以下のページからダウンロードできます。 Subway Map Visualization jQuery Plugin
[JS]Canvas, SVGを使用した軽量のJavaScriptの3Dエンジン -three.js
通常、複雑な記述をより簡単にできるようにした、3Dを描画する軽量のスクリプトを紹介します。 サイトでは下記のように数多くのデモが楽しめます。 three.js -Javascript 3D Engine [ad#ad-2] three.jsは<canvas>, <svg>とWebGLを使って、2Dと3Dをレンダリングすることができます。 各デモは対応ブラウザ（Firefox4+, Chrome9+, Safari10.6+など）でご覧ください。
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
HTML5のキャンバスと連動させて音声をビジュアライズしたデモ:phpspot開発日誌
Music Visualizer in HTML5 / JS with Source Code HTML5のキャンバスと連動させて音声をビジュアライズしたデモ Windows Media Player とかを使ってるとよくあるあの動くやつをHTML5のCanvasを使ってやるものです。 ベースにはEasel.jsというものが使われており、HTML5のキャンバス描画を行っているそう。 直接的にHTML5からオーディオのボリュームデータは読めないため、データを一旦テキストにしてそれを読み込むことで実現しているそう。 実際のデモを見るのが一番いいですね。デモページ デモページその２ バックグラウンドの音声もかっこいいわけなのですが、描画される映像もかなりかっこいいです。 関連エントリ HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 HTML5のCanvas
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
AwesomeChartJS
Easy to use Just create a new AwesomeChart object and pass the canvas element's id as a parameter to the constructor. Then set the chart's data and call the object's draw() method. That's it! Your chart is ready! Fully customizable Control how your chart looks by defining: Font styles Fill and stroke styles for bars and pies Margin sizes
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptによる弾幕STG実装：いで庵
box2dweb -Box2DFlash port to javascript - Google Project Hosting
IDEA*IDEA 〜 とあるサービス運営者の学習ブログ