BrU32

JS Canvas Trippy Drawing/Paint SRC W\ Web Audio API Synth V2

Sep 12th, 2016
143
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.59 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 = 'triangle';
  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.  
  29. <!DOCTYPE html>
  30. <html>
  31. <body onmousemove="drawe();" onclick="alert('Nice Drawing!!');">
  32. <canvas id="myCanvas" width="1000" height="1000" style="border:1px;background-color:black">
  33. Your browser does not support the canvas element.
  34. </canvas>
  35. <script>
  36. function drawe(){
  37. var possible = "FABCGDE0123456789";
  38. var text = "";
  39. var canvas = document.getElementById("myCanvas");
  40. var ctx = canvas.getContext("2d");
  41. for(var i=0; i!=6; i++)
  42. text+=possible.charAt(Math.floor(Math.random()*possible.length))
  43. ctx.strokeStyle="#"+text;
  44. ctx.moveTo(event.x+4,event.y-4);
  45. ctx.lineTo(event.x+4,event.y-1);
  46. ctx.stroke();
  47. }
  48. </script>
  49. </body>
  50. </html>
Advertisement
Add Comment
Please, Sign In to add comment