Works

CreateJSでオリンピックのロゴ

★簡単な解説を載せたブログ記事 「CreateJSでパーティクルをアニメーションさせてオリンピックのロゴをつくってみた」 http://naoyashiga.hatenablog.com/entry/2014/02/10/175845

  • 4492
  • 10

Canvasで画像加工[モノクロ,ぼかし,二値化...etc]

  • 10271
  • 6

マイクから周波数取得(WebAudio)

★音量は小さめにしてください ★動作環境 Chrome Canaryの設定でWebAudioを許可してください。 Chrome Canary https://www.google.com/intl/ja/chrome/browser/canary.html ★参考 http://www.g200kg.com/jp/docs/webaudio/analyser.html

  • 8762
  • 6

WebRTC Puzzle

Webカメラを使ったパズルです。 ★動作確認 Chromeのみ確認 ★参考 http://www.html5rocks.com/ja/tutorials/dnd/basics/

  • 1617
  • 0

css border Gallery

参考:borderの説明 http://www.htmq.com/style/border.shtml

  • 3650
  • 8

clone()して球のなかに球

パーティクルをCloneして、球の中に球を描画する http://naoyashiga.hatenablog.com/entry/2013/10/08/183334 ★inspire https://threejsdoc.appspot.com/doc/three.js/examples/canvas_lines_sphere.html

  • 4155
  • 4

スクロールでtextキャレット位置調整

・キャレットって何? テキスト入力時、点滅している棒?のことです。 ★移動 スクロールバーを調節してキャレット位置を動かせます。 ★選択 スクロールバーを調節して選択範囲を動かせます。 注意:右方向へ選択範囲を動かした後、左方向に動かすと選択範囲がキャンセルされてしまいます。 直し方はまだわかっていません泣。

  • 2371
  • 0

倉庫番 sokoban

★遊び方 「人間を操作し、すべての荷物をゴール地点に運ぼう!」 ★ルール

・荷物とゴール地点の数は等しい。

・人間は上下左右に移動することができる。

・進行方向に荷物がある場合、その荷物を押すことができる。ただし、荷物の進行方向に他の荷物や壁が存在しない場合に限る。

・荷物を引っ張ることはできない。

:茶色い岩

荷物:グレーの岩

人間:青の円

ゴール:オレンジの四角

★人間の操作方法

U:上方向に移動

D:下方向に移動

R:右方向に移動

L:左方向に移動

  • 2241
  • 0

CSS 3D CUBE

inspired by HTML5 Rubik's cube (CSS3 + JS) - Tutorial http://html5rubik.com/tutorial/#perspective3D webkit推奨 opera非対応

  • 2234
  • 1

カタカナ翻訳機(WebSpeech)

■認識結果 音声認識した結果を表示します。日本語で話してください。 緑文字:認識中 黒文字:認識確定 ■カタカナ抽出 音声認識した結果から、カタカナを抽出します。 ■wiki結果 カタカナをwikiで自動的に調べます。うまくいかないときもあります。 ★Chrome CanaryでWeb Audioを許可してください。 chrome://flags/

  • 1432
  • 1

グミ・チョコレート・パイン forked: 第一回全国統一 HTML5実技コンテスト エントリー用コード

●遊び方 グー・チョキ・パーの画像をクリックしてジャンケンを開始! 先にゴール地点(12)に到着したほうが勝ち! ※ちょうど12に到着しなかった場合は折り返して進みます。 ★グーで勝つ:「グミ」→2マス進む ★チョキで勝つ:「チョコレート」→6マス進む ★パーで勝つ:「パイン」→3マス進む あいこ:進まない ・スタート地点:1 ・ゴール地点:12 ・プレイヤー:赤色のバー ・コンピュータ:青色のバー

  • 2597
  • 4

モザイクWebカメラ!

★動作環境 ・Chrome推奨 ・Webカメラ必要 MacBookProでしか動作確認してません。

  • 1078
  • 0

ハートの方程式 by Canvas

★ハートの方程式 x = 16*Math.pow(Math.sin(t),3); y = 13*Math.cos(t) - 5*Math.cos(2*t) -2*Math.cos(3*t) - Math.cos(4*t); ★参考ページ Wolfram MathWorld http://mathworld.wolfram.com/HeartCurve.html

  • 2940
  • 2

RANDOM STROKE

Inspired by http://codepen.io/soulwire/pen/HAGCg

  • 2144
  • 2

【CSS 3D】 イイ感じで回転

・参考 CSS3 Bezier Curve Tester http://css3beziercurve.net/ 3D CSS Tester http://thewebrocks.com/demos/3D-css-tester/ クローム推奨

  • 1967
  • 1

Canvasでモザイク,モーションブラー,ディザリング

★説明 ・モーションブラー、ベイヤーディザは処理に時間がかかります泣。

  • 2819
  • 0

動く正弦曲線

  • 2744
  • 2

CSS3 Circle Rotate Animation

  • 2978
  • 2

Many Likes and ONE Dislike

Canvasを使ってモザイク処理をして、フォトモザイクの手法で描画しています。 ちょっと描画に時間がかかります泣

  • 1933
  • 2

Youtube Thumbnail Control

☆使い方 動画の上でマウスポインタを動かす ↓ サムネイルが切り替わる ↓ クリックすると先頭から再生

  • 1616
  • 0

Noisy HTML5 Logo

  • 1999
  • 2

Beatlesの画像を1000個出すだけ!!

  • 1983
  • 0

難しい避けゲー

★遊び方 プレイヤーを動かしてアイテムをゲットしよう!敵に当たるとスタート地点に戻ります。 プレイヤー:白 敵:青 アイテム:ゴールド ★操作方法 画面左下、十字キーPad OR 十字キーを押して下さい。 <スマホ> 画面左下、十字キーPadを押してください。 ******************* 実行画面からだとフォーカスが合わないので、スペースキー、十字キーが効きません。 お手数ですがページ右上のSmartphoneボタンから起動するか、ダウンロードしローカルで実行してみてください。 *******************

  • 1052
  • 1

Skills

Hot tags

Categories

HTML / CSS / JavaScript