30:T43f,md`# Dynadraw [Dynadraw](http://www.graficaobscura.com/dyna/index.html) is a technique introduced by *Paul Haeberli* for drawing caligraphic-like strokes using a dynamic model. The idea is that the mouse acts like it's pulling the brush with an elastic band over a piece of paper. By changing the amount of friction and mass, various kinds of strokes can be made. Despite being a very simple idea, it is surprisingly effective. The code was originally written in C using GL (the precursor of OpenGL) and was supposed to be run on a Silicon Graphics workstation. I based the present implementation on a JavaScript port written by *Roger Allen*. The original page seems to be offline, but I found [this JSfiddle](http://jsfiddle.net/rogerallen/LCbpz) with the code. My main concern was to provide a suitable interface for configuring the brush style from the many variations that the technique makes possible. I opted for a grid of samples generated by varying two brush attributes along rows and columns. I'm not entirely satisfied with the result, though, and comments are welcome. `31:Te6d,brushStrokeGUI = { let container = html`

`; let strokediv = html`

`; let formdiv = html`

`; let gallerydiv = html`

`; container.append(strokediv); container.append(gallerydiv); container.append(formdiv); let dims = {x:"mass",y:"drag"}; let form, gallery, stroke, updateListener; let createGallery = () => { if (gallery) { gallery.removeEventListener ('update', updateListener); gallerydiv.removeChild(gallery); } gallery = brushGallery(brushConfig,strokeConfig,{nh:4,nv:2,vparam:dims.y,hparam:dims.x}); gallerydiv.append(gallery); gallery.addEventListener ('update',() => { Object.assign(brushConfig, gallery.value); form.setValues(brushConfig); drawing.setBrush(brushConfig); }); } let createForm = () => { if (form) formdiv.removeChild(form); form = dimensionSelect (["mass", "drag", "width", "speedFactor", "widthFactor"],dims,brushConfig); formdiv.append(form); form.oninput = () => { dims = form.value; createGallery() } } let createStroke = () => { let strokeColor = html``; let strokeOpacity = html``; let varWidth = html``; let varAngle = html``; let angle = html`` varAngle.oninput = () => { brushConfig.varAngle = varAngle.checked; gallery.setConf(brushConfig,strokeConfig) drawing.setStroke(strokeConfig); drawing.setBrush(brushConfig); } angle.oninput = () => { brushConfig.angle = angle.value; gallery.setConf(brushConfig,strokeConfig) drawing.setStroke(strokeConfig); drawing.setBrush(brushConfig); } varWidth.oninput = () => { brushConfig.varWidth = varWidth.value; gallery.setConf(brushConfig,strokeConfig) drawing.setStroke(strokeConfig); drawing.setBrush(brushConfig); } strokeColor.oninput = () => { strokeConfig.color = strokeColor.value; gallery.setConf(brushConfig,strokeConfig) drawing.setStroke(strokeConfig); } strokeOpacity.oninput = () => { strokeConfig.opacity = strokeOpacity.value; gallery.setConf(brushConfig,strokeConfig); drawing.setStroke(strokeConfig); } for (let x of [html`

Color:

`, strokeColor, html`
`, html`

Opacity:

`, strokeOpacity, html`
`, html`

Var width:

`, varWidth,html`
`, html`

Var angle:

`, varAngle,html`
`, html`

Angle:

`, angle ]) strokediv.append(x); } createStroke(); createGallery(); createForm() return container; }32:T806,viewof drawing = { let xyratio = 16 / 9; let xsize = width; let ysize = width/xyratio; // let canvas = DOM.canvas (xsize,ysize); // let ctx = canvas.getContext("2d"); let canvas = webglCanvas (xsize, ysize); canvas.style.cursor = 'crosshair'; canvas.style.border = '1px solid gray'; let brush = new Brush(); let strokes = [] let mousePressed = false; let mouse; let strokeOptions = {color : 'black', opacity : 0.8}; let frames = 0; let sample = [] canvas.onmousedown = (e) => { mouse = Vec (e.offsetX, e.offsetY); mousePressed = true; frames = 0; sample = [[mouse,frames]]; strokes.push (new BrushedStroke(brush, strokeOptions)) strokes[strokes.length-1].addSample(mouse,frames); }; canvas.onmousemove = (e) => { if (!mousePressed) return; let newMouse = Vec (e.offsetX, e.offsetY) if (newMouse.dist(mouse)<1) return mouse = newMouse; }; canvas.onmouseup = (e) => { mousePressed = false; mutable lastSample = sample; } function draw() { // ctx.clearRect(0,0,xsize,ysize); // for (let s of strokes) s.draw(ctx) canvas.clear(); for (let s of strokes) canvas.draw (s.buffer,s.webglColor) } function integrate () { frames++; // if (mousePressed && brush.move (mouse)) { // sample.push ([mouse,frames]); // let s = strokes[strokes.length-1]; // s.add (brush.segment()); // } if (mousePressed) { strokes[strokes.length-1].addSample(mouse,frames); sample.push ([mouse,frames]); } if (frames % 4 == 0) { draw(); } } function undo () { if (strokes.length>0) strokes.pop () } function setBrush (config) { brush = new Brush (config) } function setStroke (config) { strokeOptions = config; } function clear () { strokes = [] } let idIntegrate = setInterval(integrate, 5); invalidation.then (()=> clearInterval (idIntegrate)) canvas.value = { undo, setBrush, clear, setStroke } return canvas; }33:T6ae,class Brush { constructor (options = {}) { let {mass=30,drag=0.3,width=20, varAngle = true, angle = 0, varWidth = "thicker", speedFactor = 1, widthFactor = 1, } = options; Object.assign(this,{ mass,drag,width,varAngle,angle,varWidth,speedFactor,widthFactor, pos:Vec(0,0), prev:Vec(0,0), prevSeg:null, vel:Vec(0,0) }) } segment () { let v = (this.varAngle ? Vec (-this.vel.y, this.vel.x).normalize() : Vec(Math.cos(this.angle),Math.sin(this.angle))); //let t = (Math.min(this.speedFactor,this.vel.mag())/this.speedFactor); let t = (this.speedFactor / (this.speedFactor + this.vel.mag())); //let t = smoothStep(0,this.speedFactor,this.vel.mag()) let s = this.varWidth === "constant" ? this.width / 2 : this.varWidth === "thicker" ? this.width * ((1-t) **this.widthFactor) : Math.max(1,this.width * t ** this.widthFactor); let [a,b] = [this.pos.add(v.scale(s)), this.pos.add(v.scale(-s))] if (this.prevSeg) { let [pa, pb] = this.prevSeg; if (a.sub(pa).dot(this.vel)<0) {a = pa} if (b.sub(pb).dot(this.vel)<0) {b = pb} } this.prevSeg = [a,b]; return [a,b] } start (newpos) { this.pos = this.prev = newpos; this.prevSeg = null; this.vel = Vec(0,0) } move (newpos) { let f = newpos.sub(this.pos); let acc = f.scale (1/this.mass) if (acc.mag() < 0.01) return false; this.vel = this.vel.add(acc).scale(1.0-this.drag); if (this.vel.mag() < 0.1) return false; this.prev = this.pos; this.pos = this.pos.add(this.vel) return true; } }34:T514,class BrushedStroke { constructor(brush, config) { let { color = '#000000', opacity = 0.6 } = config; Object.assign(this, { color, opacity, brush }); let icolor = parseInt(color.slice(1), 16); this.webglColor = [ (icolor >> 16) / 255, ((icolor >> 8) & 0xff) / 255, (icolor & 0xff) / 255, opacity ]; this.buffer = []; this.sampleCount = 0; this.mbr = new MBR(); } addSample(point, time) { if (this.sampleCount == 0) { this.brush.start(point); this.time = time; } else { for (let t = this.time + 1; t <= time; t++) { if (this.brush.move(point)) { this.add(this.brush.segment()); } } this.time = time; } this.sampleCount++; } add(segment) { let [a, b] = segment; this.buffer.push([a.x, a.y], [b.x, b.y]); this.mbr.add(a); this.mbr.add(b); } draw(ctx) { if (this.buffer.length < 2) return; ctx.globalAlpha = this.opacity; ctx.fillStyle = this.color; ctx.beginPath(); ctx.moveTo(...this.buffer[0]); for (let i = 0; i < this.buffer.length; i += 2) ctx.lineTo(...this.buffer[i]); for (let i = this.buffer.length - 1; i >= 0; i -= 2) ctx.lineTo(...this.buffer[i]); ctx.closePath(); ctx.fill(); } }35:Tec0,asample = JSON.parse(`[[{"x":29,"y":27},0],[{"x":29,"y":27},1],[{"x":29,"y":27},2],[{"x":29,"y":27},3],[{"x":28,"y":30},4],[{"x":28,"y":30},5],[{"x":28,"y":30},6],[{"x":28,"y":30},7],[{"x":28,"y":32},8],[{"x":28,"y":32},9],[{"x":28,"y":32},10],[{"x":28,"y":35},11],[{"x":28,"y":35},12],[{"x":28,"y":35},13],[{"x":29,"y":39},14],[{"x":29,"y":39},15],[{"x":29,"y":39},16],[{"x":29,"y":39},17],[{"x":31,"y":43},18],[{"x":31,"y":43},19],[{"x":31,"y":43},20],[{"x":32,"y":47},21],[{"x":32,"y":47},22],[{"x":32,"y":47},23],[{"x":35,"y":52},24],[{"x":35,"y":52},25],[{"x":35,"y":52},26],[{"x":35,"y":52},27],[{"x":39,"y":56},28],[{"x":39,"y":56},29],[{"x":39,"y":56},30],[{"x":42,"y":58},31],[{"x":42,"y":58},32],[{"x":42,"y":58},33],[{"x":50,"y":61},34],[{"x":50,"y":61},35],[{"x":50,"y":61},36],[{"x":50,"y":61},37],[{"x":55,"y":62},38],[{"x":55,"y":62},39],[{"x":55,"y":62},40],[{"x":62,"y":62},41],[{"x":62,"y":62},42],[{"x":62,"y":62},43],[{"x":69,"y":60},44],[{"x":69,"y":60},45],[{"x":69,"y":60},46],[{"x":69,"y":60},47],[{"x":78,"y":57},48],[{"x":78,"y":57},49],[{"x":78,"y":57},50],[{"x":85,"y":53},51],[{"x":85,"y":53},52],[{"x":85,"y":53},53],[{"x":88,"y":50},54],[{"x":88,"y":50},55],[{"x":88,"y":50},56],[{"x":88,"y":50},57],[{"x":91,"y":46},58],[{"x":91,"y":46},59],[{"x":91,"y":46},60],[{"x":92,"y":43},61],[{"x":92,"y":43},62],[{"x":92,"y":43},63],[{"x":92,"y":39},64],[{"x":92,"y":39},65],[{"x":92,"y":39},66],[{"x":92,"y":39},67],[{"x":92,"y":35},68],[{"x":92,"y":35},69],[{"x":92,"y":35},70],[{"x":90,"y":33},71],[{"x":90,"y":33},72],[{"x":90,"y":33},73],[{"x":85,"y":30},74],[{"x":85,"y":30},75],[{"x":85,"y":30},76],[{"x":85,"y":30},77],[{"x":83,"y":30},78],[{"x":83,"y":30},79],[{"x":83,"y":30},80],[{"x":80,"y":30},81],[{"x":80,"y":30},82],[{"x":80,"y":30},83],[{"x":76,"y":34},84],[{"x":76,"y":34},85],[{"x":76,"y":34},86],[{"x":76,"y":34},87],[{"x":73,"y":38},88],[{"x":73,"y":38},89],[{"x":73,"y":38},90],[{"x":69,"y":44},91],[{"x":69,"y":44},92],[{"x":69,"y":44},93],[{"x":65,"y":51},94],[{"x":65,"y":51},95],[{"x":65,"y":51},96],[{"x":65,"y":51},97],[{"x":62,"y":57},98],[{"x":62,"y":57},99],[{"x":62,"y":57},100],[{"x":58,"y":63},101],[{"x":58,"y":63},102],[{"x":58,"y":63},103],[{"x":58,"y":63},104],[{"x":57,"y":70},105],[{"x":57,"y":70},106],[{"x":57,"y":70},107],[{"x":56,"y":77},108],[{"x":56,"y":77},109],[{"x":56,"y":77},110],[{"x":56,"y":84},111],[{"x":56,"y":84},112],[{"x":56,"y":84},113],[{"x":56,"y":90},114],[{"x":56,"y":90},115],[{"x":56,"y":90},116],[{"x":56,"y":90},117],[{"x":57,"y":93},118],[{"x":57,"y":93},119],[{"x":57,"y":93},120],[{"x":58,"y":95},121],[{"x":58,"y":95},122],[{"x":58,"y":95},123],[{"x":59,"y":97},124],[{"x":59,"y":97},125],[{"x":59,"y":97},126],[{"x":59,"y":97},127],[{"x":60,"y":98},128],[{"x":60,"y":98},129],[{"x":60,"y":98},130],[{"x":60,"y":98},131],[{"x":60,"y":98},132],[{"x":60,"y":98},133],[{"x":60,"y":98},134],[{"x":60,"y":98},135],[{"x":60,"y":98},136],[{"x":60,"y":98},137],[{"x":60,"y":98},138],[{"x":60,"y":98},139],[{"x":60,"y":98},140],[{"x":60,"y":98},141],[{"x":60,"y":98},142],[{"x":60,"y":98},143],[{"x":60,"y":98},144],[{"x":60,"y":98},145],[{"x":60,"y":98},146],[{"x":60,"y":98},147],[{"x":60,"y":98},148],[{"x":60,"y":98},149],[{"x":60,"y":98},150],[{"x":60,"y":98},151],[{"x":60,"y":98},152],[{"x":60,"y":98},153],[{"x":60,"y":98},154],[{"x":60,"y":98},155],[{"x":60,"y":98},156],[{"x":60,"y":98},157],[{"x":60,"y":98},158],[{"x":60,"y":98},159],[{"x":60,"y":98},160],[{"x":60,"y":98},161],[{"x":60,"y":98},162],[{"x":60,"y":98},163],[{"x":60,"y":98},164],[{"x":60,"y":98},165],[{"x":60,"y":98},166],[{"x":60,"y":98},167],[{"x":60,"y":98},168],[{"x":60,"y":98},169],[{"x":60,"y":98},170],[{"x":60,"y":98},171]]`, (key,value)=> value["x"]? Vec(value.x, value.y) : value)36:T5c4,webglCanvas = function (w,h) { let canvas = DOM.canvas(w,h); let gl = canvas.getContext('webgl', {antialias:true, preserveDrawingBuffer: true}); let regl = createRegl (gl); let buffer = regl.buffer(); let drawTriangleStrip = regl({ blend: { enable: true, func: { srcRGB: 'src alpha', srcAlpha: 1, dstRGB: 'one minus src alpha', dstAlpha: 1 }, }, depth: { enable:false }, frag: ` precision mediump float; uniform vec4 color; void main () { gl_FragColor = color; }`, vert: ` attribute vec2 position; float w = float(${w}); float h = float(${h}); uniform vec2 translation; void main () { vec2 pos = position+translation; gl_Position = vec4(pos.x/w*2.0-1.0, 1.0-pos.y/h*2.0, 0.0, 1.0); }`, attributes: { position:buffer }, uniforms: { color: regl.prop('color'), translation: regl.prop('translation') }, primitive: 'triangle strip', count: regl.prop('count') }); canvas.clear = function (color = [0, 0, 0, 0]) { regl.clear({color}); } canvas.draw = function (buf, color=[0,0,0,0.5], translation=[0,0]) { buffer(buf); drawTriangleStrip({ count: buf.length, color, translation, }) } return canvas; }37:T147b,brushGallery = function (brushConfig, strokeConfig, options) { let {hparam="mass", vparam="drag", size=100, nh=8, nv=3} = options; let hmin=params[hparam].min, hmax=params[hparam].max, hstep=params[hparam].step; let vmin=params[vparam].min, vmax=params[vparam].max, vstep=params[vparam].step; let hToVal = (h) => hmin + h*hstep; let vToVal = (v) => vmin + v*vstep; let valToH = (val) => ~~((val-hmin)/hstep); let valToV = (val) => ~~((val-vmin)/vstep); let nhTotal = valToH(hmax)+1; let nvTotal = valToV(vmax)+1; let sg = scrollGrid (nh,nhTotal,nv,nvTotal,size); let canvas = webglCanvas (size*nh,size*nv); let h0 = 0, v0 = 0, lastH0 = -1, lastV0 = -1; let h = valToH(brushConfig[hparam]); let v = valToV(brushConfig[vparam]); sg.container.value = {}; let setValue = function () { sg.container.value[hparam] = hToVal(h); sg.container.value[vparam] = vToVal(v); //console.log (sg.container.value) sg.container.dispatchEvent(new CustomEvent('update')); } setValue() // Makes sure that the current selection (h,v) is being shown let reframe = function () { let lasth=h, lastv=v; if (h >= h0 + nh) h = h0+nh-1; else if (h < h0) h = h0; if (v >= v0 + nv) v = v0+nv-1; else if (v < v0) v = v0; let changed = v!=lastv || h!=lastv; if (changed) setValue(); return changed } // Draws one sample at col,row let drawSample = function(col,row) { let bconf = {}; Object.assign (bconf, brushConfig); bconf[hparam] = hToVal(h0+col); bconf[vparam] = vToVal(v0+row); let brush = new Brush (bconf); let bStroke = new BrushedStroke (brush, strokeConfig); for (let i = 0; i < asample.length; i++) { bStroke.addSample (...asample[i]); } let sz = bStroke.mbr.size(); let min = bStroke.mbr.min; let delta = Vec(size,size).sub(sz).scale(0.5).add(Vec(col*size,row*size)) canvas.draw (bStroke.buffer,bStroke.webglColor,[delta.x-min.x, delta.y-min.y]) }; // Create a table overlay to show the parameter values of the current selection let table = html`

`; let cells = []; table.style.width = `${size*nh}px`; table.style.height = `${size*nv}px`; for (let row = 0; row < nv; row++) { let tr = html``; cells.push ([]); table.append(tr); for (let col = 0; col < nh; col++) { let td = html``; td.style.width = `${size}px`; td.style.height = `${size}px`; tr.append(td); cells[row][col] = td; } } // Redraws the samples and/or the labels let refresh = function (force=false) { let redraw = force || lastH0 != h0 || lastV0 != v0; let cellClass = (row,col)=> (row == v-v0 && col == h-h0) ? "selected" : null; if (redraw) { canvas.clear(); for (let row = 0; row < nv; row++) { for (let col = 0; col < nh; col++) { drawSample(col,row); cells[row][col].className = cellClass(row,col); cells[row][col].innerHTML = `${hparam}:${hToVal(col+h0).toFixed(1)}
${vparam}:${vToVal(row+v0).toFixed(1)}`; } } lastH0 = h0; lastV0 = v0; } else { for (let row = 0; row < nv; row++) { for (let col = 0; col < nh; col++) { cells[row][col].className = cellClass(row,col); } } } }; // Make sure this element can receive the keyboard focus sg.container.setAttribute("tabindex",0); // Arrow key bindings sg.container.onkeydown = (e) => { switch (e.key) { case "ArrowDown": v = Math.min(nvTotal-1,Math.max(0,v+1)); refresh(); if (v-v0 > nv-1) sg.scrollTo(h0,v0+1); setValue(); break; case "ArrowUp": v = Math.min(nvTotal-1,Math.max(0,v-1)); refresh(); if (v-v0 < 0) sg.scrollTo(h0,v0-1); setValue(); break; case "ArrowLeft": h = Math.min(nhTotal-1,Math.max(0,h-1)); refresh(); if (h-h0 < 0) sg.scrollTo(h0-1,v0); setValue() break; case "ArrowRight": h = Math.min(nhTotal-1,Math.max(0,h+1)); refresh(); if (h-h0 > nh-1) sg.scrollTo(h0+1,v0); setValue() break; } return false; }; // Mouse bindings sg.table.onmousedown = (e) => { h = Math.trunc(e.layerX/size); v = Math.trunc(e.layerY/size); refresh(); setValue() } // Div with the canvas and table let div = html`

`; div.append(canvas); div.append(table); // Configure the ScrollGrid sg.setContent(div); // Set the current selection and scroll to that value if needed h = valToH(brushConfig[hparam]); v = valToV(brushConfig[vparam]); h0 = nh*~~(h/nh); v0 = nv*~~(v/nv) // Must scroll only after sg is mapped onto screen setTimeout (function () { sg.setCallback(function (h,v) {[h0,v0] = [h,v]; reframe(); refresh(); }); sg.scrollTo (h0,v0); refresh() }, 100); sg.container.setConf = function (brushConf, strokeConf) { Object.assign(brushConfig,brushConf); Object.assign(strokeConfig,strokeConf); refresh(true); } return sg.container; }38:T5fb,style = html`

Styles for brushGallery and scrollGrid

`;39:T984,scrollGrid = function (nh,nhtotal,nv,nvtotal,size) { let container = html`

`; container.style.width = nh*size+"px"; container.style.height = nv*size+"px"; let [totalWid, totalHgt] = [size*nhtotal+10,size*nvtotal+10]; let div = html`

`; div.style.width = totalWid+"px"; div.style.height = size*nvtotal+"px"; let table = html`

`; div.style.width = totalWid+"px"; div.style.height = totalHgt+"px"; for (let v = 0; v < nvtotal; v++) { let tr = html``; tr.style["min-height"] = `${size}px`; table.append(tr); for (let h = 0; h < nhtotal; h++) { let td = html``; td.style["min-width"] = `${size}px`; td.style["min-height"] = `${size}px`; td.style["width"] = `${size}px`; td.style["height"] = `${size}px`; tr.append(td); } } div.append(table); let h = 0, v = 0; let content=null; let callback=()=>{}; let setContent = function (newContent) { if (content) content.remove(); content = newContent; content.style.position = "absolute"; container.append(content); callback (h,v); } let setCallback = function (newCallback) { callback = newCallback; //callback (h,v) } //content = content || // html`

`; //content.style.position = "absolute"; container.append(div); //container.append(content); let last_known_scroll_position = {top:0,left:0}; let ticking = false; function scrolled(scroll_pos) { let {top,left} = scroll_pos; content.style.top = `${top}px`; content.style.left = `${left}px`; [v,h] = [~~(top/size),~~(left/size)] ticking = false; callback(h,v); } function scrollTo (h,v) { //content.style.top = v*size+"px"; //content.style.left = h*size+"px"; // console.log ("scrollTo",h,v) container.scrollTop = v*size; container.scrollLeft = h*size; } container.onscroll = function(e) { last_known_scroll_position = {top:container.scrollTop,left:container.scrollLeft}; if (!ticking) { window.requestAnimationFrame(function() { scrolled(last_known_scroll_position); ticking = false; }); ticking = true; } }; return {container, table, scrollTo, setCallback, setContent}; } 3a:T74d,function dimensionSelect (dimensions, selected,values=null) { // let dimensions = ["A", "B", "C"]; // let selected = {x : "A", y : "B"}; let form = html``; let table = html`

`; form.append(table); let tr = html``; table.append (tr); for (let header of [" ","X","Y"].concat(values?["Value"]:[])) { tr.append (html`${header}`); } let xinputs = [], yinputs = [], valuecells = {}; function oninput () { for (let x of xinputs) if (x.checked) selected.x = x.value; for (let y of yinputs) if (y.checked) selected.y = y.value; for (let i = 0; i < dimensions.length; i++) { yinputs[i].disabled = (selected.x == yinputs[i].value); xinputs[i].disabled = (selected.y == xinputs[i].value); } form.value = selected; form.dispatchEvent(new CustomEvent('input')); } for (let dim of dimensions) { tr = html``; table.append(tr); tr.append (html`${dim}`); let inp = html``; inp.oninput = oninput; xinputs.push(inp); tr.append (html`${inp}`); inp = html``; inp.oninput = oninput; yinputs.push(inp); tr.append (html`${inp}`); if (values) { let vcell = html``; valuecells[dim] = vcell; tr.append(vcell); } } function setValues(values) { for (let dim in valuecells) valuecells[dim].innerHTML = +values[dim].toFixed(3); } oninput (); setValues(values); form.setValues = setValues; return form } 3b:[] 2e:{"title":"Dynadraw","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"md`### Brush and stroke configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"{\n let clear = html``;\n clear.onclick = (e) => drawing.clear();\n let undo = html``;\n undo.onclick = (e) => drawing.undo();\n return html`${clear} ${undo}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"md`### Default values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"params = ({\n mass: {title:\"Mass\", min:1, max:50, value:40, step:1},\n drag: {title:\"Drag\", min:0.1, max:0.9, value:0.3, step:0.1},\n width: {title:\"Width\", min: 1, max: 50, value:25, step:1},\n speedFactor: {title:\"S factor\", min:0.1, max: 5, value:1, step:0.1},\n widthFactor: {title:\"W factor\", min:0.1, max: 5, value:1, step:0.1},\n angle: {title:\"Angle\", min:-3.15, max:3.15, step:0.05, value: 0.75}\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"brushConfig = ({ \n mass: 20, drag:0.2, \n width: 10, varWidth:\"thicker\", \n speedFactor:1, widthFactor:1, \n varAngle: true, angle:0.78\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"strokeConfig = ({ color: \"#000000\", opacity:0.7 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"md`### Brush and stroke classes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"class Stroke {\n \n constructor (config) {\n let {color = 'black', opacity = 0.6} = config;\n Object.assign(this,{color,opacity})\n this.segments = []\n }\n \n add (segment) {\n this.segments.push (segment) \n }\n \n draw (ctx) {\n if (this.segments.length<2) return;\n ctx.globalAlpha = this.opacity;\n ctx.fillStyle = this.color;\n ctx.strokeStyle = this.color;\n ctx.beginPath()\n let {x,y} = this.segments[0][0];\n ctx.moveTo (x,y);\n for (let [p,q] of this.segments) ctx.lineTo(p.x,p.y);\n for (let [p,q] of [ ... this.segments].reverse()) ctx.lineTo(q.x,q.y);\n ctx.closePath()\n ctx.fill() \n }\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"md`### Samplings of mouse trajectories\n\n(Used for the brush gallery GUI)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"mutable lastSample = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"md`### Drawing code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"md`### Code for the gallery GUI`","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { Vec, Curve, MBR } from \"@esperanc/2d-geometry-utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"createRegl = require('regl@1.4.2/dist/regl.js')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}