Works

Lightning

  • 34193
  • 92

Gravitiy Points

How to Gravity Points 1. クリックすると重力点が発生する 2. 重力点は掴んで移動できる 3. 重力点は接触すると融合する 4. 大きな重力点はより大きな重力を持つ 5. 重力点は一定の大きさを超えると崩壊する 6. 重力点はダブルクリックで崩壊させることができる 7. m キーを押すと重力点同士の干渉を無効にする 8. p キーを押すとパーティクルを追加する 9. d キーを押すとパーティクルを削除する

  • 18176
  • 34

Triangulation Image Generator

ファイルをドロップしてリソースを変更可能 クリックで次のプリセット画像へ 2012.10.2 エッジのポイント検出の部分に誤りがあったので修正 速度向上のためにコードを最適化 Photo from http://www.sxc.hu/ http://www.flickr.com/

  • 99991
  • 108

Abstriangulation

forked from http://jsdo.it/akm2/lHur クリックで分割点を追加

  • 30034
  • 64

Particle Triangulation 2 (with Image)

  • 11673
  • 32

Elastic String

Fullscreen http://jsrun.it/akm2/xT3x Inspired by http://codepen.io/tholman/pen/qCnfB

  • 12297
  • 51

Asteroids

Warning! 本船は小惑星帯に突入した。 迫り来る小惑星群を撃破せよ! マウス: 移動 マウスボタン: 射撃 jsdo.it WebSocket Controller 対応版 http://jsdo.it/akm2/AmNE

  • 4249
  • 7

Noizilator

Web Audio API, Audio Data API 対応ブラウザ (Chrome, Firefox) のみ Fullscreen http://jsrun.it/akm2/pp2g 遊び方 + オブジェクトの配置を変えて音を変更する。 + ノイズは左右でオフセット値、上下でフィルタの値を変更。 また関連付けられたクランパーでノイズの範囲を制限して音階を制御する。 + ドラムは左右でパターンを変更。 + オブジェクトを追加、設定する。 + フィールドをダブルクリックで新規追加、ノイズかドラムをタブで選択し設定を編集して 'OK' で新しいオブジェクトが追加される。 + 既存オブジェクトの設定変更はオブジェクトを長押し。 + 設定画面の 'DELETE' でオブジェクトを削除。 + トラックごとに編集して切り替えて演奏。 + 1 ~ 8, ←, → キーでトラックを切替。 + トラックのリセットは 'DEL TRACK' の 'CURRENT' で現在のトラックを、 'ALL' で全てのトラックを削除 timbre.js http://mohayonao.github.com/timbre/

  • 7827
  • 30

Elements Transition

Webkit 系 (Chrome, Safari) のみ Chrome 推奨 Fullscreen: http://jsrun.it/akm2/4vq1

  • 29632
  • 61

Manga Transition

CSS 3D Transform 対応ブラウザ (Chrome, Safari, Firefox) 推奨 Fullscreen: http://jsrun.it/akm2/uumQ

  • 6008
  • 29

Cubic Transition

CSS 3D Transform 対応ブラウザ (Chrome, Safari, Firefox) のみ Webkit 系 (Chrome, Safari) 推奨 Fullscreen: http://jsrun.it/akm2/b81C

  • 42483
  • 24

Dragon (Fireworks)

http://ota-hanabi.net/info.htm

  • 27475
  • 22

Biotope

http://ja.wikipedia.org/wiki/%E3%83%93%E3%82%AA%E3%83%88%E3%83%BC%E3%83%97 ※ Chrome 推奨

  • 9202
  • 23

Particle Arts

leonardoDaVinci.monaLisaWith(particles); vincentVanGogh.selfPortrait1889With(particles); johannesVermeer.girlWithAPearlEarringWith(particles);

  • 10716
  • 26

Noise Arts 2 (Color Mix)

  • 3729
  • 6

Noise Arts

Noise.draw(leonardoDaVinci['monaLisa']); Noise.draw(vincentVanGogh['selfPortrait1889']); Noise.draw(johannesVermeer['girlWithAPearlEarring']);

  • 9453
  • 25

Dot Arts

var daVinci = new LeonardoDaVinci(); daVinci.draw('Mona Lisa'); var gogh = new VincentVanGogh(); gogh.draw('Self Portrait 1889'); var vermeer = new JohannesVermeer(); vermmer.draw('Girl with a Pearl Earring');

  • 9956
  • 26

Lightning Points (Lightning 2)

How to Lightning Points 1. 稲妻は原点 (0, 0) に最も近い点から遠い点に向かって走る 2. 全ての点を結んだ距離が長いほど稲妻の触れは大きくなる 3. 点は掴んで投げることができる 4. フィールドをクリックして点を最大 8 個まで追加できる 5. 点はダブルクリックして削除することができる 6. d キーでデバッグ用のマーカーを表示 ※ Chrome 推奨

  • 25252
  • 42

Plasma

  • 12081
  • 27

