JavaScriptで最近試そうとしてるライブラリ - mizchi's blog
を晒すことで俺以外が試してくれるかもしれない！というのは置いといて、現在の知見です。 MV* React | A JavaScript library for building user interfaces Facebook製データバインディング。jsxという謎拡張子に目をつむれば未来を感じる設計。とにかく生DOM触りたくないという気概を感じる。 Welcome - Polymer Google製WebComponent。WebComponent使うならこれが有望株っぽい。 component/component MV* とはちょっと違うけどCSS/JavaScript/HTML まとめてライブラリにできる。JavaScript以外もライブラリに含む際は有望。 何がしたいかはt_wadaさんがまとめてくれたtogetterみてください。Web フロントエンド開発用パッケージマネージャ c
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編 | TM Life
tmlib.js のハッカソンイベントをやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います. 今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました. 怒濤って何？って方はこちらをどうぞ enchant.js 怒涛の 100 tips CoffeeScript 入門! 怒濤の 100 サンプル!! tmlib.js で定義されている tm.graphics.Canvas クラスは HTML5 Canvas を拡張したものなので HTML5 Canvas の機能は基本的にそのまま使えます. なので HTML5 Canvas の勉強にもなるかと思います. また, それに加え星型や多
CreateJS始める前に、いろんな記事を集めてみよう - Qiita
CreateJSをやってるひとのうわさによると Flasherならドキュメント読めばなんとなくわかるんだって。 でもやっぱりいろいろ読んでおきたいから、まとめておこう。 公式、ドキュメント CreateJS デベロッパーセンター | Adobe Developer Connection [ADC] 公式。ドキュメント、チュートリアルへのリンクなど。 Docs - CreateJS 過去のバージョンを含めたすべてのドキュメントへのリンク できること把握系記事 リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog CreateJSとは何か的に俯瞰する記事。 CreateJSでゲームを作った感想 | Coremind いろいろ注意すべき点が書いてある akihiro kamijo: CreateJSアーカイブ とりあえずざっ
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（３／３）～
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
HTML5やJavaScriptでゲームが作れる！ ゲーム制作のためのアプリケーション、フレームワーク、ゲームまとめ
HTML5で誰でもゲームが作れる！？ 最近webで何かを作るためのフレームワークというものがどんどん出てきており、ゲームにしろwebサイトにしろ、さわりを学べばそれを作る組み合わせだけなら抑えることが可能になってきています。 それを実際に使いこなし、またそれで作るものの内容がしっかりしていなければ何人もの人が使ったり遊んでくれるものにはならないわけですが…。優れた構想を持ったクリエイターが自力でゲームを作る、ということは実際に出来るようになっていると言えます。 今回は、それを実現するフレームワークやゲームエンジンと言われているものをまとめて紹介します。プログラミングやCanvasについてはちょっと知識が浅いので、調べたことをまとめるに留めています。今後の勉強課題ということで…。 ゲームエンジンまとめ よくHTML5でゲームが作れる、JavaScriptゲームエンジンというように紹介されるも
アニメーションの美しいポートフォリオサイト – creamu
HTML5でサイトを作りたい。 そんなときに参考になるのが、「S5 Style」。アニメーションの美しいポートフォリオサイトです。 shogo Tabuchiさんというデザイナーの方のサイトですね。アーキタイプさんにいらっしゃるようです。 Processing.jsを使って、canvas内に描画しているようですね。Processing.jsは、jQueryの作者であるJohn Resig氏が公開したライブラリで、amachangさんの以下のエントリーに詳しく書かれています。 ブラウザでお絵描きプログラミング！ Processing.js 登場！ 簡単な描画ならすぐにできるようですね。ソースも読みやすいです。 サイトには音もついていて、サウンドデザイナーのCubic Roomさん作とのことです。こういうコラボは素敵ですね。 Flashサイトではない、新しい技術の参考になると思うので、一度見て
Processing.jsを利用してアニメーション&インタラクティブなWebページ背景をつくってみた : だらっと学習帳
Processing.jsを利用して、Webページで使えるアニメーションな背景をつくってみました。 花のアニメーションな背景ページ 花がくるくる回りながら、浮かびあがったり透明になったりします。 色が変わるインタラクティブな背景ページ 四角をクリックすると、背景に浮かんでいる円がそれぞれの色に変化します。 このようなインタラクティブな背景ページも作ることができます。 設置方法について解説していきます。 まずはhead内についての記述です。 1、Processing.js本体を読み込む<script src="Processing.js本体へのパス"></script> Processing.js本体を読み込みます。 パスを正しく書いてください。 2、canvasを画面いっぱいに表示するためにJSとCSSを記述 canvasを全画面に表示する | 2GRAVITY こちらのページを参考に、J
CBCNET | Topic » HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章）
HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章） 本記事はビー・エヌ・エヌ新社より刊行された「ジェネラティブ・アート」をスケッチするための解説書『ジェネラティブ・アート―Processingによる実践ガイド』の著者であるマット・ピアソン氏がCreativeApplications.Netでのスピンオフ企画として寄稿した原稿の翻訳版となります。「ジェネラティブ・アート」に興味がある方はぜひ本と合わせて御覧ください。 「ジェネラティブ・アート Processingによる実践ガイド」についてはこちらから。 This article is a Japanese translation of Matt Pearson’s Tutorial at CreativeApplications.Net, thanks
CreateJSを使ってみよー
こんにちは。相変わらずドラクエ10三昧の日々を過ごしている橋本です。 さて、今日はHTML5でリッチなコンテンツを簡単に作成することができるJavascriptライブラリ「CreateJS」について、サンプルを交えつつ簡単に使い方を見ていきたいと思います。 そもそもCreateJSとは何かといいますと、以下の4つのライブラリ、ツール群をパッケージングしたものがCreateJSとなります。 EaselJS Canvasを簡単に扱うためのライブラリ TweenJS トゥイーンやアニメーションを扱うためのライブラリ SoundJS 音声データを扱うためのライブラリ PreloadJS 外部ファイルの読み込みを制御するためのライブラリ 今回はこの中でも、EaselJSとTweenJSの使い方についてサンプルコードを書きながら見て行きたいと思います。 SoundJSとPreloadJSについては、音
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
Box2DJS - Physics Engine for JavaScript
Click this image to start demos. Note that it takes long time to load the page. Left-click to create an object. Right-click to show next example. What's this Box2DJS is a JavaScript port of Box2D Physics Engine. To tell the truth, this is converted from Box2DFlashAS3_1.4.3.1 in an automatic manner. (The reason why not Box2DFlashAS3_2.0.0 based is simply because I overlooked the renewal.) How to us
<canvas>タグで図形を描く－HTML5リファレンス
■<canvas>タグで図形を描く 今までウェブページ上で図形を描くには、 PNG・ JPEG・ GIFなどの画像に置き換えるか、 Flash などのプラグインデータを埋め込むのが一般的でした。 HTML5では、2Dのグラフィックスを描く、<canvas>要素が新たに追加されています。 <canvas>を使用することで、標準のHTMLとJavaScriptだけで、 グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。 HTMLの部分は大変シンプルです。
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2013/10/20131017.php
UNTITLED
Processing.js drug and drop
Amazon.co.jp: HTML5 インタラクティブ表現ガイド ~HTML5、CSS3、Canvas、CreateJS、JavaScript~: 池田泰延: 本
