p5.gibber.js

Version:
Music and audio programming for p5.js
61 lines (47 loc) • 1.58 kB
HTML
<head>
  <title>p5.Gibber.js - mouse/bass example</title>
  <script language="javascript" src="../resources/p5.min.js"></script>
  <script src="../resources/p5.gibber.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
// move your mouse in the window to change audiovisuals
function setup() {
  createCanvas( windowWidth, windowHeight )

  drums = EDrums( 'x*o*x*o-' )

  sampler = Sampler().record( drums, 1 )
    .note.seq( [.25,.5,1,2].rnd(), [1/4,1/8,1/2].rnd() )
    .fx.add( Delay(1/64))
    .pan.seq( Rndf(-1,1) )

  bass = Mono('bass')
    .note.seq( [0,7], 1/8 )

  Gibber.scale.root.seq( ['c4','eb4'], 1 )

  // follow Gibber's Master bus output
  follow = Follow( Gibber.Master, 1024 )

  background( 64 )
  noFill()
  stroke( 10,0,0,127 )
}

function draw() {
  var x = mouseX / windowWidth,
      y = mouseY / windowHeight,
      ww2 = windowWidth / 2,
      wh2 = windowHeight / 2,
      value = follow.getValue(),
      radius = ( ww2 > wh2 ? wh2 : ww2 ) * value
  
  bass.resonance = (1 - x) * 5      
  bass.cutoff = (1 - y) / 2

  sampler.fx[0].feedback = x < .99 ? x : .99

  strokeWeight( value * 50 )
  background( 64,64,64,10 )
  ellipse( ww2, wh2, radius, radius )
}
  </code></pre>
  </div>
</body>