HTML5_templates


================GEOMETRIES========================================


<!DOCTYPE HTML>

<html>

<head>

<script>


  window.onload             = function()

{ var canvas                = document.getElementById("myCanvas");

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

  //==========================lineTo=======================================

  context.moveTo(             100, 150);

  context.lineTo(             450, 50);

  context.lineWidth         = 10;

  context.strokeStyle       ="#ff0000"; // line color

  context.stroke();  

  //==========================arc======================================

  context.beginPath();                        // view curve points

  var centerX               = 88;

  var centerY               = 90;

  var radius                = 75;

  var startingAngle         = 1.1 * Math.PI;

  var endingAngle           = 1.9 * Math.PI;

  var counterclockwise      = false;

  context.arc(                centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

  context.lineWidth         = 5;

  context.strokeStyle       = "black"; // line color

  context.stroke();

  //==========================quadraticCurveTo=====================================

  var startX                = 188;

  var startY                = 130;

  var controlX              = 288;

  var controlY              = 0;

  var endX                  = 388;

  var endY                  = 150;

  context.beginPath();                             // view curve points

  context.moveTo(             startX, startY);

  context.quadraticCurveTo(   controlX, controlY, endX, endY);

  context.lineWidth         = 10;

  context.strokeStyle       = "green";             // line color

  context.stroke();

  context.beginPath();                             // view curve points

  context.moveTo(             startX, startY);

  context.lineTo(             controlX, controlY);

  context.lineWidth         = 1;

  context.strokeStyle       = "black";              // line color

  context.stroke();

  context.moveTo(             controlX, controlY);

  context.lineTo(             endX, endY);

  context.lineWidth         = 1;

  context.strokeStyle       = "black";             // line color

  context.stroke();

  //==========================bezierCurveTo=====================================

  context.beginPath();                        // view curve points

  var startX                = 188;

  var startY                = 230;

  var controlX1             = 140;

  var controlY1             = 110;

  var controlX2             = 388;

  var controlY2             = 110;

  var endX                  = 388;

  var endY                  = 270;

  context.moveTo(             startX,    startY);

  context.bezierCurveTo(      controlX1, controlY1, controlX2, controlY2, endX, endY);

  context.lineWidth         = 10;

  context.strokeStyle       = "cyan";                      // line color

  context.stroke();

  context.beginPath();                               // view curve points

  context.moveTo(             startX, startY);

  context.lineTo(             controlX1, controlY1);

  context.lineWidth         = 1;

  context.strokeStyle       = "black";                    // line color

  context.stroke();

  context.moveTo(             controlX2, controlY2);

  context.lineTo(             endX, endY);

  context.lineWidth         = 1;

  context.strokeStyle       = "black";                     // line color

  context.stroke();

  //==========================lineTobezierCurveTo====================================

  context.beginPath();

  context.moveTo(             100, 20);

  context.lineTo(             200, 160);                     // line 1

  context.quadraticCurveTo(   230, 200, 250, 120);           // quadratic curve

  context.bezierCurveTo(      290,  40, 300, 200, 400, 150);  // bezier curve

  context.lineTo(             500, 90);                      // line 2

  context.lineWidth         = 5;

  context.strokeStyle       = "#0000ff";

  context.stroke();

  //==========================rect===================================

  var topLeftCornerX        = 18;

  var topLeftCornerY        = 150;

  var width                 = 50;

  var height                = 50;

  context.beginPath();

  context.rect(               topLeftCornerX, topLeftCornerY, width, height);

  context.fillStyle         = "#8ED6FF";

  context.fill();

  context.lineWidth         = 5;

  context.strokeStyle       = "black";

  context.stroke();

  //==========================arc=======================================

  var centerX               = 450;

  var centerY               = 200;

  var radius                = 30;

  context.beginPath();

  context.arc(                centerX, centerY, radius, 0, 2 * Math.PI, false);

  context.fillStyle         = "#8ED6FF";

  context.fill();

  context.lineWidth         = 5;

  context.strokeStyle       = "red";

  context.stroke();

  //==========================closePath=======================================

  var centerX               = 50;

  var centerY               = 300;

  var radius                = 30;

  var lineWidth             = 5;

  context.beginPath();

  context.arc(                centerX, centerY, radius, 0, Math.PI, false);

  context.closePath();

  context.lineWidth         = lineWidth;

  context.fillStyle         = "#8ED6FF";

  context.fill();

  context.strokeStyle       = "green";

  context.stroke();

  //==========================fillText========================================

  var x                     = 150;

  var y                     = 300;

  context.font              = "40pt Calibri";

  context.fillStyle         = "#ff00ff"; // text color

  context.fillText(           "Hello World!", x, y);

  //==========================strokeTex========================================

  var x                     = 80;

  var y                     = 350;

  context.font              = "50pt Calibri";

  context.lineWidth         = 3;

  context.strokeStyle       = "blue"; // stroke color

  context.strokeText(         "Hello World!", x, y);

};


</script>

</head>


<body>

<canvas id="myCanvas" style="border: solid 1px;" width="600" height="400" >

</canvas>

</body>

</html>


=====================SLIDER_CONTROLS1=========================================



<html>

<body>

<input  id ="slide1" type="range" min="0" max="250" value="110" step="1" onchange="showValue()" />

<span   id ="range1">110</span><br>

<input  id ="slide2" type="range" min="0" max="250" value="130" step="1" onchange="showValue()" />

<span   id ="range2">130</span><br>

<canvas id="myCanvas" style="border: solid 1px;" width="400" height="300" >

<script type="text/javascript">

  var canvas  ;

  var context ;

  var startValue1 = 110 ;

  var startValue2 = 130 ;

function                          init( )

{ canvas                        = document.getElementById("myCanvas");

  context                       = canvas.getContext("2d");

  //==============================clear_rect============================

  context.beginPath();

  context.rect(                   0, 0, 400, 300);                    //topLeftX, topLeftY, width, height

  context.fillStyle             = "#FFFFFF"; context.fill();

  context.lineWidth             = 0;

  context.strokeStyle           = "white";  //context.stroke();

  //==============================Text=================================

  context.font                  = "20pt Calibri";

  context.fillStyle             = "#ff00ff";                          // changing letters

  context.fillText(               startValue1, 10, 30);               // string, x, y

  context.fillText(               startValue2, 150, 30);              // string, x, y

  //==============================lineTo==========================

  context.beginPath();                                                // start line

  context.moveTo(                 30,  startValue1);

  context.lineTo(                 250, startValue2);

  context.lineWidth             = 2;

  context.strokeStyle           = "#ff0000";                         // line color

  context.stroke();

}

function                          showValue()

{ var slideitem1                = document.getElementById("slide1");    

  var slideAmount1              = slideitem1.value;                      

  var slideitem2                = document.getElementById("slide2");    

  var slideAmount2              = slideitem2.value;                     

  document.getElementById(       "range1").innerHTML = slideAmount1;

  document.getElementById(       "range2").innerHTML = slideAmount2;

  //=============================clear_rect===================================

  context.beginPath();

  context.rect(                   0, 0, 400, 300);                     //topLeftX, topLeftY, width, height

  context.fillStyle             = "#FFFFFF"; context.fill();

  context.lineWidth             = 0;

  context.strokeStyle           = "white";  //context.stroke();

  //==============================Text========================================

  context.font                  = "20pt Calibri";

  context.fillStyle             = "#ff00ff";                            // changing letters

  context.fillText(               slideAmount1, 10,  30);               // string, x, y

  context.fillText(               slideAmount2, 150, 30);               // string, x, y

  //==============================lineTo=======================================

  context.beginPath();                                                 //moving line

  context.moveTo(                 30,  slideAmount1);

  context.lineTo(                 250, slideAmount2);

  context.lineWidth             = 2;

  context.strokeStyle           = "#ff0000";                           // line color

  context.stroke();

}

  init()                                                                // fire up at start

</script>

</body>

</html>



=====================SLIDER_CONTROLS2=========================================



 


<html>

<script type="text/javascript">

  var canvas  ;

  var context ;

  var startValue = 0 ;

  var lastValue = 0;

  var x0 = 0;

  var y0 = 0;

  var x1 = 50;

  var y1 = 50;

function init(startValue )

{ canvas  = document.getElementById("myCanvas");

  context = canvas.getContext("2d");

  clearcanv();

  strcontext(  "font,col",  "20pt Calibri","#ff0000");

  textprint(   "x,y,text",   50,130,startValue);

  linecontext("w,col",      2,"#ff0000");

  line(          "x0,y0,x1,y1",x0,y0,x1, y1);

}

function showValue(newValue)

{ document.getElementById("range").innerHTML = newValue;

  clearcanv();

  strcontext(  "font,col",  "20pt Calibri","#ff0000");

  textprint(   "x,y,text",   50,130,newValue);

  line("info",100,50,100,100);

  line("info",75,75,100,75);

  line("info",100,75,130,50);

  line("info",100,75,130,100);

  line("info",120,80,130,100);

  line("info",110,95,130,100);

  linecontext("w,col",      2,"#ff0000");

  line(          "x0,y0,x1,y1",x0,y0,x1, y1)

  lastValue =      newValue;

  document.stpw.myTextArea.value = "line(\"info\"," + x0 +"," +y0 +"," +x1 +"," +y1+");" ;

}

function chngX0(theValue)

{ x0 = theValue;

 showValue(lastValue)

}

function chngY0(theValue)

{ y0 = theValue;

 showValue(lastValue)

}

function chngX1(theValue)

{ x1 = theValue;

 showValue(lastValue)

}

function chngY1(theValue)

{ y1 = theValue;

 showValue(lastValue)

}

function  line(info,x0,y0,x1,y1)

{ context.beginPath();

  context.moveTo(       x0,y0);

  context.lineTo(       x1,y1);

  context.stroke();

}

function  linecontext(info,w,c)

{ context.lineWidth   = w;

  context.strokeStyle = c;

}

function  textprint(info,x,y,text)

{ context.fillText(text, x, y);                        

}

function  strcontext(info,font,col)

{ context.font = font;

  context.fillStyle = col ;                       

}

function  clearcanv()

{ context.beginPath();

  context.rect(0, 0, canvas.width, canvas.height);   //topLeftX, topLeftY, width, height

  context.fillStyle = "#FFFFFF"; context.fill();

  context.lineWidth = 0;context.strokeStyle = "white";  //context.stroke();

}

 // init(startValue )

</script>

<body onload="init (0)">

<input  type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />

<span   id="range">10</span><br>

<input  type="range" id="sx0" min="0" max="500" value="0"  step="5" onchange="chngX0(this.value)" />X0

<input  type="range" id="sx1" min="0" max="500" value="50" step="5" onchange="chngX1(this.value)" />X1

<br>

<input  type="range" id="sy0" min="0" max="500" value="0"  step="5" onchange="chngY0(this.value)" />Y0

<input  type="range" id="sy1" min="0" max="500" value="50" step="5" onchange="chngY1(this.value)" />Y1

<br>

<FORM                   NAME="stpw">       <!-- first form -->

<textarea               id=  "myTextArea" rows="5" cols="70"></textarea>

</FORM> <br>

<canvas id="myCanvas" style="border: solid 1px;" width="400" height="200" > <br>


</body>

</html>




================Get_PUT_imageData========================================



<!DOCTYPE html>

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>clip image</title>

</head>


<body>

<canvas id           ='canvas'    style="border: solid 1px;" width="400" height="400" ></canvas>

<script type         ='text/javascript'>


  window.onload    = function()

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

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

  var img            = new Image()

  img.src            = "Tiger.jpg";                       // Need in same directory

  ctx.drawImage(       img,0,0)  

  var x              = 50 , y = 50 ;

  var width          = 100 , height = 100 ;

  var imageData      = ctx.getImageData(x, y, width, height);  // a cropped picture

  var data           = imageData.data;

  ctx.putImageData(  imageData, 250,0);

}

