requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
Snow Effect using HTML5 Canvas and Javascript
Description A simple particle system modelled towards simulating a snowfall effect. Inspired by an anonymous submission on our website. The background comes from CSS which means that the code can be used with different colors or image based backgrounds in games, websites, and more. The perfect goodie for Christmas time.
WEB SOUNDER - Web Audio API 解説 -
オーティオデータの再生 トップページでも述べたことですが, 単純にオーディオデータを再生するだけであればHTMLMediaElementを利用したほうが良いでしょう. その理由は, 実装が簡単で,機能面もオーディオプレイヤーとしての基本的な機能はサポートされています. さらに, クロスブラウザ対応においても, Web Audio APIよりはるかに楽でしょう. Web Audio APIによるオーディオデータの再生について解説する目的とは, 単純にオーディオデータを再生するだけでなく, サウンドエフェクトを付加したり, 波形描画したりといったより高度なサウンド処理を実現することにあります. そのステップアップとして, まずはオーディオデータを再生することのみに主眼を置きます. Web Audio APIによるオーディオデータの再生方法は2つあります. AudioBufferSourceNo
2 つの時計のお話 - Web Audio の正確なスケジューリングについて
A tale of two clocks Stay organized with collections Save and categorize content based on your preferences. Introduction One of the biggest challenges in building great audio and music software using the web platform is managing time. Not as in “time to write code”, but as in clock time - one of the least well-understood topics about Web Audio is how to properly work with the audio clock. The Web
Getting started with Web Audio API | Articles | web.dev
Getting started with Web Audio API Stay organized with collections Save and categorize content based on your preferences. Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Au
モバイルブラウザからアプリを開くには - console.lealog();
あいも変わらずモバイル情報です。 成果物はこちら。 leader22/app-opener 事の発端 よく見ますよね、モバイルサイトの至る所にある「Twitterでシェア」、「Facebookでシェア」ってボタン。 よく見るんですけど・・・押しますか？アレ。 TwitterもFacebookも、もちろんアプリを使ってますよね。 ブラウザでなんて、誰もログインしてないですよね。 てことは誰も押さないですよね？！！ ネイティブアプリ全盛期にブラウザWebでシェアしてね！ったって、 わざわざログインしてまでやってくれる人が、果たしてどれくらいいるでしょうか。 うー、Webつらい！アプリ強い！ せめてこのボタンを押すとアプリが起動し・・たら素敵ではありませんか？！ どうにかなるのか 別に目新しい技術ではないのですが、実は"URIScheme"っていうものがあります。 URLスキーマって言われたりス
libvpx.jsで動的にWebMを生成する - jsdo.it - Share JavaScript, HTML5 and CSS
libvpx.jsを動かした 動くまでにしばらく時間がかかります。 libvpx.jsが5MBほどあり、例によってPNG化しているので、 展開に時間がかかります。 残念ながら Firefoxではループ再生を指定しているものの、どうも、libvpx.jsの生成する WebMがよろしくないのか、うまく行きません。 window.addEventListener('load', function (event) { // start http://jsdo.it/cx20/hDFw var escaped = { stringToBytes: function (text) { var s = text.replace(/[^\u00-\uff]/g, function ($0) { return escape($0); }), i, l, b = []; for (l = s.length,
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
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
JScreenFix - Pixel Repair
A stuck pixel is a bright dot of colour that fails to update when neighbouring pixels change.
MediaElement.js - HTML5 video and audio unification framework
MediaElement.js Plugins Boost your player with Chromecast, Google Analytics and more Look good. Sound good. MediaElement.js is a blazingly fast and amazingly powerful HTML5 audio and video library that creates a unified feel for media files (MP4, MP3), streaming content (HLS, M(PEG)-DASH), and embeddable players like YouTube, Vimeo, Twitch, DailyMotion, Facebook, and SoundCloud.
Hacker's guide to Neural Networks
Note: this is now a very old tutorial that I’m leaving up, but I don’t believe should be referenced or used. Better materials include CS231n course lectures, slides, and notes, or the Deep Learning book. Hi there, I’m a CS PhD student at Stanford. I’ve worked on Deep Learning for a few years as part of my research and among several of my related pet projects is ConvNetJS - a Javascript library for
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 audio - testing for Invalid State Error ( Or Dom Exception 11 )
Francis Kim
IBM Developer
IBM Developer
`Number()` vs `parseInt()` vs plus vs bitwise · jsPerf
http://jsemu.github.io/gba/
Timepicker for jQuery – Demos and Documentation
GitHub - airbnb/javascript: JavaScript Style Guide
