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 Music Documentation
Web Music とは, Web (ブラウザ) をプラットフォームにした音楽アプリケーション, あるいは, そのような Web アプリケーションを実装するために必要となる, クライアントサイドの JavaScript API の総称です. これは, 一般的な技術用語ではなく, ある種の技術マーケティング的な造語です. 具体的には, 以下のような, クライアントサイド JavaScript API の総称です. Web Audio API HTMLMediaElement (HTMLAudioElement) WebRTC Web MIDI API WebCodecs API Web Audio API, HTMLMediaElement, WebRTC に関しては, 本サイト制作開始時点の 2023 年時点で W3C recommendation となっており, モダンブラウザであれば利
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
