diff --git a/demos/draggable-line-demo.js b/demos/draggable-line-demo.js new file mode 100644 index 0000000..8c355c3 --- /dev/null +++ b/demos/draggable-line-demo.js @@ -0,0 +1,31 @@ +let w; //graph window +let myLine; +let draggable; + +function setup() { + createCanvas(400, 400); + + const xOrigin = width / 2; + const yOrigin = height / 2; + const xScale = 10; //px per unit + const yScale = 10; //px per unit + w = createGraphWindow(xOrigin, yOrigin, xScale, yScale); + + myLine = w.createLine(-1, -2, 3, 4); + myLine.setIsDraggable(true) + + draggable = w.createDraggable(); + draggable.mouseDragged(object => { + const mouse = createVector(mouseX, mouseY); + const midpoint = object.getCenterInCanvas() + const diff = p5.Vector.sub(mouse, midpoint) + object.translate(diff) + }); + draggable.mouseDropped(() => {}) +} + +function draw() { + background(240, 240, 240); + myLine.takeInput(draggable) + w.line(myLine); +} diff --git a/index.html b/index.html index e4b3a16..1f3ccc4 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - + diff --git a/mathemagical-prototype.js b/mathemagical-prototype.js index 24e76bc..9c90e18 100644 --- a/mathemagical-prototype.js +++ b/mathemagical-prototype.js @@ -147,6 +147,15 @@ GraphWindow.prototype.point = function(...args) { this.render('createPoint', ...args); } +//Line +GraphWindow.prototype.createLine = function(x1, y1, x2, y2) { + return new Line(this, x1, y1, x2, y2) +} + +GraphWindow.prototype.line = function(...args) { + this.render('createLine', ...args); +} + //Square GraphWindow.prototype.createSquare = function(x, y, s) { return new Square(this, x, y, s); @@ -404,6 +413,76 @@ class Square { } } +// TODO: refactor to use Vertex objects instead of p5 vectors +class Line { + constructor(graphWindow, x1, y1, x2, y2) { + this.graphWindow = graphWindow; + this.verticesInGraph = [ + createVector(x1, y1), + createVector(x2, y2) + ] + this.verticesInCanvas = this.getVerticiesInCanvas(); + this.strokeWeight = graphWindow.getStrokeWeight(); + this.isDraggable = false; + } + + setIsDraggable(isDraggable) { + this.isDraggable = isDraggable; + } + + getVerticiesInCanvas() { + return this.verticesInGraph.map( + v => createVector(this.graphWindow.X(v.x), this.graphWindow.Y(v.y)) + ); + } + + computeGraphFromCanvas() { + return this.verticesInCanvas.map( + v => createVector(this.graphWindow.x(v.x), this.graphWindow.y(v.y)) + ) + } + + getCenterInCanvas() { + const xCenter = (this.verticesInCanvas[0].x + this.verticesInCanvas[1].x)/2 + const yCenter = (this.verticesInCanvas[0].y + this.verticesInCanvas[1].y)/2 + return createVector(xCenter, yCenter) + } + + getWidthInCanvas() { + return this.graphWindow.xScale * 5 + } + + getHeightInCanvas() { + return this.graphWindow.yScale * 5 + } + + takeInput(draggable) { + if (this.isDraggable) { + draggable.giveInput(this); + } + // TODO: each vertex needs to take input + } + + translate(vector) { + for (let v of this.verticesInCanvas) { + v.add(vector) + } + + //reset vertices in graph window coordinates + this.verticesInGraph = this.computeGraphFromCanvas(this.verticesInCanvas); + } + + render() { + push(); + const [start, end] = this.verticesInCanvas; + strokeWeight(this.strokeWeight); + line(start.x, start.y, end.x, end.y); + strokeWeight(3) + point(this.getCenterInCanvas()) + pop(); + } +} + /**** Arrow ****/ class Arrow { constructor(w, v, p, hW = 0.5, hL = 0.75) { @@ -643,6 +722,16 @@ class Draggable { } } + setOffset(offset) { + this.offsetX = offset.x + this.offsetY = offset.y + } + + getOffset() { + return createVector(this.offsetX, this.offsetY) + + } + //setters setMouseIsOver(callback) { this.mouseOverPair[0] = callback; diff --git a/style.css b/style.css new file mode 100644 index 0000000..3c9c5f9 --- /dev/null +++ b/style.css @@ -0,0 +1,8 @@ +html, body { + margin: 0; + padding: 0; +} + +canvas { + display: block; +}