Last active
August 29, 2015 14:10
-
-
Save adamnew123456/123582cda253d36c75d8 to your computer and use it in GitHub Desktop.
A Simple Equation Mixer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<title> Equation Mixer </title> | |
<body> | |
<canvas id="grid" width="600" height="600"> </canvas> <br/> | |
f(x): <input id="func1" type="text" value="Math.sin(x)"> </input> | |
g(x): <input id="func2" type="text" value="Math.cos(x)"> </input> <br/> | |
X Min: <input id="xmin" type="text" value="-1"> </input> | |
X Max: <input id="xmax" type="text" value="1"> </input> <br/> | |
Y Min: <input id="ymin" type="text" value="-1"> </input> | |
Y Max: <input id="ymax" type="text" value="1"> </input> <br/> | |
Iterations: <input id="iters" type="text" value="50"> </input> <br/> | |
Speed: <input id="speed" type="text" value="0.05"> </input> <br/> | |
<input type="button" onclick="$.do_start_stop();" value="Start/Stop"> </input> | |
<input type="button" onclick="$.do_pause();" value="Pause/Play"> </input> | |
<script> | |
$ = {}; | |
(function(){ | |
var runner_token = null; | |
var ratio = 0; | |
var canvas = document.getElementById("grid"); | |
var canvas_width = canvas.width; | |
var canvas_height = canvas.height; | |
function evaluate_text_cell(id, prefix, suffix) | |
{ | |
var cell = document.getElementById(id); | |
return eval((prefix || "") + cell.value + (suffix || "")); | |
} | |
var eq_1 = null; | |
var eq_2 = null; | |
var speed = null; | |
var iters = null; | |
var x_min = null; | |
var x_max = null; | |
var y_min = null; | |
var y_max = null; | |
var x_ratio = null; | |
var y_ratio = null; | |
var x_incr = null; | |
function transform_x(x) | |
{ | |
return (x - x_min) * x_ratio; | |
} | |
function transform_y(y) | |
{ | |
return canvas_height - (y - y_min) * y_ratio; | |
} | |
function draw_y_axis(context) | |
{ | |
context.beginPath(); | |
context.setLineDash([5]); | |
context.moveTo(transform_x(x_min), transform_y(0)); | |
context.lineTo(transform_x(x_max), transform_y(0)); | |
context.stroke(); | |
context.setLineDash([]); | |
} | |
function draw_x_axis(context) | |
{ | |
context.beginPath(); | |
context.setLineDash([5]); | |
context.moveTo(transform_x(0), transform_y(y_min)); | |
context.lineTo(transform_x(0), transform_y(y_max)); | |
context.stroke(); | |
context.setLineDash([]); | |
} | |
function draw_frame() | |
{ | |
var context = canvas.getContext("2d"); | |
context.clearRect(0, 0, canvas_width, canvas_height); | |
if (0 > x_min && 0 < x_max) | |
draw_x_axis(context); | |
if (0 > y_min && 0 < y_max) | |
draw_y_axis(context); | |
context.beginPath(); | |
var drawn_first_point = false; | |
for (var x = x_min; x < x_max; x += x_incr) | |
{ | |
var y = ratio * eq_1(x) + (1 - ratio) * eq_2(x); | |
if (!isNaN(y) && !drawn_first_point) | |
{ | |
drawn_first_point = true; | |
context.moveTo(transform_x(x), transform_y(y)); | |
} | |
else | |
context.lineTo(transform_x(x), transform_y(y)); | |
} | |
context.stroke(); | |
if (ratio < 0 || ratio > 1) | |
{ | |
speed *= -1; | |
ratio += speed; | |
} | |
else | |
ratio += speed; | |
} | |
$.do_start_stop = function() | |
{ | |
if (runner_token == null) | |
{ | |
console.log("[Page] Started"); | |
eq_1 = evaluate_text_cell("func1", "(function(x){ return ", ";})"); | |
eq_2 = evaluate_text_cell("func2", "(function(x){ return ", ";})"); | |
iters = evaluate_text_cell("iters"); | |
speed = evaluate_text_cell("speed"); | |
x_min = evaluate_text_cell("xmin"); | |
x_max = evaluate_text_cell("xmax"); | |
y_min = evaluate_text_cell("ymin"); | |
y_max = evaluate_text_cell("ymax"); | |
x_ratio = canvas_width / (x_max - x_min); | |
y_ratio = canvas_height / (y_max - y_min); | |
x_incr = (x_max - x_min) / iters; | |
runner_token = setInterval(draw_frame, 125); | |
} | |
else | |
{ | |
console.log("[Page] Stopped"); | |
clearInterval(runner_token); | |
runner_token = null; | |
ratio = 0; | |
} | |
} | |
$.do_pause = function() | |
{ | |
if (runner_token) | |
{ | |
clearInterval(runner_token); | |
runner_token = null; | |
} | |
else | |
runner_token = setInterval(draw_frame, 125); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment