Visualizations with Web Audio API - Web APIs
this article explains how, and provides a couple of basic use cases. note: you can find working examples of all the code snippets in our voice-change-o-matic demo. ...
...temediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioctx.destination); note: you don't need to connect the analyser's output to another node for it to work, as long as the input is connected to the source, either directly or via another node. the analyser node will then capture audio data using a fast fourier transform (fft) in a certain frequency domain, depending on what you specify as the analysernode.fftsize property value (if no value is specified, the default is 2048.) note: you can also specify a minimum and maximum power value for the fft data scaling range, using analysernode.mindecibels and analysernode.maxdecibels, and different data averaging constants using analysernode.smoothingtimeconstant. read those pages to get more inf...
... specified, the default is 2048.) note: you can also specify a minimum and maximum power value for the fft data scaling range, using analysernode.mindecibels and analysernode.maxdecibels, and different data averaging constants using analysernode.smoothingtimeconstant. read those pages to get more information on how to use them. to capture data, you need to use the methods analysernode.getfloatfrequencydata() and analysernode.getbytefrequencydata() to capture frequency data, and analysernode.getbytetimedomaindata() and analysernode.getfloattimedomaindata() to capture waveform data. these methods copy data into a specified array, so you need to create a new array to receive the data before invoking one. the first one produces 32-bit floating point numbers, and the second and third ones produce 8...
...And 10 more matches

BiquadFilterNode() - Web APIs
parameters inherits parameters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional options are as follows: type: one of "lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "peaking", "notch", "allpass". the meaning of the other options depends on the value of this one. the defaults for all are as follows: q: 1 detune: 0 frequency: 350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this ...
...ow a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. highpass: a highpass filter is the opposite of a lowpass filter. frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value m...
...equency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. bandpass: a bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. it implements a second-order bandpass filter. q: controls the width of the band. the width becomes narrower as the q value increases. frequency: the center of the frequency band. gain: not used. ...
...And 9 more matches

Example and tutorial: Simple synth keyboard - Web APIs
an make the keyboard horizontally scrollable if all the keys don't fit on the screen, without having them wrap around. the keyboard first, we create space to build the keyboard into. we will be programmatically constructing the keyboard, because doing so gives us the flexibility to configure each key as we determine the appropriate data for the corresponding note. in our case, we get each key's frequency from a table, but it could be calculated algorithmically as well. <div class="container"> <div class="keyboard"></div> </div> the <div> named "container" is the scrollable box that lets the keyboard be scrolled horiontally if it's too wide for the available space. the keys themselves will be inserted into the block of class "keyboard". the settings bar beneath the keyboard, we'll put some ...
...ype "range") used to control the master audio volume. let notefreq = null; let customwaveform = null; let sineterms = null; let cosineterms = null; finally, global variables that will be used when constructing waveforms are created: notefreq will be an array of arrays; each array represents one octave, each of which contains one entry for each note in that octave. the value for each is the frequency, in hertz, of the note's tone. customwaveform will be set up as a periodicwave describing the waveform to use when the user selects "custom" from the waveform picker. sineterms and cosineterms will be used to store the data for generating the waveform; each will contain an array that's generated when the user chooses "custom". creating the note table the createnotetable() function builds the...
... waveform; each will contain an array that's generated when the user chooses "custom". creating the note table the createnotetable() function builds the array notefreq to contain an array of objects representing each octave. each octave, in turn, has one named property for each note in that octave; the property's name is the note's name (such as "c#" to represent c-sharp), and the value is the frequency, in hertz, of that note. function createnotetable() { let notefreq = []; for (let i=0; i< 9; i++) { notefreq[i] = []; } notefreq[0]["a"] = 27.500000000000000; notefreq[0]["a#"] = 29.135235094880619; notefreq[0]["b"] = 30.867706328507756; notefreq[1]["c"] = 32.703195662574829; notefreq[1]["c#"] = 34.647828872109012; notefreq[1]["d"] = 36.708095989675945; notefreq[1]["d#"...
...And 9 more matches

BiquadFilterNode - Web APIs
mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor biquadfilternode() creates a new instance of a biquadfilternode object. properties inherits properties from its parent, audionode. note: though the audioparam objects returned are read-only, the values they represent are not. biquadfilternode.frequency read only is an a-rate audioparam, a double representing a frequency in the current filtering algorithm measured in hertz (hz). biquadfilternode.detune read only is an a-rate audioparam representing detuning of the frequency in cents. biquadfilternode.q read only is an a-rate audioparam, a double representing a q factor, or quality factor. biquadfilternode.gain read only is an a-rate a...
...ead only is an a-rate audioparam, a double representing the gain used in the current filtering algorithm. biquadfilternode.type is a string value defining the kind of filtering algorithm the node is implementing. the meaning of the different parameters depending of the type of the filter (detune has the same meaning regardless, so isn't listed below) type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff. frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. not used highpass standard second-order reso...
...toff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. not used highpass standard second-order resonant highpass filter with 12db/octave rolloff. frequencies below the cutoff are attenuated; frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through. the center of the range of frequencies. controls the width of the frequency band. the greater the q ...
...And 8 more matches

JS_GetGCParameter
lection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
... value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
...cparameter only) the value to assign to the parameter. ...
...And 7 more matches

Using IIR filters - Web APIs
and the filter response parameters can be specified, so that it can be tuned as needed. this article looks at how to implement one, and use it in a simple example. demo our simple example for this guide provides a play/pause button that starts and pauses audio play, and a toggle that turns an iir filter on and off, altering the tone of the sound. it also provides a canvas on which is drawn the frequency response of the audio, so you can see what effect the iir filter has. you can check out the full demo here on codepen. also see the source code on github. it includes some different coefficient values for different lowpass frequencies — you can change the value of the filternumber constant to a value between 0 and 3 to check out the different available effects. browser support iir filters ...
... really good overview to iif filters and fir filters here. a biquad filter is actually a specific type of infinite impulse response filter. it's a commonly-used type and we already have it as a node in the web audio api. if you choose this node the hard work is done for you. for instance, if you want to filter lower frequencies from your sound, you can set the type to highpass and then set which frequency to filter from (or cut off). there's more information on how biquad filters work here. when you are using an iirfilternode instead of a biquadfilternode you are creating the filter yourself, rather than just choosing a pre-programmed type. so you can create a highpass filter, or a lowpass filter, or a more bespoke one. and this is where the iir filter node is useful — you can create your own i...
...ria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ... ...
...And 7 more matches

BiquadFilterNode.type - Web APIs
the type property of the biquadfilternode interface is a string (enum) value defining the kind of filtering algorithm the node is implementing. syntax var audioctx = new audiocontext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = 'lowpass'; value a string (enum) representing a biquadfiltertype. type values and their meaning type description frequency q gain lowpass standard second-order resonant lowpass filter with 12db/octave rolloff. frequencies below the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. not used highpass standard second-order resonant highpass filter with ...
...w the cutoff pass through; frequencies above it are attenuated. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value is, the greater is the peak. not used highpass standard second-order resonant highpass filter with 12db/octave rolloff. frequencies below the cutoff are attenuated; frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through. the center of the range of frequencies. controls the width of the frequency band. the greater the q value, t...
... the upper limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, it will be an attenuation. ...
...And 6 more matches

Basic concepts behind Web Audio API - Web APIs
final destination for the audio, such as the user's computer speakers. establish connections from the audio sources through zero or more effects, eventually ending at the chosen destination. channel notation the number of audio channels available on a signal is frequently presented in a numeric format, such as 2.0 or 5.1. this is called channel notation. the first number is the number of full frequency range audio channels that the signal includes. the number after the period indicates the number of those channels which are reserved for low-frequency effect (lfe) outputs; these are often referred to as subwoofers. each input or output is composed of one or more audio channels, which together represent a specific audio layout. any discrete channel structure is supported, including mono, ster...
... time in seconds from a frame count, simply divide the number of frames by the sample rate. to get a number of frames from a number of samples, simply divide by the channel count. here's a couple of simple examples: var context = new audiocontext(); var buffer = context.createbuffer(2, 22050, 44100); note: in digital audio, 44,100 hz (alternately represented as 44.1 khz) is a common sampling frequency. why 44.1khz? firstly, because the hearing range of human ears is roughly 20 hz to 20,000 hz. via the nyquist–shannon sampling theorem, the sampling frequency must be greater than twice the maximum frequency one wishes to reproduce. therefore, the sampling rate has to be greater than 40 khz. secondly, signals must be low-pass filtered before sampling, otherwise aliasing occurs. while an ...
...ampling, otherwise aliasing occurs. while an ideal low-pass filter would perfectly pass frequencies below 20 khz (without attenuating them) and perfectly cut off frequencies above 20 khz, in practice a transition band is necessary, where frequencies are partly attenuated. the wider this transition band is, the easier and more economical it is to make an anti-aliasing filter. the 44.1 khz sampling frequency allows for a 2.05 khz transition band. if you use this call above, you will get a stereo buffer with two channels, that when played back on an audiocontext running at 44100hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames/44100hz = 0.5 seconds. var context = new audiocontext(); var buffer = context.createbuffer(1, 22050, 22050); if you use thi...
...And 4 more matches

