WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
関連づいたオブジェクトを表現する高度なJavaScriptライブラリ·sigma.js MOONGIFT
sigma.jsはネットワーク図をはじめとする多数のノードが絡むグラフを描くライブラリです。 有機的な要素やネットワークが重なり合っているグラフを描きたい時に使えるのがsigma.jsです。Canvasタグを使って簡単にグラフを描き出します。 かなり密集したデモ。 ズームイン/アウトもできます。 こちらはアニメーション。動き続けています。 プラグインで独自拡張もできます。 もちろんズームできます。描画はCanvasを使っており、拡大しても奇麗です。 選択したノード以外を隠すデモです。 隠れました。 さらにマウスのある場所を膨らませるデモです。 sigma.jsはデータさえあれば容易に使えること、カスタマイズ性の高いこと、jQueryライクなイベントシステム、プラグイン対応、豊富なAPIなどが特徴になっています。 sigma.jsはJavaScript製、MIT Licenseのオープンソー
pure JavaScriptでアニメーションGIFを作る - 海峡
こんばんは、国民的スポーツのアニメGIFについてのニュースをお届けします。 今回はクライアントサイドのJavaScriptだけでアニメーションGIFを作る方法を共有させて頂きます。 ふつうアニメGIFを作ろうと思うとimagemagickなどを使ってサーバーサイドで処理させると思いますが、今回紹介するのはブラウザだけでアニメGIFを作る方法です。 jsgif antimatter15/jsgif · GitHub jsgifというJavaScriptでCanvasをアニメGIFに変換してくれる超絶便利ライブラリがあるのでこれを使います。 同名でアニメGIFをCanvasで制御再生できるライブラリがあって、そっちのほうが有名ですがそれとは別です。 どうやらAS3のライブラリをJSに移植したものみたいでソースコードを読もうとしても全然分からないけど、便利すぎるので全面の信頼をおいて使います。
Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
physicSketch
Drag your mouse on the canvas. If the starting and the ending points are far enough, the track becomes connected lines. Drag your mouse on the canvas. If the starting and the ending points are near each other, the track becomes a filled body. Note that you stroke must be convex. If not, the displayed line may not show its physical body.
OpenGLなにそれうまいの?? という人のためのWebGLの始め方 - hagino3000's blog
追記：例題の頂点シェーダーで何をしているか説明を追加しました 追記：動作環境の所修正しました、IE9では動作しません。 皆さんはじめまして、荒川智則です。この記事はJavaScript Advent Calendarの21日目です。 この記事では、Google I/OやFirefox Developers Conferenceで華麗なデモがバリバリ出てくるにもかかわらず、実際に使っている人が異常なまでに少ないWebGLについて書きます。対象読者はWebGLに興味があるor手を出してみたけどクソ難しそうだし既に諦めそう、という人です。 WebGLの概要 WebGLはOpenGL ES 2.0のグラフィックAPIをCanvas要素上で使える様にした物です。OpenGL ESはOpenGLの組み込み機器向けのサブセットで、iPhoneやandroid端末にも搭載されています。OpenGL ESな
有須子時計 (Kanasansoft Web Lab.)
何故かGreasemonkey配下では2DコンテキストのputImageDataとgetImageDataが動かないため、unsafeWindowを仕様しています。注意して下さい。 今回は、JavaScriptでかなりまじめに画像処理を行なっています。処理の大まかな流れは以下の通り。 事前準備 有須子の画像はBase64化されてGreasemonkey内に記述されています。 「0」〜「9」までの数字と「:」の文字は、赤いハロー効果を強く効かせた画像と弱く効かせた画像の各2種類、合計22枚を有須子画像と同様に保存しています。 (1) Base64の有須子画像をImageオブジェクト化 (2) Imageオブジェクトの有須子画像をCanvasオブジェクト化 (3) Canvasのコンテキストを取得し、三角関数を使って画像を歪ませた新たなCanvasを生成(歪み方は乱数で毎回変化する) (4)
いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況) - latest log
Opera の getContext("opera-2dgame") について追記しました。 fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。 uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。 uupaa-excanvas.js ver 0.31で、drawImage(canvas, ...) をサポートしました。 先ほど Windows XP 上で調べました。Mac や Linux だとちょっと違うかもしれません。 # レンダリングの実例はhttp://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/DEMO.htmで見れます。 凡例 5: 実装されており他のブラウザの描画結果と互換性がある(
Blob Sallad
Move around Blob with arrow keys or mouse. Split blob with h. Join blobs with j. Turn gravity on / off with g. Written by: bjoern.lindberg@gmail.com Javascript Source Code Get FireFox Ray Tracing is fun and easy Lately, I have been doing other things, such as this: It's a raytracer I have been working on for a while. Read more. Linux Version You can also download the source code for a Linux / SDL
John Resig - Processing.js
As a sort-of reverse birthday present I've decided to release one of my largest projects, in recent memory. This is the project that I've been alluding to for quite some time now: I've ported the Processing visualization language to JavaScript, using the Canvas element. I've been working on this project, off-and-on now, for the past 7 months - it's been a fun, and quite rewarding, challenge. The f
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
Saving canvas data to image file
This is a small library that lets you easily save a WHATWG canvas element as an imagefile. Files needed: canvas2image.js, base64.js Draw on the canvas with the pretty boxes below using the mouse, then click the "Convert" buttons to convert it to a downloadable image - or the "Save" buttons to download the image file directly. Using the WHATWG canvas element, you can create all sorts of cool gr
CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」:phpspot開発日誌
Saving canvas data to image file This is a small library that lets you easily save a WHATWG canvas element as an imagefile. CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」。 Flashを使わずに、ブラウザ上でお絵かきして、画像に変換できます。 次のように、Canvasに対して１行で変換できます。。 var oCanvas = document.getElementById("thecanvas"); Canvas2Image.saveAsPNG(oCanvas); Canvasの使えないブラウザでは当然、使うことは出来ませんが、描画したものをそのまま画像にする、というのは使いどころがありそうです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fabric.js Javascript Canvas Library
はてなブログ | 無料ブログを作成しよう
Engadget | Technology News & Reviews