Noise Abstraction

  • 10461
  • 37

Particle Stream (JSX)

  • 17309
  • 35

Twinkle

JSX Version http://jsdo.it/akm2/b4xz

  • 3218
  • 9

Painting 2 (Ink Dripping)

forked from http://jsdo.it/akm2/9ZMq + ダブルクリックでクリア + 矢印をクリックして筆のサイズを変更 + p キーで画像に変換

  • 9818
  • 20

Crayon

forked from http://jsdo.it/akm2/9ZMq ・ダブルクリックでクリア ・クレヨンのサイズを u キー (Up)、d キー (Down) で変更 ・p キーで画像に変換

  • 3609
  • 7

Painting

forked from http://jsdo.it/akm2/9ClT ・ダブルクリックでクリア ・筆のサイズを u キー (Up)、d キー (Down) で変更 ・p キーで画像に変換

  • 32625
  • 57

Shodou

「jsdoit」 akm2 作 ・ダブルクリックでクリア ・筆のサイズを u キー (Up)、d キー (Down) で変更 ・p キーで画像に変換

  • 24137
  • 47

Boids War

What's a Boids War 1. ボイドは一定の距離内の同色のボイドと群れをつくる 2. ボイドには獲物と天敵が存在する   ・オレンジボイドはグリーンボイドを追い、ブルーボイドに追われる   ・グリーンボイドはブルーボイドを追い、オレンジボイドに追われる   ・ブルーボイドはオレンジボイドを追い、グリーンボイドに追われる 3. 天敵に追いつかれたボイドは死亡する 4. クリックで新たにボイドを追加することができる 5. 追加時にまれに天敵のいないピンクボイドが出現する 6. ピンクボイドが邪魔なら g キーで駆除することができる 7. マウスポインタはみんな避けたがる 8. p キーを押すとみんな仲良くなる 9. d キーを押すとデバッグ用のマーカーを表示、攻撃対象をマークする

  • 10277
  • 48

Sea Boids

シーボイズの育て方 ・クリックでえさをあげよう ・えさをたべるとおおきくなるぞ ・おなかがすきすぎるとくろくなってしんじゃうんだ ・おおきくなったボイドはこどもをうむよ、たくさんふやそう ・えさはわるくなるからきをつけて!たべすぎるとしんじゃうかも ・d キーをおすとえさをむしして、がしもしなくなるよ

  • 3215
  • 11

WonderHTML5Wall

元ネタ http://wonder-wall.com/ 写真は Flickr の最近の投稿から matrix3d の行列の計算は以下のライブラリを参考、というか丸写し https://github.com/edankwan/PerspectiveTransform.js Chrome, Firefox で確認 Fullscreen http://jsrun.it/akm2/4bJv

  • 5367
  • 26

かまって顔文字ちゃん

顔文字ちゃんをかまってあげてください。 構い方 1. カメラ接続の許可を求められるので許可して下さい。 2. 顔文字ちゃんは動きに反応します。体をよせたり手で触ってあげてください。なでてあげるとよろこびます。 3. 構わず放っておくと眠るか怒るかしてしまいます。眠ったときはたくさん触っておこしてあげて下さい。 4. 怒ってしまった場合は怒りがおさまるまで少し待ちましょう。ふてくされていたら怒るサイン、構ってご機嫌をとりましょう。 5. 左右から構うとびよーんと伸びます。アワワワなりますが機嫌は悪くならないので大丈夫。ちょっとコツがいります。 6. あまり暗かったり背景と動くものの色が似ていると反応が悪いことがあります。 getUserMedia() 対応ブラウザのみ Chrome 22, FIrefox 18, で確認 ※ Firefox の場合 about:config にアクセスして media.navigator.enabled を true にする必要があります。

  • 7268
  • 21

Kira Kira Camera

Forked from http://jsdo.it/akm2/2VGa カメラへのアクセスを求められるので許可 動きを検知して星が飛び散る 前のフレームとの色の差から動きを検知しているので、 動くものと背景の色が似ていたり、暗すぎると反応が鈍い コントロールの Threshold で感度を調整、Toggle Display で差分表示切替 getUserMedia() 対応ブラウザのみ Chrome 22のみ確認

  • 6133
  • 13

Slit Scan Camera

http://naglly.com/archives/2012/07/slit-scan.php カメラへのアクセスを求められるので許可 フレームのキャッシュが完了したら再生開始 Slit Size でスリットのサイズを変更 小さいほど詳細で遅延が大きい getUserMedia() 対応ブラウザのみ Chrome 22のみ確認 2012.1.23 フレームのキャッシュ方法を変更、必要フレーム数用意した Uint8Array にピクセルをコピー

  • 4083
  • 10

Skills

  • Photoshop
  • Flash
  • Illustrator
  • jQuery
  • HTML5
  • CSS
  • CSS3
  • JavaScript
  • ActionScript

Awards

Hot tags

Categories

HTML / CSS / JavaScript