Power profiling overview
can expose this information. a wakeup occurs when a core or package transitions from an idle state to the active state. this happens when the os schedules a process to run due to some kind of event. common causes of wakeups include scheduled timers going off and blocked i/o system calls receiving data. maintaining c-state residency is crucial to keep power consumption low, and so reducing wakeup frequency is one of the best ways to reduce power consumption. one consequence of the existence of c-states is that observations made during power profiling — even more than with other kinds of profiling — can disturb what is being observed. for example, the gecko profiler takes samples at 1000hz using a timer. each of these samples can trigger a wakeup, which consumes power and obscures firefox's nat...
...amples can trigger a wakeup, which consumes power and obscures firefox's natural wakeup patterns. for this reason, integrating power measurements into the gecko profiler is unlikely to be useful, and other power profiling tools typically use much lower sampling rates (e.g. 1hz.) p-states intel processors also support multiple p-states. p0 is the state where the processor is operating at maximum frequency and voltage, and higher-numbered p-states operate at a lower frequency and voltage to reduce power consumption. processors can have dozens of p-states, but the transitions are controlled by the hardware and os and so p-states are of less interest to application developers than c-states. power and power-related measurements there are several kinds of power and power-related measurements. some ar...
...es; linux. turbostat: pkg, pp0 and pp1 planes; linux. of these, tools/power/rapl is generally the easiest and best to use because it reads all power planes, it's a command line utility, and it doesn't measure anything else. proxy measurements the next best measurements are proxy measurements, i.e. measurements of things that affect power consumption such as cpu activity, gpu activity, wakeup frequency, c-state residency, disk activity, and network activity. some of these are measured on a global basis, and some can be measured on a per-process basis. some can also be measured via instrumentation within firefox itself. the correlation between each proxy measure and power consumption is hard to know and can vary greatly. when used carefully, however, they can still be useful. this is because th...
...And 2 more matches

AnalyserNode - Web APIs
it is an audionode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations. an analysernode has exactly one input and one output. the node works even if the output is not connected. ...
...ent-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object. properties inherits properties from its parent, audionode. analysernode.fftsize is an unsigned long value representing the size of the fft (fast fourier transform) to be used to determine the frequency domain. analysernode.frequencybincount read only is an unsigned long value half that of the fft size. this generally equates to the number of data values you will have to play with for the visualization. analysernode.mindecibels is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this spe...
...long value half that of the fft size. this generally equates to the number of data values you will have to play with for the visualization. analysernode.mindecibels is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using getbytefrequencydata(). analysernode.maxdecibels is a double value representing the maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using getbytefrequencydata(). analysernode.smoothingtimeconstant is a double value representing the averaging constant with the last analysis f...
...And 2 more matches

attr() - CSS: Cascading Style Sheets
attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as an<time> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. leading and trailing spaces are stripped. 0s, or, if 0s is not a valid value for the property, the property's minimum value. ...
...s parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as an<time> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. leading and trailing spaces are stripped. 0s, or, if 0s is not a valid value for the property, the property's minimum value. ...
....g. 12.5), and interpreted as an<time> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. leading and trailing spaces are stripped. 0s, or, if 0s is not a valid value for the property, the property's minimum value. frequency <frequency> the attribute value is parsed as a css <frequency> dimension, that is including the unit (e.g. 30.5khz). if it is not valid, that is not a frequency or out of the range accepted by the css property, the default value is used. 0hz, or, if 0hz is not a valid value for the property, the property's minimum value. hz, khz <frequency> the attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and i...
...And 2 more matches

Creating a Web based tone generator - Archive of obsolete content
data); // writing the data. written = audio.mozwriteaudio(sounddata); if(written < sounddata.length) { // not all the data was written, saving the tail. tail = sounddata.slice(written); } currentwriteposition += written; } }, 100); } // control and generate the sound. ...
...ddata.length) { // not all the data was written, saving the tail. tail = sounddata.slice(written); } currentwriteposition += written; } }, 100); } // control and generate the sound. ...
... tail = sounddata.slice(written); } currentwriteposition += written; } }, 100); } // control and generate the sound. ...
...cy) { return; // no sound selected } var k = 2* math.pi * frequency / samplerate; for (var i=0, size=sounddata.length; i<size; i++) { sounddata[i] = math.sin(k * currentsoundsample++); } } var audiodestination = new audiodatadestination(samplerate, requestsounddata); function start() { currentsoundsample = 0; frequency = parsefloat(document.getelementbyid("freq").value); } function stop() { frequency = 0; } </script> </body> </html> ...

AnalyserNode.maxDecibels - Web APIs
the maxdecibels property of the analysernode interface is a double value representing the maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the maximum value for the range of results when using getfloatfrequencydata() or getbytefrequencydata(). syntax var curvalue = analysernode.maxdecibels; analysernode.maxdecibels = newvalue; value a double, representing the maximum decibel value for scaling the fft analysis data, where 0 db is the loudest possible sound, -10 db is a 10th of that, etc. the default value is -30 db. when getting data from getfloatfrequencydata() or getbytefrequencydata(), any frequencies with an amplitude of maxdecibels or higher will be returned as +1.0 or 255, respectively. note: ...
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). ...
...put of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... ...
...w.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... ...

AnalyserNode.minDecibels - Web APIs
the mindecibels property of the analysernode interface is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the minimum value for the range of results when using getfloatfrequencydata() or getbytefrequencydata(). syntax var curvalue = analysernode.mindecibels; analysernode.mindecibels = newvalue; value a double, representing the minimum decibel value for scaling the fft analysis data, where 0 db is the loudest possible sound, -10 db is a 10th of that, etc. the default value is -100 db. when getting data from getfloatfrequencydata() or getbytefrequencydata(), any frequencies with an amplitude of mindecibels or lower will be returned as 0.0 or 0, respectively. note: if...
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). ...
...put of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... ...
...w.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... ...

AnalyserNode.smoothingTimeConstant - Web APIs
analysernode.smoothingtimeconstant; analysernode.smoothingtimeconstant = newvalue; value a double within the range 0 to 1 (0 meaning no time averaging). the default value is 0.8. if 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while computing the value", which essentially smoothes the changes across analysernode.getfloatfrequencydata/analysernode.getbytefrequencydata calls. in technical terms, we apply a blackman window and smooth the values over time. the default value is good enough for most cases. note: if a value outside the range 0–1 is set, an index_size_err exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canv...
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). if you are curious about the effect the smoothingtimeconstant() has, try cloning the above example and setting analyser.smoothingtimeconstant = 0; instead. ...
...ove example and setting analyser.smoothingtimeconstant = 0; instead. you'll notice that the value changes are much more jarring. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; analyser.smoothingtimeconstant = 0.85; ... ...
... audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; analyser.smoothingtimeconstant = 0.85; ... ...

Controlling multiple parameters with ConstantSourceNode - Web APIs
nodes. being able to shorten the number of operations to adjust them all will prove invaluable for code size and performance both. starting the oscillators when the user clicks the play/pause toggle button while the oscillators aren't playing, the startoscillators() function gets called. ...
...n the user clicks the play/pause toggle button while the oscillators aren't playing, the startoscillators() function gets called. ...
...rs() { oscnode1 = context.createoscillator(); oscnode1.type = "sine"; oscnode1.frequency.value = 261.625565300598634; // middle c oscnode1.connect(gainnode1); oscnode2 = context.createoscillator(); oscnode2.type = "sine"; oscnode2.frequency.value = 329.627556912869929; // e oscnode2.connect(gainnode2); oscnode3 = context.createoscillator(); oscnode3.type = "sine"; oscnode3.frequency.value = 391.995435981749294 // g oscnode3.connect(gainnode3); oscnode1.start(); oscnode2.start(); oscnode3.start(); playing = true; } each of the three oscillators is set up the same way: create the oscillatornode by calling audiocontext.createoscillator(). ...
... connect the new oscillator to the corresponding gain node. ...

numOctaves - SVG: Scalable Vector Graphics
the numoctaves attribute defines the number of octaves for the noise function of the <feturbulence> primitive. an octave is a noise function defined by its frequency and amplitude. a turbulence is built by accumulating several octaves with increasing frequencies and decreasing amplitudes. the higher the number of octaves, the more natural the noise looks. though more octaves also require more calculations, resulting in a negative impact on performance. ...
...e number of octaves, the more natural the noise looks. though more octaves also require more calculations, resulting in a negative impact on performance. ...
...mpact on performance. only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <integer> default value 1 animatable yes <integer> defines the number of octaves. negative values ...
...: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <integer> default value 1 animatable yes <integer> defines the number of octaves. negative values are forbidden. ...

Anatomy of a video game - Game development
at different rates: 30 fps, 75 fps, 100 fps, 120 fps, 144 fps, etc. systems that are unable to keep up with 60 fps lose visual quality to keep the game running at optimal speed (eventually it outright fails, if quality becomes too low.) other ways to handle variable refresh rate needs other methods of tackling the problem exist. one common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. the update method can continue looping without care about what the user sees. the draw method can view the last update and when it happened. since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. it does not matter whether this is more frequent t...
...ashioned methods. again, this is a bit more complex than the previous two options, and starting each update will be blocked until the browser decides to fire raf callbacks. each of these methods have similar tradeoffs: users can skip rendering frames or interpolate extra ones depending on their performance. you can count on all users updating non-cosmetic variables at the same constant frequency minus hiccups. much more complicated to program than the basic loops we saw earlier. user input is completely ignored until the next update (even if the user has a fast device). the mandatory interpolation has a performance penalty. a separate update and draw method could look like the following example. for the sake of demonstration, the example is based on the third bullet point, just with...
... = mygame.lasttick; // pretend the first draw was on first update. mygame.ticklength = 50; // this sets your simulation to run at 20hz (50ms) setinitialstate(); main(performance.now()); // start the cycle })(); another alternative is to simply do certain things less often. if a portion of your update loop is difficult to compute but insensitive to time, you might consider scaling back its frequency and, ideally, spreading it out into chunks throughout that lengthened period. an implicit example of this is found over at the artillery blog for artillery games, where they adjust their rate of garbage generation to optimize garbage collection. obviously, cleaning up resources is not time sensitive (especially if tidying is more disruptive than the garbage itself). this may also apply to some o...

JS_SetGCZeal
this article covers features introduced in spidermonkey 1.8 enable gc zeal, a testing and debugging feature that helps find gc-related bugs in jsapi applications. syntax void js_setgczeal(jscontext *cx, uint8_t zeal, uint32_t frequency); name type description cx jscontext * a context. the gc zeal level of the associated jsruntime is set. zeal uint8_t the desired level of garbage collection. frequency uint32_t with some zeal levels, a gc is triggered every frequency allocations. description js_setgczeal sets the level of additional garbage collection to perform for a runtime, for the purpose of finding or reproducing bugs. there are several different levels which have different functions: zeal level ...
... of additional garbage collection to perform for a runtime, for the purpose of finding or reproducing bugs. there are several different levels which have different functions: zeal level description 0 normal amount of collection. the default: no additional collections are performed. 1 collect when roots are added or removed. 2 collect when every frequency allocations. 3 collect on window paints. 4 verify pre write barriers between instructions. 5 verify pre write barriers between window paints. 6 verify stack rooting. 7 collect the nursery every frequency nursery allocations. 8 incremental gc in two slices: 1) mark roots 2) finish collection. 9 incremental gc in tw...
...s: 1) mark roots 2) finish collection. 9 incremental gc in two slices: 1) mark all 2) new marking and finish. 10 incremental gc in multiple slices. 11 verify post write barriers between instructions. 12 verify post write barriers between paints. 13 check internal hashtables on minor gc. 14 perform a shrinking collection every frequency allocations. with gc zeal enabled, gc-related crashes are much easier to reproduce (they happen more reliably) and debug (they happen sooner, closer to the source of the bug). the drawback is that gc zeal can cause javascript code to run extremely slowly. regularly running your test suite with gc zeal enabled at level 2 is a good practice. this function is available only in debug builds. to...

AnalyserNode.fftSize - Web APIs
must be a power of 2 between 252^5 and 2152^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768. ...
... must be a power of 2 between 252^5 and 2152^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768. defaults to 2048. ...
...in data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... ...

AudioNode.connect() - Web APIs
illator node. ...
... the gain value of a gainnode using an oscillatornode with a slow frequency value. this technique is know as an lfo-controlled parameter. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // create an normal oscillator to make sound var oscillator = audioctx.createoscillator(); // create a second oscillator that will be used as an lfo (low-frequency // oscillator), and will control a parameter var lfo = audioctx.createoscillator(); // set the frequency of the second oscillator to a low number lfo.frequency.value = 2.0; // 2hz: two oscillations par second // create a gain whose gain audioparam will be controlled by the lfo var gain = audioctx.creategain(); // connect the lfo to the gain audioparam. this means the value of the lfo // will n...
...ing (if it is not already mono). next, it will mix it together with any other such outputs, and the intrinsic parameter value (the value the audioparam would normally have without any audio connections), including any timeline changes scheduled for the parameter. therefore, it is possible to choose the range in which an audioparam will change by setting the value of the audioparam to the central frequency, and to use a gainnode between the audio source and the audioparam to adjust the range of the audioparam changes. specifications specification status comment web audio apithe definition of 'connect() to an audionode' in that specification. working draft web audio apithe definition of 'connect() to an audioparam' in that specification. working draft ...

IDBOpenDBRequest.onupgradeneeded - Web APIs
ndex of books by year. var bookstore = request.transaction.objectstore("books"); var yearindex = bookstore.createindex("by_year", "year"); } if (event.oldversion < 3) { // version 3 introduces a new object store for magazines with two indexes. ...
...request.transaction.objectstore("books"); var yearindex = bookstore.createindex("by_year", "year"); } if (event.oldversion < 3) { // version 3 introduces a new object store for magazines with two indexes. ...
...action.objectstore("books"); var yearindex = bookstore.createindex("by_year", "year"); } if (event.oldversion < 3) { // version 3 introduces a new object store for magazines with two indexes. ...

OscillatorNode - Web APIs
an oscillatornode is created using the baseaudiocontext.createoscillator() method. it always has exactly one output and no inputs. ...
... oscillatornode() creates a new instance of an oscillatornode object, optionally providing an object specifying default values for the node's properties. if the default values are acceptable, you can simply call the baseaudiocontext.createoscillator() factory method. properties inherits properties from its parent, audioscheduledsourcenode, and adds the following properties: oscillatornode.frequency an a-rate audioparam representing the frequency of oscillation in hertz (though the audioparam returned is read-only, the value it represents is not). the default value is 440 hz (a standard middle-a note). oscillatornode.detune an a-rate audioparam representing detuning of oscillation in cents (though the audioparam returned is read-only, the value it represents is not). the default value ...
...usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'oscillatornode' in that specification. working draft ...

CSS values and units - CSS: Cascading Style Sheets
umbers may also be preceded by a + or - symbol. dimensions a <dimension> is a <number> with a unit attached to it, for example 45deg, 100ms, or 10px. the attached unit identifier is case insensitive. there is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm is not valid. css uses dimensions to specify: <length> (distance units) <angle> <time> <frequency> <resolution> these are all covered in subsections below. distance units where a distance unit, also known as a length, is allowed as a value for a property, this is described as the <length> type. there are two types of lengths in css: relative and absolute. relative length units specify a length in relation to something else. for example, em is relative to the font size on the element and...
...ull circle. turn turns there is 1 turn in a full circle. time units time values are represented by the type <time>. when including a time value, the unit identifier -- the s or ms -- is required. it accepts the following values. unit name description s seconds ms milliseconds there are 1,000 milliseconds in a second. frequency units frequency values are represented by the type <frequency>. it accepts the following values. unit name description hz hertz represents the number of occurrences per second. khz kilohertz a kilohertz is 1000 hertz. 1hz, which can also be written as 1hz or 1hz, is one cycle per second. resolution unit resolution units are represented b...
...refers to the percentage of the box's parent's computed width: .box { width: 50%; } mixing percentages and dimensions some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. in this case the allowed value is detailed in the specification as a combination unit, e.g. <length-percentage>. other possible combinations are as follows: <frequency-percentage> <angle-percentage> <time-percentage> special data types (defined in other specs) <color> <image> <position> color the <color> value specifies the color of an element feature (e.g. it's background color), and is defined in the css color module. image the <image> value specifies all the different types of image that can be used in css, and is defined in the css image value...

Audio and video manipulation - Developer guides
or example. ...
...urce src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = do...
...er('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code. common audio filters these are some of the common types of audio filter you can apply: low pass: allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff. high pass: allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff. band pass: allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. low shelf: allows all frequencies through, but adds a boost (or attenuation) to the lower f...

seed - SVG: Scalable Vector Graphics
the seed attribute represents the starting number for the pseudo random number generator of the <feturbulence> filter primitive. ...
...rbulence> filter primitive. ...
...er:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of ...

stitchTiles - SVG: Scalable Vector Graphics
the stitchtiles attribute defines how the perlin noise tiles behave at the border. ...
...t the border. ...
...ch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function. sometimes the result will show clear discontinuities at the tile borders. stitch this value indicates that the user agent will automatically adjust the x and y values of the base frequency such that the <feturbulence> node’s width and height (i.e., the width and height of the current subregion) contain an integral number of the tile width and height for the first octave. specifications specification status comment filter effects module level 1the definition of 'stitchtiles' in that specification. working draft no change scalable vecto...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
ct, xss was the seventh most common web app vulnerability in 2017. 96 cryptanalysis cryptography, glossary, privacy, security cryptanalysis is the branch of cryptography that studies how to break codes and cryptosystems. cryptanalysis creates techniques to break ciphers, in particular by methods more efficient than a brute-force search. in addition to traditional methods like frequency analysis and index of coincidence, cryptanalysis includes more recent methods, like linear cryptanalysis or differential cryptanalysis, that can break more advanced ciphers. 97 cryptographic hash function cryptography, glossary, security a cryptographic hash function, also sometimes called a digest function, is a cryptographic primitive transforming a message of arbitrary siz...
... communications. it's based on the stream-focused transport layer security (tls), providing a similar level of security. as a datagram protocol, dtls doesn't guarantee the order of message delivery, or even that messages will be delivered at all. however, dtls gains the benefits of datagram protocols, too; in particular, the lower overhead and reduced latency. 104 dtmf (dual-tone multi-frequency signaling) dtmf, glossary, webrtc dual-tone multi-frequency (dtmf) signaling is a system by which audible tones are used to represent buttons being pressed on a keypad. frequently referred to in the united states as "touch tone" (after the touch-tone trademark used when the transition from pulse dialing to dtmf began), dtmf makes it possible to signal the digits 0-9 as well as the lette...

Web Audio Editor - Firefox Developer Tools
nodes, including: nodes providing the audio source, such as an oscillator or a data buffer source nodes performing transformations such as delay and gain nodes representing the destination of the audio stream, such as the speakers each node has zero or more audioparam properties that configure its operation. for example, the gainnode has a single gain property, while the oscillatornode has frequency and detune properties. the developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream. the web audio editor examines an audio context constructed in the page and provides a visualization of its graph. this gives you a high-level view of its operation, and enables you to ensure that all the nodes are connected in the way you expect. you can then exam...
...e, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the audioparam: inspecting and modifying audionodes if you click on a node, it's highlighted and you get a node inspector on the right hand side. this list the values of that node's audioparam properties. for example, here's what the oscillatornode looks like: with the violent theremin demo, the frequency parameter is modified as the user moves the mouse left and right, and you can see this reflected in the node inspector. however, the value isn't updated in real time: you have to click the node again to see the updated value. if you click on a value in the node inspector you can modify it: press enter or tab and the new value takes effect immediately. bypassing nodes new in firefox 38. in t...

BaseAudioContext.createAnalyser() - Web APIs
note: for more on using this node, see the analysernode page. syntax var analysernode = baseaudiocontext.createanalyser(); returns an analysernode. example the following example shows basic usage of an audiocontext to create an analyser node, then use requestanimationframe() to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. ...
...in data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... ...

BiquadFilterNode.Q - Web APIs
working draft ...
... working draft ...

BiquadFilterNode.detune - Web APIs
syntax var audioctx = new audiocontext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.detune.value = 100; note: though the audioparam returned is read-only, the value it represents is not. value an a-rate audioparam. example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...
... working draft ...

HTMLMediaElement: timeupdate event - Web APIs
the timeupdate event is fired when the time indicated by the currenttime attribute has been updated. the event frequency is dependant on the system load, but will be thrown between about 4hz and 66hz (assuming the event handlers don't take longer than 250ms to run). user agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the ui updates are not any more frequent than the user agent can comfortably handle while decoding the video. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ontimeupdate specification html5 media examples these examples add ...
...able no interface event target element default action none event handler property globaleventhandlers.ontimeupdate specification html5 media examples these examples add an event listener for the htmlmediaelement's timeupdate event, then post a message when that event handler has reacted to the event firing. remember, the event frequency is dependant on the system load. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('timeupdate', (event) => { console.log('the currenttime attribute has been updated. again.'); }); using the ontimeupdate event handler property: const video = document.queryselector('video'); video.ontimeupdate = (event) => { console.log('the currenttime attri...

RelativeOrientationSensor - Web APIs
methods from its ancestors orientationsensor and sensor. event handlers no specific event handlers; inherits methods from its ancestor, sensor. methods no specific methods; inherits methods from its ancestors orientationsensor and sensor. ...
...onsensor and sensor. examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an relativeorientationsensor with a frequency of 60 times a second. note that the intel demo this is based on uses the absoluteoreintationsensor. on each reading it uses orientationsensor.quaternion to rotate a visual model of a phone. const options = { frequency: 60, referenceframe: 'device' }; const sensor = new relativeorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere. model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sen...

Sensor APIs - Web APIs
'accelerometer' ambientlightsensor 'ambient-light-sensor' gyroscope 'gyroscope' linearaccelerationsensor 'accelerometer' magnetometer 'magnetometer' relativeorientationsensor 'accelerometer', and 'gyroscope' readings sensor readings are received through the sensor.onreading callback which is inherited by all sensor types. reading frequency is decided by you, accomplished with an option passed to a sensor's constructor. the option is a number that specifies the number of readings per second. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. the following example illustrates this using the magnetomete...
...on passed to a sensor's constructor. the option is a number that specifies the number of readings per second. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. the following example illustrates this using the magnetometer sensor. ...

Background audio processing using AudioWorklet - Web APIs
is done by adding the static getter parameterdescriptors to your class. this function should return an array of audioparam objects, one for each parameter supported by the processor. in the following implementation of parameterdescriptors(), the returned array has two audioparam objects. the first defines gain as a value between 0 and 1, with a default value of 0.5. ...
... the returned array has two audioparam objects. the first defines gain as a value between 0 and 1, with a default value of 0.5. the second parameter is named frequency and defaults to 440.0, with a range from 275 to 4186.009, inclusively. static get parameterdescriptors() { return [ { name: "gain", defaultvalue: 0.5, minvalue: 0, maxvalue: 1 }, { name: "frequency", defaultvalue: 440.0; minvalue: 27.5, maxvalue: 4186.009 } ]; } accessing your processor node's parameters is as simple as looking them up in the parameters object passed into your implementation of process(). within the parameters object are arrays, one for each of your parameters, and sharing the same names as your parameters. a-rate parameters for a-rate parameter...

Web Audio API - Web APIs
ces interfaces that define audio sources for use in the web audio api. audioscheduledsourcenode the audioscheduledsourcenode is a parent interface for several types of audio source node interfaces. it is an audionode. oscillatornode the oscillatornode interface represents a periodic waveform, such as a sine or triangle wave. it is an audionode audio-processing module that causes a given frequency of wave to be created. audiobuffer the audiobuffer interface represents a short audio asset residing in memory, created from an audio file using the audiocontext.decodeaudiodata() method, or created with raw data using audiocontext.createbuffer(). once decoded into this form, the audio can then be put into an audiobuffersourcenode. audiobuffersourcenode the audiobuffersourcenode interface rep...
...of your device. mediastreamaudiodestinationnode the mediastreamaudiodestinationnode interface represents an audio destination consisting of a webrtc mediastream with a single audiomediastreamtrack, which can be used in a similar way to a mediastream obtained from getusermedia(). it is an audionode that acts as an audio destination. data analysis and visualization if you want to extract time, frequency, and other data from your audio, the analysernode is what you need. analysernode the analysernode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization. splitting and merging audio channels to split and merge audio channels, you'll use these interfaces. channelsplitternode the channelspl...

Web accessibility for seizures and physical reactions - Accessibility
s can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes” and goes on to note, very specifically that: “people are even more sensitive to red flashing than to other colors, so a special test is provided for saturated red flashing”. you don't even need an image or video to cause harm. a <div> element set to change color and luminosity at high frequency, easily done via javascript, can cause real harm. and, flickering can occur everywhere. for example, "spinners" commonly used to display while pages load, can easily "flicker" while spinning. additional concerns exist for individuals with motor-skills problems. for example, the page for trace research & development center’s photosensitive epilepsy analysis tool notes that “photosensitive sei...
...s vestibuler disordera migraines nausea vomiting flashing, blinking, & flickering although "flashing" and "blinking" are sometimes used interchangably, they are not the same. according to the w3c, blinking is a distraction problem, whereas flashing refers to content that occurs more than 3 times per second, is large enough, and bright enough. section 508 prohibits flickering effects with a frequency greater than 3 hz (flickers per second) and lower than 55 hz. the epilepsy foundation's article "take advantage of media queries with <style> in setting up media queries, you are enabling controls by the user; these controls are made available in the browser or in the os. see the mdn document, "accessibility: what users can to to browse more safely" to see more details of how a user accesses the...

CSS data types - CSS: Cascading Style Sheets
igns "<" and ">". ...
...">". ...

Web video codec guide - Web media technologies
in which a turning wheel appears to rotate at the wrong speed, or even in reverse, due to an interaction between the frame rate and the compression algorithm. the same effect can occur with any repeating pattern that moves, such as the ties on a railway line, posts along the side of a road, and so forth. this is a temporal (time-based) aliasing issue; the speed of the rotation interferes with the frequency of the sampling performed during compression or encoding. color edging color edging is a type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. these colors have no intentional color relationship to the contents of the frame. loss of sharpness the act of removing data in the process of encoding video requires tha...
... a webm container using av1 for video and opus for audio. if you're able to use the high or professional profile when encoding av1, at a high level like 6.3, you can get very high bit rates at 4k or 8k resolution, while maintaining excellent video quality. encoding your audio using opus's fullband profile at a 48 khz sample rate maximizes the audio bandwidth captured, capturing nearly the entire frequency range that's within human hearing. <video controls src="filename.webm"></video> an mp4 container using the hevc codec using one of the advanced main profiles, such as main 4:2:2 with 10 or 12 bits of color depth, or even the main 4:4:4 profile at up to 16 bits per component. at a high bit rate, this provides excellent graphics quality with remarkable color reproduction. in addition, yo...

order - SVG: Scalable Vector Graphics
the order attribute indicates the size of the matrix to be used by a <feconvolvematrix> element. ...
...convolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="emboss1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 3 anim...

scale - SVG: Scalable Vector Graphics
mount is expressed in the coordinate system established by the primitiveunits attribute on the <filter> element. ...
...www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> default value no...

<feTurbulence> - SVG: Scalable Vector Graphics
is of artificial textures like clouds or marble. the resulting image will fill the entire filter primitive subregion. ...
...presentation attributes filter primitive attributes class style specific attributes basefrequency numoctaves seed stitchtiles type dom interface this element implements the svgfeturbulenceelement interface. ...

test/utils - Archive of obsolete content
nchronous, and the callback must be invoked before the next test runs. waituntil(predicate, interval) waituntil returns a promise that resolves upon the predicate returning a truthy value, which is called every interval milliseconds. parameters predicate : function a function that gets called every interval milliseconds to determine if the promise should be resolved. interval : number the frequency in milliseconds to execute predicate. defaults to 10. returns promise : waituntil returns a promise that becomes resolved once the predicate returns a truthy value. the promise cannot be rejected. ...

Performance best practices in extensions - Archive of obsolete content
for asynchronous reading and copying of files. never access a sqlite database synchronously. use the asynchronous api instead. performing sequential, asynchronous operations can often be greatly simplified using promises. avoid mouse movement events avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove. these events happen with high frequency, so their listeners can trivially create very high cpu overhead. when these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled. the listeners should be added to the most specific element possible, and removed when not immediately necessary. avoid animated images animated images are much more expensive than generally expected, especial...

CSS3 - Archive of obsolete content
ned by their grammar token and some textual precisions. adds: definition for new font-relative length units: rem and ch . definition for viewport-relative length units: vw, vh, vmax, and vmin . precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel . definition for <angle>, <time>, <frequency>, <resolution>. normative value to the definition of <color>, <image>, and <position>. definition for the calc(), attr(), and toggle() functional notations. at risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module. several types definition, like <ide...

MMgc - Archive of obsolete content
ain the frame rate the movie will appear to pause and if we don't mark fast enough the mutator could get ahread of the collector and allocate memory so fast that the collection never finishes and memory grows unbounded. the ideal solution will result in only one mark incremental per frame unless the mutator is allocating memory so fast we need to mark more aggressively to get to the sweep. so the frequency of the incremental marking will be based on two factors: the rate at which we can trace memory and the rate at which the mutator is requesting more memory. study of real world apps will be used to determine how best to factor these to rates together. gcheap the gc library has a tiered memory allocation strategy, consisting of 3 parts: a page-granular memory allocator called the gcheap a set of f...

Visualizing an audio spectrum - Archive of obsolete content
signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } fft.forward(signal); // clear the canvas before drawing spectrum ctx.clearrect(0,0, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersiz...

Disabling interruptible reflow - Archive of obsolete content
...

Introducing the Audio API extension - Archive of obsolete content
tadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attribute). content scripts can specify the audio stream's characteristics, then write audio samples. users must create an audio object and then use the mozsetup() function to specify the number of channels and the frequency (in hz). for example: // create a new audio element var audiooutput = new audio(); // set up audio element with 2 channel, 44.1khz audio stream. audiooutput.mozsetup(2, 44100); once this is done, the samples need to be created. those samples have the same format as the ones in the mozaudioavailable event. then the samples are written in the audio stream with the function mozwriteaudio(). it's...

Microsummary topics - Archive of obsolete content
requests initiated manually by users for the purpose of viewing a web page from those initiated automatically by firefox for the purpose of summarizing that page, check for the presence and value of the x-moz request header. if the x-moz header is present, and its value is microsummary, then the request is a microsummary-related request. otherwise, it is a user-initiated request. controlling the frequency of microsummary requests when firefox downloads content in order to update a microsummary, it honors cache-related http response headers. thus, if you would like to control how frequently firefox initiates microsummary-related requests to your web server, you can do so by including an http expires or cache-control header in your response to a microsummary-related request. for example, you might i...

Skinning XUL Files by Hand - Archive of obsolete content
e within a <p> element or a <div> -- can be grouped in css, but this is an extremely inefficient way to style xul, and is frowned upon in the mozilla development community (again, refer to the skinning guidelines in writing skinnable xul and css for more info); css2 also provides some new ways to group elements for styling, which we summarize briefly here, because they appear in mozilla with some frequency, but reserve for another article: pseudo-class parent-child element:pseudo-class { attribute: value; } parent > child { attribute: value; } button:hover { border: 1px; } menu#file > menuitem { font-weight: bold; } pseudo-classes reflect states of the element: when the mouse moves over a button, for example, the appropriate ps...

Displaying a graphic with audio samples - Archive of obsolete content
[2*i+1]) / 2; } // clear the canvas before drawing spectrum ctx.fillstyle = "rgb(0,0,0)"; ctx.fillrect (0,0, canvas.width, canvas.height); ctx.fillstyle = "rgb(255,255,255)"; for (var i = 0; i < signal.length; i++ ) { // multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </s...

