<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:ELEMENT>
<html>
<head>
<title>::sin::</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
margin:0px;
}
#x{
position:absolute;
top:400px;
left:0px;
height:1px;
width:1200px;
background-color:black;
overflow:hidden;
}
#x_arrow{
position:absolute;
top:389px;
left:1195px;
height:15px;
width:15px;
}
#y{
position:absolute;
top:0px;
left:400px;
height:750px;
width:1px;
background-color:black;
overflow:hidden;
}
#y_arrow{
position:absolute;
top:-1px;
left:393px;
height:15px;
width:15px;
}
#o{
position:absolute;
top:415px;
left:385px;
height:15px;
width:15px;
font-size:18px;
}
input{
width:25px;
height:30px;
border:none;
text-align:center;
}
#clean{
width:25px;
height:15px;
background-color:#5f9fff;
cursor:pointer;
display:inline-block;
text-align:center;
font-weight:bold;
line-height:15px;
}
</style>
</head>
<body>
<div>
<input type="text" id="pa" maxlength="5" />sin(<input type="text" id="pb" maxlength="5" />x + <input type="text" id="pc" maxlength="5" />) <button onclick="show()">show</button> <div id="clean" style="color:white" >O</div>
</div>
<div id="x"></div>
<div id="y"></div>
<div id="x_arrow">▶</div><div id="y_arrow">▲</div>
<div id="o">O</div>
</body>
</html>
<script type="text/javascript">
var o_x = 400;
var o_y = 400;
var step = 0.01;
var points = 0;
var oFrag = document.createDocumentFragment();
var button = document.getElementById("clean");
var b = false;
(function(){
var x = 0;
var y = 0;
while(x <= Math.PI * 4){
y = Math.sin(x);
draw(x,y);
points++;
x += step;
}
document.body.appendChild(oFrag);
points = 0;
})();
button.onclick = function() {
button.style.color = (button.style.color == "white")?((b = true) == true?"red":""):((b = false) == false?"white":"");
}
function show(){
var x = 0;
var y = 0;
var pa = document.getElementById("pa").value;
var pb = document.getElementById("pb").value;
var pc = document.getElementById("pc").value;
var tempx = 0;
var tempx2 = 0;
var tempy = 0;
//clean
if(b) {
var aElms = document.getElementsByTagName("*");
for(var i = 0;i < aElms.length;i++){
if(aElms[i].style.backgroundColor == "red" || aElms[i].style.backgroundColor == "blue") {
document.body.removeChild(aElms[i]);
i = 0;
}
}
}
//draw
setTimeout(function(){
while(x <= Math.PI * 4){
y = Math.sin(x);
if(pc != ""){
tempx = x - pc / 50;
} else {
tempx = x;
}
if(pb != ""){
tempx2 = tempx * (1 / pb);
}else {
tempx2 = tempx;
}
if(pa != ""){
tempy = y * pa;
} else {
tempy = y;
}
draw(tempx2,tempy);
points++;
x += step;
}
document.body.appendChild(oFrag);
points = 0;
},300);
}
//draw -x , -y
function draw(x,y) {
var top = y * 50 * -1 + o_y;
var left = x * 50 + o_x;
var oDiv = document.createElement("div");
oDiv.style.position = "absolute";
oDiv.style.top = top + "px";
oDiv.style.left = left + "px";
oDiv.style.width = "1px";
oDiv.style.height = "1px";
oDiv.style.backgroundColor = "blue";
oDiv.style.overflow = "hidden";
if(points % 157 == 0){
oDiv.style.overflow = "";
oDiv.style.top = (top - 1) + "px";
oDiv.style.left = (left - 1) + "px";
//oDiv.innerHTML = "(" + top + "," + left + ")";
oDiv.innerHTML = (points != 0)?(points <= 314)?(points % 314 != 0)?("π/" + 314 / points):("π"):(points % 314 != 0)?(points / 157 + "π/2"):(points / 314 + "π"):("");
oDiv.style.width = "3px";
oDiv.style.height = "3px";
oDiv.style.backgroundColor = "red";
}
oFrag.appendChild(oDiv);
}
</script>