BrU32

JS Canvas/Audio API Random Audio/Visual Synth V2

Aug 5th, 2016
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.69 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);
  24. gainNode.gain.value = (CurY);
  25. osillator.detune=(0);
  26. canvasDraw();
  27. }
  28. </script>
  29. <html>
  30. <body onmouseup="" onmousemove="drawe();" background-color="white">
  31. <canvas id="myCanvas" width="1000" height="1000" style="background:black;">
  32. </canvas>
  33. <script>
  34. function drawe(){
  35. var text = "";
  36. var possible = "FABCGDE0123456789";
  37. var canvas = document.getElementById("myCanvas");
  38. var ctx = canvas.getContext("2d");
  39. ctx.beginPath(Math.random()*1000,Math.random()*1000);
  40. var Line=(Math.random()*1000);
  41. var Line1=(Math.random()*1000);
  42. ctx.moveTo(Math.random()*1000,Math.random()*1000);
  43. for(var i=0; i!=6; i++)
  44. text+=possible.charAt(Math.floor(Math.random()*possible.length));
  45. ctx.strokeStyle='#'+text;
  46. text='';
  47. ctx.lineTo(Math.random()*1000,Math.random()*1000);
  48. ctx.stroke()
  49. ctx.paint();
  50. ctx.clear();
  51. }
  52.  
  53. </script>
  54. </body>
  55. </html>
Advertisement
Add Comment
Please, Sign In to add comment