BrU32

JS Canvas Random Rainbow Web Audio API Synth V3

Aug 5th, 2016
150
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.79 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.0;
  11. var Freq = 0;
  12. var Vol = 0.0;
  13. oscillator.type = 'sawtooth';
  14. oscillator.frequency.value = Math.random()*Freq;
  15. oscillator.start();
  16. gainNode.gain.value = Math.random()*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) * VolMax;
  25. osillator.detune=(0);
  26. canvasDraw();
  27. }
  28. </script>
  29. <html>
  30. <body onmouseup="window.location.reload(window.location);" 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