p5.gibber.js
Version:
Music and audio programming for p5.js
53 lines (43 loc) • 1.41 kB
HTML
<head>
<script language="javascript" src="../resources/p5.min.js"></script>
<script src="../resources/p5.gibber.min.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript" src="sketch.js"></script>
<link rel="stylesheet" href="../resources/examples.css">
<link rel="stylesheet" href="../resources/monokai_sublime.css">
<script src="../resources/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div id='code'>
<pre><code>// sketch.js
// fftSize must be at least 32
// and a power of 2 (32,64,128,256 etc.)
fftSize = 2048
function setup() {
createCanvas( windowWidth, windowHeight )
pwm = PWM()
mod = Sine( 4, 40 )._
pwm.frequency = Add( 440, mod )
fft = FFT( fftSize )
waveform = new Uint8Array( fft.frequencyBinCount )
frameRate( 30 )
strokeWeight( 1 )
}
// adapted from:
// http://p5js.org/learn/examples/Sound_Oscillator_Frequency.php
function draw() {
background()
fft.getByteTimeDomainData( waveform )
beginShape()
for ( var i = 0; i < waveform.length; i++ ){
var x = map( i, 0, waveform.length, 0, width )
var y = map( waveform[i], 0, 255, height, 0 )
vertex( x, y )
}
endShape()
mod.frequency = map( mouseY, 0, height, .25, 10 )
mod.amp = map( mouseX, 0, width, 4, 100 )
pwm.pulsewidth = map( mouseX, 0, width, 0, 1 )
}
</code></pre>
</body>