</script>

</body>

</html>


================Scale_Before_GetPut========================================




<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>clip image</title>

</head>


<body>

<canvas id            ='canvas'    style="border: solid 1px;" width="400" height="400" ></canvas>

<script type         ='text/javascript'>


  window.onload    = function()

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

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

  var img            = new Image()

  img.src            = "Tiger.jpg";  // need in directory

  var inX            = 0;

  var inY            = 0;

  var inW            = 200;

  var inH            = 200;

  var outX           = 0

  var outY           = 0

  var outW           = 100;

  var outH           = 100;

  ctx.drawImage(       img, inX, inY, inW, inH, outX, outY, outW, outH);

  var outX           = 0

  var outY           = 100

  var outW           = 200;

  var outH           = 200;

  ctx.drawImage(       img, inX, inY, inW, inH, outX, outY, outW, outH);

  var x              = 50 , y = 50 ;

  var width          = 100 , height = 100 ;

  var imageData      = ctx.getImageData(x, y, width, height);

  var data           = imageData.data;

  ctx.putImageData(    imageData, 250,0);

}

</script>

</body>

</html>

================Alpha_Mask_USING_PIXELS===========================

   



<!DOCTYPE html>

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>clip image</title>

</head>


<body>

<canvas id           ='canvas' style="border: solid 1px;" width="600" height="600" ></canvas>

<script type         ='text/javascript'>


  window.onload    = function()

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

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

  var img            = new Image()

  img.src            = "Tiger.jpg";

  ctx.drawImage(       img,0,0)  

  var W              = img.width;

  var H              = img.height;

  var imageData      = ctx.getImageData(0, 0, W, H);

  var data           = imageData.data;        

  for                  (var i = 0; i < data.length; i += 4) // picture in 8X4bit pixel format

{ var brightness     = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];

  data[i]            = brightness; // red

  data[i + 1]        = brightness; // green

  data[i + 2]        = brightness; // blue    i+3 is alpha (the fourth element)

}

  ctx.putImageData(    imageData, 250,0);

  var imageData2     = ctx.getImageData(0, 0, W, H);

  var data2          = imageData2.data;

  for                  (var i = 0; i < data2.length; i += 4) 

{ data2[i + 3]       = data[i]  

}

  ctx.putImageData(    imageData2, 250,300);

}

</script>

</body>

</html>

================Save_PNG========================================



<head>

 <script>

  window.onload         = function()

