JSFiddle - React, Tailwind, and code Playground

by SQShu

HTML

<!-- Our javascript code -->
    <script type="text/javascript">
        var drawOutput = new Array(1024);
        var counter = 0;
		var maximJs = maximilian();
        var audio = new maximJs.maxiAudio();      
      	var myOsc = new maximJs.maxiOsc();
        var myOsc2 = new maximJs.maxiOsc();
        var myOsc3 = new maximJs.maxiOsc();
        var myOsc4 = new maximJs.maxiOsc();
      
       	// var mySettings = new maximJs.maxiSettings();
        audio.init();
      // The below needs to be set to the samplerate of your audio card, default is 44100 !
      	// mySettings.sampleRate=44100;
      
        audio.play = function() {

            counter++;
// to perceptually freeze the signal we divide the sampling rate by the buffer size and 
// use this as frequency
          	
            var sum = myOsc.sinewave(300 * myOsc3.sinewave(43.06650625)) * myOsc2.coswave(43.07 + myOsc4.triangle(0.007)) - Math.random() * 0.07 - 1;
// but this only works if the refresh rate is reliable
// which depends on your browser
          
//           	if (sum > 1) {
//             	sum = 1;
//             	}
          
//           	if (sum < -1) {
//               	sum = -1;
//             	}
          
            var out = sum * 0.5;
            
            drawOutput[counter % 1024] = out;
return out;
        };



        var canvas = document.querySelector("canvas");
        var width = window.innerWidth;
        var height = window.innerHeight;
        var context = canvas.getContext("2d");


        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);
      

        var spacing = (width / 1024);

        function draw() {

            //This is basically the same as any other 2D processing draw routine.

            //clear the screen
            context.clearRect(0, 0, width, height);
            //draw a square	

          
          
          

            for (var i = 0; i < 1024; i++) {
                context.beginPath();
    ...