Konva.js - JavaScript 2d canvas libraryKonva.js - HTML5 2d canvas js library for desktop and mobile applications npm install konva
glfx.js - An image effects library for JavaScript
Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone. There are two caveats to glfx.js. First, WebGL is a new technology that is only available in the latest browsers and it will be quite a while before the majority of users have it. Second
Sketch.js - Simple Canvas-based Drawing for jQuery
Sketch.js is an easy-to-use jQuery plugin that allows you to create canvases upon which visitors can draw. The code is partially inspired by William Malone's drawing app tutorial as well as CanvasPaint. Installation To use Sketch.js in your project, just grab the latest sketch.js (or minified) from GitHub and include it in your project after jQuery. Documentation To see detailed documentation, tak
60fps on the mobile web — Flipboard Engineering
Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it’s consumed on: curating the bes
StackBlur - A fast, almost Gaussian blur for Canvas by Mario Klingemann, Quasimondo
This is a demo for a Javascript / Canvas based implementation of my StackBlur algorithm. Usage: stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel ); or: stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius ); or: stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius ); Download source: StackBlur v0.5 Thank you to Mike Shaver for fixing my
Webアプリをいまどきの手法で爆速開発した — KaoriYa
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
クライアントサイドだけでファイルを保存する·FileSaver.js MOONGIFT
FileSaver.jsはクライアントサイドでデータを生成しダウンロードするJavaScriptライブラリです。 Webアプリケーションが増える中、Webブラウザ上で作ったコンテンツをそのままエクスポートする時に使えるライブラリがFileSaver.jsです。 まず画像を保存するデモです。 こんな感じに適当にマウスで文字を書きます。 ファイル名をつけて保存ボタンを押すと保存が実行されます（ウィンドウ下部にダウンロードファイルがあります）。 ダウンロードされたファイルです。内容が動的に生成されているのが分かります。 同様にテキストの保存もできます。 テキストファイルの内容も動的です。UTF-8で作成されます。 HTMLファイルの保存もできます。 FileSaver.jsはコンテンツをCanvasタグにレンダリングし、それをダウンロードしているようです。HTML5対応ブラウザに限定されますが、
HTML5の可能性を追求するクリエイティブで実験的なサイト21
HTML5の可能性を追求するクリエイティブで実験的なサイト21 HTML5 logo HTML5ロゴが回転するアニメーション Coil 青の玉を線で囲っていくゲーム Google Gravity ページ上の要素がバラバラに崩れるアニメーション Canvas ribbon & iOS4.2 device orientation Canvasを使ったインタラクティブな描画 Sketch 線のドローイングと回転など 404 インタラクティブに動く目のアニメーション BreakDOM チェックボックスとスクロールバーを使ったブロック崩し Move. Pick Up. Drop 跳ね返りながら青とグレーをスイッチさせる玉のシミュレーション Fight or Flight? (HTML5 game) 流れてくるボールをキャッチしたり避けたりするゲーム Make3D: Native Drag & Dro
JavaScriptで2D-FFTによるハイパス/ローパスフィルタ – Rest Term
Spatial Frequency Filtering by 2D-FFT これまでにJavaScriptとHTML5 Canvas APIでいくつかの画像処理を試してきましたが、今回は二次元離散フーリエ変換(2D-DFT、実装上では2D-FFT)で得られた周波数スペクトルにハイパス/ローパスフィルタ(HPF/LPF)を適用します。 「フーリエ変換」は音声処理でよく耳にする単語かと思います。音声データをフーリエ変換してHTML5 Canvas上でビジュアライズするデモもたくさん公開されています(例: Visualizing an audio spectrum – MDN)。ただし、ここでは”音声”ではなく”画像”に対するフーリエ変換を行います。音声の場合はデータが一次元なので周波数は一つしか持っていませんが、画像の場合は水平/垂直方向の二つの周波数を持つことになります。なので画像データに対
kolja/Instant-Rocket-Fuel @ GitHub
Instant Rocket Fuel is a simple html5 canvas game framework written in CoffeeScript. It comes with a time-based loop and has support for sprites, animation and maps. There is a mechanism for input and custom events. It also provides a Vector class and bounding box collision detection. It is meant to be simple and get you quick results even if you haven't done any programming before. Click on the b
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
HTML5 Grayscale Image Hover - Web Designer Wall
Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify‘s partner) for the jQu
HTML5 + Canvas + JavaScriptによるWebベースの顔認識「ccv」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
ccvはHTML5とCanvasタグを使ってWeb上で顔認識を行う。C言語によるライブラリもある。 [/s2If] ccvはWebベースまたはC言語製のオープンソース・ソフトウェア。最近の写真管理ソフトウェアの流行として顔認識がある。デジカメやプリンタでも顔認識機能を搭載し、自動的に明るくしたりするものもある。風景写真なども良いが、やはり人が写っている写真のが楽しいのだ。 そんな顔認識技術はWebベースでも提供されるようになっている。特にFacebookのようにSNSの中で使う場合は友人を自動認識させることでより活発な交流を促せるのだ。Webベースでの顔認識をHTML5/Canvasで行うのがccvだ。 実行例 via Tibetan Girl near Mount Everest | Flickr - Photo Sharing! ccvは元々C言語で開発されているコンピュータビジョンラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pica - high quality image resize in browser
https://h2md.axell-embedded.com/
GitHub - Arcticjs/Arctic.js: HTML5 game framework
mdlab.jp
SoundCloud - Share Your Sounds
GitHub - foliojs/png.js: A (animated) PNG decoder in JavaScript for the HTML5 canvas element and Node.js
CSS 20 stunning examples of CSS 3D transforms