JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<h2>Прямоугольная волна</h2>
<table><tr><td>
<canvas id="sqrc" width="500px" height="200px" ></canvas>
</td><td>
Частота <input type=text id='sqr_freq' value="200"><br/>
Частота дискретизации <input type=text id='sqr_dfreq' value="44100"><br/>
Амплитуда <input type=text id='sqr_amp' value="80"><br/>
<input type=button value='square wave' onclick="ssqr(); return false;">
</td>
</tr>
</table>

JavaScript

function putpixel(buf,offset,color)
{    
    buf[offset] = color[0];
    buf[offset+1] = color[1];
    buf[offset+2] = color[2];
    buf[offset+3] = color[3];
}




function draw(canvasId, buf, len, color) {
      var canvas = document.getElementById(canvasId);
      var context = canvas.getContext( '2d' );
      var w = context.canvas.width;
      var h = context.canvas.height;
      var h2 = h / 2;
      context.fillStyle = "rgb(230,230,230)";
      context.fillRect (0, 0, w, h);
      

      /*context.beginPath();
      context.lineWidth = 0.15;
      context.strokeStyle = '#00FF00';
      for(var x = 1; x < len; x++)
      {
         context.moveTo(x-1, buf[x-1]+h2);
         context.lineTo(x, buf[x]+h2);         
         context.stroke();
      }
      */
      var imageData = context.getImageData(0, 0, w, h);
      var px = imageData.data;
      var pp;        
        for(var x = 0; x < len; x++) {
            pp = ((buf[x]+ h2)* w + x) * 4;
	    putpixel(px, pp, color);
         }
      context.putImageData(imageData, 0, 0);
   }


function square(amp, freq, dfreq, len, outbuf)
{
  var tempf = Math.round(0.5 + dfreq / freq);
  var tempf2 = Math.round(0.5 + dfreq / (freq * 2));
  var counter = 2;
  outbuf[0] = amp;
  for(var i = 1; i < len; i++, counter++)
  {
    if (counter <= tempf2)
    {
      outbuf[i] = amp;        
    } 
    else
    {
      outbuf[i] = -amp;        
      if (counter > tempf)
      {
        counter = 0;
      }
    }
  }
}


function square_ch(amp, freq1, freq2, dfreq, len, outbuf)
{
  var tempf = Math.round(0.5 + dfreq / freq);
  var tempf2 = Math.round(0.5 + dfreq / (freq * 2));
  var counter = 2;
  var freq = freq1;
  var df = (freq2 - freq1)/len;
  
  outbuf[0] = amp;
  for(var i = 1; i < len; i++, counter++)
  {
  	tempf = Math.round(0.5 + dfreq / freq);
  	tempf2 = Math.round(0.5 + dfreq / (freq * 2));
    if (counter <= tempf2)
    {
      outbuf[i] = amp;        
    } 
    else
    {
      outbuf[i] = -amp;        
 ...