{ var canvas            = document.getElementById("myCanvas");

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

  context.beginPath();                              // begin custom shape    draw cloud

  context.moveTo(         170, 80);

  context.bezierCurveTo(  130, 100, 130, 150, 230, 150);

  context.bezierCurveTo(  250, 180, 320, 180, 340, 150);

  context.bezierCurveTo(  420, 150, 420, 120, 390, 100);

  context.bezierCurveTo(  430, 40, 370, 30, 340, 50);

  context.bezierCurveTo(  320, 5, 250, 20, 250, 50);

  context.bezierCurveTo(  200, 5, 150, 20, 170, 80);

  context.closePath();                                   // complete custom shape

            

  var grd               = context.createLinearGradient(230, 0, 370, 200);

  grd.addColorStop(       0, "#8ED6FF");                        // light blue

  grd.addColorStop(       1, "#004CB3");                        // dark blue

  context.fillStyle     = grd;

  context.fill();

  context.lineWidth     = 5;

  context.strokeStyle   = "#0000ff";

  context.stroke();

    

  var topLeftCornerX    = 18;

  var topLeftCornerY    = 150;

  var width = 50;

  var height = 50;

  context.beginPath();

  context.rect(           topLeftCornerX, topLeftCornerY, width, height);

  context.fillStyle     = "#8ED6FF";

  context.fill();

  context.lineWidth     = 5;

  context.strokeStyle   = "black";

  context.stroke();

  

  context.beginPath();                        // view curve points

  context.moveTo(         100, 150);

  context.lineTo(         450, 50);

  context.lineWidth     = 10;

  context.strokeStyle   = "#ff0000"; // line color

  context.stroke();

 

  var dataURL           = canvas.toDataURL();              // save canvas image as data url (png format by default) 

                                                           // so it can be saved as an image

  document.getElementById("canvasImg").src = dataURL; // set canvasImg image src to dataURL

};

  </script>

</head>

<body onmousedown      = "return false;">

    <canvas id         = "myCanvas" width="578" height="300"  style="display:none;">

    </canvas>

    <img id            = "canvasImg" alt="Right click to save me!">

</body>



================CLIP_Mouse========================================



<!DOCTYPE html>

<html>

<head>

 <meta http-equiv =   "Content-Type" content="text/html; charset=utf-8">

 <title>              clip image</title>

</head>


<body>

<canvas id           ='canvas'    style="border: solid 1px;" ></canvas>

<script type         ='text/javascript'>



  window.onload   = function()

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

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

  var mouse          = {x:0,y:0}                           //make an object to hold mouse position

  canvas.onmousemove = function(e){mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};} //update mouse

  var img            = new Image()

  img.src            = "http://www.google.com/images/logos/ps_logo2.png"

  setInterval(         render ,100)                     // set the animation into motion

                  

  function             render()

{ ctx.save()

  ctx.beginPath()

  ctx.fillRect(        0,0,canvas.width,canvas.height)           //fill the background. color is default black

  ctx.arc(             mouse.x,mouse.y,45,0,6.28,false)               //draw the circle

  ctx.clip()                                             //call the clip method so the next render is clipped in last path

  ctx.drawImage(       img,0,0)    

  ctx.closePath()

  ctx.restore()

}


}

</script>

</body>

</html>

================CLIP_TO_SHAPE========================================



<head>

 <meta http-equiv   = "Content-Type" content="text/html; charset=utf-8">

 <title>              clip image</title>

</head>


<body>

<canvas id          = 'canvas'   style="border: solid 1px;" ></canvas>

<script type        = 'text/javascript'>


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

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

var img             = new Image()

img.src             = "http://www.google.com/images/logos/ps_logo2.png"


img.onload          = function()

{ //ctx.fillStyle   = "white";

  ctx.fillRect(       0,0,canvas.width,canvas.height) //fill the background. color is default black

  //ctx.arc(          50,60,45,0,6.28,false)//draw the circle

  ctx.fillStyle     = "white";

  ctx.beginPath();

  ctx.moveTo(         130, 30);

  ctx.lineTo(         150, 150);

  ctx.bezierCurveTo(  60, 70, 60, 70, 70, 150); 

  ctx.lineTo(         30, 30);

  ctx.fill();

  ctx.clip()                      //call the clip method so the next render is clipped in last path

  ctx.drawImage(      this,0,0)   //this = image object of onload function

}

</script>

</body>

</html>


=================POINT_PUSH_PATH_ARRAY_OBJECTS===============================




<!DOCTYPE HTML>

<html>

<head>

<script>

var canvas

var context

var WIDTH;

var HEIGHT;

var rectW;  

var Xaxis;

var Yaxis;

var path = [];                            // holds all points

var path2 = [];                           // holds all points


  function              Point()                 //Point object to hold data

{ this.x =              0;

  this.y =              0;

}                       //function Point()

  function              addPoint(x, y)         //Initialize a new point, add it to path

{ var pt =              new Point;

  pt.x =                x;

  pt.y =                y;

  path.push(            pt);

}                       //function addPoint(x, y)

  function              addPoint2(x, y)        //Initialize a new point, add it to path2

{ var pt =              new Point;

  pt.x =                x;

  pt.y =                y;

  path2.push(           pt);

}                       //function addPoint2(x, y)

  function              init()

{                       document.stpw.myTextArea.value = "init() and print here";

  canvas      =         document.getElementById("myCanvas");

  context     =         canvas.getContext("2d");

  HEIGHT      =         canvas.height;

  WIDTH       =         canvas.width;

  Xaxis       =         HEIGHT/2 ;

  Yaxis       =         WIDTH/20 ;

  drawRect(             0, 0, WIDTH, HEIGHT);            // view canvas

  drawline(             0    , Xaxis,WIDTH, Xaxis,  1, "blue") 

  drawline(             Yaxis, 0    ,Yaxis, HEIGHT, 1, "blue") 

  makeArray()

  makeArray2()

  drawXY(); 

  drawXY2(); 

}                       //function init() 

  function              drawRect( rectx, recty, rectW, rectH) 

{ context.beginPath(    );

  context.rect(         rectx, recty, rectW, rectH);

  context.strokeStyle = "black";

  context.lineWidth =   1;

  context.stroke(       );

}                       //function drawRect( rectx, recty, rectW, rectH) 

  function              drawline(X0,Y0,X1,Y1,Width,Color) 

{ context.moveTo(       X0,Y0);

  context.lineTo(       X1,Y1);

  context.lineWidth =   Width;

  context.strokeStyle = Color;  

  context.stroke(       );

}                       //function drawline(X0,Y0,X1,Y1,Width,Color) 

  function              makeArray()

{ var numpt =           20

  var xscale =          0.9*WIDTH/numpt;

  var ypt =             0;

  for                   (var i = 0; i < numpt; i++)

{ ypt =                 (Math.random ()-.5)*100

  addPoint(             i*xscale,  Xaxis -ypt)

}                       //for (var i = 0; i < numpt; i++)

}                       //function makeArray()

  function              makeArray2()

{ var numpt2=           path.length;

  for                   (var i = 0; i < numpt2; i++)

{ addPoint2(            path[i].x,  path[i].y+10)

}                       //for (var i = 0; i < numpt; i++)

}                       //function makeArray2()

  function              drawXY() 

{ var len =             path.length;

  context.beginPath(    );

  context.moveTo(       path[0].x,path[0].y);

  for                   (var i = 1; i < len; i++) context.lineTo( path[i].x,path[i].y);

  context.lineWidth   = 2;

  context.strokeStyle = 'red';  

  context.stroke(       );

}                       //function drawXY() 

  function              drawXY2() 

{ var len =             path2.length;

  context.beginPath(    );

  context.moveTo(       path2[0].x,path2[0].y);

  for                   (var i = 1; i < len; i++) context.lineTo(  path2[i].x,path2[i].y);

  context.lineWidth   = 2;

  context.strokeStyle = 'green';  

  context.stroke(       );

}                       //function drawXY2()       

  function              drawPath() 

