【重要】サービス終了のお知らせ - jsdo.it - share JavaScript, HTML5, CSS - developers blog
いつもjsdo.itをご利用いただきまして誠にありがとうございます。 ご利用いただいている皆さまに大切なお知らせがございます。 2010年より運営してまいりましたjsdo.itですが、サービスの利用状況を鑑みて、2019年10月31日（木）15:00 をもちまして、サービスを終了させていただくこととなりました。 サービス終了に伴い、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任を持って消去させていただきます。 サービスの終了までのスケジュール、これまで投稿していただいたコンテンツの取り扱いにつきましては以下の記載をご確認ください。 ◆サービス終了までのスケジュール 2019年10月31日（木）15:00 サービス終了 全データ消去 ※ご注意※ 2019年10月31日のサービス終了と同時に、jsdo.itへのアクセスは一切行うことができなくなります。 サービス終了間
Microsoft Edge で SIMD を試してみる - CX's Hatena Blog
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 - MSDN Blogs Babylon.js による SIMD サンプル Using babylon.js and SIMD.js 不思議な踊りなデモとなっています。MP が吸い取られる可能性があるのでご注意ください
明解 WebGL オンラインサンプルインデックス
序文 リックテレコムより出版の「明解 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
初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ16選 - paiza times
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス
[WebGL] d3.js を使って作品を並べてみるテスト - jsdo.it - Share JavaScript, HTML5 and CSS
[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](https://cdn-ak-scissors.b.st-hatena.com/image/square/02eb953f967e4b21d988aac8bc4c1718866fa236/height=288;version=1;width=512/http%3A%2F%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2Fl%2FK%2FJ%2FlKJh.jpg%3Ft%3D1426920520)
2次元物理計算エンジンをブラウザで実現する「Matter.js」
面白いアニメーションを作るために物理演算エンジンを使いこなせればとても便利ですが、自力で物理演算に取り組むには高度な知識と技術が必要となります。そんな扱いの難しい物理演算を手軽に導入できるJavaScriptのAPIが「Matter.js」です。 Matter.js - a 2D rigid body JavaScript physics engine http://brm.io/matter-js/ Matter.jsでどんなことができるのかはデモを見れば一発で分かります。上記サイトの「Demo」をクリック。 すると、「Matter.js Physics Engine Demo」という物理エンジンのデモページが開くので、プルダウンメニューにあるデフォルトパラメータを指定して、「Reset」をクリックすればOK。2Dのアニメーションが再生され、Matter.jsでどんなことができるのかが直
[js1k] GL Dragon Flight（解析結果） - jsdo.it - Share JavaScript, HTML5 and CSS
[js1k] GL Dragon Flight（解析結果） この作品のポイントは、以下の圧縮用コードにあるかと思います。 ＜圧縮用コード＞ for(i in g) { g[i[1]+i[7]+i[i.length-1]]=g[i]; } この処理は長い WebGL の API を3文字化することで効率的なコード圧縮を実現しているようです。 圧縮前： bindBuffer(ARRAY_BUFFER, createBuffer()); 圧縮後： ifr(RUR, rur()); ＜対応表＞ RUR : ARRAY_BUFFER = [34962] ESR : VERTEX_SHADER = [35633] RES : TRIANGLES = [4] rur : createBuffer = [function createBuffer() { [native code] }] rrm : cr
![[js1k] GL Dragon Flight（解析結果） - jsdo.it - Share JavaScript, HTML5 and CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/97970a9eaf3c76f11ee265079d0530b11180f683/height=288;version=1;width=512/http%3A%2F%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2F5%2Fi%2Fv%2F5ivN.jpg%3Ft%3D1420896880)
WebGL Water
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 see it 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 move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
[WebGL寄稿] JS1k 作品で見つけた WebGL 超絶圧縮コードを紐解いてみる - WebGL 総本山
WebGL 総本山寄稿記事第二弾！ 今回は、jsdo.it などを中心に、尋常ではない量のサンプルやデモを多数公開されている @cx20 さんから寄稿いただきましたので掲載させていただきます。 今回のテーマは javascript の圧縮。js1k と呼ばれる、1 キロバイト以下の容量でデモを作り完成度を競うイベントから、コード圧縮のテクニックについて抜粋して解説してくださっています。 WebGL の冗長なメソッド名が非常に短くなるというテクニックで、幅広く使える技術というわけではないかもしれませんが、コードを手入力で圧縮する方法としてすごく斬新なアイデアだなと思いました。 以下、寄稿記事です。 JS1k で見つけた超絶コード JS1k（js1k.com）という大会をご存じでしょうか。 この大会は、名前にあるように、1キロバイトの JavaScript でゲームやデモを競う大会になります。
![[WebGL寄稿] JS1k 作品で見つけた WebGL 超絶圧縮コードを紐解いてみる - WebGL 総本山](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee7d48fba20ce406cd8413f678798b3d483e1dc1/height=288;version=1;width=512/https%3A%2F%2Fwebgl.souhonzan.org%2Fi%2Fentry%2F113_001.jpg)
Stopping Infinite Loops by Alex Vazquez on CodePen
The live preview of Pens makes developing on CodePen fast and fun. Unfortunately it's easy to create infinite while, for or do loops in JavaScript. When you create 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 に投稿してみるテスト - CX's Hatena Blog
海外サイトですが 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）
Web Audio API用のMMLイベントシーケンサー wamml です - 音の鳴るブログ
2014.08.20 名前を変更しました。 wamml => MMLEmitter Web Audio API用のMMLイベントシーケンサーを作りました。 MMLEmitter- GitHub MMLEmitter - online playground 概要 音楽プログラムを大雑把に説明すると 楽器 (音色) 譜面 (音程とタイミング) の二つの要素を解決するプログラムと言えます。MMLEmitter はこの 譜面 の部分のみを解決するライブラリです。AudioContext と MML を引数にシーケンサーを生成して起動すると、MML に記述したタイミングでイベントが発火するので、そこで音を出す処理を行います。Web Audio API 依存なので今のところ(サポートされないかぎり) IE では動作しません。あ、MML というのは楽譜を文字列で表現するための記法です。 MML - Mu
JavaScript で流体シミュレーションを試してみるテスト - CX's Hatena Blog
最近、Google から物理エンジンに関して面白そうなライブラリが登場したようなので jsdo.it で試してみました。 Googleがオープンソースの2D物理エンジンLiquidFun 1.1をリリース このライブラリは「Box2D」（2D の物理エンジンライブラリ）に、流体シミュレーション関連の機能を拡張したライブラリとなっているようです。 （ちなみに、JavaScript 版のライブラリは、C++ 版を Emscripten でコンバージョンしたものとなっているようです。） Wave Machine Particles Soup Soup Stirrer Impulse Rigid Particles Elastic Particles Surface Tension Theo Jansen サンプルを動かしてみるだけでも、結構楽しいので、興味がある方は試してみては如何でしょうか。
このくるくる回る白いドット、実は真っ直ぐ往復してるだけなんだぜ
このくるくる回る白いドット、実は真っ直ぐ往復してるだけなんだぜ2014.07.23 19:308,298 mayumine この白いドットの視覚トリックアニメーションは、赤い円の中心をくるくると周回しているように見えます。 でもよーく見てみると、違う。 白いドットひとつひとつの動きを見てみると、それぞれ円の直径を端から端まで真っ直ぐ往復しているだけなのです。 上の解説のGIF動画がわかりやすいですね。でも、解説用の｢直径の線｣が消えると、やっぱりくるくる回っているように見える。うーん、不思議！ Jesus Diaz - Gizmodo SPLOID［原文］ （mayumine）
Three.js + Cannon.js でゴゴゴとドドドを物理演算してみるテスト - CX's Hatena Blog
以前、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
GLSL ray marching を試してみるテスト - CX's Hatena Blog
昨日、Tokyo WebGL Meetup でレイマーチングなるものを教えてもらったのでスライドの内容を試してみました。 以下のサンプルは、 全能感UP! GLSLで進めレイマーチング « demoscene.jp と GLSL ray marching -フラグメントシェーダでレイマーチング- のスライドを見ながら作成しました。 その１ 「シェーダの基本となるコード」の実行結果 スライド 61 / 120 の「シェーダの基本となるコード」 その２ 「シェーダ内で ray (レイ)を定義」の実行結果 スライド 64 / 120 の「シェーダ内で ray (レイ)を定義」 その３ 「球体のサイズと distance function」の実行結果 スライド 76 / 120 の「球体のサイズと distance function」 その４ 「法線を求める関数を定義」の実行結果 スライド 87
Mozilla、クロスプラットフォームのWebGLゲームエンジン「PlayCanvas Engine」公開 | OSDN Magazine
Mozillaは6月4日、オープンソースのクロスプラットフォームのゲーム構築用JavaScriptライブラリ「PlayCanvas Engine」をリリースした。「世界で最も容易に利用できるWebGLゲームエンジン」としている。 PlayCanvas Engineは3Dグラフィックを利用したゲーム開発向けのJavaScriptエンジン。Webブラウザ上で利用できる3DグラフィックスAPIである「WebGL」を利用する。プロジェクトは、WebGLがデフォルトで有効となった「Firefox 4.0」のリリース（2011年3月）後に立ち上げられており、パートナーとしてMozillaのほか、米ARMやゲーム開発を手がける米Activisionが名を連ねている。 対応OSはWindowsおよびMac OS X、Android、iOSで、グラフィックスのほか物理演算エンジンやアニメーション、2D/3D
Matter.js でゴゴゴとドドドを物理演算してみるテスト - CX's Hatena Blog
ここ数日、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; var shape = { label: 'S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL
