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>
==================================================================