サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Microsoft Edge では、SIMD(Single Instruction Multiple Data) をサポートしており、うまく活用すると、かなりの高速化が見込めるようです。 news.mynavi.jp ちょうど、JavaScript の 3D グラフィックスライブラリ「Babylon.js」でも v2.1 でSIMD に対応したようなので、サンプルを試してみました。 What’s new in Babylon.js v2.1 - Eternal Coding -HTML5 /JavaScript / 3D development - Site Home - MSDNBlogs Babylon.js によるSIMD サンプル Using babylon.js andSIMD.js 不思議な踊りなデモとなっています。MP が吸い取られる可能性があるのでご注意ください
序文 リックテレコムより出版の「明解 WebGL」内で参照しているオンラインサンプルの一覧です。 WebGL 学習に役立ててください。 オンラインサンプル一覧 第3章 03_01.最小構成のWebGLプログラム 03_02.三角形をWebGLで描く 03_03.三角形を変形させる 03_04.複数の三角形を描く 第4章 04_01.関数化して効率よく記述する 04_02.行列による座標変換 04_03.行列による座標変換（回転） 04_04.アニメーション付きで回転させる 第6章 06_01.立体モデル（球体）を描画する 06_02.インデックスバッファを用いた描画 06_03.頂点色で着色して描画する 06_04.深度テストを有効化する 06_05.拡散光によるライティング 06_06.拡散光によるライティングをフラグメントシェーダで行う 06_07.反射光によるライティング 06_08
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript -Wikipedia）Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス
[WebGL] d3.js を使って作品を並べてみるテスト jsdo.it 投稿1000本を記念して WebGL で作成したサンプル（約80個）を並べてみました。 ＜使い方＞ ・サムネイルをクリックすると作品が背景に表示されます。 ＜対応した点＞ ・Force Layout（力学モデルでグラフ描画するレイアウト）にて描画するよう対応 ・作品は iframe を使って背景に表示するよう対応 ＜更新履歴＞ 2017/04/08 リソースのパスを変更。 2015/03/25 新規作成 ＜表示対象の作品一覧＞ ■ [簡易版] 30行で WebGL を試してみるテスト - Fork tree http://jsdo.it/cx20/oaQC/tree ＜参考＞ ■ mbostock/d3 https://github.com/mbostock/d3 ■ D3.js - Data-Driven Doc
![[WebGL] d3.js を使って作品を並べてみるテスト - jsdo.it - Share JavaScript, HTML5 and CSS](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f02eb953f967e4b21d988aac8bc4c1718866fa236%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fjsdo-static-contents.s3.amazonaws.com%252Fimages%252Fcapture%252Fl%252FK%252FJ%252FlKJh.jpg%253Ft%253D1426920520&f=jpg&w=240)
面白いアニメーションを作るために物理演算エンジンを使いこなせればとても便利ですが、自力で物理演算に取り組むには高度な知識と技術が必要となります。そんな扱いの難しい物理演算を手軽に導入できるJavaScriptのAPIが「Matter.js」です。 Matter.js - a 2D rigid bodyJavaScript physics engine http://brm.io/matter-js/ Matter.jsでどんなことができるのかはデモを見れば一発で分かります。上記サイトの「Demo」をクリック。 すると、「Matter.js Physics Engine Demo」という物理エンジンのデモページが開くので、プルダウンメニューにあるデフォルトパラメータを指定して、「Reset」をクリックすればOK。2Dのアニメーションが再生され、Matter.jsでどんなことができるのかが直
We’re getting things ready Loading your experience… This won’t take long.
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still seeit on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to moveit around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
WebGL 総本山寄稿記事第二弾！ 今回は、jsdo.it などを中心に、尋常ではない量のサンプルやデモを多数公開されている @cx20 さんから寄稿いただきましたので掲載させていただきます。 今回のテーマはjavascript の圧縮。js1k と呼ばれる、1 キロバイト以下の容量でデモを作り完成度を競うイベントから、コード圧縮のテクニックについて抜粋して解説してくださっています。 WebGL の冗長なメソッド名が非常に短くなるというテクニックで、幅広く使える技術というわけではないかもしれませんが、コードを手入力で圧縮する方法としてすごく斬新なアイデアだなと思いました。 以下、寄稿記事です。 JS1k で見つけた超絶コード JS1k（js1k.com）という大会をご存じでしょうか。 この大会は、名前にあるように、1キロバイトのJavaScript でゲームやデモを競う大会になります。
![[WebGL寄稿] JS1k 作品で見つけた WebGL 超絶圧縮コードを紐解いてみる - WebGL 総本山](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fee7d48fba20ce406cd8413f678798b3d483e1dc1%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fwebgl.souhonzan.org%252Fi%252Fentry%252F113_001.jpg&f=jpg&w=240)
The live preview of Pens makes developing on CodePen fast and fun. Unfortunatelyit's easy tocreate infinite while, for or do loops inJavaScript. When youcreate an infinite loop in CodePen the browser tab hangs preventing you from being able to change the code. This makes infinite loops extremely frustrating. Viewing your public profile page isn't much different. The grid of Pens run each Pen
海外サイトですが CodePen.io というサイトをご存じでしょうか。 ジャンル的には「プログラミングによるお絵かき投稿サイト」でしょうか。日本の同ジャンルのサイトだと jsdo.it が有名ですかね。 ちなみに、規模的には、jsdo.it が 20万作品、codepen.io が 200万作品 と言うことで、ざっくりとですが、jsdo.it の約10倍での規模のサイトになります。 自分も始めて間もない（2カ月程度）ですが、そこそこ作品が集まってきたので、アクセス数の多い順から10作品5作品※を紹介したいと思います。 ※ ブログが予想以上に重いので、掲載を10→5作品にしました。他の作品は、お手数ですが、http://codepen.io/cx20/popular/ にてご覧ください。 See the Pen Test of TweenMax.js by cx20 (@cx20) on
違うスピードに見えますよね。動いたり止まったりして、お互いに歩調を合わせながら進んでるように見えますよね。 はい、残念〜。 この４つの四角形はすべて完全に同じタイミングで、かつ一定のスピードで動いています。ためしにPhotoshopでこのGIF画像を一コマずつ開いてガイドラインを引いてみたんですが、完全に同じ位置に並んでいました。 スピードが変化して見える秘密は白黒のボーダー。黄色い四角形は白いボーダーに差し掛かると、紺色い四角形は黒いボーダーに差し掛かるとスピードが遅くなるように見えるんですね。ただし、互いが近づいている間はちゃんと同じ速さに見えます。 四角形が生み出す視覚系イリュージョン。信じられないという方は、ぜひご自身の手で検証を！ Jesus Diaz - Gizmodo SPLOID［米版］ （Rumi）
2014.08.20 名前を変更しました。 wamml => MMLEmitter Web AudioAPI用のMMLイベントシーケンサーを作りました。 MMLEmitter-GitHub MMLEmitter - online playground 概要音楽プログラムを大雑把に説明すると 楽器 (音色) 譜面 (音程とタイミング) の二つの要素を解決するプログラムと言えます。MMLEmitter はこの 譜面 の部分のみを解決するライブラリです。AudioContext と MML を引数にシーケンサーを生成して起動すると、MML に記述したタイミングでイベントが発火するので、そこで音を出す処理を行います。Web AudioAPI 依存なので今のところ(サポートされないかぎり) IE では動作しません。あ、MML というのは楽譜を文字列で表現するための記法です。 MML - Mu
最近、Google から物理エンジンに関して面白そうなライブラリが登場したようなので jsdo.it で試してみました。Googleがオープンソースの2D物理エンジンLiquidFun 1.1をリリース このライブラリは「Box2D」（2D の物理エンジンライブラリ）に、流体シミュレーション関連の機能を拡張したライブラリとなっているようです。 （ちなみに、JavaScript 版のライブラリは、C++ 版をEmscripten でコンバージョンしたものとなっているようです。） WaveMachine Particles Soup Soup Stirrer Impulse Rigid Particles Elastic Particles Surface Tension Theo Jansen サンプルを動かしてみるだけでも、結構楽しいので、興味がある方は試してみては如何でしょうか。
このくるくる回る白いドット、実は真っ直ぐ往復してるだけなんだぜ2014.07.23 19:308,867 mayumine この白いドットの視覚トリックアニメーションは、赤い円の中心をくるくると周回しているように見えます。 でもよーく見てみると、違う。 白いドットひとつひとつの動きを見てみると、それぞれ円の直径を端から端まで真っ直ぐ往復しているだけなのです。 上の解説のGIF動画がわかりやすいですね。でも、解説用の｢直径の線｣が消えると、やっぱりくるくる回っているように見える。うーん、不思議！ Jesus Diaz - Gizmodo SPLOID［原文］ （mayumine）
以前、2D 物理演算でゴゴゴとドドドを落下させてみましたが、3D 物理演算でも試してみました。JavaScript の 3D 物理演算ライブラリとして ammo.js（Demo） Cannon.js（Demo） oimo.js（Demo） あたりが有名なようです。 今回は、Cannon.js を使ってみました。 ゴゴゴとドドド ゴゴゴのコード（抜粋） 基本形のオブジェクト（立方体や球体など）を使う場合と比較して、複数のオブジェクトをまとめて物理演算する場合は、多少ハードルが高い（複雑さが増す）のですが、Cannon.js には、その問題を解決する仕組みが用意されているようです。 Cannon.js の場合、CANNON.Compound() を使うことで、複合オブジェクトとして使えるようです。 demo.addScene("GOGOGO", function () { var world
昨日、Tokyo WebGL Meetup でレイマーチングなるものを教えてもらったのでスライドの内容を試してみました。 以下のサンプルは、 全能感UP! GLSLで進めレイマーチング « demoscene.jp と GLSL ray marching -フラグメントシェーダでレイマーチング- のスライドを見ながら作成しました。 その１ 「シェーダの基本となるコード」の実行結果 スライド 61 / 120 の「シェーダの基本となるコード」 その２ 「シェーダ内で ray (レイ)を定義」の実行結果 スライド 64 / 120 の「シェーダ内で ray (レイ)を定義」 その３ 「球体のサイズと distance function」の実行結果 スライド 76 / 120 の「球体のサイズと distance function」 その４ 「法線を求める関数を定義」の実行結果 スライド 87
We’re getting things ready Loading your experience… This won’t take long.
ここ数日、2D 物理演算がマイブームです。JavaScript の 2D 物理演算ライブラリとして「box2dweb」をサンプルをよく見かけますが、 シェイプと剛体を個別に作成する必要があり、個人的には、ちょっと使いにくい印象です。 そこで、比較的、最近登場した物理演算ライブラリ「Matter.js」を使ってみることにしました。 このライブラリは機能的に「box2dweb」と遜色なく、後発なだけに、API も整理されていて分かりやすいです。他のライブラリに比べてコンパクトな点も特徴です。 ゴゴゴとドドド ゴゴゴのコード（抜粋） シェイプの Path はSVG ライクに記述する仕様のようです。 for (var i = 0; i < 3; i++) { var x = 100 + i * 10; var y = 100 - i * 100; varshape = { label: 'S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
