25:["$","title",null,{"children":"Untitled | msc59 | Observable"}] 4b:T4c6,matrixDemoButtons = { let reset = html``; reset.onclick = () => { mutable T = mutable T.reset() } let translate = html``; translate.onclick = () => { mutable T = mutable T.addTranslate() } let scale = html``; scale.onclick = () => { mutable T = mutable T.addScale() } let homothetieOrig = html``; homothetieOrig.onclick = () => { mutable T = mutable T.addHomothetieOrig() } let homothetie = html``; homothetie.onclick = () => { mutable T = mutable T.addHomothetie() } let rotateOrig = html``; rotateOrig.onclick = () => { mutable T = mutable T.addRotateOrig() } let rotate = html``; rotate.onclick = () => { mutable T = mutable T.addRotate() } let shear = html``; shear.onclick = () => { mutable T = mutable T.addShear() } // return html`${translate} ${scale} ${rotate} ${shear} ${reset}` return html`${translate} ${homothetieOrig} ${rotateOrig} ${homothetie} ${rotate} ${reset}` }4c:T5b3,div = { tcount ; var div1 = html`` var doc = new Bokeh.Document() ; var xr = new Bokeh.Range1d({start:-6,end:6}) ; var yr = new Bokeh.Range1d({start:-6,end:6}); var plot = new Bokeh.Plotting.Figure({title: 'Transformations affines 2D', width:boxWidth * width, height:boxWidth * width,x_range:xr,y_range:yr}) ; /////////// //var mx=[1.1,3,3,2,1,1 ]; // console.log(mx) ; // var my=[1 ,1,3,4,3,1.1]; var mx=[1.1,3,3,2,1,1 ,NaN,1,0,0,NaN, 0.9,1,0.9,NaN,-0.1,0,0.1]; var my=[1 ,1,3,4,3,1.1,NaN,0,0,1,NaN,-0.1,0,0.1,NaN, 0.9,1,0.9]; var msource = new Bokeh.ColumnDataSource({ data: { x: mx, y: my } }); var scatterData = plot.line({ field: "x" }, { field: "y" }, {source: msource, line_width: 6 }); /////////// var mxyLength = mx.length; let m = T.matrix() ; var mxT = Array.from(new Array(mxyLength), (x,i) => m.a * mx[i] + m.c * my[i] + m.e ) ; // console.log(mxT) ; var myT = Array.from(new Array(mxyLength), (x,i) => m.b * mx[i] + m.d * my[i] + m.f ) ; // var myT=[1.1,3,3,2,1,1 ,NaN,1,0,0,NaN, 0.9,1,0.9,NaN,-0.1,0,0.1]; // var mxT=[1 ,1,3,4,3,1.1,NaN,0,0,1,NaN,-0.1,0,0.2,NaN, 0.9,2,0.9]; var msourceT = new Bokeh.ColumnDataSource({ data: { x: mxT, y: myT } }); var scatterDataT = plot.line({ field: "x" }, { field: "y" }, {source: msourceT, line_width: 3, line_color: "red"}); /////////// doc.add_root(plot); await Bokeh.embed.add_document_standalone(doc, div1) ; return div1 ; }4d:T187d,Transform = { function Slider (options={}) { let {title="", min=-6, max=6, 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=-6, max=6, 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 KXYSlider (options) { let {title="", min=-6, max=6, step=0.1, size="10em", value=[1,0,0], callback=()=>0 } = options; let xslider = Slider({title:"x", min:min, max:max, step:step, value:value[1], callback : x=> {value[1] = +x; callback(value) }}); let yslider = Slider({title:"y", min:min, max:max, step:step, value:value[2], callback : y=> {value[2] = +y; callback(value) }}); let kslider = Slider({title:"k", min:-3, max:3, step:0.1, value:value[0], callback : k=> {value[0] = +k; callback(value) }}); return html`${title} ${kslider} , ${xslider} , ${yslider}`; } function AXYSlider (options) { let {title="", min=-6, max=6, step=0.1, size="10em", value=[1,0,0], callback=()=>0 } = options; let xslider = Slider({title:"x", min:min, max:max, step:step, value:value[1], callback : x=> {value[1]= +x; callback(value) }}); let yslider = Slider({title:"y", min:min, max:max, step:step, value:value[2], callback : y=> {value[2] = +y; callback(value) }}); let aslider = Slider({title:"", min:-180, max:180, step:5, value:value[0], callback : a=> {value[0] = +a; callback(value) }}); return html`${title} ${aslider} , ${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 : "Translation ", 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; } addHomothetieOrig() { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (Slider({title : "Rapport homothétie (centre O) ", min:-3, max:3, step:0.1, value:1, callback: k => { this.matrices[i] = Matrix.scale(+k,+k); this.callback(this) }})); return this; } addHomothetie() { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (KXYSlider({title:"Rapport et centre homothétie", value:[1,0,0], callback : v => { this.matrices[i] = (Matrix.translate(+v[1],+v[2]).mult(Matrix.scale(+v[0],+v[0]))).mult(Matrix.translate(-v[1],-v[2])); this.callback(this) }})); return this; } addRotateOrig() { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (Slider({title:"Angle (en °) rotation de centre Origine", value:[0,0,0], callback : v => { this.matrices[i] = (Matrix.translate(+v[1],+v[2]).mult(Matrix.rotate(Math.PI*v[0]/180))).mult(Matrix.translate(-v[1],-v[2])); this.callback(this) }})); return this; } addRotate() { let i = this.matrices.length; this.matrices.push (new Matrix()) this.sliders.push (AXYSlider({title:"Angle (en °) et centre rotation", value:[0,0,0], callback : v => { this.matrices[i] = (Matrix.translate(+v[1],+v[2]).mult(Matrix.rotate(Math.PI*v[0]/180))).mult(Matrix.translate(-v[1],-v[2])); 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 } 4e:[] 47:{"id":"fddc849733836920","slug":"transfos_affines_2d","title":"","thumbnail":"e1afd0c29184233d8e9fc450d95ff8cc0ea681932c8ae93c028aa7f6c9fb25e6","access_level":"public","create_time":"$D2021-10-15T15:50:02.355Z","update_time":"$D2021-10-17T13:58:29.307Z","view_time":null,"first_public_time":"$D2021-10-17T08:53:56.131Z","has_unpublished_edits":null,"fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"51e9e6bbb85f05f1","login":"msc59","name":"","avatar_url":"https://avatars-next.observableusercontent.com/70c6ba5df36a92dfd587104f6df90d4ab8b3bf8af09ad73b132ca42ec0256306","tier":"starter_2024","bio":"No one to follow \n/\nAnd nothing to teach \n/\nExcept that the goal \n/\nFalls short of the reach\n/\nLeonard Cohen\n","followed_by_you":false,"follows_you":false},"version":351,"publish_version":351,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f6586efe16fde16","login":"msc59","name":"","avatar_url":"https://avatars-next.observableusercontent.com/70c6ba5df36a92dfd587104f6df90d4ab8b3bf8af09ad73b132ca42ec0256306","tier":null,"bio":"Tente d'enseigner un peu de maths à de futurs informaticiens - IUT Lille.\n\n// No one to follow \n// And nothing to teach \n// Except that the goal \n// Falls short of the reach\n// L. Cohen","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0f6586efe16fde16","login":"msc59","name":"","avatar_url":"https://avatars-next.observableusercontent.com/70c6ba5df36a92dfd587104f6df90d4ab8b3bf8af09ad73b132ca42ec0256306","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":9,"value":"viewof boxWidth = Inputs.range([0.2, 1], {label: \"largeur dessin\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"# Transformations affines 2D","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"matrixDemoUI = T.UI()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"matrix = {\n tcount;\n return html`${tex`T=`}${T.tex()}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`** UI Code **`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"mutable tcount = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"mutable T = new Transform(() => { mutable tcount++ } )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"md`** classe Transform **`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"import { Vector, Vec, Matrix } from \"@esperanc/2d-geometry-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof Bokeh = {\n const ver = '2.4.1';\n const message = html`Chargement de la librairie Bokeh, Version ${ver}...` ;\n\n if (!document.getElementById('bokehjs-css'))\n document.head.appendChild(html``);\n await require(`https://cdn.bokeh.org/bokeh/release/bokeh-${ver}.js`).catch(() => {})\n message.value = window.Bokeh;\n await require(`https://cdn.bokeh.org/bokeh/release/bokeh-api-${ver}.js`).catch(() => {}); \n return message; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"new Bokeh.Plot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"new Bokeh.Plotting.Figure()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"style_options = ({fill_color:\"steelblue\", line_color: \"steelblue\", line_alpha:.75, fill_alpha: .75})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"import {View, bindSliderNumber, bindCheckbox} from \"@esperanc/inline-inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null