Javascript driven engines for your HTML canvas

Javascript driven engines for your HTML canvas

I love to be impressed.

I mean, that’s one of the most pleasurable feeling that you can get while doing your job.
Today, I had the chance to experience this feeling again. Not only once but twice!
And I absolutely have to share this awesomeness with you.

Like you maybe, I’ve always thought that you had to be a math genius in order to create user interfaces that mimic the real world and its complex physics.

And you know what?
I’ve just been proven wrong.

感動するのが大好きです。
だって、仕事中では一番最高な気持ちでしょう!
そして今日、そんな気持ちを感じました。1回だけではなく、2回も!
ですから、そのすごい発見を是非共有したいと思います。

あなたも同意見かもしれませんが、私は今までずっと、数学の天才じゃないと現実の物理現象等を表現したUIの開発は出来ないと思っていました。

実は、そんな事はないと今日分かりました。

Matter.js, the 2D physics engine

Let me introduce you to Matter.js ( website : http://brm.io/matter-js/ ).

It’s a Javascript library that will allow you to create physical worlds on any <canvas></canvas> element.

Okay, better than words, here is an interactive demo I recommend you play with first :
http://brm.io/matter-js-demo/

Cool isn’t it!

Personally, I was totally baffled by the number of options/features the library provides.

It even works on mobile platforms.

And the objects’ behaviours are just mind boggling.

これからMatter.jsを紹介したいと思います(サイト:http://brm.io/matter-js/

<canvas></canvas>に物理エンジンを導入するためのライブラリーです。

言葉だけで足りませんので、とりあえずデモを見てください:
http://brm.io/matter-js-demo/

すごいでしょう!

正直、オプションや特徴の数の多さで感動しました。

モバイルでも対応できます。

そして、それぞれのオブジェクトの動きは本当に素敵です。

Babylon.js, a 3D engine made easy

Let’s now move from the 2D world to the 3D one, with a library called Babylon.js ( website : http://doc.babylonjs.com/ )

Here too, the demo will probably blow your mind : http://www.babylonjs-playground.com/
(don’t forget to look at the particles example!)

See how the code doesn’t look like it was written by Albert Einstein himself?

Of course there are other 3D libraries ( three.js , seen.js ), but this new one (for me) impressed me quite a lot today.

では、2Dから3Dへ移動しましょう。
Babylon.jsというライブラリーの紹介になります(サイト:http://doc.babylonjs.com/ )。

今回もデモがとても素晴らしい: http://www.babylonjs-playground.com/
(「particles」のデモを是非見てください)

ソースコードはそんなに複雑ではないでしょう!

もちろん、世の中他の3DのJSライブラリー(three.js、seen.js)がありますが、なんかこの新しい(?)ライブラリーを見つけた時に感動の影響でいきなり笑ってしまいました。

Conclusion

I’m a UI/UX Designer. Not a game designer.

That being said, I would love to find a smart/cool way to use these libraries in projects that have nothing to do with games.

I really have to think about it! … and maybe you can too 🙂

私はUI/UXデザイナーです。ゲームデザイナーではありません。

けれども、出来ればゲームに関係無いプロジェクトに上記のライブラリーをスマート/面白いやり方で導入したいです。

本気に考えないと!あなたも考えてみれば? 🙂

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント