AlteredQualiaWebGL experiments. Computer graphics. Information visualization. Contact. Twitter. GitHub.
ブラウザでビジュアルテストをするreftest-runnerを作った
概要 reftest-runnerというブラウザで描画内容やレイアウトといった表示結果をテストするためのライブラリを作りました。 要素技術としてはブラウザ、WebDriver API、レンダリングキャプチャ、画像Diffという感じです。 azu/reftest-runner 時間が無い人向け 以下のスライドに簡単にreftest-runnerやreftestとはなにか、どういうユースケースがあるのかが書いてあります。 reftest-runner-overview.pdf reftestとは reftest(Referrence Test)とは、2つのHTMLの表示結果(スクリーンショット)を比較することで表示結果が意図したものかをテストする方法です。 用意するHTMLとして以下の2種類を1セットとして用意して利用します。 テスト用HTML テストしたい機能を使って実装したHTML リファ
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。 デモの作り方 冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。 さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ
Peity • progressive <svg> pie, donut, bar and line charts
Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari. Download version 3.3.0 Uncompressed 8.8Kb jquery.peity.js Minified 3.6Kb (+gzipped 1.7Kb) jquery.peity.min.js Source github.com/be
arbor.js
about arbor Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whate
Node.js + Websocket Canvas共有システムが時折ダウンする問題について
2010/10/27にCanvas共有Websocketサーバーを作動させて以来、サーバーがのべ三度にわたりダウンするという問題が発生していました。原因の究明を進めていたところ、一部ダウンする状況の再現及び対処法を突き止めましたのでご報告申し上げます。なお、ダウン中にアクセスされ、Canvas共有を体験なさることが出来なかった読者の方々には深くお詫び申し上げます。これからもダウンの折には早急な原因の解明と対処に努めますので、どうか今後ともよろしくお願いいたします。 サーバーダウン時のエラー出力の内容 node.js:63 throw e; ^ Error: ECONNRESET, Connection reset by peer at Stream._readImpl (net:304:14) at IOWatcher.callback (net:454:24) at node.js:76
nude.js | Nudity detection with JavaScript and HTMLCanvas
About nude.js is a JavaScript implementation of a nudity scanner based on approaches from research papers. HTMLCanvas makes it possible to analyse image data and return whether it's nude or not. The script only detects nudity, the rest of the programming logic (image swap/auto-save ;-) /whatever) belongs to the programmer. Update: First improvements and next steps of nude.js (Article) The real wor
xc.js - Canvas Game Framework
xc.js is a framework for HTML Canvas games in Javascript. It's simple and fun to use and you can even try it out right here in your browser. But that's not all. xc.js also runs on other platforms. You can write your games in Javascript and run them in all sorts of cool places (like on your phone!). Try xc.js now! You can download xc.js and run it on Windows, Linux, or OS X. Or, even better, try it
javascript – badassJs
현대 웹 환경에서 부상하는 보안 위협 자바스크립트 기반 웹 애플리케이션이 복잡해지면서 새로운 형태의 보안 취약점들이 지속적으로 발견되고 있다. 특히 Node.js와 같은 서버사이드 런타임 환경에서는 클라이언트 영역을 넘어선 시스템 레벨 공격이 가능해졌다. 이러한 변화는 단순한 XSS나 CSRF 방어를 넘어서는 종합적인 보안 전략을 요구한다. 최근 npm 생태계에서 발생한 대규모 공급망 공격 사례들은 더보기 웹 애플리케이션 응답성의 기술적 전환점 사용자가 웹 페이지에서 버튼을 클릭했을 때 몇 초간 화면이 멈춘 채 대기하는 경험은 이제 과거의 일이 되었다. 현대 웹 애플리케이션에서는 데이터를 불러오는 동안에도 다른 요소들과 상호작용할 수 있으며, 복잡한 계산 작업이 진행되는 중에도 인터페이스가 부드럽게 반응한다
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
canviz - Google Code
http://flippinawesome.org/2013/09/23/creating-a-realistic-rain-effect-with-canvas-and-javascript/
Redirecting…
humble software development - flotr
哈尔滨勘堆建材有限公司
Google Code Archive - Long-term storage for Google Code Project Hosting.
Welcome!
JavaScript InfoVis Toolkit - Interactive Data Visualizations for the Web
GitHub - mrdoob/three.js: JavaScript 3D Library.
