<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Virtual Oscilloscope | Academo.org - Free, interactive, education.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/scss/main.css?v=1506008388">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@AcademoOrg">
<meta name="twitter:title" content="Virtual Oscilloscope">
<meta name="twitter:description" content="This
online virtual oscilloscope allows you to visualise live sound input
and get to grips with how to adjust the display. If you find this
useful, our online spectrum analyser may also be of interest to you.">
<meta name="twitter:image" content="https://academo.org/demos/virtual-oscilloscope/twitter-card.png">
<meta property="og:url" content="https://academo.org/demos/virtual-oscilloscope/" />
<meta property="og:site_name" content="Academo.org"/>
<meta property="og:title" content="Virtual Oscilloscope"/>
<meta property="og:description" content="This
online virtual oscilloscope allows you to visualise live sound input
and get to grips with how to adjust the display. If you find this
useful, our online spectrum analyser may also be of interest to you."/>
<meta property="og:image" content="https://academo.org/demos/virtual-oscilloscope/facebook-og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<style type="text/css" class='demo-specific-styles'>
#demo{
position:relative;
}
canvas{
position: absolute;
top:0;
left:0;
display: block;
border:solid 5px #E3E3E3;
/*border-radius: 10px;*/
/*background: #E3E3E3;*/
}
.preamble{
margin-bottom: 20px;
}
.embedded {
height:380px;
overflow:hidden;
}
.embedded #ui-container {
height: 358px;
overflow-y: scroll;
}
.embedded .header,
.embedded .preamble,
.embedded .sponsor-wrapper,
.embedded .demo-description,
.embedded .sidebar,
.embedded .footer {
display:none;
}
.embedded .main {
width: 100%;
padding: 10px;
margin: 0 auto;
box-sizing: border-box;
}
.embed-title {
margin-top: 0;
font-size: 14px;
}
</style>
</head>
<body class='body--shaded '>
<div class="header">
<div class="header-upper">
<div class="header-inner">
<a class="logo" href="/">Academo</a>
<ul class="nav nav--primary">
<li><a class="" href="/about/">About</a></li>
<li><a class="" href="/search/">Search</a></li>
<li><a class="" href="/contact/">Contact</a></li>
<li><a class="" href="/submit-an-idea/">Submit an idea</a></li>
<li><a class="" href="/sponsor/">Sponsor</a></li>
</li>
<li class="social--twitter"><a target='_blank' href="https://twitter.com/AcademoOrg"><i class="fa fa-twitter"></i></a></li>
<li class="social--facebook"><a target='_blank' href="https://facebook.com/academo.org"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
</div>
<div class="header-lower">
<div class="header-inner">
<ul class="nav nav--secondary">
<li><a class="mobile-show " href="/demos/">Browse all demos</a></li>
<li><a class="mobile-hide " href="/demos/">All</a></li>
<li><a class="mobile-hide " href="/engineering/">Engineering</a></li>
<li><a class="mobile-hide " href="/geography/">Geography</a></li>
<li><a class="mobile-hide " href="/maths/">Maths</a></li>
<li><a class="mobile-hide " href="/music/">Music</a></li>
<li><a class="mobile-hide " href="/physics/">Physics</a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div class='sponsor-wrapper js-sponsor-wrapper'>
</div>
<div class="main">
<div class="preamble">
<h1>Virtual Oscilloscope</h1>
<hr>
<p class="blurb">
This online virtual oscilloscope allows you
to visualise live sound input and get to grips with how to adjust the
display. If you find this useful, our <a href='/demos/spectrum-analyzer/'>online spectrum analyser</a> may also be of interest to you.
</p>
<p class="tags">
<a href='/physics'>Physics</a>
<a href='/physics/sound/'>Sound</a>
<a href='/search/?q=audio'>Audio</a>
</p>
<hr>
<div class="social-buttons">
<div class="social-button social-button--google-classroom">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-sharetoclassroom" data-size="32" data-url="https://academo.org/demos/virtual-oscilloscope/" ></div>
</div>
<div class="social-button social-button--facebook">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://academo.org/demos/virtual-oscilloscope/"></a>
</div>
<div class="social-button social-button--twitter">
<a target="_blank" href="https://twitter.com/intent/tweet?text=Virtual Oscilloscope%20https://academo.org/demos/virtual-oscilloscope/+from+@AcademoOrg"></a>
</div>
</div>
<hr>
</div>
<div id="demo" class="">
</div>
<div class="clearfix" id='ui-container'>
</div>
<div class="demo-description">
<hr>
<p>
An oscilloscope is a useful tool for anyone
working with electrical signals because it provides a visual
representation of the signal's shape, or waveform. This allows you to
measure properties of the wave, such as amplitude or frequency.</p>
<p>
The initial signal above is a 200Hz sine
wave, which has an amplitude of 5 volts. The frequency of this wave can
be adjusted by using the "Input Wave Frequency" slider.
(You can also choose to display a square wave.)
</p>
<p>
If you are browsing using the latest version
of Google Chrome, the input dropdown box allows you to select "live
input". This will take data from any microphone connected to your
computer and display the live audio data. (Different microphones send
different voltages to the computer, so for consistency we have
normalised the input so the raw input signal will always be limited to
somewhere between -5 and +5 volts.)
</p>
<p>
Since waveforms come in a wide variety of
shapes, amplitudes and frequencies, oscilloscopes need to have a number
of controls to adjust the display of the waveform so it can comfortably
fit inside the viewport.
</p>
<p>
<em>Freeze live input</em><br />This
tickbox freezes the input allowing you to effectively take a snapshot
of what is displayed on the oscilloscope at a given instant in time.
This is especially useful
because you can still adjust the time base
and volts per division setting. Try whistling and freezing the input.
Adjust the timebase to a convenient scale allows you to calculate the
frequency of your whistle by counting the period of one complete
waveform.
</p>
<p>
<em>Oscilloscope gain</em><br />This
is a number that the incoming signal is multiplied by. A gain of 1 will
have no effect, a gain of less than 1 will make the signal smaller and a
gain of more than 1 will make it larger.
</p>
<p>
<em>seconds / div</em><br />This
control allows you to adjust the length of time that each square of the
grid represents. When the oscilloscope is first loaded, this setting is
set at 1ms, and shows one complete waveform over 4 squares. This means
that the period of the wave is 4ms, or 0.004s, giving a frequency of
(1/0.004) = 250Hz. If you change the timebase to 500µs (half of what it
started at), you should see the waveform now takes 8 squares to complete
one full oscillation. The period (and hence the frequency) remain
constant because 8 times 500µs still equals 0.004s.
</p>
<p>
<em>volts / div</em><br />This
setting is very similar to the timebase setting described above, but
instead of stretching the wave along the x-axis, it involves stretching
it along the y-axis. The sine wave has an amplitude of 5V, meaning when
volts/div is set to 5, the waveform just reaches the top of the first
square. If you were to change the setting to 10 volts/div, the waveform
now only reaches up half of a square.
</p>
<p>
<em>Horizontal and Vertical Offsets</em><br />
These two sliders allow you to adjust the
position of the oscilloscope's trace on the grid. They are particularly
useful for lining up parts of the
waveform with the gridlines (this can make it easier for you to count the squares when determining wavelength, for example).
</p>
<p>
If you would like to embed the oscilloscope on your own website, please copy and paste the following html onto your web page.
</p>
<textarea name="" id="" cols="60" rows="2" class='embed-code'><iframe src="https://academo.org/demos/virtual-oscilloscope/?embedded=true" width="800" height="380"></iframe>
</textarea>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'academo'; // required: replace example with your forum shortname
var disqus_config = function () {
this.page.url = 'https://academo.org/demos/virtual-oscilloscope/';
// this.page.identifier = 'a unique identifier for each page where Disqus is present';
// this.page.title = 'a unique title for each page where Disqus is present';
};
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<div class="sidebar">
<h3>You might also be interested in</h3>
<hr>
<ul class="thumbnails">
<li class='sponsored-tile js-sponsored-tile'> </li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/all.js?v=1506008388"></script>
<script src="/demos/virtual-oscilloscope/AudioContextMonkeyPatch.js?v=1465590712"></script>
<script src="/demos/virtual-oscilloscope/demo.js?v=1490717693"></script>
<script>
//ASSET SERVING
var assetPath = "https://s3-us-west-2.amazonaws.com/academo-assets";
$(document).trigger({
type: "scriptLoaded"
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
if (window.location.host == 'academo.org') {
ga('create', 'UA-17960919-9', 'academo.org');
ga('send', 'pageview');
}
</script>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div class="footer-inner">
© Academo.org 2016. Source code available at <a href="https://github.com/edwardball/academo.org">GitHub.com</a>
</div>
</div>
</body>
</html>