わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
[HTML5]世界一インストールが簡単なWikiをリリースしました。 #jswikimini - DQNEO起業日記
IE6,7,8,9, Firefox, Google Chrome, iPhone, iPadで動く！(たぶんAndroidも) このシステムは非常に奇妙なアーキテクチャで、いろんなプラットフォームで動きます。 プラットフォームごとに動作モデルが異なります。(ここが奇妙な点です。) IE6,7,8,9で動かす場合 PCローカルにHTMLファイルをダウンロードして、それをIEで開いてください。 (セキュリティレベルを下げる必要があるかもしれません。自己責任でお願いします。) IEでの動作モデルは前作 JSWikiMini と同じです。 データはテキストファイルとしてPC内に保存されます。 USBメモリや共有フォルダに置いて使うこともできます。 (逆に、Webサーバ上に置いた場合は使えません) windows環境では、一種のネイティブアプリとして振る舞います。 この仕組みはActiveXObj
JavaScriptで2D-FFTによるハイパス/ローパスフィルタ – Rest Term
Spatial Frequency Filtering by 2D-FFT これまでにJavaScriptとHTML5 Canvas APIでいくつかの画像処理を試してきましたが、今回は二次元離散フーリエ変換(2D-DFT、実装上では2D-FFT)で得られた周波数スペクトルにハイパス/ローパスフィルタ(HPF/LPF)を適用します。 「フーリエ変換」は音声処理でよく耳にする単語かと思います。音声データをフーリエ変換してHTML5 Canvas上でビジュアライズするデモもたくさん公開されています(例: Visualizing an audio spectrum – MDN)。ただし、ここでは”音声”ではなく”画像”に対するフーリエ変換を行います。音声の場合はデータが一次元なので周波数は一つしか持っていませんが、画像の場合は水平/垂直方向の二つの周波数を持つことになります。なので画像データに対
HTML5で作られた、クリックで打った点に沿って光が駆け抜ける「Keylight」
Keylight - an audio rhythm experiment. (Hakim El Hattab) HTML5 canvasで作られた、打った点に沿って光が駆け抜けるデモ「Keylight」が公開されています。 (英語) マウスをダブルクリックで点が打てます。何かキーを押しながらクリックすると点の大きさや色が変わります。 「Reset」をクリックでクリア、「Randomize」でランダム、「Increase/Decrease」でスピードアップ／ダウンできます。 打った点は個別のURLが生成されるので公開共有もできます。 光が駆け抜けた後には、細かい星屑のようなものが残るなど表現が細かいです。 サウンド・デモでもあるのですが、音の部分はFlashを使っているようです。
基調講演 2 日目速報レポート ｜ ADC Community Lounge
基調講演に参加している人もしてない人も、コメントで盛り上がりましょう。 今日も会場のネットワークが繋がるとよいのですが。 ———————————————- 9:47 会場に到着。今日もネットワークが使えてます！ 10:00 貴重講演が始まりました。昨日に続いてオープニングビデオの迫力が凄い。 10:08 今日のテーマは Flash&HTML5。司会のダニー曰く、どんなテクノロジーを使うかではなく、開発者が必要とするツールを提供するのがアドビの使命と考えているのこと。HTML5とFlashどちらも投資を行って成果が出続けている。Flash Player 11 と AIR 3 発表の話題では会場で拍手。 10:15 ベンが登場。モバイルアプリケーションのお話。まずは DW5.5 を使って HTML ベースのネイティブアプリが開発の手順を紹介。PhoneGap の話題に移り、先週 Apache
パーティクル3万個 - latest log
IE 10pp2 と iPad2 (iOS5) のスコアを追記しました iPhone4S (iOS5) のスコアを追記しました Firefox 4 から window.mozRequestAnimationFrame が利用可能になっています。 window.requestAnimationFrame / setTimeout(,4) / setInterval(, 16) で パーティクル3万個を飛ばすデモ。 ベンチマークマシンのスペック → MacBook (13-inch, Late 2009) - 技術仕様。 メモリ4GBに + BootCamp + Windows7 上で計測しています。 Windows エクスペリエンスインデックスの数値は、5.1 で、各項目は プロセッサ: 5.8 メモリ: 5.8 グラフィックス: 5.1 ゲーム用グラフィックス: 5.5 プライマリハードデ
冷吟閑酔
東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』でLT枠で発表させていただいた「Canvasアニメーションについて」の資料をアップします。正直技術的に参考になるものは特にないので、ご了承ください。 今回発表させていただいた内容は、FlashIDEで作成したFlashアニメーションを、FlashIDEのマクロ機能(?)であるJSFLを使用してHTML5のCanvasへ移植するというコンバーター「CanvasAnimationConverter（仮）」を作ってみたよーという紹介です。スライド内でも書いていますが、Grant Skinner先生のEaselJSフレームワークを使用しています。 今のところ、知る限りではCanvasによるアニメーション制作ツールというのは出ていない気がします。そういう意味では、少し目新しかったかな、と。 JSFLの配布に関しては、まだアルファ
東京てら子Vol.16 の発表内容。 (memo.kappa-lab.com)
土曜日はてんこもりでした。午前中はAEDを使った救急救命講義を受けて、午後は「東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』」で喋って、アフター7は皆で懇親会（飲み会）してきました。 今回は大人数だった事もあり、タイムキーパーアプリを作って厳密に時間管理が行われていました。タイムオーバーしてしまう発表者がいる中、特別枠とLT枠で２度も喋るKYっぷりを許していただきホントありがとうございます。 特別枠 「BeBop βversionについて」 先日ベータリリースしたBeBopの紹介をさせていただきました。会場で「無料なの？」と質問がありましたが、勿論、ムリョーですよ！ 将来的にはプレミアムプラン的な有料高機能版が出るかもしれませんが、その際も無料版はなくならないのでご安心ください。この辺は断言しておきますのでご安心ください。 発表したスライドは以下です。 *背景の壁
JavaScriptで作ったお絵描き掲示板のソースを公開するよ | fladdict
去年、ノリで数日で作り上げたJavaScript製のお絵描きアプリ、JSPaintのソースコードを公開してみた。 なんとなく勢いで。 Download 1週間で実装したわりには、指先ツールとかカラーピッカー、Undoまで完備されていて結構頑張ってるんじゃないかと。ただしIEでは（メンドイので）動きません。Twitter投稿のみphpを使っていてZendのフレームワークが必要です。この辺は @sumihiro さんのご助力に感謝です。 ソースの書きかたが、ちょっとクラシックでprototypeで疑似クラスを作っていますが、まぁ気にしない。本職JavaScripterでもないので割と突っ込みどころが満載です。 こまかい事はTwitterのfladdictで捕まえて聞いてください。
Stars 2 - jsdo.it - Share JavaScript, HTML5 and CSS
Typographyシリーズ第2弾。 文字画像をトレースしてパス情報を求めようとあれこれしています。 オレオレアルゴリズムのため難しい漢字とか苦手かも。。。 How it works : http://jsrun.it/tsmallfield/stars2?debug Stars #1 : http://jsdo.it/tsmallfield/stars /** * @fileoverview Stars 2 * @author Tohl SMALLFIELD */ "use strict"; (function(win, doc) { var vibration = 0, tmr; /** * @see http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/RequestAnimationFrame/Overview.html * * TODO
Flash, HTML5 Canvas + OpenCV – Rest Term
前回はWSGIアプリケーションからOpenCVを利用する例を挙げましたが、今回はクライアントをFlashとHTML5の両方で試してみます。といっても特別なことをする必要はなくて、公開されたURIからリソースを取得すればいいだけです。 、、 ということで既に先が見えて飽きてしまいましたが、簡単なデモと方針だけでも気力を振り絞って書いておきます。後はアプリ層の方々におまかせ;; OpenCVはPythonバインディングを使いますので、この部分は前回と同じくFlaskを使うことにします。クライアントがFlashの場合はテンプレートエンジン不要で、URIルーティングを行うためのWerkzeugがあれば十分です。ただ、Flaskなら情熱がなくてもたぶん最後まで書ききれるのでオススメ。最後に処理結果ですが、今回はStar Detectorのデモを作ろうと思うので、以下のようなJSON形式で返すことにし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
roxik | Kung-Fu Girl
Responsive Cat
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
ROXIK | Monalisa
２色の液体が混ざり合うようなWebGLデモ
WebGLで作られた世界の検索状況を視覚化「Google Search Globe」
S5-Studios — The Studio to Create S×5 Expressions.
