-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
85 lines (77 loc) · 3.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<title>Function Painter</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="purl.js" /></script>
<script src="modernizer.js" />
if(Modernizr.canvas && Modernizr.webworkers)
// Your good
else
alert("Your browser won't work with this")
</script>
<script src="painter.js" /></script>
<style type="text/css">
canvas
{
background-color: white;
width: 400;
height: 400;
margin: auto;
}
h1
{
margin: auto;
}
#functions, #options, #buttons
{
margin: 15px 0;
}
.link {
margin-bottom: 5px;
}
</style>
</head>
<body>
<a href="https://github.com/DivisibleZero/functionPainter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<h1>Function Painter</h1>
<canvas id="painter" width="200" height="200"></canvas>
<h2>Input functions as f(x,y,t):</h2>
<div id="functions">
<label for="redFunction">Red Function:</label> <input type="text" size='100' id="redFunction" /><br />
<label for="greenFunction">Green Function:</label> <input type="text" size='100'id="greenFunction" /><br />
<label for="blueFunction">Blue Function:</label> <input type="text" size='100'id="blueFunction" /><br />
</div>
<div id="options">
<input type='checkbox' id='tVariable' checked='true'>Use variable t for time</input><br />
<label for="tInterval">Interval in miliseconds:</label> <input type='number' value='0' step="100" min="0" id='tInterval' /><br />
</div>
<div id="buttons">
<button id="start" type="button" value="Draw it." onclick="javascript:draw();" >Draw It.</button>
<button id="stop" type="button" value="Stop it." onclick="javascript:stopDraw();" >Stop It.</button>
</div>
<label for="url">ShareURL:</label><input type="text" id="url"/>
<h2>Things to try</h2>
<ul id="examples">
<li class="link multiple"> <strong> XOR is strange</strong>
<ul>
<li class="red">(21*sin(x+y)*t/50+(x-y))^(3*t+50)</li>
<li class="green">(5*sin(x-y)*t/50+(x+y))^t</li>
<li class="blue">23+123*sin(t/20)*sin(t/320*sqrt((123-x)*(123-x) + (45-y)*(45-y)))</li>
</ul>
</li>
<li class="link single" >8/(2*2*(x^2-y^2))*cos((x - y)/2*t)*sin((x+y)/2)*t</li>
<li class ="link single">255*sin(sqrt(pow(x, 2) + pow(y, 2)))</li>
<li class ="link single">(x^x + y^y)^t</li>
<li class ="link single">255/sin(sqrt(x*x + y*y) - t*t*atan2(y, x))</li>
<li class ="link multiple"><strong>WARNING: May induce seizures</strong>
<ul>
<li class="red">255*(t%2)</li>
<li class="green">255*(t%3)</li>
<li class="blue">255*(t%4)</li>
</ul>
</li>
<li class="link single">128*sin(x^t*t*atan(x, y) + y^t*t*atan(x, y))</li>
<li class="link single">x^t+ y^t</li>
</ul>
</body>
</html>