2e:null 2f:["$","title",null,{"children":"Box interaction | Claudio Esperança | Observable"}] 34:T162d,// A 3x3 matrix - used to represent an affine 2d transformation class Matrix { constructor (a, b, c, d, e, f, g, h, i) { // the 9 coefficients in row-major order this.m = [a, b, c, d, e, f, g, h, i]; } static identity() { // An identity matrix return new Matrix(1, 0, 0, 0, 1, 0, 0, 0, 1); } static rotation (angle) { // Rotation matrix for angle radians let [s, c] = [Math.sin(angle),Math.cos(angle)]; return new Matrix (c, -s, 0, s, c, 0, 0, 0, 1); } rotate(angle) { // Post-multiples this by a rotation matrix defined by angle (in radians) return this.mult(Matrix.rotation(angle)) } static scaling (v) { // Scale matrix with factors v.x and v.y return new Matrix(v.x, 0, 0, 0, v.y, 0, 0, 0, 1); } scale (v) { // Post-multiples this by a scale matrix defined by scale vector v return this.mult(Matrix.scaling(v)) } static translation (v) { // Translation by v return new Matrix(1, 0, v.x, 0, 1, v.y, 0, 0, 1); } translate (v) { // Post-multiples this by a translation matrix defined by translation vector v return this.mult(Matrix.translation(v)) } static fromFrame(u,v,o) { // Returns the matrix corresponding to a coord frame with origin o and axes u and v return new Matrix(u.x, v.x, o.x, u.y, v.y, o.y, 0, 0, 1); } static product(...matrices) { // Returns the product of all matrices let r = matrices[0]; for (let i = 1; i < matrices.length; i++) r = r.mult(matrices[i]); return r; } mult (other) { // The product of this and other let r = this.rows(); let c = other.columns(); let dot = (a,b) => a[0]*b[0]+a[1]*b[1]+a[2]*b[2]; return new Matrix(dot(r[0],c[0]), dot(r[0],c[1]), dot(r[0],c[2]), dot(r[1],c[0]), dot(r[1],c[1]), dot(r[1],c[2]), dot(r[2],c[0]), dot(r[2],c[1]), dot(r[2],c[2])); } rows () { // Returns an array with the 3 rows of the matrix return [[this.m[0],this.m[1],this.m[2]], [this.m[3],this.m[4],this.m[5]], [this.m[6],this.m[7],this.m[8]]] } columns () { // Returns an array with the 3 columns of the matrix return [[this.m[0],this.m[3],this.m[6]], [this.m[1],this.m[4],this.m[7]], [this.m[2],this.m[5],this.m[8]]] } frame () { // Assumes this is an affine transformation and returns the two axis vectors and the origin point return ([Vec(this.m[0],this.m[3]),Vec(this.m[1],this.m[4]),Vec(this.m[2],this.m[5])]) } det () { // Determinant let [a00, a01, a02, a10, a11, a12, a20, a21, a22] = this.m; let [b01, b11, b21] = [a22 * a11 - a12 * a21, -a22 * a10 + a12 * a20, a21 * a10 - a11 * a20]; return a00 * b01 + a01 * b11 + a02 * b21; } inverse () { // Inverse let [a00, a01, a02, a10, a11, a12, a20, a21, a22] = this.m; let [b01, b11, b21] = [a22 * a11 - a12 * a21, -a22 * a10 + a12 * a20, a21 * a10 - a11 * a20]; let det = 1.0 / (a00 * b01 + a01 * b11 + a02 * b21); return new Matrix(b01 * det, (-a22 * a01 + a02 * a21) * det, (a12 * a01 - a02 * a11) * det, b11 * det, (a22 * a00 - a02 * a20) * det, (-a12 * a00 + a02 * a10) * det, b21 * det, (-a21 * a00 + a01 * a20) * det, (a11 * a00 - a01 * a10) * det); } transpose () { // Transpose let [a00, a01, a02, a10, a11, a12, a20, a21, a22] = this.m; return new Matrix (a00, a10, a20, a01, a11, a21, a02, a12, a22); } // Decomposes this matrix into a list of matrices [T, R, Sc, Sh], where T is a translation // matrix, Sc is a scaling matrix, Sh is a shear matrix and R is a rotation matrix such that // this = T x R x Sc x Sh decompose () { let [a00, a01, a02, a10, a11, a12, a20, a21, a22] = this.m; // // Decomposition T x Sc x Sh x R // let T = Matrix.translation (Vec(a02,a12)); // let p = Math.sqrt(a00*a00 + a01*a01); // let det = a00*a11-a01*a10; // let r = det / p; // let q = (a00*a10+a01*a11) / det; // let angle = Math.atan2 (-a01,a00); // let Sc = Matrix.scaling (Vec(p,r)); // let Sh = Matrix.fromFrame(Vec(1,q),Vec(0,1),Vec(0,0)); // let R = Matrix.rotation(angle); // return [T,Sc,Sh,R]; let T = Matrix.translation (Vec(a02,a12)); let k = a00*a00 + a10*a10; let p = Math.sqrt(k); let q = 0; //let q = (a00*a01+a10*a11)/k; let r = Math.sqrt(a01*a01+a11*a11); //let r = p * (a01+a11-q*(a00+a10))/(a00-a10); let angle = Math.atan2 (a10,a00); let Sc = Matrix.scaling (Vec(p,r)); let Sh = Matrix.fromFrame(Vec(1,0),Vec(q,1),Vec(0,0)); let R = Matrix.rotation(angle); return [T,R,Sc,Sh]; } transformPoint (p) { // Returns point p transformed by this matrix return new Vector (this.m[0]*p.x+this.m[1]*p.y+this.m[2], this.m[3]*p.x+this.m[4]*p.y+this.m[5]); } transformVector (v) { // Returns vector v transformed by this matrix return new Vector (this.m[0]*v.x+this.m[1]*v.y, this.m[3]*v.x+this.m[4]*v.y); } transformContext (ctx) { // Calls the canvas context transform method with this transformation ctx.transform(this.m[0],this.m[3],this.m[1],this.m[4],this.m[2],this.m[5]); } draw (ctx) { // Draws this matrix using canvas context ctx as two line segments representing the axes let [u,v,o] = this.frame(); let [p,q] = [o.add(u),o.add(v)]; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(o.x, o.y); ctx.lineTo(q.x, q.y); ctx.stroke(); } }35:T5cd,canvas = { let ctx = DOM.context2d(width,width*9/16); ctx.fillStyle = "lightgray"; ctx.fillRect(0,0,width,width*9/16); let selected = null; // The selected object let selectedInteractor = null; // The selected interactor let mouseDragStart = null; // Where the mouse was first pressed for a drag gesture ctx.canvas.onmousedown = function (event) { let mouse = Vec(event.offsetX,event.offsetY); mouseDragStart = mouse; if (selected) { selectedInteractor = selected.pickInteractor(mouse); } if (!selectedInteractor) { selected = null; for (let obj of scene) { if (obj.pick(mouse)) { selected = obj; break; } } if (!selected) { selected = new Rectangle (mouse,Vec(80,80)) scene.push (selected); } } } ctx.canvas.onmouseup = function (event) { selectedInteractor = null; } ctx.canvas.onmousemove = function (event) { if (event.buttons != 0) { let mouse = Vec(event.offsetX,event.offsetY); if (selectedInteractor) { selectedInteractor.dragTo(mouse); } else if (selected) { selected.update (Matrix.translation(mouse.sub(mouseDragStart))); mouseDragStart = mouse; } } } while (true) { ctx.fillRect(0,0,width,width*9/16); for (let obj of scene) { obj.draw(ctx); if (selected == obj) { obj.drawInteractors(ctx); } } yield ctx.canvas; } }36:T4c0,// Minimal object manipulation framework class Drawing { constructor (transform) { this.transform = transform; let [u,v,o] = this.transform.frame(); this.interactors = [new RotationInteractor (o, o.add(u), Vec(20,0), this), new ScaleInteractor(o,o.add(v),this), new XScaleInteractor(o,o.sub(u),this), new CornerScaleInteractor(o,o.add(u).add(v),this), new TranslationInteractor (o, this)]; } pickInteractor (mouse) { // Given a mouse position, returns an interactor to be dragged if for (let i of this.interactors) { if (i.pick(mouse)) return i; } } pick (mouse) { // Returns true if this object is close to the mouse let center = this.transform.transformPoint(Vec(0,0)); return center.dist(mouse) < 10; } update (t) { // Update this with a new transform this.transform = t.mult(this.transform); for (let i of this.interactors) i.update(t); } draw (ctx) { // Draw transformation on a canvas this.transform.draw(ctx); } drawInteractors (ctx) { // Draw the interactors on canvas for (let i of this.interactors) i.draw(ctx); } }37:T60d,class Rectangle extends Drawing { constructor (center,size) { // Constructor given the center and the size of the sides super(Matrix.translation(center)); let [rx,ry] = [size.x/2,size.y/2]; let u = Vec(rx,0); let v = Vec(0,ry); let o = center; [this.u,this.v,this.o,this.size] = [u,v,o,size]; this.vertices = [Vec(-rx,-ry),Vec(rx,-ry),Vec(rx,ry),Vec(-rx,ry)]; this.interactors = [new RotationInteractor (o, o.add(u), Vec(20,0), this), new ScaleInteractor(o,o.add(v),this), new XScaleInteractor(o,o.sub(u),this), new CornerScaleInteractor(o,o.add(u).add(v),this), new TranslationInteractor (o, this)]; } pick (mouse) { mouse = this.transform.inverse().transformPoint(mouse); let [dx,dy] = [this.size.x/2, this.size.y/2]; return (mouse.x <= dx && mouse.x >= -dx && mouse.y <= dy && mouse.y >= -dy) } draw (ctx) { let t = this.transform; ctx.save(); t.transformContext(ctx); ctx.beginPath(); // let q = t.transformPoint(this.vertices[this.vertices.length-1]); // ctx.moveTo(q.x,q.y); // for (let p of this.vertices) { // q = t.transformPoint(p); // ctx.lineTo(q.x,q.y); // } let q = this.vertices[this.vertices.length-1]; ctx.moveTo(q.x,q.y); for (let p of this.vertices) { ctx.lineTo(p.x,p.y); } ctx.restore(); ctx.save(); ctx.lineWidth = 1.5; ctx.stroke(); ctx.restore(); } } 38:T639,class RotationInteractor { // Computes a rotation matrix from the gesture of dragging a point given an origin // Constructor from the origin (rotation center), the anchor position, a displacement vector in screen space // for the anchor, and the object this interactor controls constructor (origin, pos, delta, obj) { [this.origin, this.pos, this.delta, this.obj] = [origin,pos,delta,obj]; this.update (Matrix.identity()); } pick (mouse) { // Given a mouse position, returns a non-null value if it intersects this interactor return mouse.dist(this.drawPos()) < 5 } drawPos () { let [u,v,o] = this.obj.transform.frame(); return this.pos.add(u.normalize().scale(this.delta.x).add(v.normalize().scale(this.delta.y))); } update (transform) { // Applies a transform to this interactor this.origin = transform.transformPoint(this.origin); this.pos = transform.transformPoint(this.pos); } dragTo (newpos) { // Updates the object with the rotation given the new position of the anchor let u = this.pos.sub(this.origin).normalize(); let v = newpos.sub(this.origin).normalize(); if (u.sub(v).mag() < 0.00001) return; let angle = Math.acos(u.dot(v)); if (this.origin.orient(this.pos,newpos) < 0) angle = -angle; let t = Matrix.translation(this.origin) .mult(Matrix.rotation(angle)) .mult(Matrix.translation(Vec(0,0).sub(this.origin))); this.obj.update(t); } draw (ctx) { let d = this.drawPos(); ctx.beginPath(); ctx.arc(d.x,d.y,4,0,2*Math.PI); ctx.stroke(); } } 39:T471,// Computes a uniform scale matrix from the gesture of dragging a point given an origin class ScaleInteractor { // Constructor from the origin (object center) and an anchor position constructor (origin, pos, obj) { [this.origin, this.pos,this.obj] = [origin,pos,obj]; } pick (mouse) { // Given a mouse position, returns a non-null value if it intersects this interactor return mouse.dist(this.pos) < 5 } update (transform) { // Applies a transform to this interactor this.origin = transform.transformPoint(this.origin); this.pos = transform.transformPoint(this.pos); } dragTo (newpos) { // Updates the object with the rotation given the new position of the anchor let oldlen = this.origin.dist(this.pos); let newlen = this.origin.dist(newpos); if (newlen < 1) return; let s = newlen/oldlen; let t = Matrix.translation(this.origin) .mult(Matrix.scaling(Vec(s,s))) .mult(Matrix.translation(Vec(0,0).sub(this.origin))); this.obj.update(t); } draw (ctx) { ctx.beginPath(); ctx.rect(this.pos.x-2,this.pos.y-2,4,4); ctx.stroke(); } }3a:[] 32:{"id":"bc49157100e0eedc","slug":"box-interaction","title":"Box interaction","thumbnail":"8abe4f1480d4f47b6ee73a6df6984853a8efcdb1d038baeda872b3b8d77db0e8","access_level":"public","create_time":"$D2018-08-09T17:33:31.159Z","update_time":"$D2018-08-13T14:55:05.376Z","view_time":null,"first_public_time":"$D2018-08-09T18:47:48.489Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":316,"publish_version":316,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Box interaction","cells":[{"id":0,"value":"md`# Box interaction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"scene = [new Rectangle(Vec(100,100),Vec(80,80))] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"// Computes a non-uniform scale matrix from the gesture of dragging a point given an origin\nclass CornerScaleInteractor extends ScaleInteractor { \n \n update (transform) { // Applies a transform to this interactor\n this.origin = transform.transformPoint(this.origin);\n this.pos = transform.transformPoint(this.pos);\n }\n \n dragTo (newpos) { // Updates the object with the rotation given the new position of the anchor \n let ti = this.obj.transform.inverse();\n let a = ti.transformVector(this.pos.sub(this.origin));\n let b = ti.transformVector(newpos.sub(this.origin));\n let s = Vec(b.x/a.x,b.y/a.y);\n let t = Matrix.product(this.obj.transform,Matrix.scaling(s),ti);\n this.obj.update(t);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"// Computes a non-uniform scale matrix for the x axis\nclass XScaleInteractor extends ScaleInteractor { \n \n dragTo (newpos) { // Updates the object with the rotation given the new position of the anchor \n let ti = this.obj.transform.inverse();\n let a = ti.transformVector(this.pos.sub(this.origin));\n let b = ti.transformVector(newpos.sub(this.origin));\n let dx = b.x-a.x;\n let s = Vec((a.x+dx/2)/a.x,1);\n let v = Vec(dx/2,0);\n //if (Math.abs(v.x)<0.01) return;\n let t = Matrix.product(this.obj.transform,Matrix.translation(v),Matrix.scaling(s),ti);\n this.obj.update(t);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"class TranslationInteractor { // Computes a rotation matrix from the gesture of dragging a point given an origin\n \n constructor (pos, obj) { // Constructor from the anchor position\n [this.pos,this.obj] = [pos,obj];\n }\n\n pick (mouse) { // Given a mouse position, returns a non-null value if it intersects this interactor\n return mouse.dist(this.pos) < 5 \n } \n \n update (transform) { // Applies a transform to this interactor\n this.pos = transform.transformPoint(this.pos);\n }\n \n dragTo (newpos) { // Updates the object with the rotation given the new position of the anchor\n let t = Matrix.translation(newpos.sub(this.pos));\n this.obj.update(t);\n }\n \n draw (ctx) {\n ctx.beginPath(); ctx.arc(this.pos.x,this.pos.y,4,0,2*Math.PI); ctx.stroke();\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { Vec, Vector, MBR } from \"@esperanc/2d-geometry-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"