{ var len =             path.length-1;

  for                   (var i = 0; i < len; i++)

{ drawline(             path[i].x,path[i].y,path[i+1].x,path[i+1].y,2,'red') 

}                       //for (var i = 0; i < len; i++)

}                       //function drawPath() 

</script>

</head>


<BODY                   onLoad="init()">

<canvas                 id=  "myCanvas" width="800" height="200"> </canvas>

<FORM                   NAME="stpw">       <!-- first form -->

<textarea               id=  "myTextArea" rows="10" cols="70"></textarea>

</FORM>

</html>



==================PERLIN_NOISE===============================


   


<!DOCTYPE HTML>

<html>

<head>

<script>

var canvas

var context

var WIDTH;

var HEIGHT;

var rectW;  

var Xaxis;

var Yaxis;

var path0 = [];                           // temp array

var path1 = [];                           // first octave

var path2 = [];                           // second octave

var path3 = [];                           // third octave

var path4 = [];                           // forth octave

var path5 = [];                           // fifth octave

var sum   = [];                           // Sum of all 

var NumPt = 8;                            // start off with num points

var gain = 1;                             // start off gain

var fillInpt = 64;                        // start off fill in number

var gainpwr = .707                        // octive gain adustable


  function              init()

{ canvas      =         document.getElementById("myCanvas");

  context     =         canvas.getContext("2d");

  HEIGHT      =         canvas.height;

  WIDTH       =         canvas.width;

  Xaxis       =         HEIGHT/2 ;

  Yaxis       =         WIDTH/20 ;

  drawRect(             0, 0, WIDTH, HEIGHT);               // view canvas

  drawline(             0, Xaxis,WIDTH,Xaxis,1,"blue") 

  drawline(             Yaxis, 0,Yaxis,HEIGHT,1,"blue") 

  makeArray(            path0, NumPt,   gain)               // pathtemp,numbPts, gain

  smoothArray(          path0, path1,   fillInpt )          // pathin,pathin, fillinpts

  drawXY(               path1, "red"   ,0);                 // patharray,color, offset

  path0.length =        0;                                  // clear temp array

  NumPt =               NumPt*2;

  gain =                gain*gainpwr;

  fillInpt =            fillInpt/2;

  makeArray(            path0, NumPt,     gain)              

  smoothArray(          path0, path2,     fillInpt )         

  drawXY(               path2, "green"  , 0); 

  path0.length =        0;

  NumPt =               NumPt*2;

  gain =                gain*gainpwr;

  fillInpt =            fillInpt/2;

  makeArray(            path0,  NumPt,     gain)             

  smoothArray(          path0, path3,     fillInpt )

  drawXY(               path3, "blue"   , 0);

  path0.length =        0;

  NumPt =               NumPt*2;

  gain =                gain*gainpwr;

  fillInpt =            fillInpt/2;

  makeArray(            path0, NumPt,       gain)               

  smoothArray(          path0, path4,     fillInpt )

  drawXY(               path4, "yellow"   , 0);

  path0.length =        0;

  NumPt =               NumPt*2;

  gain =                gain*gainpwr;

  fillInpt =            fillInpt/2;

  makeArray(            path0, NumPt,       gain)               

  smoothArray(          path0, path5,     fillInpt )

  drawXY(               path5, "brown"   , 0);

  MakesumArrays(        path1, 1);                          // sum = path1

  Add2Arrays(           path2) ;                            // add path2

  Add2Arrays(           path3) ;                            // add path3

  Add2Arrays(           path4)  ;                           // add path4

  Add2Arrays(           path5)  ;                           // add path4

  drawXY(               sum, "cyan"    ,0);                 // patharray,color, offset

                        document.stpw.myTextArea.value = "init() and print anything here";

}                       //function init() 

  function              drawRect( rectx, recty, rectW, rectH) 

{ context.beginPath(    );

  context.rect(         rectx, recty, rectW, rectH);

  context.strokeStyle = "black";

  context.lineWidth =   1;

  context.stroke(       );

}                       //function drawRect( rectx, recty, rectW, rectH) 

  function              drawline(X0,Y0,X1,Y1,Width,Color) 

{ context.moveTo(       X0,Y0);

  context.lineTo(       X1,Y1);

  context.lineWidth =   Width;

  context.strokeStyle = Color;  

  context.stroke(       );

}                       //function drawline(X0,Y0,X1,Y1,Width,Color) 

  function              Point()                         //Point object to hold data

{ this.x =              0;

  this.y =              0;

}                       //function Point()

  function              makeArray(pathArray, numpt, Gain)

{ var xscale =          WIDTH/numpt;

  var ypt =             0;

  for                   (var i = 0; i <= numpt; i++)

{ ypt =                 (Math.random ()-.5)*100*Gain

  var pt =              new Point;

  pt.x =                i*xscale;

  pt.y =                ypt;

  pathArray.push(       pt);

}                       //for (var i = 0; i < numpt; i++)

}                       //function makeArray(pathArray, numpt)

  function              smoothArray(pathRaw, pathsmooth,betweenPts )

{ var numpt1=           pathRaw.length;

  var a,b,t,ft,f;

  var xt,yt;

  for                   (var i = 0; i < numpt1-1; i++)

{ for                   (var j = 0; j < betweenPts; j++)

{ t =                   j/betweenPts;

  ft =                  t * 3.1415927

  f =                   (1 - Math.cos(ft)) * .5

  yt =                  pathRaw[i].y*(1-f) + pathRaw[i+1].y*f 

  xt =                  pathRaw[i].x +t*(pathRaw[i+1].x-pathRaw[i].x)  

  var pt =              new Point;

  pt.x =                xt;

  pt.y =                yt;

  pathsmooth.push(      pt);

}                       //for (var j = 0; j < numpt; j++)

}                       //for (var i = 0; i < numpt; i++)

  yt =                  pathRaw[numpt1-1].y ;

  xt =                  pathRaw[numpt1-1].x;

  var pt =              new Point;

  pt.x =                xt;

  pt.y =                yt;

  pathsmooth.push(      pt);

}                       //function makeArray2()

  function              drawXY( path2Draw, Color , Yoff) 

{ var len =             path2Draw.length;

  context.beginPath(    );

  context.moveTo(       path2Draw[0].x,Xaxis+Yoff-path2Draw[0].y);

  for                   (var i = 1; i < len; i++) context.lineTo( path2Draw[i].x,Xaxis+Yoff-path2Draw[i].y);

  context.lineWidth   = 2;

  context.strokeStyle = Color;  

  context.stroke(       );

}                       //function drawXY()

  function              MakesumArrays( Arrayin, gain)

{ var numpt   =         Arrayin.length;       

  for                   (var i = 0; i < numpt; i++)

{ var pt =              new Point;

  pt.x =                Arrayin[i].x;

  pt.y =                gain*Arrayin[i].y;

  sum.push(             pt);

}                       //for (var i = 0; i < numpt; i++)

}                       //function MakesumArrays( Arrayin, gain)

  function              Add2Arrays( Arrayin)

{ var numpt   =         sum.length; 

  for                   (var i = 0; i < numpt; i++)  sum[i].y =  sum[i].y+ Arrayin[i].y;

}                       //function Add2Arrays( Arrayin)

  function              drawPath() 