Unconventional controls - Game development
script is here already. you can explore the hand's properties and implement any behaviour you like right inside your game. doppler effect there's a very interesting article available on motion sensing using the doppler effect, which mixes together waving your hand and using the microphone. this time it's about detecting sound waves bouncing off objects and returning to the microphone. if the frequency of the bounced sound is shifted from the original one, then we can detect that the movement of that object occured. that way we can detect a hand movement by using only a built-in microphone! this can be accomplished using a small library created by daniel rapp — it can be as simple as calculating the difference between two frequencies: doppler.init(function(bandwidth) { var diff = bandwi...

Cryptanalysis - MDN Web Docs Glossary: Definitions of Web-related terms
cryptanalysis is the branch of cryptography that studies how to break codes and cryptosystems. cryptanalysis creates techniques to break ciphers, in particular by methods more efficient than a brute-force search. in addition to traditional methods like frequency analysis and index of coincidence, cryptanalysis includes more recent methods, like linear cryptanalysis or differential cryptanalysis, that can break more advanced ciphers. learn more general knowledge cryptanalysis on wikipedia ...

Delta - MDN Web Docs Glossary: Definitions of Web-related terms
two values or states. the name originates from the greek letter Δ (delta), which is equivalent to the letter d in the roman alphabet. delta simply refers to the use of the letter Δ as a shorthand for difference. the term delta is commonly used when communicating changes in speed, position, or acceleration of a physical or virtual object. it's also used when describing changes in the volume or frequency of sound waves. for example, when describing how far an object on the screen moves left-to-right, one might use the term delta x or Δx. likewise, given the new value of x and its old value, you might compute the delta like this: let deltax = newx - oldx; more commonly, you receive the delta and use it to update a saved previous condition: let newx = oldx + deltax; learn more technical ref...

MDN Web Docs Glossary: Definitions of Web-related terms
digest digital certificate distributed denial of service dmz dns doctype document directive document environment dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dtmf (dual-tone multi-frequency signaling) dynamic programming language dynamic typing e ecma ecmascript effective connection type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fal...

Video and Audio APIs - Learn web development
ee seconds from the current time by executing media.currenttime -= 3. so in effect, we are rewinding the video by 3 seconds, once every 200 milliseconds. updating the elapsed time the very last piece of our media player to implement is the time elapsed displays. to do this we'll run a function to update the time displays every time the timeupdate event is fired on the <video> element. the frequency with which this event fires depends on your browser, cpu power, etc (see this stackoverflow post). add the following addeventlistener() line just below the others: media.addeventlistener('timeupdate', settime); now to define the settime() function. add the following at the bottom of your file: function settime() { let minutes = math.floor(media.currenttime / 60); let seconds = math.floor(...

Mozilla's Section 508 Compliance
) when a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided. complete. mozilla's appearance preferences panel contains a large number of color possibilities. (k) software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 hz and lower than 55 hz. complete. mozilla supports of <blink> and text-decoration: blink in web pages. in these situations mozilla blinks 1 hz, which is within the allowable range and follows the stricter mil-std standard. (l) when electronic forms are used, the form shall allow people using assistive technology to access the information, field elemen...

Activity Monitor, Battery Status Menu and top
l for cursory measurements, but for more precise and detailed measurements other tools such as powermetrics are better. what does "energy impact" measure? "energy impact" is a hybrid proxy measure of power consumption. careful investigation indicates that on mac os 10.10 and 10.11 it is computed with a formula that is machine model-specific, and includes the following factors: cpu usage, wakeup frequency, quality of service class usage, and disk, gpu, and network activity. the weightings of each factor can be found in one of the the files in /usr/share/pmenergy/mac-<id>.plist, where <id> can be determined with the following command. ioreg -l | grep board-id in contrast, on mac os 10.9 it is computed via a simpler machine model-independent formula that only factors in cpu usage and wakeup freque...

