イナヅマTVログ

randori

2013 年 5 月 21 日
by taikiken
0 comments

randoriはActionScriptをJavaScriptにコンパイルするframework

徳さんが深夜にTweetしてた”randori”が超興味津々。

Code Three.js in ActionScript with Randori Compiler

ActionScriptで作ったファイルをrandoriを使ってJavaScriptにしたよ、ていうエントリー。
three.jsを使用したDemoが公開されていました。
http://renaun.com/html5/as3threejs/

プロジェクトファイルも公開されています。
https://github.com/renaun/RandoriExamples

コンパイル手順なども詳しく書かれているのですが、frameworkでエラーが出ていてコンパイルはできませんでした。
できるのかな〜

公開デモファイルの中には簡単な HelloWorld プロジェクトも入っていたのですが、コチラはASからJSにコンパイルできました。
同梱されているshファイルをターミナルで走らせるだけです。
Continue Reading →

Sin wave

2013 年 5 月 21 日
by taikiken
0 comments

[JavaScript] DOMElementをSin波みたく動かしてみる

あるコンテンツ制作のための技術検証用テスト素材を公開しました。

DOMElementをSin波で動かしてみてるだけのチープなものだけど…
Sin波ってのは気持ちいい動きするなーなんて思ったりして。

http://www.inazumatv.com/demo/sin/
と、元になったパラメタいじれるの

Sin波を作ってるのはこんな感じ。
ActionScriptでも書いた記憶があります。

this._middle + Math.sin( this._angle ) * this._range;

Sin wave

three.js practice sphere

2013 年 5 月 20 日
by taikiken
0 comments

three.js – なんか見てると目が回るのができたので公開してみる

本当は違うものを作ってたんだけど、グルグル目が回りそうで気持ち悪くなりそうなのできたので途中だけどさらしておきます。

THREE.ParticleCanvasMaterial を使用しています。
PC: 4800
mobile: 900
particleを生成しています。

THREE.TrackballControls を使用しています。
マウスホイールで拡大・縮小、
ドラッグで回転させることができます。

見てたら目がチカチカしてきた…
て言うか、だいぶ気持ち悪い。

*閲覧注意

http://www.inazumatv.com/demo/three.js/sphere/three.js practice sphere

Chrome WebGL three.js

2013 年 5 月 19 日
by taikiken
0 comments

覚えた、Android ChromeのWebGLを有効にする方法

Android 4.x Chrome だと WebGL が見れるとうわさが…
早速three.jsのexampleを見たけど、Browserは対応してるみたいだけどGraphic boardが対応してないよ、みたいなメッセージが表示されて真っ黒な画面のまま。

ガセだったかと思ったけど、Chromeなので設定いじればどうにかなるかな〜と思い、URLに
chrome://flags
と入力してみた。
Continue Reading →

2013 年 5 月 15 日
by taikiken
0 comments

TextMate 2でメールアドレスをEncryptしてHTMLへ挿入

Sublime Text 2が人気なのは承知してはいますが、TextMate 2を起動しちゃうんだな〜
一時期なんでもこれで書いてた、Perl, PHP, SQL, HTML, CSS, JavaScript, ActionScript全部。
Rubyの端っこかじったのもTextMate 2だった。

今でこそ主役はIntelliJ IDEAになったけど、コードを参照したり、軽くテストしたりと毎日使ってます。

今さらなんだけど初めて気がついた機能があったのでメモっとく。
別にメニューの深い階層にあったわけでなく多分他の人は普通に使ってたはず…

メールアドレスをEncrypt

メールアドレスをHTMLに表示するとき、ソースにベタ書きしませんよね。
何らかの方法で、難読化と言うか、暗号化処理を施します。
Continue Reading →

cubic-bezier

2013 年 5 月 12 日
by taikiken
0 comments

CSS3, transition-timing-function: cubic-besierの4つの引数

CSS3でアニメーションするための方法のひとつ、transition。
easing は transition-timing-function プロパティに設定します。

以下の5種類が定義されています。
ease, linear, ease-in, ease-out, ease-in-out。

イージングのかかり具合が気になったのでGoogle先生にお聞きすると丁寧に説明してくれてるサイトが色々見つかりました。

roblaplaca.com

roblaplaca.com: Understanding CSS cubic-bezier

cubic-bezier(P1x,P1y,P2x,P2y)

Continue Reading →

WebCode

2013 年 5 月 11 日
by taikiken
0 comments

WebCodeは便利かもしれない

Facebookで教えてもらったWebCodeってアプリが便利かも。

WebCode WebCode - PixelCut s.r.o.
4,300円
$49.99なので、App Store はまだ円安の価格改定が行われていないようです。

書き出し(Export)できるのは
・HTML(Canvas) + JavaScript
・HTML5 + CSS3
・SVG
画像(PNG, TIFF)の書き出しもできます。
Continue Reading →

2013 年 5 月 9 日
by taikiken
0 comments

[JavaScript][CSS3] animation, transitionのEvent名をメモ

CSS3のanimation, transition のイベントを知りたかったのでメモっとく。

ネタ元
【CSS3 Animation】
MDN: CSS アニメーション
MDN: Detecting CSS animation support
w3school: CSS3 Animations

【CSS3 transition】
Stack Overflow: CSS3 transition events
MDN: CSS transitions
Continue Reading →

2013 年 5 月 6 日
by taikiken
0 comments

[JavaScript] fps(フレームレート)を設定したい

JavaScriptのloop処理はrequestAnimationFrameを使用すると実現できます。
requestAnimationFrame, cancelAnimationFrame はこう使ってる

requestAnimationFrameはモニタのリフレッシュレートに依存しているようで概ね60fpsになります。
そこまでのフレームレートが必要ない場合や、待機状態の時にもう少し低いレートでloopを実行したいことがありました。

可変にできる仕組みを作れないかと思い、一定間隔でサーバーのプログラムを呼び出すために以前作っていたコードを改造してみました。
Continue Reading →