-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweimesian_plane_grapher.html
142 lines (108 loc) · 3.41 KB
/
weimesian_plane_grapher.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<title>Weimesian Plane Grapher And More!</title>
<style>
#plane {
border: 1px solid black;
}
#equation {
display: block;
width: 400px;
}
#controls * {
margin: 5px 0;
}
</style>
</head>
<body>
<canvas id="plane" width="400" height="400"></canvas>
<div id="controls">
<label for="equation">Equation to graph: (x is in radians)</label>
<input type="text" id="equation" value="(Math.sin(x / 2) + 1) * (Math.PI / 4)">
<button id="graphButton">Graph it!</button>
</div>
<p>Click on a point to see its value</p>
<p id="point-display"></p>
<script src="regression.min.js"></script>
<script>
'use strict';
var canvas = document.getElementById('plane');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var equation = document.getElementById('equation');
var graphButton = document.getElementById('graphButton');
var cartesianPoints = [];
var canvasPoints = [];
// config.
var pointRadius = 2;
var amountOfPhases = 15;
var phaseWidth = width / 2 / amountOfPhases;
var origin = [width / 2, height / 2];
function graphEquation() {
canvasPoints = [];
cartesianPoints = [];
ctx.clearRect(0, 0, width, height);
for (var x = 0; x < amountOfPhases; x++) {
var angle = -eval(equation.value);
ctx.beginPath()
ctx.arc(origin[0], origin[0], phaseWidth * x, 0, 2 * Math.PI, false);
ctx.strokeStyle = "darkGray";
ctx.strokeWidth = 1;
ctx.stroke();
ctx.beginPath();
var _x = origin[0] + x * phaseWidth;
var _y = origin[1];
var newX = (_x - origin[0]) * Math.cos(angle) - (_y - origin[1]) * Math.sin(angle) + origin[0];
var newY = (_x - origin[0]) * Math.sin(angle) + (_y - origin[1]) * Math.cos(angle) + origin[1];
canvasPoints.push([newX, newY]);
cartesianPoints.push([(newX - origin[0]) / phaseWidth, -(newY - origin[1]) / phaseWidth]);
ctx.arc(newX, newY, pointRadius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'black';
ctx.fill();
}
}
graphEquation();
graphButton.addEventListener('click', function() {
graphEquation();
});
canvas.addEventListener('click', function(e) {
var mousePos = getMousePositionInCartesianPlane(e);
var threshhold = 1;
var closestPoint = null;
var closestDist = -1;
var clickPos = getMousePositionInCartesianPlane(e);
for (var i = 0; i < cartesianPoints.length; i++) {
var p = cartesianPoints[i];
var dist = Math.sqrt(Math.pow(p[0] - clickPos[0], 2) + Math.pow(p[1] - clickPos[1], 2));
if (dist <= threshhold && (dist < closestDist || closestDist < 0)) {
closestDist = dist;
closestPoint = p;
}
}
// console.log(closestPoint);
displayPoint(closestPoint);
});
function getMousePositionInCanvas(event) {
var rect = canvas.getBoundingClientRect();
return [event.clientX - rect.left, event.clientY - rect.top];
}
function canvasPointToCartesianPoint(point) {
var x = point[0] - origin[0];
var y = -(point[1] - origin[1]);
return [x / phaseWidth, y / phaseWidth];
}
function getMousePositionInCartesianPlane(event) {
return canvasPointToCartesianPoint(getMousePositionInCanvas(event));
}
var _points = [[0, 0], [-0.5, Math.sqrt(3)/2], [-Math.sqrt(3)/2, 0.5], [-1, 0]];
var results = regression('polynomial', _points, 3);
// console.log(results);
function displayPoint(point) {
var idc = document.getElementById('point-display');
idc.textContent = "x: " + point[0] + ", y: " + point[1];
}
</script>
</body>
</html>