Robert Penner's Easing Functions
A collection of swappable functions that add flavor to motion. Visualize Easing Cheat Sheet for jQuery, CSS, SCSS Easing Function Generator Learn Tweening chapter of my book Ease Yourself Into Animation (great preso) Understanding Easing: Explaining Penner's Equations Interpolation Tricks Code JavaScript jQuery Easing Plugin CSS, SCSS, LESS ActionScript 3.0 (single class) ActionScript 3.0 (classes
イージング処理の計算式 - 強火で進め
ちょっと自前でイージング処理を書く必要に迫られ、調査。 こちらに計算式を書かれているサイトを発見。イージングって色々な種類が有るんですね。 Easing Equations http://gizma.com/easing/ サイトにはJavaScripでの実装も記載されています。JavaScriptで使いたい場合はこちらのサイトのコードを参考にすると良いでしょう。 こちらのサイトで紹介されているイージングは以下のもの Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular グラフで見るとそれぞれどの様な曲線になってるかを知りたかったのでNodeBoxでグラフにしてみました。 引数はそれぞれ以下を設定。 t : 0〜1 b : 0 c : 100 d : 1 因みに、引数はそれぞれ以下のデータのなります。 t : 時間(
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
Atsushi's Homepage 〜 Unity で組んでみる
ゲームエンジン Unity の使い方の説明です (2011/10/3 新規作成) (2013/9/4 最新版にあわせて修正)。 Unity は おそらく近年では最も有名なゲームエンジンの一つで、 ワンソースから iOS, Android, PC, Web プレイヤー、 PS3、Wii、Xbox360 へと出力でき、物理演算や 3D グラフィック機能、 エディタも包括しています。 始めは iOS 向けがメインでしたが、使いやすさや 商用のゲームエンジンでは破格の安さなどで、 2010年あたりからゲーム機向けも含めて急速にシェアを拡大してきました。 Unity は基本機能は無料で使うことができ、誰でも簡単に短時間で 相応のクオリティのゲームを作ることができます。 無料版は制限がきつすぎて実質あまり使えないと言うこともありません。 また、Assert Store を介して、グラフィックデータや
射影変換(ホモグラフィ)について理解してみる - デジタル・デザイン・ラボラトリーな日々
「3Dを基礎から勉強する フラットシェーディング」の記事を書いて、次は立方体のテクスチャマッピングに取り掛かろうと思ったんですが、ふとアフィン変換で台形は出来ないってことを書いたことを思い出したんです。テクスチャマッピングについては、「テクスチャマッピングを理解してみる」で三角形に分割することで台形にすることが出来たのですが、分割しなくても台形にするには「射影変換(ホモグラフィ)」すれば出来ることが分かりました。 早速、射影変換の調査に取り掛かったのですが、これが自分の理解度が足りないのか1ヶ月以上経って、やっとこうして記事を書こうと思うところまで理解が進んだところです。 まだ理解が途中段階であるため、理解した現状まで書いていきます。 射影変換(ホモグラフィ)には、下記の変換式があります。 変換式 変換式は以下の通り。 u = (x*a + y*b + c) / (x*g + y*h +
javascriptでのAR - PHP,MySQL,Flex,JSな日々＋イラストとか
javascriptでのARをしてみたのでちょっとメモ。 サンプルはこちら http://moeten.info/js/20140713_arTest/ 上記ページをスマートフォンのChromeなどで表示して、下のマーカーを写すと認識されます。 ソースコードはこちら index.html（ほとんどjs-aruco - JavaScript library for Augmented Reality applications - Google Project Hostingのソースのままです） <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http
フロントエンド開発の３ステップ（npmことはじめ） - Qiita
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
Blenderとthree.jsを使って行うモーフィングアニメーション | KnockKnock
今回は、Blenderでモデリング、アニメーションをつけて、JSON形式で書き出して、three.jsでJSONデータを読み込んで、モーフィングアニメーションを再現する流れを、ざっくりと説明出来ればと思います。 ソースコードは、以下よりダウンロード頂けます。 ソースコード モデリングとアニメーションの作成にBlenderを使っています。Blenderはオープンソース（無償）の3DCG制作ツール で、現時点での最新バージョンは2.72bになります。3DCG制作ツールはMayaや3dsMaxやLightwave3D等、高機能なプロ用ソフトが多くありますが、どれもそれなりの価格になります。Webコンテンツでの利用においては、レンダリングはあくまでブラウザ上なので、使う機能と言えば、せいぜいモデリングとアニメーション程度になり、高価で高機能な3DCG制作ツールは、オーバースペックだと思います。Bl
剛体シミュレーションをまとめてみる - Qiita
今度やる勉強会に向けて、剛体シミュレーションの概要をまとめていきます。 とはいえ、本格的に説明はできないので（理解不足で）、概要と今、自分が理解している範囲をまとめていきます。 知識としては、書籍を読んで把握した範囲なので若干偏りがあると思います。参考にした書籍は一番下に掲載しています。 （なので、なにか間違っている点などあればコメントいただけるとうれしいです） こちらの理論などを元に、実際に2Dの物理エンジンを自作してみました。その過程で参考にしたものや躓いた点などをまとめた記事も書いているので、こちらもよかったら参考にしてみてください。→ 自作2D物理エンジンを作った話 概要 剛体シミュレーションは「パイプライン」という、各種の計算を行うステージを段階的に分けたものを通って、与えられた力（例えば重力）からの位置計算が行われます。 それぞれのステージの概要は以下の通りです。 シミュレーシ
Three.js マテリアルのプロパティ（高度な質感表現） - Three.jsを使って、作ってみた
今回は、Three.jsの「マテリアル（材質）のプロパティ」について書きます。 マテリアル（材質）のプロパティを設定することで、さまざまな質感を表現することができます。 設定のやり方もとても簡単です。この辺りはThree.jsの良い所の一つだと思います。 ※マテリアル（プロパティ）って、何？？？ マテリアルのプロパティの種類は、豊富にあります。 軽く上げると、 color specular shininess ambient emissive metal side transparent opacity blending depthTest これ以外にも、まだまだあります（笑） 今回は、これらをやりたいと思います。 side color ambient specular shininess metal 残りは、また今度、書きます。 ①side これは、物体（ジオメトリ）の表面だけを描画する
CANNON.jsを使って3Dに物理演算を持ち込む | CSS-EBLOG
CANNON.jsを使って3Dに物理演算を持ち込む カテゴリ：WebGL 2013年12月 8日 09:09 さて、今回はGraphical Web Advent Calendar 2013の第7日目です。 Graphical Webということで、前回、スマホでも動く物理演算で転がる3Dサイコロを作ったのでその解説で紹介したサイコロのデモで使用したCANNON.jsについて書いてみたいと思います。 CANNON.jsとは CANNON.jsは、物理演算を提供してくれるいわゆる「物理エンジン」ライブラリです。 3D向けの物理エンジンライブラリはいくつかあり、有名なのは「ammo.js」というものがあります。 これは、物理エンジンの（おそらく）デファクトスタンダードとも呼べる「Bullet（弾丸）」というエンジンがあり、それをJavaScriptに変換したものです。 余談ですが、Bulletに
CANNON.jsについてのメモ - Qiita
CANNON.jsとは？ CANNON.jsは、JavaScript製の軽量な物理エンジンです。 Three.jsにインスパイアされていて、Three.jsの構文に非常に似ています。 物理演算結果は、以下のように簡単にThree.jsのオブジェクトにコピーすることができるようになっています。 cannonObj.position.copy(threeObj.position); cannonObj.quaternion.copy(threeObj.quaternion); cannonObj.addEventListener("collide", function(e) { alert("The object just collided with the ground!"); console.log("Collided with body:", e.with); console.log("
三次元物理演算エンジン、Cannon.jsを使ってみた。 | KnockKnock
以前、Physijs を使って、three.jsの三次元物理演算プラグインPhysijsを使ってみた。という記事を上げましたが、今回は同じ三次元物理演算ですが、多機能でThree.jsとも相性がいいCannon.jsを使ってみました。 GitHubを見てみると、2014年9月にv0.6.0にアップデートしているようです。10月も絶賛コミット中みたいですね。以前見たときよりもサンプルが増えていますし、以前なかったドキュメンテーションも追加されました。アップデートに伴って、仕様の若干の変更がありましたので、現時点でネット上にあるCannon.jsのコードは、v0.6.0ではそのままでは動きませので、ご注意ください。 /demos/内にコードサンプルは沢山あるのですが、実は非常に使いづらいです。というのも/build/cannon.demo.jsというデモ用にカスタマイズされたJSのコードありき
Raycasterの当たり判定で壁をつくる - not good but great
demo W/A/S/Dまたは方向キーで移動、スペースキーでジャンプして階段を登ることが出来る。階段の床と壁の当たり判定を理解することに苦労した。 Rayを用いた3Dの当たり判定 Rayを用いて判定する。参考ページを見てもらうと理解しやすいと思う。 日記 | ヨモツネット http://tmlife.net/programming/javascript/threejs-picking.html ざっくり言うと(説明するのが難しいw)、二次元平面上の一点から奥へ光線(Ray)を引いて、Rayの延長上に物体があるかどうか判定する。 //レイ ray = new THREE.Raycaster(); //床方向 ray.ray.direction.set(0,-1,0); raywall = new THREE.Raycaster(); //壁の手前 raywall.ray.direction.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery-easing/jquery.easing.js at master · danro/jquery-easing
Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
Release 0.5.4 · google/web-starter-kit
Karim Maaloul on CodePen
