I have begun coding a simple graph plotter for my schoolchildren using JavaScript. I have used the paper.js library as I would like to be able to export the graphs as svg files.
I am only a beginner to all this (just a humble maths teacher) so I would hugely welcome any thoughts you may have. The code does not run particularly quickly so I would be particularly interested in any improvements to performance.
Many thanks and best wishes.
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>JavaScript:
var graphScope = new paper.PaperScope();
var canvas_1 = document.getElementById('canvas_1');
graphScope.setup(canvas_1);
graphScope.activate();
const scale = 10;
function drawGrid() {
var xWidth = document.getElementById("input_xWidth").value;
var yWidth = document.getElementById("input_yWidth").value;
var z;
var zz;
//clear the canvas
graphScope.project.activeLayer.removeChildren()
//draw minor gridlines
for (z = 0; z < xWidth; z++) {
for (zz = 1; zz < 5; zz++) {
var myPath = new graphScope.Path();
myPath.strokeColor = new graphScope.Color(0.9, 0.9, 0.9);
myPath.add(new graphScope.Point(z * scale + (scale / 5) * zz, -(0)));
myPath.add(new graphScope.Point(z * scale + (scale / 5) * zz, -(yWidth * scale)));
}
}
for (z = 0; z < yWidth; z++) {
for (zz = 1; zz < 5; zz++) {
var myPath = new graphScope.Path();
myPath.strokeColor = new graphScope.Color(0.9, 0.9, 0.9);
myPath.add(new graphScope.Point(0, -(z * scale + (scale / 5) * zz)));
myPath.add(new graphScope.Point(xWidth * scale, -(z * scale + (scale / 5) * zz)));
}
}
//draw major gridlines
for (z = 0; z <= xWidth; z++) {
var myPath = new graphScope.Path();
myPath.strokeColor = new graphScope.Color(0.5, 0.5, 0.5);
myPath.add(new graphScope.Point(z * scale, -(0)));
myPath.add(new graphScope.Point(z * scale, -(yWidth * scale)));
}
for (z = 0; z <= yWidth; z++) {
var myPath = new graphScope.Path();
myPath.strokeColor = new graphScope.Color(0.5, 0.5, 0.5);
myPath.add(new graphScope.Point(0, -(z * scale)));
myPath.add(new graphScope.Point(xWidth * scale, -(z * scale)));
}
// parse equation from input box
const node2 = math.parse(document.getElementById("eqn").value)
const code2 = node2.compile()
let scope = {
x: 3,
}
// trim graph to grid
var rectangle = new graphScope.Rectangle(new graphScope.Point(0, 0), new graphScope.Point(xWidth * scale, -yWidth * scale));
var GraphBoundary = new graphScope.Path.Rectangle(rectangle);
var graphPath = new graphScope.Path();
for (z = 0; z < xWidth; z += 0.001) {
scope.x = z
graphPath.add(new graphScope.Point(z * scale, -(20 + scale * code2.evaluate(scope))));
}
var NewPath = graphPath.intersect(GraphBoundary, {
trace: false
})
NewPath.strokeColor = new graphScope.Color(0.1, 0.1, 0.1);
graphPath.remove();
//fit page to canvas bounds
graphScope.project.activeLayer.fitBounds(graphScope.view.bounds);
}
function exportSVG() {
var fileName = "custom.svg"
var url = "data:image/svg+xml;utf8," + encodeURIComponent(graphScope.project.exportSVG({
asString: true
}));
var link = document.createElement("a");
link.download = fileName;
link.href = url;
link.click();
}
--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/0546ead8-c623-4da4-8df5-2ae27b33f047n%40googlegroups.com.