From 1acef216b6cc4e0659061b535d226550043e3051 Mon Sep 17 00:00:00 2001 From: Marcel Date: Mon, 8 Apr 2019 21:26:42 +0200 Subject: [PATCH] Initial commit --- index.html | 22 +++++++ main.js | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 205 insertions(+) create mode 100644 index.html create mode 100644 main.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..0bd6269 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + Graph.js + + + + +

x^2

+ + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..b314b12 --- /dev/null +++ b/main.js @@ -0,0 +1,183 @@ +const canvas = $('#canvas'); +const ctx = canvas[0].getContext('2d'); +const equationField = document.getElementById('equation'); + +let width = 500; +let height = 500; + +let originX = width / 2; +let originY = height / 2; +let scaleFactorX = 100; +let scaleFactorY = 100; + +let equation = "x ** 2"; +equationField.innerText = equation; + +function fun(x) { + return eval(equation); +} + +function parseFunction(string) { + +} + +function drawGrid() { + ctx.strokeStyle = '#bbb'; + ctx.lineWidth = 1; + ctx.beginPath(); + + let sizeX = Math.max(scaleFactorX, 25); + let sizeY = Math.max(scaleFactorY, 25); + + const startX = originX % sizeX; + const endX = startX + width * 1.1; + const startY = originY % sizeY; + const endY = startY + height * 1.1; + + + for (let i = startX; i <= endX; i += sizeX) { + ctx.moveTo(i, 0); + ctx.lineTo(i, height); + } + for (let i = startY; i <= endY; i += sizeY) { + ctx.moveTo(0, i); + ctx.lineTo(width, i); + } + + ctx.stroke(); + ctx.closePath(); +} + +function drawAxis() { + ctx.strokeStyle = '#000'; + ctx.lineWidth = 2; + ctx.beginPath(); + + ctx.moveTo(0, originY); + ctx.lineTo(width, originY); + ctx.moveTo(originX, 0); + ctx.lineTo(originX, height); + + ctx.stroke(); + ctx.closePath(); +} + +function drawFunction(ctx) { + ctx.strokeStyle = '#000'; + ctx.lineWidth = 4; + ctx.beginPath(); + + const startX = -originX / scaleFactorX; + const endX = (width - originX) / scaleFactorX; + + for (let i = startX - 1; i < endX + 1; i += 0.01) { + const valX = i; + const valY = fun(i); + + const posX = originX + valX * scaleFactorX; + const posY = originY - valY * scaleFactorY; + + ctx.lineTo(posX, posY); + } + ctx.stroke(); + ctx.closePath(); +} + +function redraw() { + ctx.clearRect(0, 0, width, height); + drawGrid(); + drawAxis(); + drawFunction(ctx); +} + +equationField.addEventListener('keyup', function () { + console.log(this); + equation = this.innerText; + + redraw(); +}); + +let mouseDown = false; +let mouseDragging = false; +let mouseAxisResizing = false; +let mouseStart = null; + +canvas.on('mousedown', function (e) { + mouseDown = true; + mouseStart = calcMousePos(e); +}); + +canvas.on('mouseup mouseout', function () { + mouseDown = false; + mouseDragging = false; + mouseAxisResizing = false; +}); + +canvas.on('mousemove', function (e) { + if (mouseDown) { + const pos = calcMousePos(e); + const deltaX = pos.x - mouseStart.x; + const deltaY = pos.y - mouseStart.y; + + if (mouseAxisResizing) { + + } else if (mouseDragging) { + + } else { + + } + + if (!mouseDragging && Math.abs(pos.x - originX) < 15 && (Math.abs(deltaY) > Math.abs(deltaX) || mouseAxisResizing)) { + mouseAxisResizing = true; + + if (mouseStart.y < originY) + scaleFactorY -= deltaY; + else + scaleFactorY += deltaY; + + } else if (!mouseDragging && Math.abs(pos.y - originY) < 15 && (Math.abs(deltaX) > Math.abs(deltaY) || mouseAxisResizing)) { + mouseAxisResizing = true; + + if (mouseStart.x < originX) + scaleFactorX -= deltaX; + else + scaleFactorX += deltaX; + + } else if (!mouseAxisResizing) { + mouseDragging = true; + originX += deltaX; + originY += deltaY; + } + + mouseStart = pos; + + redraw(); + } +}); + +function calcMousePos(e) { + const x = e.clientX - canvas.offset().left; + const y = e.clientY - canvas.offset().top; + return {x, y}; +} + +function onResize() { + const relOriginX = originX / width; + const relOriginY = originY / height; + + width = canvas.width(); + height = canvas.height(); + canvas[0].width = width; + canvas[0].height = height; + + originX = relOriginX * width; + originY = relOriginY * height; + + redraw(); +} + +$(window).on('resize', onResize); + +$(function () { + onResize(); +});