2b:null 2c:["$","title",null,{"children":"Untitled | Kaile Yuan | Observable"}] 31:T4a2,{ const u2K = (u) => { let k = -0.5 return k * Math.sign(Math.tan(u-0.5)*Math.PI)+1+Math.abs(k) } const identity = u => (1-u)/1 while (simulate) { await Promises.delay(sst(ss)) state.v.updatePosition() state.c.update() state.v.t1check() state.c.t2check() state.v.setForce() state.c.corsonSignal() state.c.forEach(e=>{ e.setK(sigma(e.u)) // e.setK(kappa) // e.setG(identity(e.u)) e.setG(gamma) e.setLambda(lambda) e.setA0(areaZero) }) state.c.setSignalPotency(signalPotency) mutable contactNumber = state.c.selectHair().map(e=>e.nCell().filter(e=>!e.isHair()).length) mutable sCN = state.c.filter(e=>e.u<0.4).map(e=>e.nCell().filter(e=>e.isHair()).length) mutable support2Hair = state.c.filter(e=>!e.isHair()).length/state.c.filter(e=>e.isHair()).length mutable HH = state.c.selectHair().map(e=>e.nCell().filter(e=>e.isHair()).length).filter(e=>e>0) mutable hE = state.c.selectHair().map(e=>e.edgeNumber) mutable HSH = state.c.selectHair().map(e=>_.uniq(e.nCell().map(e=>e.nCell()).flat()).filter(e=>e.isHair()).length-1) yield canvas.update(state) } }32:T11ce,viewof canvas = { // ├── view // | └── layer1 <- transform // | ├── 'rect' // | ├── 'polygon' <- state // | ├── text.cell // | ├── text.vertex // plot configuration let config = { vertex: false, cell: true, text: { vertex: false, cell: false, }, force: forceV } view.select('.layer1').remove() const layer1 = view.append('g') .attr('shape-rendering', 'optimizedSpeed') .attr('class', 'layer1') .attr('fill', 'none') .attr('stroke', 'rgba(45,45,45,.8)') .attr('stroke-width', .25) .attr('stroke-linejoin', 'round') .attr('transform', mutable viewTransform) let rainbow = d3.scaleSequential(d3.interpolateOranges).domain([0, 1.5]) const appendBound = g => g.append('rect').attr('width', width).attr('height', height) const appendCell = (g, state) => g.selectAll('polygon.cell').data(state.c.inside()).join('polygon').attr('class', 'cell').attr('points', d=>d.cellPolygon(state.v)).attr('fill', d=>rainbow(d.u)) const appendVtxIdx = (g, state) => g.selectAll('text.vertex').data(state.c.inside().vtxIdx).join('text').attr('class', 'vertex').attr('x', d=>state.v[d].loc.x).attr('y', d=>state.v[d].loc.y).text(d=>state.v[d].idx).attr('font-family', 'monospace').attr('font-size', 1*Math.cbrt(minDistance))/*1*Math.cbrt()*/.attr('fill', 'salmon').attr('stroke', 'none') const appendCellIdx = (g, state) => g.selectAll('text.cell').data(state.c.inside()).join('text').attr('class', 'cell').attr('x', d=>d.loc.x).attr('y', d=>d.loc.y).text(d=>d.idx).attr('font-family', 'sans-serif').attr('font-size', Math.cbrt(minDistance)).attr('font-style', 'italic').attr('fill', 'black').attr('stroke', 'none') const arrowId = DOM.uid('arrow') layer1.append('marker').attr('id', arrowId.id).attr('markerHeight', 10).attr('markerWidth', 10).attr('refX', 5).attr('refY', 2.5).attr('orient', 'auto').append('path').attr('fill', 'red').attr('stroke', 'none').attr('d', 'M0,0v5l7,-2.5Z') // M0 -> M-4 const gradientIds = state.v.inside().map(()=>DOM.uid('gradient')) const lgForce = g => g.selectAll('linearGradient').data(state.v.inside()).join('linearGradient').attr('id', (d,i)=>gradientIds[i].id).attr('gradientUnits', 'userSpaceOnUse').attr('x1', d=>d.loc.x).attr('y1', d=>d.loc.y).attr('x2', d=>d.force.dx+d.loc.x).attr('y2', d=>d.force.dy+d.loc.y).call(g=>g.append('stop').attr('offset', '5%').attr('stop-color', 'salmon').attr('stop-opacity', 0.4)).call(g=>g.append('stop').attr('offset', '95%').attr('stop-color', 'red')) const appendForceVector = (g, state) => g.selectAll('line.force').data(state.v.inside()).join('line').attr('class', 'force').attr('x1', d=>d.loc.x).attr('y1', d=>d.loc.y).attr('x2', d=>d.force.dx+d.loc.x).attr('y2', d=>d.force.dy+d.loc.y).attr('stroke', (d,i)=>gradientIds[i]).attr('marker-end', arrowId).attr('stroke-width', .25)/*.5*/ const appendVtxDot = (g, state) => g.selectAll('circle').data(state.v).join('circle').transition().duration(sst(ss)).attr('cx', d=>d.loc.x).attr('cy', d=>d.loc.y).attr('r', .05)/*.05*/.attr('fill', 'red').attr('stroke', 'none') const zoomAndPan = g => g.call(d3.zoom().on('zoom', ()=>g.select('.layer1').attr('transform', d3.event.transform)).on('end', ()=>{mutable viewTransform = d3.event.transform}).scaleExtent([.1, 1000])) zoomAndPan(view) appendBound(layer1) config.cell ? appendCell(layer1, state) : null config.vertex ? appendVtxDot(layer1, state) : null config.text.cell ? appendCellIdx(layer1, state) : null config.text.vertex ? appendVtxIdx(layer1, state) : null if (config.force) {lgForce(layer1); appendForceVector(layer1, state)} function update(state) { appendCell(layer1, state) config.vertex ? appendVtxDot(layer1, state) : null config.text.cell ? appendCellIdx(layer1, state) : null config.text.vertex ? appendVtxIdx(layer1, state) : null if (config.force) {lgForce(layer1); appendForceVector(layer1, state)} } function plotVtx(vtx) { layer1.append('circle') .attr('r', .1) .attr('fill', 'rgba(232,228,20,.5)') .attr('stroke', 'none') .attr('cx', vtx.loc.x) .attr('cy', vtx.loc.y) layer1.append('text') .attr('x', vtx.loc.x) .attr('y', vtx.loc.y) .text(vtx.idx) .attr('font-family', 'sans-serif') .attr('font-size', 7) .attr('font-style', 'italic') .attr('stroke', 'none') .attr('fill', 'rgba(232,228,20,.5)') } return view.property('value', {update}).node() // return view.node() }33:Tb06,class vtx { constructor(config = {}) { this.idx = config.idx this.jCell = config.jCell this.nVtx = config.nVtx let loc // is an array if (Array.isArray(config.loc)) { loc = config.loc } else { loc = [config.loc.x, config.loc.y] } this.loc = {x: loc[0], y: loc[1]} if (!config.skipMir) { let x = loc[0] let y = loc[1] x < 0 ? x += width : x >= width ? x -= width : x y < 0 ? y += height : y >= height ? y -= height : y this.mir = ({x: x, y: y}) } } get Loc() { return [this.loc.x, this.loc.y] } get Mir() { return point.round([this.mir.x, this.mir.y], 5) } setNvtx(nVtx) { this.nVtx = nVtx } setJcell(jCell) { this.jCell = jCell } setIdx(idx) { this.idx = idx } inside() { return this.loc.x >=0 && this.loc.x < width && this.loc.y >=0 && this.loc.y < height } dis(e) {　return point.norm2(this.Loc, e.Loc) } edge() { return this.nVtx.map(e=>[this.idx, e.idx].sort((a,b)=>a-b)) } setLoc(loc) { this.loc = ({x:loc[0], y:loc[1]}) } setForce(config={}) { // const ringFind = (v1,v2,edge) => edge.find(e=>v1.ring.idx.find(e1=>v2.ring.idx.find(e2=>e.e[0]===e1&&e.e[1]===e2 || e.e[1]===e1&&e.e[0]===e2))) if (config.f) { let f = config.f; this.force = ({dx:f[0], dy:f[1]}) } else { let sum = [0,0] let v12 = {0:[0,1], 1:[0,2], 2:[1,2]} // delA delP term for (let i in v12) { let v1,v2 [v1,v2] = [this.nVtx[v12[i][0]], this.nVtx[v12[i][1]]] let c12 = _.intersection(v1.jCell, v2.jCell)[0] if (!c12) { console.error(`cannot find c12 for v${this.idx}, vtx1 ${v1.idx} vtx2 ${v2.idx}`) } let vec1 = point.subtract([v1.loc.x, v1.loc.y], this.Loc) let vec2 = point.subtract([v2.loc.x, v2.loc.y], this.Loc) let mdelP = point.add(point.scale(vec1, 1/vec1.norm2()), point.scale(vec2, 1/vec2.norm2())) let mdelA = point.scale([v2.loc.y-v1.loc.y, v1.loc.x-v2.loc.x], 0.5) mdelA = point.inner(mdelA, mdelP) > 0 ? mdelA : point.scale(mdelA, -1) sum = point.add(point.scale(mdelA, c12.aK * (c12.Area - c12.A0)), sum) sum = point.add(point.scale(mdelP, c12.pG * c12.Peri), sum) } // del_l term this.nVtx.forEach(e => { let ms = _.intersection(this.jCell, e.jCell) let lambdaAveraged = _.mean(ms.map(e=>e.lambda)) let v = point.subtract([e.loc.x, e.loc.y], this.Loc) let mdel_l = point.scale(v, 2/v.norm2()) // find corresponding lambda // let lambda = ringFind(this, e, config.e).lambda sum = point.add(point.scale(mdel_l, lambdaAveraged), sum) // lambda the same everywhere }) this.force = {dx:sum[0], dy:sum[1]} } } get forceArr() { return [this.force.dx, this.force.dy] } get mapTo() { return _.difference(this.ring, [this]) } }34:T1382,class vtxSet extends Array { constructor(...args) { super(...args) } get idx() { return Array.from(this.map(e=>e.idx)) } get Mir() { return this.map(e => e.Mir) } FindRing() { const boundaryFilter = p => p[0]>-width/3&&p[0]<4*width/3&&p[1]>-height/3&&p[1]<4*height/3 let idxGroup = Object.entries(_.groupBy(this.Mir.map((e,i)=>({idx:i,loc:e})),'loc')).map(e => e[1]).map(e0 => e0.map(e1 => e1.idx)).filter(e=>e.length>=4).map(e=>e.filter(e=>boundaryFilter(this[e].Loc))) idxGroup.forEach(e => { e.forEach(e1=>this[e1].ring=vtxSet.from(e.map(e=>this[e]))) }) return this } MapNvtx() { this.forEach(e=>e.setNvtx(e.nVtx.map(e=>this[e]))); return this } get inIdx() { return Array.from(this.filter(e=>e.inside()).map(e=>e.idx)) } inside() { return this.filter(e=>e.inside()&&(!e.t2check)) } edge() { const upperB = (v1,v2) => {let t=v1.loc.y/(v1.loc.y-v2.loc.y); return t>=0&&t<=1} const leftB = (v1,v2) => {let t=v1.loc.x/(v1.loc.x-v2.loc.x); return t>=0&&t<=1} let e = _.intersectionWith(this.inside().map(e=>e.edge()).flat(), _.isEqual) let edgeIn = e.filter(e=>this[e[0]].inside()&&this[e[1]].inside()) let edgeOn = e.filter(e=>leftB(this[e[0]],this[e[1]]) || upperB(this[e[0]],this[e[1]])) return _.union(edgeIn, edgeOn) // unsorted } t1check(edge) { const edge2Cell=(v0, v1)=>{ let ms = _.intersection(v0.jCell, v1.jCell) let as = _.difference(_.union(v0.jCell, v1.jCell), ms) let a1,m1,a0,m0 a1 = as.find(e=>_.intersection(v0.ring, e.vtx)) a0 = _.difference(as, [a1])[0] m0 = v0.jCell.next(a1) m1 = v1.jCell.next(a0) return new cellSet(a1,m1,a0,m0) } // find closest vertex to certain cell out of vertex.ring const closeV = (v,c) => v.ring[v.ring.map(e=>e.dis(c)).reduce((a,b,i)=>a[0]>b?[b,i]:a,[Number.MAX_VALUE,-1])[1]] let Edge = edge ? edge : this.edge() let t1edge = Edge.filter(e=>this[e[0]].dis(this[e[1]])0) { let e = t1edge[0] let v0 = this[e[0]] let v1 = this[e[1]] let a1,m1,a0,m0 [a1, m1, a0, m0] = edge2Cell(v0,v1) let x1 = v0.loc.x let x2 = v1.loc.x let y1 = v0.loc.y let y2 = v1.loc.y let ratio = dmin/v0.dis(v1)*2 let Loc_p0 = [ratio * (y2-y1)/2 + (x1+x2)/2, ratio * (x1-x2)/2 + (y1+y2)/2] let Loc_p1 = [ratio * (y1-y2)/2 + (x1+x2)/2, ratio * (x2-x1)/2 + (y1+y2)/2] let D0 = point.subtract(Loc_p0, v0.Loc) let D1 = point.subtract(Loc_p1, v1.Loc) v0.ring.forEach(e=>e.setLoc(point.add(D0, e.Loc))) v1.ring.forEach(e=>e.setLoc(point.add(D1, e.Loc))) v0.ring.forEach(e=> e.jCell = cellSet.from([a1, a0, m1])) v1.ring.forEach(e=> e.jCell = cellSet.from([a0, a1, m0])) let vm0 = _.intersection(v0.ring, m0.vtx)[0] let va0 = closeV(v0,a0) let vm1 = _.intersection(v1.ring, m1.vtx)[0] let va1 = closeV(v1,a1) let v1a0 = _.intersection(v1.ring, a0.vtx)[0] let v0a1 = _.intersection(v0.ring, a1.vtx)[0] let m0v = a1.vtx.next(v0a1) let m1v = a0.vtx.next(v1a0) a0.vtx.splice(a0.vtx.indexOf(v1a0)+1, 0, va0) // add v0 to a0 a0.update() a1.vtx.splice(a1.vtx.indexOf(v0a1)+1, 0, va1) // add v1 to a1 a1.update() m0.vtx.splice(m0.vtx.indexOf(vm0), 1) // minus v0 from m0 m0.update() m1.vtx.splice(m1.vtx.indexOf(vm1), 1) // minus v1 from m1 m1.update() v0.ring.forEach(e=>{ let nearV0 = _.intersection(e.nVtx, m0v.ring)[0] if (nearV0) { if (e.nVtx.indexOf(nearV0)!==-1) { e.nVtx.splice(e.nVtx.indexOf(nearV0), 1, closeV(m1v,e)); } if (nearV0.nVtx.indexOf(e)!==-1) { nearV0.nVtx.splice(nearV0.nVtx.indexOf(e), 1, closeV(v1,e)); } let edge = [e.idx, nearV0.idx].sort((a,b)=>a-b) let index = t1edge.findIndex(e=>e[0]===edge[0]&&e[1]===edge[1]) if (index!==-1) t1edge.splice(index, 1) } }) v1.ring.forEach(e=>{ let nearV1 = _.intersection(e.nVtx, m1v.ring)[0] if (nearV1) { if (e.nVtx.indexOf(nearV1)!==-1) { e.nVtx.splice(e.nVtx.indexOf(nearV1), 1, closeV(m0v,e)); } if (nearV1.nVtx.indexOf(e)!==-1) { nearV1.nVtx.splice(nearV1.nVtx.indexOf(e), 1, closeV(v0,e)); } let edge = [e.idx, nearV1.idx].sort((a,b)=>a-b) let index = t1edge.findIndex(e=>e[0]===edge[0]&&e[1]===edge[1]) if (index!==-1) t1edge.splice(index, 1) } }) t1edge.splice(0, 1) } } updatePosition() { let normalizationFactor = _.max(this.inside().map(e=>e.forceArr.norm2())) this.inside().forEach(e=>{ let f = normalizationFactor ? point.scale(e.forceArr, dmin/(2*normalizationFactor)) : e.forceArr e.ring.forEach(e1=>e1.setLoc(point.add(f, e1.Loc))) }) } setForce(config={}) { this.inside().forEach(e=>e.setForce(config)) } }35:T5fb,class cell { constructor(idx, vtx) { this.idx = idx this.vtx = vtx this.Area = this.cellPolygon().area() this.Peri = this.cellPolygon().peri() this.loc = this.cellPolygon().centroid() this.aK = 0 this.A0 = 0 this.pG = 0 this.u = 0 this.lambda = 0 } cellPolygon() { return this.vtx.concatHead().map(d=>d.Loc) } setArea(val) { this.Area = val } setPeri(val) { this.Peri = val } hasVtx(idx) { return this.vtx.map(e=>e.idx).includes(idx) ? true : false } hasBothvtx(idx1, idx2) { return this.hasVtx(idx1) && this.hasVtx(idx2) } setA0(val) { this.A0 = val } setK(val) { this.aK = val } setG(val) { this.pG = val } setLambda(val) { this.lambda = val } get vtxIdx() { return this.vtx.map(e=>e.idx) } inside() { return this.loc.x >=0 && this.loc.x < width && this.loc.y >=0 && this.loc.y < height } get Loc() { return [this.loc.x, this.loc.y] } update() { this.Area = this.cellPolygon().area() this.Peri = this.cellPolygon().peri() this.loc = this.cellPolygon().centroid() } dis(cell) { let dis = point.subtract(this.Loc, cell.Loc) dis[0] = dis[0] > width/2 ? width - dis[0] : dis[0] dis[1] = dis[1] > height/2 ? height - dis[1] : dis[1] return dis.norm2() } edge() { let arr = this.vtx.concatHead() return _.zip(arr.slice(0,arr.length-1), arr.slice(1)) } get edgeNumber() { return this.vtx.length } nCell() { return _.difference(_.uniq(this.vtx.map(e=>e.jCell).flat()), [this]) } isHair() { return this.u>0.4 } } 36:Tb6b,class cellSet extends Array { constructor(...args) { super(...args) this.signalPotency = 1.0 } get vtx() { return this.map(e=>e.vtx).flat() } get vtxIdx() { return _.uniq(this.map(e=>e.vtxIdx).flat().sort((a,b)=>a-b)) } get idx() { return this.map(e=>e.idx) } get Loc() { return this.map(e=>e.Loc) } update() { this.forEach(e=>e.update()) } inside() { return this.filter(e=>!e.t2check) } t2check() { const closeV = (v,c) => v.ring[v.ring.map(e=>e.dis(c)).reduce((a,b,i)=>a[0]>b?[b,i]:a,[Number.MAX_VALUE,-1])[1]] let amin = 5 this.forEach(e=>{ if (e.cellPolygon().area() < amin && e.vtxIdx.length === 3 && !e.t2check) { e.t2check = true let newVtx = e.vtx[0] let cellVtx = e.vtx let todel = _.difference(cellVtx, [newVtx]) todel.forEach(e=>e.ring.forEach(e=>e.t2check = true)) newVtx.loc = e.loc newVtx.nVtx = _.difference(_.union(e.vtx[0].nVtx, e.vtx[1].nVtx, e.vtx[2].nVtx), cellVtx) newVtx.jCell = _.difference(_.union(e.vtx[0].jCell, e.vtx[1].jCell, e.vtx[2].jCell), [e]) newVtx.loc = e.loc newVtx.mapTo.forEach((e1,i)=>{ e1.setLoc(point.add(point.subtract(newVtx.Loc, e.vtx[0].Loc), e1.Loc)) e1.nVtx = newVtx.nVtx.map(e=>closeV(e, e1)) e1.jCell = newVtx.jCell }) newVtx.jCell.forEach(e=>{ let vToYank = _.intersection(todel.map(e=>e.ring).flat(), e.vtx) e.vtx.splice(e.vtx.indexOf(vToYank[0]), 1) if (vToYank[1]) { e.vtx.splice(e.vtx.indexOf(vToYank[1]), 1, closeV(newVtx,e)) } e.update() }) todel.forEach(e=>{ let v = _.difference(e.nVtx, cellVtx)[0] v.ring.forEach(e1=>{ let ledot = _.intersection(e1.nVtx, e.ring)[0] // if e.ring and e1.ring is of different size, there would be nonexistant ledot instance e1.nVtx.splice(e1.nVtx.indexOf(ledot), 1, closeV(newVtx, e1)) }) }) } }) } setSignalPotency(val) { this.signalPotency = val } corsonSignal() { const sigma = x => (1+Math.tanh(2*x))/2 const ligandLevel = u => u const signalProd = u => { let a0 = 0.05 let a1 = 0.95 let ligandAct = a0 + a1*3*u**3/(2+u**2) return ligandAct * ligandLevel(u) } const coup = (c1, c2) => { let N = this.length let lambda = Math.sqrt(1/N) let l = this.signalPotency * lambda return Math.exp(-Math.pow(c1.dis(c2)/width,2)/(2*Math.pow(l,2))) } const f = (u,s) => sigma(2*(u-s)) let D = 5e-5 let tau = 0.5 let dt = 0.3 let s this.forEach(e=>{ s = _.sum(this.map(e1=>coup(e,e1)*signalProd(e1.u))) e.u += (f(e.u, s) - e.u + d3.randomNormal(0, Math.sqrt(2*D)*tau)())/tau*dt }) } get u() { return this.map(e=>e.u) } selectHair() { return this.filter(e=>e.u>0.4) } }37:T673,class simulation { constructor() { const pBCArray = Array.from({length:3}, (_, i) => Array.from({length:3}, (_, j) => [j-1, i-1])).flat(1).map(v => [v[0]*width, v[1]*height]) const seedsExtended = Array.from(pBCArray, e => Array.from(seeds, x => [x[0]+e[0], x[1]+e[1]])).flat(1) const delaunay = d3.Delaunay.from(seedsExtended) const voronoi = delaunay.voronoi([-width, -height, 2*width, 2*height]) const jCell = idx => cellSet.from(reshape(Array.from(delaunay.triangles),3)[idx].map(e=>e%seeds.length)) const nVtx = idx => { let adjacentTriangles = []; for (let e of [3*idx, 3*idx+1, 3*idx+2]) { let opposite = delaunay.halfedges[e]; if (opposite >= 0) { adjacentTriangles.push(Math.floor(opposite/3)) }} return vtxSet.from(adjacentTriangles) } const vtxIdx = i => { const {circumcenters, delaunay: {inedges, halfedges, triangles}} = voronoi; const e0 = inedges[i]; if (e0===-1) return null; /*concident point*/ const points = []; let e = e0; do { const t = Math.floor(e / 3); points.push(t); e = e % 3 === 2 ? e - 2 : e + 1; if (triangles[e] !== i ) break; /*bad triangulation*/ e = halfedges[e]; } while (e !== e0 && e !== -1) return points; } let vArr = vtxSet.from(reshape(Array.from(voronoi.circumcenters), 2) .map((e,i) => new vtx({idx:i, loc:e, jCell:jCell(i), nVtx:nVtx(i)}))) .FindRing() .MapNvtx() let cArr = cellSet.from(range(4*seeds.length,5*seeds.length-1,1).map(i=>new cell(i%seeds.length,vtxIdx(i).map(d=>vArr[d]) ))) vArr.forEach(e=>e.setJcell(e.jCell.map(e=>cArr[e]))) vArr.t1check() vArr.setForce() return { v: vArr, c: cArr } } }38:T58d,md`## vector algebra analysis of the displacement of vertex for given vertex ${tex`i`}, there're 9 terms: ${tex.block` \begin{aligned} \Kappa_1(A_1-A_1^{(0)})\text{-}\nabla_i A_1 \quad &+ \quad \Kappa_2(A_2-A_2^{(0)})\text{-}\nabla_i A_2 \quad + \quad \Kappa_3(A_3-A_3^{(0)})\text{-}\nabla_i A_3 \quad &+ \\ \Gamma_1P_1\text{-}\nabla_i P_1 \quad &+ \quad \Gamma_2P_2\text{-}\nabla_i P_2 \quad + \quad \Gamma_3P_3\text{-}\nabla_i P_3 \quad &+ \\ \lambda_{12}\text{-}\nabla_i l_{12} \quad &+ \quad \lambda_{23}\text{-}\nabla_i l_{23} \quad + \quad \lambda_{31}\text{-}\nabla_i l_{31} \end{aligned} `} in which (the first equation below probably should be expressed with quarternion, yet the representation here suffices for computation) ${tex.block` \begin{aligned} \text{-}\nabla_i A &= \overbrace{ {\bf CW}({\mathbf{v_1} \over 2}) + {\bf CCW}({\mathbf{v_2} \over 2})}^{\underrightarrow\text{CCW}} \\ &=\frac{1}{2} \begin{pmatrix} y_2-y_1\\ x_1-x_2 \end{pmatrix}\quad {\bf or }\quad \frac{1}{2} \begin{pmatrix} y_1-y_2\\ x_2-x_1 \end{pmatrix} \quad (\text{in the direction such that} \langle\text{-}\nabla_i A, \text{-}\nabla_i P\rangle > 0 )\\ \text{-}\nabla_i P &= {\mathbf{v_1} \over \lVert \mathbf{v_1} \rVert} + {\mathbf{v_2} \over \lVert \mathbf{v_2} \rVert} \\ \text{-}\nabla_i l &= 2 {\mathbf{v} \over \lVert \mathbf{v} \rVert} \end{aligned} `} where ${tex`\mathbf{v_1}`}, ${tex`\mathbf{v_2}`} are defined as`39:T52e,{ const ctx = DOM.context2d(width, 100); function arrow(x0, y0, x1, y1, color = "black", label = "null") { let headlength = 10; const angle = Math.atan2(y1 - y0, x1 - x0); const x2 = x1 - headlength * Math.cos(angle - Math.PI / 6); const y2 = y1 - headlength * Math.sin(angle - Math.PI / 6); const x3 = x1 - headlength * Math.cos(angle + Math.PI / 6); const y3 = y1 - headlength * Math.sin(angle + Math.PI / 6); ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x1, y1); ctx.fill(); if (label) { const offset = 10; const dir = vec2(x1 - x0, y1 - y0).normalize(); const anchor = vec2(x1 + dir.x * offset, y1 + dir.y * offset); ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.font = `italic bold ${headlength * 1.5}px serif`; ctx.fillText(label, anchor.x, anchor.y); } } let x0 = 100; arrow(x0, 10, x0+60, 10, "black", "v1"); arrow(x0, 10, x0-10, 70, "black", "v2"); ctx.arc(x0, 10, 5, 0, 2*Math.PI); ctx.fill(); ctx.fillText("i", x0-10, 10); return ctx.canvas; } 3a:T14ea,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, 20, 10]) .attr("shape-rendering", "geometricPrecision") .attr("stroke", "#A8A8A8") .attr('fill', '#A8A8A8') .attr("stroke-width", .1); var pi = ({x:4, y:1}) var p1 = ({x:12, y:1}) var p2 = ({x:1, y:6}) function o2v(p) { return vec2(p.x, p.y) } function v2o(v) { return ({x: v.x, y: v.y}) } function derivePoints(pi, p1, p2) { let dir1 = dir(o2v(pi), o2v(p1)) let dir2 = dir(o2v(pi), o2v(p2)) let mDP = vec2(dir1.x + dir2.x, dir1.y + dir2.y) let halfv1 = vec2(0.5*(p1.x - pi.x), 0.5*(p1.y - pi.y)) let halfv2 = vec2(0.5*(p2.x - pi.x), 0.5*(p2.y - pi.y)) let mDA = vec2((p2.y - p1.y)*0.5, (p1.x - p2.x)*0.5) dot(mDP, mDA) > 0 ? mDA : mDA.scale(-1) let mDl1 = dir1.scale(2) let mDl2 = dir2.scale(2) let pp = v2o(vec2(mDP.x + pi.x, mDP.y + pi.y)) pp.name = ' P' pp.class = 'c1' let pa = v2o(vec2(mDA.x + pi.x, mDA.y + pi.y)) pa.name = ' A' pa.class = 'c1' let pl1 = v2o(vec2(mDl1.x + pi.x, mDl1.y + pi.y)) pl1.name = 'l1' pl1.class = 'c2' let pl2 = v2o(vec2(mDl2.x + pi.x, mDl2.y + pi.y)) pl2.name = 'l2' pl2.class = 'c2' return [pa, pp, pl1, pl2] } const extendedPoints = [p1, p2, derivePoints(pi, p1, p2)].flat() const line = svg.append("g") .selectAll("line") .data(extendedPoints) .join("line") .attr("x1", d => pi.x) .attr("y1", d => pi.y) .attr("x2", d => d.x) .attr("y2", d => d.y) line .filter(d => d.class) .attr('stroke', 'salmon') .filter(d => d.name==' P') .attr('stroke', '#C63D3D') const arrowPath = svg.append("g") .selectAll("path") .data(extendedPoints) .join("path") .attr("d", d => calcAuxPoint(d)) arrowPath .filter(d => d.class) .attr('stroke', 'salmon') .attr('fill', 'salmon') .filter(d => d.name==' P') .attr('stroke', '#C63D3D') .attr('fill', '#C63D3D') const label = svg.append("g") .selectAll("text") .data(extendedPoints) .join("text") .attr("x", d => textAnchor(d).x) .attr("y", d => textAnchor(d).y) .attr("text-anchor", "middle") .attr('font-size', '.7px') .attr('fill', 'black') .attr('stroke', 'black') label .filter(d => !d.class) .attr("font-family", "serif") .attr("font-style", "italic") .attr('stroke-width', 0.03) .text("v") .call((el, i) => { el.append("tspan") .attr("dy", ".3") .attr('font-style', 'normal') .attr("font-size", "0.75em") .attr('stroke-width', 0.01) .text((d, i) => i + 1) }) label .filter(d => d.class) .attr("stroke-width", 0.01) .attr('font-family', 'san-serif') .text(d => '-∇') .call((el, i) => { el.append('tspan') .attr('dy', '.1') .attr('font-style', 'italic') .attr('font-size', '.5em') .text('i') }) .filter(d => d.class === 'c1') .call((el, _) => { el.append('tspan') .attr('dy', '-.1') .text(d => d.name) }) label .filter(d => d.class === 'c2') .call((el, i) => { el.append('tspan') .attr('dy', '-.1') .attr('font-style', 'italic') .text(' l') el.append('tspan') .attr('font-size', '.5em') .text((d, i) => i + 1) }) function textAnchor(p) { let offset = 1.2 let ddir = dir(vec2(pi.x, pi.y), vec2(p.x, p.y)); return vec2(p.x + ddir.x * offset, p.y + ddir.y * offset); } function calcAuxPoint(p, headlength = 0.39) { let p1 = ({x:null, y:null}); let p2 = ({x:null, y:null}); const angle = Math.atan2(p.y - pi.y, p.x - pi.x); p1.x = p.x - headlength * Math.cos(angle - Math.PI / 9); p1.y = p.y - headlength * Math.sin(angle - Math.PI / 9); p2.x = p.x - headlength * Math.cos(angle + Math.PI / 9); p2.y = p.y - headlength * Math.sin(angle + Math.PI / 9); let path = `M${p1.x},${p1.y}L${p.x},${p.y}L${p2.x},${p2.y}Z`; return path; } const point = svg.append("g") .selectAll("circle") .data([pi, p1, p2]) .join("circle") .attr("cursor", "grab") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr('fill', '#fff') .attr("r", .1) .call(d3.drag() .on("start", d => point.filter(p => p===d).raise().attr("stroke", "red").attr("cursor", "grabbing")) .on("drag", d => (d.x = d3.event.x, d.y = d3.event.y, svg.attr("cursor", "grabbing"))) .on("end", d => (point.filter(p => p===d).attr("stroke", null).attr("cursor", "grab"), svg.attr("cursor", null))) .on("start.update drag.update end.update", update)); function update() { point.attr("cx", d => d.x).attr("cy", d => d.y); let updatePoints = [p1, p2, derivePoints(pi, p1, p2)].flat(); line.data(updatePoints).attr("x2", d => d.x).attr("y2", d => d.y).attr("x1", d => pi.x).attr("y1", d => pi.y); arrowPath.data(updatePoints).attr("d", d => calcAuxPoint(d)); label.data(updatePoints).attr("x", d => textAnchor(d).x).attr("y", d => textAnchor(d).y); } // return html`

// ${svg.node()} //

test

` return svg.node() }3b:T88d, { //calculate area for a 2-array(array of array) Array.prototype.area = function() { let area = 0; for (let i =0; i { sumX += e[0] sumY += e[1] }) return Object({x:sumX/this.length, y:sumY/this.length}) } // = this.concat(this[this.length-1]) Array.prototype.concatHead = function() { return this.concat([this[0]]) } Array.prototype.flipNreverse = function() { return [-this[1], this[0]] } Array.prototype.round = function(precision) { return [_.round(this[0],precision), _.round(this[1],precision)] } Array.prototype.inside = function() { return this[0] >=0 && this[0] < width && this[1] >=0 && this[1] < height } Array.prototype.next = function(one) { return this[(this.indexOf(one)+1)%this.length] } Array.prototype.before = function(one) { let index = !this.indexOf(one) ? this.length-1 : this.indexOf(one)-1 return this[index] } return md`\`Array\` class methods for 2-array(array of array)` }3c:[] 2f:{"id":"8f2288dd2314a4eb","slug":"trying-to-perform-a-vertex-model-simulation-using-svg-in-htm","title":"","thumbnail":"f0c6ea659419fa18b65f8a40f591c47c5927e03b4beeef1209bad285155d7f02","access_level":"public","create_time":"$D2021-01-24T21:27:01.274Z","update_time":"$D2021-03-08T04:44:39.565Z","view_time":null,"first_public_time":"$D2021-01-24T21:28:26.879Z","fork":{"id":"27d79aae3cee04eb","slug":"untitled","title":"","owner":{"id":"e968a466b4f02e15","login":"gustavoquincy","name":"Kaile Yuan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e968a466b4f02e15","login":"gustavoquincy","name":"Kaile Yuan","avatar_url":"https://avatars-next.observableusercontent.com/79b60b12fa820d3af38c6e8c362875193f3ab8dc7960980c837270e9fddf2f6d","tier":"starter_2024"},"version":17201,"publish_version":17201,"role":null,"authored":false,"authors":[{"type":"individual","id":"c015efca5a4e2079","login":"gustavoquincy","name":"Kaile Yuan","avatar_url":"https://avatars-next.observableusercontent.com/79b60b12fa820d3af38c6e8c362875193f3ab8dc7960980c837270e9fddf2f6d","tier":null}],"members":[{"type":"individual","id":"c015efca5a4e2079","login":"gustavoquincy","name":"Kaile Yuan","avatar_url":"https://avatars-next.observableusercontent.com/79b60b12fa820d3af38c6e8c362875193f3ab8dc7960980c837270e9fddf2f6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":4188,"value":"md`## Vertex Model of Epithelial Morphogenesis` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11688,"value":"md`I drew from [Corson morphological model 2017](https://science.sciencemag.org/content/356/6337/eaai7407) to simulate [a patch of cellular tissue](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4052277/) *in silico*, the visualization is largely based on MDN SVG standards whereas the programming is on JavaScript ES6, the intercelluar datum crosstalk is based on Observable notebook architecture. \n\nFeel free to tweak Poisson disk sampling parameter to play around with it! 😋 Be sure to fork it if you wanna build on it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10697,"value":"viewof restart = button({ value: 'Restart' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10934,"value":"viewof ss = slider({\n min: 0,\n max: 4,\n step: 1,\n value: 4,\n title: 'simulation speed 📶',\n format: v=>`${sst(v)}ms delay per frame`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17161,"value":"sigma = x => (1-Math.tanh(2*x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17163,"value":"sigma(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10573,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"{\n const button = html`