Daily CSS DesignHi! I'm a web designer and this is my side projectThe goal was to create one design every day for a year. All shapes, patterns and colors are made by coding. Read more
Web Graphic Experiments
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.3
HTML canvas で画像を切り取る(crop) Javascript サンプルコード - Qiita
HTML canvas & Javascript を使った画像の切り抜き「Crop」のサンプルコードです。 ブラウザ上で画像を加工しようとしたら、canvas しかないわけですが、 いちばんやりたいのは「切り抜き：Crop」なんだけど、まぁ、シンプルなコードがほしかったのにみつから無いわけで。 無いときは自分で作るのがエンジニアの掟なわけです。 切り取る（crop） Demo 中央の枠の中を切り出すタイプ。先に切り出す枠を決めておいて、画像の方を確認しながら切り出す。 なんと言いますか、マウスで角から角へドラッグしたり、枠をつまんで移動するUIよりも、このほうが直感的でわかりやすいし、スマホとかタブレットにも向いているUIだと思うのです。 Crop してますか？ 実際に触ってみてもらうのが早いでしょう。⬇︎ canvas 上で、マウスをドラッグすると切り抜く場所を変えられます。 canva
スマホでもWebGLが快適に動く! HTML5で体験する3D表現の可能性 – ICS MEDIA
WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。 WebGLを使えば主に次のようなコンテンツ開発に役立ちます。 3Dモデルの表示 ゲームコンテンツ データビジュアライゼーション プログラミングアート 魅力的で華やかな画面演出（広告系サイトなど） かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。 本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザでも利
Particleground demo
Particleground A JavaScript plugin for snazzy background particle systems Download
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
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アートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
HTML5でロードオブナイツとかいうゲームを作った - mizchi log
陣取り戦争ゲーで、iPhoneのUnity版からの移植です。 ロードオブナイツ - Yahoo!モバゲー http://yahoo-mbga.jp/game/12011436/detail PC(Chrome/Firefox/IE9以上)とスマホ(Webkit)で同じ物が動きます。ヤバゲーとモバゲーでアカウントは共有してるので、どっちからでも入れます。 HTML版としては既存コードとか一切なかったんで、JSに関してはフルスクラッチです。というか全部CoffeeScriptです。 ある日会社で楽しくHaskellでKPI計算モジュール書いてたら、 「UnityのネイティブのゲームをHTML5に移植したい」 みたいな話が降ってきたので、移植しました。3ヶ月ぐらいで。 プラットフォームはモバゲー(スマホ) + ヤバゲーです。HTML5なのは、スマホとブラウザゲーで開発リソースを共通化したかったか
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
Canvas始めました – Canvas APIで遊んで（遊ばれて）わかったことをだらだらと
「Canvas始めました」でCanvasのローレベルAPIを使って投稿をしてきました。 昨年(2011)9月にあるところで”Canvas”について話す機会があり、その時にお見せしたデモ・コードを再検証がてら記事にしてきました。 その時もお話ししたのですが、HTML 5(Canvas)を使ったインタラクティブ・コンテンツ制作はかなり大変、だということをあらためて、本当にあらためて実感しました。 Canvas API操作はJavaScriptを使います。 私のJavaScriptスキルやCanvas APIへの理解が心もとないせいだと言われれば反論のしようも無いのですが、ご興味があれば長文ですが少しおつきあいください。 繰返しになりますが、Canvasでインタラクティブなものを作るのは大変！ 大変だと思った理由を書いていきます。 無知によるものもあるかもしれません、その時はぜひコメントなどで教
Perfume x Canvas
これは何？ Perfumeのモーションデータが公開されていたので、せっかくなのでJavaScriptで描画してやろうと思って書いてみました。 HTML5のCanvasを使って、配布されているそのままのBVHデータを読み込んで表示しています。 3Dの処理というか、座標変換は全部自前で書いています。 モーションブラーかけるとかっこいいね 宣伝 他にも色々作っていますが おすすめは 魔法陣! 更新履歴 2012/04/14 ソースコードの解説を書きました 2012/04/04 Gigazineで紹介されました！ 2012/04/02 顔を付けれるようにしました 2012/04/01 公開 他の作品
JavaScriptグラフィックス
TOPICS Web , HTML/CSS , JavaScript 発行年月日 2012年03月 PRINT LENGTH 288 ISBN 978-4-87311-528-3 原書 Supercharged JavaScript Graphics FORMAT PDF Webテクノロジーが進化したことによりJavaScriptグラフィックスを使ったリッチなWebアプリケーション開発が可能になりました。本書ではJavaScriptによる最新のグラフィックスプログラミングについて解説します。ゲームやDHTMLエフェクト、HTML5 Canvasなどの実例を通して、高性能なJavaScriptグラフィックスの実装方法を学びます。グラフィックスやアニメーションだけでなく、WebSocketを用いた通信、Google Chart Tools、スマートフォン向けのトピックまで幅広く扱います。日本語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
17352 – Origin of a Document from a data: URI should match HTML5
Sketch - WebGL Noise 210302a
GitHub - dameleon/oppai.js
How was frontpage screencast created?
ROXIK | Monalisa
BrowserQuest
Motion Tracking