Gecko Profiler FAQ
id measuring the wrong thing. if the issue you are trying to avoid is not profiling on fast machines that mozilla developers typically use to build firefox on, a better solution may be using a less high-end machine that actually has lower spec’d hardware instead of artificially slowing down just the cpu. another approach to get more precision is also raising the sampling frequency to sub-millisecond ranges (it won’t work on windows.) high frequency sampling may also be an area where native profilers are a useful alternative tool to try. how do we profile "leaks" that show up after running firefox for > 40 mins? the gecko profiler has been designed specifically for the use case of having it run always in the background, and it’s pretty good at ...

Intel Power Gadget
llowing screenshot (from the mac version) demonstrates the available measurements. the three panes display the following information: power: shows power estimates for the package and the cores ("ia"). these are reasonably useful for power profiling purposes, but mozilla's rapl utility provides these along with gpu and ram estimates, and in a command-line format that is often easier to use. frequency: shows operating frequency measurements for the cores ("ia") and the gpu ("gt"). these measurements aren't particularly useful for power profiling purposes. temperature: shows the package temperature. this is interesting, but again not useful for power profiling purposes. specificially, the temperature is a proxy measurement that is affected by processor power consumption, rather than one that a...

Profiling with the Firefox Profiler
elines is aligned with wall clock time. so, for example, when a thread is blocked, like 'geckomain [tab]', on a thread like 'geckomain [default]', we can see what's occurring on the latter thread that is preventing it from responding to the former. x (time) axis: the timelines go from left to right as wall clock time increases along the x axis. elements in the timeline are spaced at the sampling frequency with an attempt to align them with time. factors such as sampling or stack-walking variance and system load can lead to sampling delays which manifest as gaps in the timeline. note: because this is a sampling profiler, be cautious when examining running time that is equal to the sampling interval. for very time-sensitive profiling, you may want to consider a non-sampling profiler. y (stack) a...

powermetrics
by the coalition/process, per second, during the sample period. the sum of the process values typically exceeds the coalition value slightly, for unknown reasons. user%: percentage of that cpu time spent in user space (as opposed to kernel mode.) deadlines (<2 ms, 2-5 ms): these two columns count how many "short" timers woke up threads in the process, per second, during the sample period. high frequency timers, which typically have short time-to-deadlines, can cause high power consumption and should be avoided if possible. wakeups (intr, pkg idle): these two columns count how many wakeups occurred, per second, during the sample period. the first column counts interrupt-level wakeups that resulted in a thread being dispatched in the process. the second column counts "package idle exit" wakeups, ...

JSAPI User Guide
er to its cause) and more reliably. it's for development and debugging only, because the extra garbage collection makes js very slow. use js_dumpheap to dump the spidermonkey heap or specific interesting parts of it. see spidermonkey garbage collection internals for more details. gc performance overly frequent garbage collection can be a performance issue. some applications can reduce the frequency of garbage collection simply by increasing the initial size of the jsruntime. perhaps the best technique is to perform garbage collection during idle time, when it is least likely to have any impact on the user. by default, the javascript engine performs garbage collection when it has no other choice except to grow the process. this means that garbage collection typically happens when memory-int...

JS_ScheduleGC
this article covers features introduced in spidermonkey 17 set nextscheduled parameter of gc. syntax void js_schedulegc(jscontext *cx, uint32_t count); name type description cx jscontext * a context. the gc zeal level of the associated jsruntime is set. frequency uint32_t the value of nextscheduled parameter of gc. description js_schedulegc sets the nextscheduled parameter of gc. at every allocation nextscheduled is decremented. when it reaches zero, we do either a full or a compartmental gc. at this point, if zeal is one of the types that trigger periodic collection, then nextscheduled is reset to the value of frequency. otherwise, no additional gcs take place. see also mxr id search for js_schedulegc js_setgczeal bug 65097...

Shell global objects
ing gc rather than a normal gc. minorgc([abouttooverflow]) run a minor collector on the nursery. when abouttooverflow is true, marks the store buffer as about-to-overflow before collecting. gcparam(name [, value]) wrapper for js_[gs]etgcparameter. the name is one of: maxbytes maxmallocbytes gcbytes gcnumber mode unusedchunks totalchunks slicetimebudget markstacklimit highfrequencytimelimit highfrequencylowlimit highfrequencyhighlimit highfrequencyheapgrowthmax highfrequencyheapgrowthmin lowfrequencyheapgrowth dynamicheapgrowth dynamicmarkslice allocationthreshold minemptychunkcount maxemptychunkcount compactingenabled refreshframeslicesenabled relazifyfunctions(...) perform a gc and allow relazification of functions. accepts the same arguments...

The Places database
(see also history service design). any time a places component wants to reference a url, whether visited or not, it refers to this table. each entry has an optional reference to the moz_favicon table to identify the favicon of the page. no two entries may have the same value in the url column. moz_hosts: one entry in this table is created each time you visit a new host. it contains the host url, frequency of access, if typed or not, and it's prefix (https://, ftp://, etc). history tables moz_historyvisits: one entry in this table is created each time you visit a page. it contains the date, referrer, and other information specific to that visit. it contains a reference to the moz_places table which contains the url and other global statistics. see history service design for more information.

Frecency algorithm
places with this value can show up in autocomplete results. ...

Index
preference is given to colors that are more interesting. it avoids the background color if it can be discerned and ignores sufficiently transparent colors. 196 mozijssubscriptloader interfaces, interfaces:scriptable, reference, référence(2), xpcom, xpcom api reference, xpcom interface reference implemented by: @mozilla.org/moz/jssubscript-loader;1. to get thi...

mozIColorAnalyzer
preference is given to colors that are more interesting. it avoids the background color if it can be discerned and ignores sufficiently transparent colors. this is intended to be used on favicon images. larger images take longer to process, especially those with a larger number of unique colors. if imageuri points to an image that has more than 128^2 pixels, this method will fail f...

nsIRequest
oad of content data from the origin server. this flag is used for a shift-reload. load_from_cache 1 << 10 load from the cache, bypassing protocol specific validation logic. this flag is used when browsing via history. it is not recommended for normal browsing as it may likely violate reasonable assumptions made by the server and confuse users. the following flags control the frequency of cached content validation when neither load_bypass_cache or load_from_cache are set. by default, cached content is automatically validated if necessary before reuse. note: these flags are intended for normal browsing, and they should therefore not apply to content that must be validated before each use. consider, for example, a http response with a "cache-control: no-cache" header. according ...

Settings - Firefox Developer Tools
and the style editor. detect indentation auto-indent new lines based on the current indentation. autoclose brackets determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you. indent using spaces when checked, indentation will be performed using spaces, when off, the editor will use tabs instead. tab size the frequency of tab stops in the editor. select 2, 4, or 8. keybindings choose the default codemirror keybindings or keybindings from one of several popular editors: vim emacs sublime text advanced settings show gecko platform data a setting to control whether or not profiles should include gecko platform symbols. disable http cache disable the browser http cache to simulate first-loa...

ANGLE_instanced_arrays - Web APIs
me "angle", this extension works on any device if the hardware supports it and not just on windows when using the angle library. "angle" just indicates that this extension has been written by the angle library authors. constants this extension exposes one new constant, which can be used in the gl.getvertexattrib() method: ext.vertex_attrib_array_divisor_angle returns a glint describing the frequency divisor used for instanced rendering when used in the gl.getvertexattrib() as the pname parameter. methods this extension exposes three new methods. ext.drawarraysinstancedangle() behaves identically to gl.drawarrays() except that multiple instances of the range of elements are executed, and the instance advances for each iteration. ext.drawelementsinstancedangle() behaves identica...

AbsoluteOrientationSensor - Web APIs
ence coordinate system. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var absoluteorientationsensor = new absoluteorientationsensor([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device'. ...

AbsoluteOrientationSensor - Web APIs
methods from its ancestors orientationsensor and sensor. event handlers no specific event handlers; inherits methods from its ancestor, sensor. methods no specific methods; inherits methods from its ancestors orientationsensor and sensor. examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an absoluteorientationsensor with a frequency of 60 times a second. on each reading it uses orientationsensor.quaternion to rotate a visual model of a phone. const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere. model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor...

Accelerometer.Accelerometer() - Web APIs
ce along all three axes at the time it is read. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var accelerometer = new accelerometer([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onerror will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device'. ...

Accelerometer.x - Web APIs
inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var xacceleration = accelerometer.x value a number. example acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Accelerometer.y - Web APIs
inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var yacceleration = accelerometer.y value a number. example acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Accelerometer.z - Web APIs
inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var zacceleration = accelerometer.z value a number. example acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Accelerometer - Web APIs
s. accelerometer.y read only returns a double containing the acceleration of the device along the device's y axis. accelerometer.z read only returns a double containing the acceleration of the device along the device's z axis. example acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. let acl = new accelerometer({frequency: 60}); acl.addeventlistener('reading', () => { console.log("acceleration along the x-axis " + acl.x); console.log("acceleration along the y-axis " + acl.y); console.log("acceleration along the z-axis " + acl.z); }); acl.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general. accel...

AmbientLightSensor.AmbientLightSensor() - Web APIs
und the hosting device. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var ambientlightsensor = new ambientlightsensor(options) parameters options optional currently only one option is supported: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. specifications specification status comment ...

AnalyserNode.AnalyserNode() - Web APIs
the default is 2048. ...

AnalyserNode.getFloatTimeDomainData() - Web APIs
= audioctx.createanalyser(); var dataarray = new float32array(analyser.fftsize); // float32array needs to be the same length as the fftsize analyser.getfloattimedomaindata(dataarray); // fill the float32array with data returned from getfloattimedomaindata() parameters array the float32array that the time domain data will be copied to. if the array has fewer elements than the analysernode.frequencybincount, excess elements are dropped. if it has more elements than needed, excess elements are ignored. return value none. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied exam...

AudioContext.createJavaScriptNode() - Web APIs
javascript. important: this method is obsolete, and has been renamed to audiocontext.createscriptprocessor(). see also scriptprocessornode. syntax var jsnode = audioctx.createjavascriptnode(buffersize, numinputchannels, numoutputchannels); parameters buffersize the buffer size must be in units of sample frames, i.e., one of: 256, 512, 1024, 2048, 4096, 8192, or 16384. it controls the frequency of callbacks asking for a buffer refill. smaller sizes allow for lower latency and higher for better overall quality. numinputchannels the number of input channels in the audio stream. numoutputchannels the number of output channels in the audio stream. example the following script illustrates the use of createjavascriptnode(): var sinewave = function(context) { var that = this; this.

AudioContext.createMediaStreamSource() - Web APIs
y(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get new mouse pointer coordinates when mouse ...

AudioContext.createMediaStreamTrackSource() - Web APIs
working draft ...

BaseAudioContext.createBiquadFilter() - Web APIs
working draft ...

BaseAudioContext.createBuffer() - Web APIs
is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space. resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound). now let's look at a more complex createbuffer() example, in which we create a three second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comment should clearly explain what is going on. you can also run the code live, or view the source. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create an empty th...

BaseAudioContext.createOscillator() - Web APIs
ate an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more information. // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status comment web audio apithe definition of 'createoscillator' in that specification. working draft ...

BaseAudioContext.createPeriodicWave() - Web APIs
al tone is by definition a sine wave here, we create a periodicwave with two values. the first value is the dc offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value. here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to get a time domain buffer for the frequency of the oscillator. here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave. the coefficients of the fourier transform should be given in ascending order (...

BaseAudioContext - Web APIs
hat runs when an event of type statechange has fired. this occurs when the audiocontext's state changes, due to the calling of one of the state change methods (audiocontext.suspend, audiocontext.resume, or audiocontext.close). methods also implements methods from the interface eventtarget. baseaudiocontext.createanalyser() creates an analysernode, which can be used to expose audio time and frequency data and for example to create data visualisations. baseaudiocontext.createbiquadfilter() creates a biquadfilternode, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc baseaudiocontext.createbuffer() creates a new, empty audiobuffer object, which can then be populated by data and played via an audiobuffersource...

BiquadFilterNode.gain - Web APIs
working draft ...

CSS numeric factory functions - Web APIs
(number); css.rem(number); css.lh(number); css.rlh(number); css.vw(number); css.vh(number); css.vi(number); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssunitvalue {value: 50, unit: "vmax"} console.log( height.value ) // 50 console.log( height.unit ) // vmax in this exa...

CSSNumericValue.type - Web APIs
syntax var cssnumerictype = cssnumericvalue.type(); parameters none. return value a cssnumerictype object. exceptions none. ...

CSSPrimitiveValue.getFloatValue() - Web APIs
he value is a <length> in centimeters. css_deg the value is an <angle> in degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> in ex units. css_grad the value is an <angle> in grads. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_in the value is a <length> in inches. css_khz the value is a <frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc ...

CSSPrimitiveValue.primitiveType - Web APIs
ethod. css_ems the value is a <length> in em units. the value can be obtained by using the getfloatvalue() method. css_exs the value is a <length> in ex units. the value can be obtained by using the getfloatvalue() method. css_grad the value is an <angle> in grads. the value can be obtained by using the getfloatvalue() method. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_ident the value is an identifier. the value can be obtained by using the getstringvalue() method. css_in the value is a <length> in inches. the value can be obtained by using the getfloatvalue() method. css_khz the value is a <frequency> in kilohertz. the value can be obtained by using ...

CSSPrimitiveValue.setFloatValue() - Web APIs
he value is a <length> in centimeters. css_deg the value is an <angle> in degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> in ex units. css_grad the value is an <angle> in grads. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_in the value is a <length> in inches. css_khz the value is a <frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc ...

CSSPrimitiveValue - Web APIs
css_ems the value is a <length> in em units. the value can be obtained by using the getfloatvalue() method. css_exs the value is a <length> in ex units. the value can be obtained by using the getfloatvalue() method. css_grad the value is an <angle> in grads. the value can be obtained by using the getfloatvalue() method. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_ident the value is an identifier. the value can be obtained by using the getstringvalue() method. css_in the value is a <length> in inches. the value can be obtained by using the getfloatvalue() method. css_khz the value is a <frequency> in kilohertz. the value can be obtain...

Gyroscope.Gyroscope() - Web APIs
e angular velocity of the device along all three axes. if a feature policy blocks use of a feature, it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var gyroscope = new gyroscope([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device'. ...

Gyroscope.x - Web APIs
s because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var x = gyroscope.x value a number. example the gyroscope is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Gyroscope.y - Web APIs
s because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var y = gyroscope.y value a number. example the gyroscope is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Gyroscope.z - Web APIs
s because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var z = gyroscope.z value a number. example the gyroscope is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Gyroscope - Web APIs
yroscope.y read only returns a double, containing the angular velocity of the device along the device's y axis. gyroscope.z read only returns a double, containing the angular velocity of the device along the device's z axis. example the gyroscope is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

IIRFilterNode - Web APIs
losely enough. the actual time that takes depends on the filter coefficients provided. constructor iirfilternode() creates a new instance of an iirfilternode object. properties this interface has no properties of its own; however, it inherits properties from its parent, audionode. methods inherits methods from its parent, audionode. it also has the following additional methods: getfrequencyresponse() uses the filter's current parameter settings to calculate the response for frequencies specified in the provided array of frequencies. examples you can find a simple iir filter demo live on codepen. also see the source code on github. it includes some different coefficient values for different lowpass frequencies — you can change the value of the filternumber constant to a value b...

Key Values - Web APIs
off. vk_random_toggle gdk_key_audiorandomplay (0x1008ff99) "rclowbattery" a code sent when the remote control's battery is low. this doesn't actually correspond to a physical key at all. vk_rc_low_battery "recordspeednext" cycles among the available media recording speeds. vk_record_speed_next "rfbypass" toggles radio frequency (rf) input bypass mode on and off. rf bypass mode passes rf input directly to the rf output without any processing or filtering. vk_rf_bypass "scanchannelstoggle" toggles the channel scan mode on and off. this is a mode which flips through channels automatically until the user stops the scan. vk_scan_channels_toggle "screenmodenext" cycles thr...

LinearAccelerationSensor.LinearAccelerationSensor() - Web APIs
contribution of gravity. if a feature policy blocks use of a feature, it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var linearaccelerationsensor = new linearaccelerationsensor([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends on device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device...

LinearAccelerationSensor.x - Web APIs
n your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var xlinearaccelerationsensor = linearaccelerationsensor.x value a number. example linear acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

LinearAccelerationSensor.y - Web APIs
with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var yacceleration = accelerometer.y value a number. example linear acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

LinearAccelerationSensor.z - Web APIs
with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var zacceleration = accelerometer.z value a number. example linear acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

LinearAccelerationSensor - Web APIs
containing the linear acceleration of the device along the device's y axis. linearaccelerationsensor.z read only returns a double containing the linear acceleration of the device along the device's z axis. example linear acceleration is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Magnetometer.Magnetometer() - Web APIs
cted by a device’s primary magnetometer sensor. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var magnetometer = new magnetometer([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends on device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device...

Magnetometer.x - Web APIs
s inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var magnetometerx = magnetometer.x value a number. example the magnetometer is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Magnetometer.y - Web APIs
s inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var magnetometery = magnetometer.x value a number. example the magnetometer is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Magnetometer.z - Web APIs
s inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var magnetometerz = magnetometer.z value a number. example the magnetometer is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

Magnetometer - Web APIs
device's x axis. magnetometer.y read only returns a double containing the magnetic field around the device's y axis. magnetometer.z read only returns a double containing the magnetic field around the device's z axis. example the magnetometer is typically read in the sensor.onreading event callback. in the example below this occurs sixty times a second. ...

MediaStreamAudioSourceNode - Web APIs
y(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get new mouse pointer coordinates when mouse ...

MediaStreamTrackAudioSourceNode - Web APIs
y(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get new mouse pointer coordinates when mouse ...

OrientationSensor - Web APIs
nents of the unit quaternion representing the device's orientation. methods orientationsensor.populatematrix() populates the given object with the rotation matrix based on the latest sensor reading. the rotation maxtrix is shown below. examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an absoluteorientationsensor with a frequency of 60 times a second. on each reading it uses orientationsensor.quaternion to rotate a visual model of a phone. const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere. model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.

OscillatorNode.OscillatorNode() - Web APIs
s optional an object whose properties specify the initial values for the oscillator node's properties. any properties omitted from the object will take on the default value as documented. type the shape of the wave produced by the node. valid values are 'sine', 'square', 'sawtooth', 'triangle' and 'custom'. the default is 'sine'. detune a detuning value (in cents) which will offset the frequency by the given amount. its default is 0. frequency the frequency (in hertz) of the periodic waveform. its default is 440. periodicwave an arbitrary period waveform described by a periodicwave object. return value a new oscillatornode object instance. specifications specification status comment web audio apithe definition of 'oscillatornode()' in that specifi...

OscillatorNode.detune - Web APIs
ing example shows basic usage of an audiocontext to create an oscillator node. for applied examples/information, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.detune.setvalueattime(100, audioctx.currenttime); // value in cents oscillator.start(); specifications specification status comment web audio apithe definition of 'detune' in that specification. working draft ...

OscillatorNode.onended - Web APIs
the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.value = 440; // value in hertz oscillator.start(); // start the tone playing oscillator.stop(5); // the tone will stop again in 5 seconds. oscillator.onended = function() { console.log('your tone has now stopped playing!'); } properties none. specifications specification status comment web audio apithe definition of 'onended' in that specification. working draf...

OscillatorNode.setPeriodicWave() - Web APIs
tone is by definition a sine wave. here, we create a periodicwave with two values. the first value is the dc offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value. here, with createperiodicwave(), you specify the frequencies, and the browser performs a an inverse fourier transform to get a time domain buffer for the frequency of the oscillator. here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave. specifications specification status comment web aud...

OscillatorNode.start() - Web APIs
the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of 'start' in that specification. working draft ...

OscillatorNode.type - Web APIs
the following example shows basic usage of an audiocontext to create an oscillator node. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status comment web audio apithe definition of 'type' in that specification. working draft ...

PeriodicWave - Web APIs
al tone is by definition a sine wave here, we create a periodicwave with two values. the first value is the dc offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range. the second and subsequent values are sine and cosine components. you can think of it as the result of a fourier transform, where you get frequency domain values from time domain value. here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to get a time domain buffer for the frequency of the oscillator. here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave. the coefficients of the fourier transform should be given in ascending order (...

RelativeOrientationSensor.RelativeOrientationSensor() - Web APIs
s physical orientation. if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax var relativeorientationsensor = new relativeorientationsensor([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called. a whole number or decimal may be used, the latter for frequencies less than a second. the actual reading frequency depends device hardware and consequently may be less than requested. referenceframe: either 'device' or 'screen'. the default is 'device'. ...

SVGFETurbulenceElement - Web APIs
or to attempt to switch an existing value to this type. svg_stitchtype_stitch 1 corresponds to the stitch value. svg_stitchtype_nostitch 2 corresponds to nostitch value. properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes. svgfeturbulenceelement.basefrequencyx read only an svganimatednumber corresponding to the x component of the basefrequency attribute of the given element. svgfeturbulenceelement.basefrequencyy read only an svganimatednumber corresponding to the y component of the basefrequency attribute of the given element. svgfeturbulenceelement.numoctaves read only an svganimatedinteger corresponding to the numoctaves attribute of the giv...

WebGLRenderingContext.getVertexAttrib() - Web APIs
with 4 elements) representing the current value of the vertex attribute at the given index. when using a webgl 2 context, the following values are available additionally: gl.vertex_attrib_array_integer: returns a glboolean indicating whether or not an integer data type is in the vertex attribute array at the given index. gl.vertex_attrib_array_divisor: returns a glint describing the frequency divisor used for instanced rendering. when using the angle_instanced_arrays extension: ext.vertex_attrib_array_divisor_angle: returns a glint describing the frequency divisor used for instanced rendering. return value returns the requested vertex attribute information (as specified with pname). examples gl.getvertexattrib(0, gl.vertex_attrib_array_buffer_binding);...

WebGL constants - Web APIs
webgl_debug_renderer_info constant name value description unmasked_vendor_webgl 0x9245 passed to getparameter to get the vendor string of the graphics driver. unmasked_renderer_webgl 0x9246 passed to getparameter to get the renderer string of the graphics driver. ext_texture_filter_anisotropic ...

WebRTC API - Web APIs
s a certificate that an rtcpeerconnection uses to authenticate. telephony these interfaces and events are related to interactivity with public-switched telephone networks (ptsns). they're primarily used to send tone dialing sounds—or packets representing those tones—across the network to the remote peer. interfaces rtcdtmfsender manages the encoding and transmission of dual-tone multi-frequency (dtmf) signaling for an rtcpeerconnection. rtcdtmftonechangeevent used by the tonechange event to indicate that a dtmf tone has either begun or ended. this event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated). events tonechange either a new dtmf tone has begun to play over the connection, or the last tone in the rtcdtmfsender's tonebu...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
nforce even more stringent minimum values for the interval under some circumstances, although these should not be common. note also that the actual amount of time that elapses between calls to the callback may be longer than the given delay; see reasons for delays longer than specified in windoworworkerglobalscope.settimeout() for examples. ensure that execution duration is shorter than interval frequency if there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using settimeout(). for example, if using setinterval() to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. as such, you ...

Operable - Accessibility
nds, and is shown alongside other content, controls should be provided to pause, stop, or hide it. this does not apply to moving/blinking content that is essential to the experience. examples include scrolling text and videos. for auto-updating information that starts automatically and is shown alongside other content, controls should be provided to pause, stop, or hide it, or to control the frequency of updates. this does not apply to auto-updating content that is essential to the experience. examples include carousels or rotating annoucements. 2.2.3 no time limits (aaa) this builds on criteria 2.2.1, stating that content that wants to pass aaa conformance should have no time limits. 2.2.4 surpress interruptions (aaa) any interruptions such as alerts or int...

Using CSS animations - CSS: Cascading Style Sheets
the animations run well, even under moderate system load. simple animations can often perform poorly in javascript (unless they’re well made). the rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible. letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible. configuring the animation to create a css animation sequence, you style the element you want to animate with the animation property or its sub-properties. this lets you configure the timing, duration, and other details of how the animation sequence should progress. this does not configure the actual appearance of the animation, which...

CSS reference - CSS: Cascading Style Sheets
ridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orie...

calc() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* property: calc(expression) */ width: calc(100% - 80px); the calc() function takes a single expression as its parameter, with the expression's result used as the value. ...

clamp() - CSS: Cascading Style Sheets
the clamp() css function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. it takes three parameters: a minimum value, a preferred value, and a maximum allowed value. the clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. clamp(min, val, max) is resolved as max(min, min(val, max)) the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the siz...

<dimension> - CSS: Cascading Style Sheets
syntax the syntax of <dimension> is a <number> immediately followed by a unit which is an identifier. unit identifiers are case insensitive. ...

max() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

min() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

Critical rendering path - Web Performance
the number of nodes, the longer layout takes. layout can become a bottleneck, leading to jank if required during scrolling or other animations. while a 20ms delay on load or orientation change may be fine, it will lead to jank on animation or scroll. any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs. to reduce the frequency and duration of layout events, batch updates and avoid animating box model properties. paint the last step is painting the pixels to the screen. once the render tree is created and layout occurs, the pixels can be painted to the screen. onload, the entire screen is painted. after that, only impacted areas of the screen will be repainted, as browsers are optimized to repaint the minimum area req...

result - SVG: Scalable Vector Graphics
ecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> usage notes value <filter-primitive-reference> default value none animatable ye...

SVG Attribute reference - SVG: Scalable Vector Graphics
d be handled or rendered. below is a list of all of the attributes available in svg along with links to reference documentation to help you learn which elements support them and how they work. ...

Content type - SVG: Scalable Vector Graphics
gcolor. coordinate <coordinate> a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates). its syntax is the same as that for <length>. within the svg dom, a <coordinate> is represented as an svglength or an svganimatedlength. frequency <frequency> frequency values are used with aural properties. as defined in css2, a frequency value is a <number> immediately followed by a frequency unit identifier. the frequency unit identifiers are: hz: hertz khz: kilo hertz frequency values may not be negative. funciri <funciri> functional notation for a reference. the syntax for this reference is the same as the css ...

<feDisplacementMap> - SVG: Scalable Vector Graphics
ntation attributes filter primitive attributes class style specific attributes in in2 scale xchannelselector ychannelselector dom interface this element implements the svgfedisplacementmapelement interface. ...

SVG documentation index - SVG: Scalable Vector Graphics
tributetype deprecated, needscompattable, svg, svg attribute the attributetype attribute specifies the namespace in which the target attribute and its associated values are defined. 29 azimuth filters, svg, svg attribute the azimuth attribute specifies the direction angle for the light source on the xy plane (clockwise), in degrees from the x axis. 30 basefrequency filters, svg, svg attribute the basefrequency attribute represents the base frequency parameter for the noise function of the <feturbulence> filter primitive. 31 baseprofile deprecated, svg, svg attribute the baseprofile attribute describes the minimum svg language profile that the author believes is necessary to correctly render the content. the attribute does not ...