Skip to content

Commit 60f9df9

Browse files
author
Stefan Fenn
committed
added first version
1 parent 697b5dc commit 60f9df9

File tree

2 files changed

+353
-0
lines changed

2 files changed

+353
-0
lines changed

‎examples/exampleGrid1.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script src="../graphplot.js"></script>
2+
3+
<canvas id="grid" width="600px" height="600px"></canvas>
4+
5+
<script>
6+
var canvas = document.getElementById("grid");
7+
var ctx = canvas.getContext("2d");
8+
9+
var config = {
10+
xMin: -3,
11+
xMax: 5,
12+
yMin: -1,
13+
yMax: 2,
14+
ctx: ctx,
15+
width: canvas.width,
16+
height: canvas.height,
17+
xFactor: 5 / 10,
18+
yFactor: 4 / 10,
19+
axisColor: "#000000",
20+
gridColor: "#b0b0b0"
21+
};
22+
23+
var func3 = function(x, y) {
24+
var tmp = 1;
25+
for (var i = 0; i < 60; i++) {
26+
tmp /= i / 2;
27+
}
28+
return Math.sin(x * 2) * y + Math.cos(y * 5) * x;
29+
};
30+
31+
drawGrid(config);
32+
</script>

‎graphplot.js‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
var getGridPointDist = function(min, max, factor) {
2+
var diff = max - min;
3+
var result = Math.pow(10.0, Math.ceil(Math.log(diff) / Math.log(10.0)) - 1);
4+
switch (diff / result) {
5+
case 7:
6+
case 6:
7+
case 5:
8+
case 4:
9+
result /= 2;
10+
break;
11+
case 3:
12+
result /= 4;
13+
break;
14+
case 2:
15+
result /= 5;
16+
break;
17+
case 1:
18+
result /= 10;
19+
break;
20+
}
21+
result *= factor;
22+
return result;
23+
};
24+
25+
var clear = function(c) {
26+
c.ctx.clearRect(0, 0, c.width, c.height);
27+
};
28+
29+
var drawGrid = function(c) {
30+
clear(c);
31+
var xDiff = c.xMax - c.xMin;
32+
var xPixPerUnit = c.width / xDiff;
33+
var yDiff = c.yMax - c.yMin;
34+
var yPixPerUnit = c.height / yDiff;
35+
var xF = getGridPointDist(c.xMin, c.xMax, c.xFactor);
36+
var yF = getGridPointDist(c.yMin, c.yMax, c.yFactor);
37+
38+
var startValue = Math.ceil(c.xMin / xF) * xF;
39+
var number = Math.round(Math.floor(xDiff / xF)) + 1;
40+
var axisPosition = 0;
41+
if (c.yMin < 0 && c.yMax > 0) {
42+
axisPosition = c.height + c.yMin * yPixPerUnit + 12;
43+
} else {
44+
axisPosition = c.height - 12;
45+
}
46+
ctx.strokeStyle = c.gridColor;
47+
for (var i = 0; i < number; i++) {
48+
if (Math.abs(startValue) < xF * 0.5) {
49+
ctx.strokeStyle = c.axisColor;
50+
}
51+
var position = Math.round((startValue - c.xMin) * xPixPerUnit);
52+
drawLine(ctx, position, 0, position, c.height);
53+
ctx.fillStyle = c.axisColor;
54+
text = Math.round(startValue * 100) / 100;
55+
ctx.fillText(text, position + 4, axisPosition);
56+
ctx.strokeStyle = c.gridColor;
57+
startValue += xF;
58+
}
59+
60+
startValue = Math.ceil(c.yMin / yF) * yF;
61+
var number = Math.round(Math.floor(yDiff / yF)) + 1;
62+
var axisPosition = 0;
63+
if (c.xMin < 0 && c.xMax > 0) {
64+
axisPosition = -c.xMin * xPixPerUnit + 5;
65+
} else {
66+
axisPosition = 5;
67+
}
68+
ctx.strokeStyle = c.gridColor;
69+
for (var i = 0; i < number; i++) {
70+
if (Math.abs(startValue) < yF * 0.5) {
71+
ctx.strokeStyle = c.axisColor;
72+
}
73+
var position = c.height - Math.round((startValue - c.yMin) * yPixPerUnit);
74+
drawLine(ctx, 0, position, c.width, position);
75+
ctx.fillStyle = c.axisColor;
76+
text = Math.round(startValue * 100) / 100;
77+
ctx.fillText(text, axisPosition, position - 4);
78+
ctx.strokeStyle = c.gridColor;
79+
startValue += yF;
80+
}
81+
};
82+
83+
var xCoordToPix = function(c, xCoord) {
84+
var xDiff = c.xMax - c.xMin;
85+
var xPixPerUnit = c.width / xDiff;
86+
return (xCoord - c.xMin) * xPixPerUnit;
87+
};
88+
89+
var yCoordToPix = function(c, yCoord) {
90+
var yDiff = c.yMax - c.yMin;
91+
var yPixPerUnit = c.height / yDiff;
92+
return c.height - (yCoord - c.yMin) * yPixPerUnit;
93+
};
94+
95+
var xPixToCoord = function(c, xPix) {
96+
var xDiff = c.xMax - c.xMin;
97+
var xPixPerUnit = c.width / xDiff;
98+
return xPix / xPixPerUnit + c.xMin;
99+
};
100+
101+
var yPixToCoord = function(c, yPix) {
102+
var yDiff = c.yMax - c.yMin;
103+
var yPixPerUnit = c.height / yDiff;
104+
return -(yPix - c.height) / yPixPerUnit + c.yMin;
105+
};
106+
107+
var drawLine = function(ctx, x1, y1, x2, y2) {
108+
ctx.beginPath();
109+
ctx.moveTo(x1, y1);
110+
ctx.lineTo(x2, y2);
111+
ctx.stroke();
112+
};
113+
114+
var drawFunction = function(c, strokeStyle, func) {
115+
clear(c);
116+
c.ctx.strokeStyle = strokeStyle;
117+
c.ctx.lineWidth = 3;
118+
c.ctx.beginPath();
119+
for (var w = 0; w <= c.width; w++) {
120+
var y = func(xPixToCoord(c, w));
121+
var h = yCoordToPix(c, y);
122+
if (w === 0) {
123+
c.ctx.moveTo(w, h);
124+
continue;
125+
}
126+
c.ctx.lineTo(w, h);
127+
}
128+
c.ctx.stroke();
129+
};
130+
131+
var getGradientVector = function(colorMapIndex, levels) {
132+
var gradientColors1 = {
133+
0.0: "rgb(51, 59, 126)",
134+
0.05: "rgb(45, 74, 138)",
135+
0.1: "rgb(38, 89, 149)",
136+
0.15: "rgb(28, 116, 174)",
137+
0.2: "rgb(18, 142, 186)",
138+
0.25: "rgb(19, 158, 198)",
139+
0.3: "rgb(22, 161, 191)",
140+
0.35: "rgb(28, 160, 163)",
141+
0.4: "rgb(47, 157, 119)",
142+
0.45: "rgb(86, 156,66)",
143+
0.5: "rgb(121, 162, 43)",
144+
0.55: "rgb(162, 172, 29)",
145+
0.6: "rgb(194, 184, 22)",
146+
0.65: "rgb(216, 194, 17)",
147+
0.7: "rgb(223, 204, 15)",
148+
0.75: "rgb(238, 201, 15)",
149+
0.8: "rgb(237, 180, 17)",
150+
0.85: "rgb(236, 144, 19)",
151+
0.9: "rgb(228, 96, 25)",
152+
0.95: "rgb(221, 60, 30)",
153+
1.0: "rgb(221, 49, 33)"
154+
};
155+
var gradientColors2 = {
156+
0.0: "rgb(204, 196, 129)",
157+
0.05: "rgb(210, 181, 117)",
158+
0.1: "rgb(217, 166, 106)",
159+
0.15: "rgb(227, 139, 81)",
160+
0.2: "rgb(237, 113, 69)",
161+
0.25: "rgb(236, 97, 57)",
162+
0.3: "rgb(233, 94, 64)",
163+
0.35: "rgb(227, 95, 92)",
164+
0.4: "rgb(208, 98, 136)",
165+
0.45: "rgb(169, 99, 189)",
166+
0.5: "rgb(134, 93, 212)",
167+
0.55: "rgb(93, 83, 226)",
168+
0.6: "rgb(61, 71, 233)",
169+
0.65: "rgb(39, 61, 238)",
170+
0.7: "rgb(32, 51, 240)",
171+
0.75: "rgb(17, 54, 240)",
172+
0.8: "rgb(18, 75, 238)",
173+
0.85: "rgb(19, 111, 236)",
174+
0.9: "rgb(27, 159, 230)",
175+
0.95: "rgb(34, 195, 225)",
176+
1.0: "rgb(34, 206, 222)"
177+
};
178+
var gradientColors3 = {
179+
0.0: "rgb(51, 0, 102)",
180+
0.5: "rgb(0, 0, 128)",
181+
1.0: "rgb(204, 255, 255)"
182+
};
183+
var gradientColors4 = {
184+
0.0: "rgb(102, 0, 0)",
185+
0.5: "rgb(102, 0, 0)",
186+
1.0: "rgb(255, 102, 0)"
187+
};
188+
var gradientColors5 = {
189+
0.0: "rgb(0, 0, 0)",
190+
0.05: "rgb(0, 0, 0)",
191+
0.05001: "rgb(255, 255, 255)",
192+
0.1: "rgb(255, 255, 255)",
193+
0.10001: "rgb(0, 0, 0)",
194+
0.15: "rgb(0, 0, 0)",
195+
0.15001: "rgb(255, 255, 255)",
196+
0.2: "rgb(255, 255, 255)",
197+
0.20001: "rgb(0, 0, 0)",
198+
0.25: "rgb(0, 0, 0)",
199+
0.25001: "rgb(255, 255, 255)",
200+
0.3: "rgb(255, 255, 255)",
201+
0.30001: "rgb(0, 0, 0)",
202+
0.35: "rgb(0, 0, 0)",
203+
0.35001: "rgb(255, 255, 255)",
204+
0.4: "rgb(255, 255, 255)",
205+
0.40001: "rgb(0, 0, 0)",
206+
0.45: "rgb(0, 0, 0)",
207+
0.45001: "rgb(255, 255, 255)",
208+
0.5: "rgb(255, 255, 255)",
209+
0.50001: "rgb(0, 0, 0)",
210+
0.55: "rgb(0, 0, 0)",
211+
0.55001: "rgb(255, 255, 255)",
212+
0.6: "rgb(255, 255, 255)",
213+
0.60001: "rgb(0, 0, 0)",
214+
0.65: "rgb(0, 0, 0)",
215+
0.65001: "rgb(255, 255, 255)",
216+
0.7: "rgb(255, 255, 255)",
217+
0.70001: "rgb(0, 0, 0)",
218+
0.75: "rgb(0, 0, 0)",
219+
0.75001: "rgb(255, 255, 255)",
220+
0.8: "rgb(255, 255, 255)",
221+
0.80001: "rgb(0, 0, 0)",
222+
0.85: "rgb(0, 0, 0)",
223+
0.85001: "rgb(255, 255, 255)",
224+
0.9: "rgb(255, 255, 255)",
225+
0.90001: "rgb(0, 0, 0)",
226+
0.95: "rgb(0, 0, 0)",
227+
0.95001: "rgb(255, 255, 255)",
228+
1.0: "rgb(255, 255, 255)"
229+
};
230+
var gradientColors6 = {
231+
0.0: "rgb(120, 28, 23)",
232+
0.5: "rgb(224, 137, 0)",
233+
1.0: "rgb(224, 206, 0)"
234+
};
235+
var gradientColors7 = {
236+
0.0: "rgb(55, 14, 77)",
237+
0.5: "rgb(128, 9, 14)",
238+
1.0: "rgb(115, 143, 79)"
239+
};
240+
var gradientColors8 = {
241+
0.0: "rgb(109, 79, 143)",
242+
0.33: "rgb(143, 79, 79)",
243+
0.66: "rgb(122, 76, 47)",
244+
1.0: "rgb(142, 143, 79)"
245+
};
246+
247+
var gradientColorList = [
248+
gradientColors1,
249+
gradientColors2,
250+
gradientColors3,
251+
gradientColors4,
252+
gradientColors5,
253+
gradientColors6,
254+
gradientColors7,
255+
gradientColors8
256+
];
257+
258+
var gradientColors = gradientColorList[colorMapIndex];
259+
260+
var canvas = document.createElement("canvas");
261+
canvas.width = 1;
262+
canvas.height = levels;
263+
var ctx2 = canvas.getContext("2d");
264+
var gradient = ctx2.createLinearGradient(0, 0, 0, levels);
265+
for (var pos in gradientColors) {
266+
gradient.addColorStop(pos, gradientColors[pos]);
267+
}
268+
ctx2.fillStyle = gradient;
269+
ctx2.fillRect(0, 0, 1, levels);
270+
var gradientPixels = ctx2.getImageData(0, 0, 1, levels).data;
271+
return gradientPixels;
272+
};
273+
274+
var draw3dFunction = function(c, zMin, zMax, alpha, gv, func) {
275+
clear(c);
276+
var data = c.ctx.createImageData(c.width, c.height);
277+
278+
var w = 0;
279+
var h = -1;
280+
281+
var drawInTimeSlot = function() {
282+
start = +new Date();
283+
while (+new Date() - start < 70) {
284+
if (w >= c.width) {
285+
break;
286+
}
287+
h++;
288+
if (h == c.height + 1) {
289+
w++;
290+
h = 0;
291+
}
292+
var z = func(xPixToCoord(c, w), yPixToCoord(c, h));
293+
var pixelCount = gv.length / 4;
294+
var gradientIndex = Math.round(((z - zMin) / (zMax - zMin)) * pixelCount);
295+
if (gradientIndex < 0) {
296+
gradientIndex = 0;
297+
}
298+
if (gradientIndex >= pixelCount) {
299+
gradientIndex = pixelCount - 1;
300+
}
301+
var r = gv[gradientIndex * 4];
302+
var g = gv[gradientIndex * 4 + 1];
303+
var b = gv[gradientIndex * 4 + 2];
304+
var a = Math.round(alpha * 255);
305+
if (z < zMin || z > zMax) {
306+
a *= 0.5;
307+
}
308+
var index = h * c.width * 4 + w * 4;
309+
data.data[index] = r;
310+
data.data[index + 1] = g;
311+
data.data[index + 2] = b;
312+
data.data[index + 3] = a;
313+
}
314+
c.ctx.putImageData(data, 0, 0);
315+
setTimeout(drawInTimeSlot);
316+
};
317+
318+
drawInTimeSlot();
319+
320+
c.ctx.putImageData(data, 0, 0);
321+
};

0 commit comments

Comments
 (0)