31:Td9d,Transform = { function Slider (options={}) { let {title="", min=-2, max=2, step=0.1, size="20em", value=0, callback=()=>0 } = options; let input = html``; let output = html`${value}`; input.value = value; input.oninput = (e) => { value = input.value; output.value = value callback(value) } return html`${title}: ${input} ${output}`; } function XYSlider (options) { let {title="", min=-2, max=2, step=0.1, size="10em", value=Vec(0,0), callback=()=>0 } = options; let xslider = Slider({title:"x", min:min, max:max, step:step, value:value.x, callback : x=> {value.x = +x; callback(value) }}); let yslider = Slider({title:"y", min:min, max:max, step:step, value:value.y, callback : y=> {value.y = +y; callback(value) }}); return html`${title} ${xslider} , ${yslider}`; } function matrixTex (m) { let fmt = (x) => x.toFixed(4) == x ? x : x.toFixed(4); return `\\begin{bmatrix} ${fmt(m.a)} & ${fmt(m.c)} & ${fmt(m.e)} \\\\ ${fmt(m.b)} & ${fmt(m.d)} & ${fmt(m.f)} \\\\ 0 & 0 & 1 \\end{bmatrix}` } class Transform { constructor (callback = (t) => {}) { this.callback = callback; this.matrices = []; this.sliders = []; } reset () { this.matrices = []; this.sliders = []; this.callback(this); return this } addTranslate () { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (XYSlider({title : "Translate ", value:Vec(0,0), callback : t => { this.matrices[i] = Matrix.translate(t.x,t.y); this.callback(this) }})); return this; } addScale() { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (XYSlider({title : "Scale ", min:0.2, max:4, step:0.1, value:Vec(1,1), callback: s => { this.matrices[i] = Matrix.scale(s.x,s.y); this.callback(this) }})); return this; } addShear() { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (XYSlider({title : "Shear ", min:-2, max:2, step:0.1, value:Vec(0,0), callback: s => { this.matrices[i] = Matrix.shear(s.x,s.y); this.callback(this) }})); return this; } addRotate() { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (Slider({title:"Rotate", min:-180, max:180, step:5, value:0, callback : a => { this.matrices[i] = Matrix.rotate(Math.PI*a/180); this.callback(this) }})); return this; } UI () { let ui = html`

`; for (let slider of this.sliders) { ui.append(slider) ui.append(html`
`) } return ui } matrix() { if (this.matrices.length == 0) return new Matrix() if (this.matrices.length == 1) return this.matrices[0]; return this.matrices.reduce((a,b) => a.mult(b)) } tex() { if (this.matrices.length < 2) return tex`${matrixTex(this.matrix())}`; return tex`${(this.matrices.map(matrixTex)).join("\\times")+"="+matrixTex(this.matrix())}`; } } return Transform } 32:[] 2f:{"title":"Transformation demo","cells":[{"id":0,"value":"md`# Transformation demo\n\nAn interactive demo for experimenting with 2D transformation matrix composition.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"demoButtons = {\n let reset = html``; \n reset.onclick = () => {\n mutable T = mutable T.reset()\n }\n let translate = html``; \n translate.onclick = () => {\n mutable T = mutable T.addTranslate()\n }\n let scale = html``; \n scale.onclick = () => {\n mutable T = mutable T.addScale()\n }\n let rotate = html``; \n rotate.onclick = () => {\n mutable T = mutable T.addRotate()\n }\n let shear = html``; \n shear.onclick = () => {\n mutable T = mutable T.addShear()\n }\n return html`${translate} ${scale} ${rotate} ${shear} ${reset}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"T.UI()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"matrix = {\n tcount;\n return html`${tex`T=`}${T.tex()}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"{\n tcount;\n let size = 400//width*9/16;\n const canvas = DOM.canvas(size, size);\n const ctx = canvas.getContext(\"2d\");\n ctx.translate(2*size/5,3*size/5);\n ctx.scale (size/5,-size/5)\n ctx.lineWidth = 5/size;\n ctx.beginPath()\n ctx.moveTo(0,0);\n ctx.lineTo(1,0)\n ctx.moveTo(0,0)\n ctx.lineTo(0,1)\n ctx.moveTo(0,0)\n ctx.stroke()\n ctx.arc(0,0,0.05,0,Math.PI*2);\n ctx.fill();\n \n ctx.font = '0.2px serif';\n ctx.save()\n ctx.scale (1,-1)\n ctx.fillText('y',-0.2,-1)\n ctx.fillText('x',1,0.2)\n ctx.restore()\n let m = T.matrix();\n ctx.transform(m.a, m.b, m.c, m.d, m.e, m.f);\n ctx.beginPath()\n ctx.arc(0.5,0.5,0.4,0,Math.PI*2)\n ctx.stroke()\n ctx.beginPath()\n ctx.arc(0.5,0.5,0.3,-3*Math.PI/4,-Math.PI/4)\n ctx.stroke()\n ctx.beginPath()\n ctx.arc(0.3,0.65,0.05,0,Math.PI*2)\n ctx.stroke()\n ctx.beginPath()\n ctx.arc(0.7,0.65,0.05,0,Math.PI*2)\n ctx.stroke()\n ctx.globalAlpha = 0.2\n ctx.fillRect (0,0,1,1)\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`** UI Code **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"mutable tcount = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mutable T = new Transform(() => { mutable tcount++ } )","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`** Import matrix library **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { Vector, Vec, Matrix } from \"@esperanc/2d-geometry-utils\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}