Sound, Motion, Notation

{:nextjournal/viewer "html" :nextjournal.viewer/value "

 <div id='header' style='background-color:#FFFFFF;text-align:center'>

	<h1 style='margin-bottom:10px;'>Every Icon</h1>

</div>

<div id='iconCanvas' style='background-color:#FFFFFF;height:500px;width:500px;float:left;'>

	<p id='EveryIcon'>

    <canvas id='myCanvas' width='500' height='450'></canvas>

  </p>

</div>

<script>

  var canvas = document.getElementById('myCanvas');

  var context = canvas.getContext('2d');

  var	Icon_Size = 32;

  var Icon_wid = 12;

  var Icon_hgt = 12;

  var	canvas_x_offset = 50;

  var canvas_y_offset = 0;

  var Icon_State = new Array(Icon_Size*Icon_Size);

  var id = 0;

  var	max_id = 1;

  var starting_date  	= 	 Date.UTC( 1997, 00, 14, 21, 00, 00 );

      var	current_date	= 	 new Date();

  current_date = current_date.getTime();

  var elapsed_time_millisecs = current_date - starting_date;

  var iconsPerMilliSecond;

  var	start_timer, end_timer;

  var setup_counter = 0;

  var Num_Tested = 500;

  setup_animation();

  init_icon();

  setup_icon(0);

    start_timer = 	new Date();

    start_timer = start_timer.getTime();

  context.fillStyle = 'red';

  context.font = 'bold 16px Arial';

  context.fillText('Measuring Display Speed and Updating Icon', 75, 420);

  time_circuit();

  function time_circuit()

  {

    if( setup_counter <= Num_Tested )

    {

      Increment_Icon();

        paintIcon();

        draw_grid();

        setup_counter++;

          requestAnimFrame(function() {

          time_circuit();

        });

    }

    else

    {

      context.fillStyle = '#ffffff';

      context.fillRect( 50, 400, 400, 75);

      end_timer = 	new Date();

      end_timer = 	end_timer.getTime();

      millisecs_elapsed = end_timer -  start_timer;

      iconsPerMilliSecond = Num_Tested/millisecs_elapsed;

    if(elapsed_time_millisecs > 0 )

    setup_icon(elapsed_time_millisecs * iconsPerMilliSecond);

    animateIcon();

    }

  }

  function animateIcon()

    {

        Increment_Icon();

        paintIcon();

        draw_grid();

     requestAnimFrame(function() {

          animateIcon();

        });

 }

  function init_icon()

  {

    for( var m=0; m<Icon_Size; m++)

    {

      for( var n=0; n<Icon_Size; n++)

      {

        Icon_State[ (m*Icon_Size) + n ] 	= 0;

        }

    }

  }

 <!-- Given a decimal number (usually the starting position) -->

  <!-- Setup the icon to reflect that number and start counting from there-->

  function  setup_icon( decimal_num )

  {

    var	remainder;

    <!-- beo is the binary_exponential_order  -->

    var  beo = 0;

    <!-- Start with order 0 - the least significant digit-->

    <!-- is the number odd? Then that pixle goes on-->

    <!-- Shift the number right (divide by two...the >> operator did not work here on long types )-->

    <!-- Check again on the new digit at one order up-->

    <!-- Repeat until every digit is checked  - number is divided away-->

    while( decimal_num >= 1 )

    {

      decimal_num = Math.floor(decimal_num);

      remainder = decimal_num % 2.000000000;

      if( Math.abs(remainder) == 1)

      {

        Icon_State[ beo ] = 1;

      }

      decimal_num /= 2.0;

      beo++;

    }

    max_id = beo;

    id = beo;

  }

  function draw_grid()

  {

      var m = 0;

      context.lineWidth = 1;

  context.strokeStyle = '#000000';

  for( m=0; m<=Icon_Size; m++)

  {

      context.beginPath();

        context.moveTo(canvas_x_offset + (m*Icon_wid), canvas_y_offset);

        context.lineTo(canvas_x_offset +(m*Icon_wid),  canvas_y_offset +(Icon_Size*Icon_wid));

        context.stroke();

        context.beginPath();

    context.moveTo(canvas_x_offset,canvas_y_offset + (m*Icon_hgt));

    context.lineTo(canvas_x_offset+(Icon_Size*Icon_hgt),canvas_y_offset +(m*Icon_hgt));

    context.stroke();

     }

   }

function paintIcon()

  {

  var temp_counter = 0;

  var m=0;

  var n=0;

  context.lineWidth = 1;

  out:

  for(  m=0; m<Icon_Size ; m++)

    {

      for(  n=0; n<Icon_Size ; n++)

      {

        if( Icon_State[(m*Icon_Size) + n ] == 1 )

      {

        context.strokeStyle = '#000000';

        context.fillStyle = '#000000';

        context.fillRect(canvas_x_offset+((n*Icon_wid)+1),canvas_y_offset+((m*Icon_hgt)+1), Icon_wid-1, Icon_hgt-1);

      }

      else

      {

        context.strokeStyle = '#000000';

        context.fillStyle = '#ffffff';

        context.fillRect(canvas_x_offset + ((n*Icon_wid)+1),canvas_y_offset+((m*Icon_hgt)+1), Icon_wid-1, Icon_hgt-1);

      }

      if( temp_counter >= max_id ) break out;

      temp_counter++;

    }

      }

  }

function Increment_Icon()

  {

    var carry_bit  = 0;

    id 		= 1;

    if ( Icon_State[ 0 ] 	== 0 )

       Icon_State[ 0 ]  	= 1;

    else

    {

      Icon_State[ 0 ]  = 0;

      carry_bit = 1;

      <!-- Propogate numbers  -->

      while ( carry_bit == 1 )

      {

        if( Icon_State[ id ] == 1 )

        {

          Icon_State[ id ] = 0;

          id++;

        }

        else

        {

          Icon_State[ id ] = 1;

          carry_bit = 0;

        }

      }

    }

    if( id > max_id ) max_id = id;

  }

  function setup_animation()

  {

    window.requestAnimFrame = (function(callback) {

      return window.requestAnimationFrame ||

      window.webkitRequestAnimationFrame ||

      window.mozRequestAnimationFrame ||

      window.oRequestAnimationFrame ||

      window.msRequestAnimationFrame ||

      function(callback) {

        window.setTimeout(callback, 1000 / 60);

        };

      })();

  }

</script>

 "}