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
Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas • The Union Platform, By USER1
This example shows how to create a simple multiuser drawing pad (aka shared whiteboard, multiuser sketchpad, or collaborative painting tool) using pure JavaScript and HTML5's <canvas> tag. The drawing pad updates in realtime when any connected user draws a line. Here's UnionDraw. Have a scribble! [View source] To manage communication between users, the JavaScript code uses OrbiterMicro, which conn
サンプルで理解するHTML5におけるJavaScript
一般に「HTML5」と呼ばれている仕様は、HTML要素の仕様だけでなく、Webアプリケーション用APIの仕様も含んでいます。これらのAPIを使うことによってHTML5では、2D/3Dグラフィックスの描画やローカルパソコンへのデータの保存といったことが可能になります。 HTML5ではJavaScriptを使うことで、できることが従来より大幅に増えます。しかし、これは逆に言えば、HTML5の機能を活用するには、JavaScriptのスキルが不可欠だということです。 このパートでは、筆者がHTML5（＋JavaScript＋CSS3）で作成したお絵描きアプリケーション「My Animals Note！」をサンプルにして、HTML5におけるJavaScriptプログラミング、具体的にはcanvas要素を使ったグラフィックス描画や、Web Storage APIを使ったローカルパソコンへの画像データ
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
graph.tk
Online graph sketching app that can graph functions and numerically solve differential equations. Requires Javascript HTML 5.
砂のアスキーアート - ずっと君のターン
もう多分10年くらい前なんだけど「砂」というアプリケーションが好きで、よく遊んでた・・・というか眺めてた。 その「砂」のiPhone版が出たとか言うのをたまたま目にして説明文読んでたら、あれって実はすごく簡単なアルゴリズムで動いてたらしい。 http://ccnet.dip.jp/sand/#HowToMove 下に何もなければ下に動く 右と下に障害物があって左に何もなければ左に動く 左と下に障害物があって右に何もなければ右に動く 上のみがあいている場合は一定の確率で上に動く 左右に何もなくて下に障害物があるときは右か左か それとも動かないかのどれかを適当に選ぶ これならJavaScriptでもできるじゃん、と思ってやってみた。ただし、そのままJSに移すだけだといまいち面白みがなかったので、ちょうど開催中だったHTML5コンテストの「アスキーアートカテゴリ」に無理やり絡めた。（しかしHTM
HTML5 2D Context
Editor's Draft 8 January 2010 Latest Published Version: http://www.w3.org/TR/2dcontext/ Latest Editor's Draft: http://dev.w3.org/html5/2dcontext/ Editors: Ian Hickson, Google, Inc. David Hyatt, Apple, Inc. This specification is available in the following formats: single page HTML, multipage HTML. This is $Revision: 1.2 $. Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability
HTML5のcanvasを使ってみた
マウスイベントのclientXとclientYは、クライアント座標であって、canvasの左上を(0,0)とした座標ではないので、四角形を出現させる位置がずれていた。、offsetTopとoffsetLeftを使って修正したが、これは規格にはない。どうしたものか。 かなりやっつけ仕事。canvas上をクリックすると、どんどん四角形が増えていく。ドラッグすると面白いことになる。回転軸が四角形の中央でないのは仕様。バグだったけど、動きが面白かったので、あえて修正しなかった。 一つだけ気にくわない点がある。いわゆる拡大縮小や回転、移動は、行列で行えるのだが、"The transformations must be performed in reverse order."ってどういう事だ。なぜ逆なんだ。逆にしたら分かりやすくなるとでも思っているのか？ どう考えても混乱するだけだろ。あと、Ident
HTML5 LogoをCanvasで描いてみた - 風と宇宙とプログラム
かっこ良いんだか悪いんだか、ちょっとわからないけど、HTML5のロゴができたということなので、ちょっと遊んでみた。CCライセンスで提供されている。SVGデータもあるので、中身を見たところ、これならすぐにCavnasでも描けそうだと思い立ったので、帰宅電車の中でコードを書いてみた（はい、お気楽モードです）。 polygonは下記のように頂点の並びpointsと塗りつぶす色を指定しているだけ。 <polygon fill="hsl(13, 77%, 52%)" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 "/> pointsを正規表現でパースするのが実装が簡単。一度に全部分解するのもいいけど、gオプションで有効なlastIndex機構を使って前から順番にパースする。以下のような
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Canvasのベンチマークテストを作って速度を比較してみた - 風と宇宙とプログラム
はじめに Canvasのパフォーマンスを測定するベンチマークプログラムはそこら中に転がっていますが、ほんの一部分の測定だったり、逆に中身が複雑過ぎたりと僕が希望するようなものが見当たらなかったので、自分で作って各ブラウザで測定してみました。 測定したブラウザのバージョンは以下です。 Chrome Firefox Safari Opera 9.0.570.1 dev 3.6.12 5.0.2 10.63 ベンチマーク 作成したベンチマークプログラムは単位時間で描画関数を何回繰り返して実行できるかという単純なものです。実行中に描画される絵のいくつかを載せておきます。 hlinebezierfill_arcfill_starsimage_scaleradial_gradient 以下に全測定項目の概要を記します。 hline ひたすら水平方向の直線を描きます。 vline 垂直方向の直線 lin
【キタ・ミナミ】大阪キャバクラ実習マニュアル＆無料チュートリアル
関西で夜の仕事をしようと思ったら、まず大阪を思い浮かべる方が多いのではないでしょうか。 わたしも、大学進学の時に大阪に引っ越しして、そのまま大阪の周辺のキャバクラでキャバ嬢として働くようになったんです。 それから5年、今では大学進学からの正社員っていうルートは選ばずに卒業後もキャバクラで働いてるんだけど（笑） この選択に後悔は全くないし、今は仕事もすごく楽しいんだけど、キャバクラで働く上でお店選び、街選びはすごく大事なんですよね！ 特にキャバクラは街によって時給相場も雰囲気も全然違う。 だから、まずはこれから大阪でキャバ嬢の仕事を始めようと思ってるなら知っておきたい、大阪の街ごとのキャバクラの特徴についてご紹介します！ 大阪のキャバクラの特徴 大阪でキャバクラが有名な街はって聞かれたら、キタとミナミの2種類ですね。 大阪以外に住んでる方はもしかすると大阪府の北側と南側のエリアっていうイメー
HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]HTML5/Canvasを手軽に扱えるようになる実用的なスクリプト -gury
5509.me
FirstCanvas
worldending.jp
HTML5 Study
HTML5 Canvas Cheat Sheet