{ var len =             path.length-1;

  for                   (var i = 0; i < len; i++)

{ drawline(             path[i].x,path[i].y,path[i+1].x,path[i+1].y,2,'red') 

}                       //for (var i = 0; i < len; i++)

}                       //function drawPath() 


</script>

</head>


<BODY                   onLoad="init()">

<h2>                    PERLIN NOISE </h2>

<canvas                 id=  "myCanvas" width="512" height="200"> </canvas>

<FORM                   NAME="stpw">       <!-- first form -->

<textarea               id=  "myTextArea" rows="10" cols="70"></textarea>

</FORM>

</html>


=================ANIMATION================================


 


<html>

<head>

<script type="application/javascript">

var interval;

var width, height;

var x, y;

  function        setup() 

{ width =         720;

  height =        180;

  canvas =        document.getElementById("scrawl");

  ctx =           canvas.getContext("2d");

  x =             0;

  y =             10;

  interval =      setInterval(draw, 50);

}

  function        draw() 

{ ctx.fillStyle = "rgba(255, 255, 255, 0.1)";

  ctx.fillRect (  0, 0, width, height);

  x +=            5;

  if              (x > width) { x = 0; }

  ctx.fillStyle = "rgb(255, 0, 0)";

  ctx.fillRect (  x, y, 60, 60);

}


</script>

</head>

<body   onload=    "setup()">

<canvas id=        "scrawl"   width="720" height="180"></canvas>

 </body>

</html>


=================HOVER================================


  

<!DOCTYPE html>

<html>

<head>


<style type='text/css'>

#animation 

{ background:red;

  -webkit-animation:pulse 3s alternate infinite;

} #animation:hover 

{ -webkit-animation-play-state:paused;

} @-webkit-keyframes pulse 

{ 0% 

{ width:100px;

  height:100px;

} 100% 

{ width:200px;

  height:200px;

}

}

</style>

</head>


<body>

<div id="animation">Hover Over Me To Pause</div>

</body>

</html>



===================FRACTAL_NOISE==============================


<!DOCTYPE HTML>

<html>

<head>

<script>

var canvas

var context

var WIDTH;

var HEIGHT;

var rectW;  

var Xaxis;

var Yaxis;

var path0 = [];                           // temp array

var path1 = [];                           // first octave

var path2 = [];                           // second octave

var path3 = [];                           // third octave

var path4 = [];                           // forth octave

var path5 = [];                           // fifth octave

var sum   = [];                           // six octave

var NumPt = 4;                            // start off with num points

var gain = 3;                             // start off gain

var fillInpt = 2;                         // start off fill in number

var gainpwr = .707                        // octive gain


  function              init()

{ document.stpw.myTextArea.value = "init() \n";

  canvas      =         document.getElementById("myCanvas");

  context     =         canvas.getContext("2d");

  HEIGHT      =         canvas.height;

  WIDTH       =         canvas.width;

  Xaxis       =         HEIGHT/2 ;

  Yaxis       =         WIDTH/20 ;

  drawRect(             0, 0, WIDTH, HEIGHT);                  // view canvas

  drawline(             0, Xaxis,WIDTH,Xaxis,1,"blue") 

  //drawline(           Yaxis, 0,Yaxis,HEIGHT,1,"blue") 

  makeArray(            path0, NumPt,   gain)                  // patharray,numbPts, gain

  drawXY(               path0, "green"    ,0);                 // patharray,color, offset

  printArray(           path0);

  smoothArray(          path0, path1,  1.5 )                   // pathin,pathout, fillinpoints

  drawXY(               path1, "red"    ,0);                   // patharray,color, offset

  printArray(           path1);

  smoothArray(          path1, path2,  .7 )                    // pathin,pathout, fillinpoints

  drawXY(               path2, "blue"    ,0);                  // patharray,color, offset

  smoothArray(          path2, path3,  .35 )                   // pathin,pathout, fillinpoints

  drawXY(               path3, "cyan"    ,0);                  // patharray,color, offset

  smoothArray(          path3, path4,  .17 )                   // pathin,pathout, fillinpoints

  drawXY(               path4, "orange"    ,0);                // patharray,color, offset

  smoothArray(          path4, path5,  .085 )                  // pathin,pathout, fillinpoints

  drawXY(               path5, "black"    ,0);                 // patharray,color, offset

}                       //function init() 

  function              makeArray(pathArray, numpt, Gain)

{ var xscale =          WIDTH/numpt;

  var ypt =             0;

  for                   (var i = 0; i <= numpt; i++)

{ ypt =                 (Math.random ()-.5)*100*Gain

  var pt =              new Point;

  pt.x =                i*xscale;

  pt.y =                ypt;

  pathArray.push(       pt);

}                       //for (var i = 0; i < numpt; i++)

}                       //function makeArray(pathArray, numpt)

function                printArray(pathArray)

{ var numpt1=           pathArray.length;

  for                   (var i = 0; i < numpt1; i++)

{ document.stpw.myTextArea.value += i +"     "+ pathArray[i].x +"     "+ pathArray[i].y  + "\n";

}                       //for (var i = 0; i < numpt1; i++)

}                       // printArray(pathArray)

  function              smoothArray(pathRaw, pathsmooth,Gain )

{ var numpt1=           pathRaw.length;

  var xt,yt;

  for                   (var i = 0; i < numpt1-1; i++)

{ yt =                  pathRaw[i].y ;

  xt =                  pathRaw[i].x ;

  var pt =              new Point;

  pt.x =                xt;

  pt.y =                yt;

  pathsmooth.push(      pt);

  yt =                  (pathRaw[i].y + pathRaw[i+1].y)/2 +(Math.random ()-.5)*100*Gain;

  xt =                  (pathRaw[i].x + pathRaw[i+1].x)/2 ;

  var pt =              new Point;

  pt.x =                xt;

  pt.y =                yt;

  pathsmooth.push(      pt);

}                       //for (var i = 0; i < numpt; i++)

  yt                  = pathRaw[i].y ;//i = numpt1;

  xt                  = pathRaw[i].x ;

  var pt              = new Point;

  pt.x                = xt;

  pt.y                = yt;

  pathsmooth.push(      pt);

}                       //smoothArray(pathRaw, pathsmooth,betweenPts )

  function              drawRect( rectx, recty, rectW, rectH) 

{ context.beginPath(    );

  context.rect(         rectx, recty, rectW, rectH);

  context.strokeStyle = "black";

  context.lineWidth =   1;

  context.stroke(       );

}                       //function drawRect( rectx, recty, rectW, rectH) 

  function              drawline(X0,Y0,X1,Y1,Width,Color) 

{ context.moveTo(       X0,Y0);

  context.lineTo(       X1,Y1);

  context.lineWidth =   Width;

  context.strokeStyle = Color;  

  context.stroke(       );

}                       //function drawline(X0,Y0,X1,Y1,Width,Color) 

  function              Point()                 //Point object to hold data

{ this.x =              0;

  this.y =              0;

}                       //function Point()

  function              drawXY( path2Draw, Color , Yoff) 

{ var len =             path2Draw.length;

  context.beginPath(    );

  context.moveTo(       path2Draw[0].x,Xaxis+Yoff-path2Draw[0].y);

  for                   (var i = 1; i < len; i++) context.lineTo( path2Draw[i].x,Xaxis+Yoff-path2Draw[i].y);

  context.lineWidth   = 2;

  context.strokeStyle = Color;  

  context.stroke(       );

}                       //function drawXY() 


</script>

</head>


<BODY                   onLoad="init()">

<h2>                    Fractal NOISE </h2>

<canvas                 id=  "myCanvas" width="600" height="400"> </canvas>

<FORM                   NAME="stpw">       <!-- first form -->

<textarea               id="myTextArea" rows="10" cols="70"></textarea>

</FORM>

</html>




=================MOVE_FROM_KEYBOARD=======================================



     


<!doctype html>

<html>

<head> <meta charset="UTF-8" /> <title>Canvas Test</title> </head>

<body>

<section>

<div>

<canvas id              ="canvas" width="300" height="200">

                          This text is displayed if your browser does not support HTML5 Canvas.

</canvas>

</div>

<script type          = "text/javascript">

var canvas;

var ctx;

var dx                  = 5;

var dy                  = 5;

var x                   = 150;

var y                   = 100;

var WIDTH               = 300;

var HEIGHT              = 200;

function                  circle(x,y,r) 

{ ctx.beginPath();

  ctx.arc(                x, y, r, 0, Math.PI*2, true);

  ctx.fill();

}

function                  rect(x,y,w,h) 

{ ctx.beginPath();

  ctx.rect(               x,y,w,h);

  ctx.closePath();

  ctx.fill();

  ctx.stroke();

}

function                  clear() 

{ ctx.clearRect(          0, 0, WIDTH, HEIGHT);

}

function                  init() 

{ canvas                = document.getElementById("canvas");

  ctx                   = canvas.getContext("2d");

  return setInterval(     draw, 10);

}

function                  doKeyDown(evt)

{ switch                  (evt.keyCode) 

{ case 38:                                /* Up arrow was pressed */

  if                      (y - dy > 0){ y -= dy; }    break;

  case 40:                                /* Down arrow was pressed */

  if                      (y + dy < HEIGHT){y += dy;} break;

  case 37:                               /* Left arrow was pressed */

  if                      (x - dx > 0){x -= dx;}      break;

  case 39:                               /* Right arrow was pressed */

  if                      (x + dx < WIDTH){x += dx;}  break;

}

}

function                  draw() 

{ clear();

  ctx.fillStyle         = "white";

  ctx.strokeStyle       = "black";

  rect(                  0,0,WIDTH,HEIGHT);

  ctx.fillStyle         = "purple";

  circle(                x, y, 10);

}

init();

window.addEventListener(  'keydown',doKeyDown,true);

</script>

</section>

</body>

</html>





==================DRAW_CIRCUITS===============================


 


<html>

<script type="text/javascript">

  var NPNL0 = [ [80,60,100,40],[80,60,100,80],[95,65,100,80],[85,75,100,80],[80,40,80,80],[80,60,70,60],[85,75,95,65]]

  var NPNL1 = [ [80,120,100,100],[80,120,100,140],[95,125,100,140],[85,135,100,140],[80,100,80,140],[80,120,70,120],[85,135,95,125]]

  var NPNR1 = [ [140,120,120,100],[140,120,120,140],[125,125,120,140],[135,135,120,140],[140,100,140,140],[140,120,150,120],[135,135,125,125]]

  var PNPR1 = [ [140,60,120,80],[140,60,120,40],[135,55,130,40],[135,55,120,50], [140,80,140,40],[140,60,150,60],[130,40,120,50]]

  var GND   = [ [215,120,225,120],[210,115,230,115],[205,110,235,110],[220,110,220,95]]

  var CAPV  = [ [260,95,280,95],[260,100,280,100],[270,95,270,80],[270,100,270,110]]

  var RESH  = [[180,70,190,70],[190,70,195,60],[195,60,205,80],[205,80,215,60],[215,60,220,70],[220,70,230,70]]

  var JMP   = [[180,40,185,40],[185,40,190,35],[190,35,195,40],[195,40,200,40],]

  var AMPL  = [[180,140,210,170],[180,200,210,170],[180,140,180,200],[180,150,170,150],[180,190,170,190],[210,170,220,170]]

  var AMPR  = [[110,150,80,180],[110,210,80,180],[110,150,110,210],[110,160,120,160],[110,200,120,200],[80,180,70,180]]


  var canvas  ;

  var context ;


function init( )

{ canvas                 = document.getElementById("myCanvas");

  context                = canvas.getContext("2d");

  clearcanv();

  linecontext(            "w,col",    1,"#ff0000"); DrawGeo( NPNL0);

  linecontext(            "w,col",    2,"#00ff00"); DrawGeo( NPNL1);

  linecontext(            "w,col",    2,"#00ff00"); DrawGeo( NPNR1);

  linecontext(            "w,col",    2,"#0000ff"); DrawGeo( PNPR1);

  linecontext(            "w,col",    2,"#00ffff"); DrawGeo( GND);

  linecontext(            "w,col",    2,"#ff00ff"); DrawGeo( CAPV);

  linecontext(            "w,col",    2,"#ff0000"); DrawGeo( RESH);

  linecontext(            "w,col",    2,"#00ff00"); DrawGeo( JMP);

  linecontext(            "w,col",    2,"#00ffff"); DrawGeo( AMPL);

  linecontext(            "w,col",    2,"#00ff00"); DrawGeo( AMPR);

}

function                   DrawGeo(thisArray)

{ for                      (i = 0; i < thisArray.length; i++)

{ line(                    "x0,y0,x1,y1", thisArray[i][0],thisArray[i][1],thisArray[i][2],thisArray[i][3]);

}

}

function                  line(info,x0,y0,x1,y1)

{ context.beginPath();

  context.moveTo(         x0,y0);

  context.lineTo(         x1,y1);

  context.stroke();

}

function                  linecontext(info,w,c)

{ context.lineWidth     = w;

  context.strokeStyle   = c;

}

function                  clearcanv()

{ context.beginPath();

  context.rect(           0, 0, canvas.width, canvas.height);   //topLeftX, topLeftY, width, height

  context.fillStyle     = "#FFFFFF"; context.fill();

  context.lineWidth     = 0;context.strokeStyle = "white";  //context.stroke();

}

</script>

<body onload            = "init ()">

<canvas id              = "myCanvas" style="border: solid 1px;" width="500" height="400" > <br>


</body>

</html>






=========================READ_TEXT_FROM_A_FILE=========================================

  

<html>

<head>

<title>                                  Basic JavaScript/AJAX Example</title>

<script type                           = "text/javascript">

  function                               GET_XMLHTTPRequest()

{ var request;        

  request                              = new XMLHttpRequest(); 

  return request;

}

  function                               FireOffAJAXRequest()

{ var myXMLHttpRequest                 = GET_XMLHTTPRequest();                             //new XMLHttpRequest object

  if (myXMLHttpRequest)                                                                           

{ myXMLHttpRequest.open(                 "GET", "File2read.txt", true);                           //have file in directory

  myXMLHttpRequest.onreadystatechange  = function (aEvt)                                       //call when readyState of XMLHttpRequest  changes 

{ if                                     (myXMLHttpRequest.readyState == 4)                       //Loading complete when  readyState equals 4

{ document.getElementById(               "myTextArea").value = myXMLHttpRequest.responseText; //transfer text

}                                         // if(myXMLHttpRequest.readyState == 4)

};                                        // myXMLHttpRequest.onreadystatechange 

  myXMLHttpRequest.send(                  null);                                                  //Lets fire off the request

}                                         // if (myXMLHttpRequest) 

  else

{ alert(                                 "A problem occurred instantiating the XMLHttpRequest object."); //XMLHttpRequest not instantiated.

}                                        // else

}                                        // function FireOffAJAXRequest()


</script>

</head>

<body>

<h1>Basic                                JavaScript/AJAX Example</h1>

<h4>                                     Creating an XMLHttpRequest object  to retrieve the contents of a page.</h4>

<input type                            = "button" value = "Click Here to load the contents of a page into the TextArea below" 

 onclick                               = "FireOffAJAXRequest();" /><br />

<textarea id                           = "myTextArea" rows="30" cols="70"> </textarea>

</body>

</html>



=========================WRITE_BINARY_STORED_DATA=================================




<?

$filename        = "results.txt";

IF ($sex         = $_POST["Gender"] ):

$choicefile      = fopen($filename, "a");         //let‚ append this to a file

$age             = $_POST["age"];

fprintf(           $choicefile, "%03d|", $age ); // formated

fwrite(            $choicefile, "$sex|");

$t1              = $_POST["t1"];

$t2              = $_POST["t2"];

$t3              = $_POST["t3"];

$t4              = $_POST["t4"];

$t5              = $_POST["t5"];

$t6              = $_POST["t6"];

$t7              = $_POST["t7"];

$t8              = $_POST["t8"];

$t9              = $_POST["t9"];

$type =            $t1 + $t2+ $t3+ $t4 + $t5+ $t6 +$t7 + $t8 + $t9;

fprintf(           $choicefile, "%03d|",$type);     // formated

$t11             = $_POST["t11"];

$t12             = $_POST["t12"];

$t13             = $_POST["t13"];

$t14             = $_POST["t14"];

$t15             = $_POST["t15"];

$t16             = $_POST["t16"];

$t17             = $_POST["t17"];

$t18             = $_POST["t18"];

$t19             = $_POST["t19"];

$type2           = $t11 + $t12+ $t13+ $t14 + $t15+ $t16 +$t17 + $t18 + $t19;

fprintf(           $choicefile, "%03d|",$type2);


fwrite(            $choicefile, "\n");

fclose(            $choicefile);

ENDIF;

?>


<html>

<head>

<title>            Test Survey</title>

</head>

<body>

<h1>               Test Survey</h1>

<form method     = "post"   action="TestSurvey.php">

<p>                 Choose a gender to enable the survey<BR>

<select name     = "Gender">

<option value    = ""  >Choose:</option>

<option value    = "F" >Female </option>

<option value    = "M" >Male   </option>

<option value    = "N" >Null   </option>

</select>

<p> <p>             Age (Whole numbers please)<br /> 

<input type      = "text" name = "age" />

<p> <p>

<p> <p>             Select all that Apply <BR>

<input type      = "checkbox" name="t1" value="1" />  Depression<br />

<input type      = "checkbox" name="t2" value="2" />  OCD <br />

<input type      = "checkbox" name="t3" value="4" />  Insomnia/Sleep deprevation <br />

<input type      = "checkbox" name="t4" value="8" />  Earaches <br />

<input type      = "checkbox" name="t5" value="16" /> ADD/ADHD <br />

<input type      = "checkbox" name="t6" value="32" /> tinnitus/hyperacusis <br />

<input type      = "checkbox" name="t7" value="64" /> BiPolar <br />

<input type      = "checkbox" name="t8" value="128" />sensory processing disorder <br />

<input type      = "checkbox" name="t9" value="256" />Autism<br />

<p> <p><p> <p>

<p> <p>            Select all that Apply <BR>

<input type      = "checkbox" name="t11" value="1" /> Gum sounds<br />

<input type      = "checkbox" name="t12" value="2" /> Popcorn <br />

<input type      = "checkbox" name="t13" value="4" />  Sniff <br />

<input type      = "checkbox" name="t14" value="8" />  Clear throat <br />

<input type      = "checkbox" name="t15" value="16" /> Whistling <br />

<input type      = "checkbox" name="t16" value="32" /> country music <br />

<input type      = "checkbox" name="t17" value="64" /> Eating <br />

<input type      = "checkbox" name="t18" value="128" />Visual triggers <br />

<input type      = "checkbox" name="t19" value="256" />Silverware<br />

<p> <p><p> <p>

<input type      = "submit" value="Submit your answer" />

</p>

</form>


<a href          = "results.txt" target="_blank">Click Here To See Result Page</a>

<BR>                Reload results page to update

<p><p><p>

<a href          = "ReadSurvey.php" target="_blank">Click Here To Read the Result Page</a>

<p>

</body>



=========================ReadSurvey.php=========================================

  


<html>

<head>

<title>             Read The Survey Results</title>

</head>

<body>

<h1>                Read The Survey Results</h1>

<form method      ="post" action="ReadSurvey.php">

                    Line Number to read <br /> 

<input type       ="text" value = 1   name="LineNum" />

<a href           ="results.txt" target="_blank">Click Here To See Result Page</a>

 <p>

<input type       ="submit" value="Read the Line" />

</p>

</form>

</body>


<?

$filename        = "results.txt";

$choicefile      = fopen($filename, "r");  // append this to a file

$LineNum         = $_POST["LineNum"];

echo               "Line Number = ".$LineNum . ":    Full line = ";

$LineNum         = $LineNum -1 ;

$LineNum         = max(0,$LineNum );

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);

$theData         = fgets($choicefile);


for                ($i = 0; $i < $LineNum; $i++)

{ $theData       = fgets($choicefile);    //echo $theData ."<br>" ;

}

$theData         = fgets($choicefile);

echo               $theData ."<br>" ;


$dataChunks      = explode("|", $theData);

echo              "Age    = $dataChunks[0]<br />";

echo              "Gender = $dataChunks[1]<br />";


echo              "=======Type1=================  <br />";

if                ( $dataChunks[2] & 1 )   echo "Depression  <br />";

if                ( $dataChunks[2] & 2 )   echo "OCD  <br />";

if                ( $dataChunks[2] & 4 )   echo "Insomnia/Sleep deprevation  <br />";

if                ( $dataChunks[2] & 8 )   echo "Earaches  <br />";

if                ( $dataChunks[2] & 16 )  echo "ADD/ADHD  <br />";

if                ( $dataChunks[2] & 32 )  echo "tinnitus/hyperacusis  <br />";

if                ( $dataChunks[2] & 64 )  echo "BiPolar  <br />";

if                ( $dataChunks[2] & 128 ) echo "sensory processing disorder  <br />";

if                ( $dataChunks[2] & 256 ) echo "Autism  <br />";


echo              "=======Type2=================  <br />";

if                ( $dataChunks[3] & 1 )   echo "Gum sounds  <br />";

if                ( $dataChunks[3] & 2 )   echo "Popcorn  <br />";

if                ( $dataChunks[3] & 4 )   echo "Sniff  <br />";

if                ( $dataChunks[3] & 8 )   echo "Clear throat  <br />";

if                ( $dataChunks[3] & 16 )  echo "Whistling  <br />";

if                ( $dataChunks[3] & 32 )  echo "country music <br />";

if                ( $dataChunks[3] & 64 )  echo "Eating  <br />";

if                ( $dataChunks[3] & 128 ) echo "Visual triggers  <br />";

if                ( $dataChunks[3] & 256 ) echo "Silverware  <br />";




fclose($choicefile);

?>



===================PLAY_SOUND===============================================




<html>

<head> 

<h1>                  The_Misophonic_Experimental_Page </h1>

</head>

<div  class           ="audiocontainer">

<audio id             ="audioL_1"   src="sounds/ClearingThroat_L.wav"              preload="auto"></audio>

<audio id             ="audioH_1"   src="sounds/ClearingThroat_H.wav"              preload="auto"></audio>

<audio id             ="audioL_2"   src="sounds/slurping_L.wav"                    preload="auto"></audio>

<audio id             ="audioH_2"   src="sounds/slurping_H.wav"                    preload="auto"></audio>

<audio id             ="audioL_3"   src="sounds/sniff_L.wav"                       preload="auto"></audio>

<audio id             ="audioH_3"   src="sounds/sniff_H.wav"                       preload="auto"></audio>

<audio id             ="audioL_4"   src="sounds/Burbs_L.wav"                       preload="auto"></audio>

<audio id             ="audioH_4"   src="sounds/Burbs_H.wav"                       preload="auto"></audio>

<audio id             ="audioL_5"   src="sounds/bubblegum_L.wav"                   preload="auto"></audio>

<audio id             ="audioH_5"   src="sounds/bubblegum_H.wav"                   preload="auto"></audio>

<audio id             ="audioL_6"   src="sounds/eating_chips_L.wav"                preload="auto"></audio>

<audio id             ="audioH_6"   src="sounds/eating_chips_H.wav"                preload="auto"></audio>

<audio id             ="audioL_7"   src="sounds/Apple_Crunch_L.wav"                preload="auto"></audio>

<audio id             ="audioH_7"   src="sounds/Apple_Crunch_H.wav"                preload="auto"></audio>

<audio id             ="audioL_8"   src="sounds/Popcorn_munching_L.wav"            preload="auto"></audio>

<audio id             ="audioH_8"   src="sounds/Popcorn_munching_H.wav"            preload="auto"></audio>

<audio id             ="audioL_9"   src="sounds/lipsmack_L.wav"                    preload="auto"></audio>

<audio id             ="audioH_9"   src="sounds/lipsmack_H.wav"                    preload="auto"></audio>

<audio id             ="audioL_A"   src="sounds/fingernails_on_chalk_board_L.wav"  preload="auto"></audio>

<audio id             ="audioH_A"   src="sounds/fingernails_on_chalk_board_H.wav"  preload="auto"></audio>


</div>


<script type          = "text/javascript">


var  theform;

var  lastTime         = new Date();


function                play_single_sound1(s1,s2) 

{ var obn             = theform.OBN.value;

  var v               = theform.VOL.value;

  var v1              = (100-obn)*v/10000;

  var v2              = obn*v/10000;

  document.getElementById(s1).volume = v1;

  document.getElementById(s1).load(); 

  document.getElementById(s2).volume = v2;

  document.getElementById(s2).load(); 

  document.getElementById(s1).play();

  document.getElementById(s2).play();

  //break;

}


function                Do() 

{ var  thistime       = new Date();

  delta               = (thistime -lastTime )/1000;

  theform.REC.value = theform.REC.value +"delay from start to sound ="+delta+"sec \n"

  var snd             = theform.SND.value;

                        // theform.REC.value     =            theform.REC.value +"snd ="+snd+"  \n"

if                     (snd == "ClearingThroat" )            { javascript:play_single_sound1('audioL_1','audioH_1'); }

if                     (snd == "slurping" )                  { javascript:play_single_sound1('audioL_2','audioH_2'); }

if                     (snd == "sniff" )                     { javascript:play_single_sound1('audioL_3','audioH_3'); }

if                     (snd == "Burbs" )                     { javascript:play_single_sound1('audioL_4','audioH_4'); }

if                     (snd == "bubblegum" )                 { javascript:play_single_sound1('audioL_5','audioH_5'); }

if                     (snd == "eating_chips" )              { javascript:play_single_sound1('audioL_6','audioH_6'); }

if                     (snd == "Apple_Crunch" )              { javascript:play_single_sound1('audioL_7','audioH_7'); }

if                     (snd == "Popcorn_munching" )          { javascript:play_single_sound1('audioL_8','audioH_8'); }

if                     (snd == "lipsmack" )                  { javascript:play_single_sound1('audioL_9','audioH_9'); }

if                     (snd == "fingernails_on_chalk_board" ){ javascript:play_single_sound1('audioL_A','audioH_A'); } 

}


function                dotest(form)

{ theform             = form;

  var period          = 1000*theform.PER.value;

  var rand            = theform.RAND.value*period/100;

  var  thistime       = new Date();

  lastTime            = thistime;

  var delay           = 0;

  var num             = theform.NUM.value;

  theform.REC.value  = ""

  for                    (i=0;i<num;i++) 

{ delay               = delay +rand*Math.random()+period;

  setTimeout            ("Do()", delay);

}

}


</script>

</head>


<body>


<form>

<select              name="SND">

<option              value="ClearingThroat" >ClearingThroat 

<option              value="slurping" >slurping  

<option              value="sniff">sniff 

<option              value="Burbs">Burbs 

<option              value="bubblegum" >bubblegum  

<option              value="eating_chips">eating_chips 

<option              value="Apple_Crunch">Apple_Crunch 

<option              value="Popcorn_munching" >Popcorn_munching 

<option              value="lipsmack">lipsmack 

<option              value="fingernails_on_chalk_board">fingernails_on_chalk_board 

</select>            </td> SELECT SOUND<br>

<select              name="OBN">

<option              value="0"  >0%

<option              value="1 " >1%

<option              value="3 " >3%

<option              value="10" >10%

<option              value="20" >20%

<option              value="30" >30%

<option              value="40" >40%

<option              value="50" >50%

<option              value="60" >60%

<option              value="70" >70%

<option              value="80" >80%

<option              value="90" >90%

<option              value="100">100%

</select>            </td> SELECT OBNOXIOUSNESS_PERCENTAGE<br>

<select              name="VOL">

<option              value="100">100%

<option              value="90" >90%

<option              value="80" >80%

<option              value="70" >70%

<option              value="60" >60%

<option              value="50" >50%

<option              value="40" >40%

<option              value="30" >30%

<option              value="20" >20%

<option              value="10" >10%

<option              value="0"  >0%

</select>            </td> SELECT VOLUME_PERCENTAGE<br>

<select              name="NUM">

<option              value="1" >1  

<option              value="3" >3 

<option              value="10" >10  

<option              value="30" >30  

<option              value="100">100 

<option              value="300">300 

</select>            </td> SELECT NUMBER OF TIMES<br>

<select              name="PER">

<option              value="2" >2  sec

<option              value="4" >4  sec

<option              value="8" >8  sec

<option              value="16">16 sec

<option              value="32">32 sec

</select>            </td> SELECT CYCLE_TIME_SECONDS<br>

<select              name="RAND">

<option              value="0"   >0%

<option              value="3"   >3%

<option              value="10"  >10%

<option              value="30"  >30%

<option              value="100" >100%

<option              value="190" >190%

</select>            </td> SELECT RANDOMNESS_PERCENTAGE<br>

<input               type=button  value="RUN AUDIO" onClick="dotest(this.form)">


                     USE RELOAD PAGE TO STOP THE SOUND <br>

<textarea            name="REC" cols="40" rows="5" value="nothing"></textarea> <br>

 

</form>


</body>

</html>

==================================================================