BrU32

JS Web Audio API Synth Based On Movement W/ Canvas Spray Can

Jul 9th, 2016
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.41 KB | None | 0 0
  1. <script>
  2. var audioCtx=new AudioContext();
  3. var oscillator = audioCtx.createOscillator();
  4. var gainNode = audioCtx.createGain();
  5. oscillator.connect(gainNode);
  6. gainNode.connect(audioCtx.destination);
  7. var WIDTH = window.innerWidth;
  8. var HEIGHT = window.innerHeight;
  9. var FreqMax = 2000;
  10. var VolMax = 1;
  11. var Freq = 1000;
  12. var Vol = 0.1;
  13. oscillator.type = 'sawtooth';
  14. oscillator.frequency.value = Freq;
  15. oscillator.start();
  16. gainNode.gain.value = Vol;
  17. var CurX;
  18. var CurY;
  19. document.onmousemove = updatePage;
  20. function updatePage(e) {
  21. CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  22. CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  23. oscillator.frequency.value = (CurX/WIDTH) * FreqMax;
  24. gainNode.gain.value = (CurY/HEIGHT) * FreqMax;
  25. canvasDraw();
  26. }
  27. </script>
  28. <!DOCTYPE html>
  29. <html>
  30. <body onmousemove="drawe();" onchange="drawe();">
  31. <canvas id="myCanvas" width="500" height="500" style="border:1px">
  32. Your browser does not support the canvas element.
  33. </canvas>
  34. <script>
  35. function drawe(){
  36. var canvas = document.getElementById("myCanvas");
  37. var ctx = canvas.getContext("2d");
  38. ctx.moveTo(event.x,event.y);
  39. ctx.lineThickness='100px';
  40. ctx.lineTo(event.x+5,event.y+5);
  41. ctx.stroke();
  42. }
  43. </script>
  44. </body>
  45. </html>
Advertisement
Add Comment
Please, Sign In to add comment