30:T4c6,class Particle { // Constructor from position and radius constructor (startPos,r) { this.pos = startPos || new Vector(-Math.random()*width,Math.random()*height); this.r = r || defaults.radius; this.vel = new Vector(); this.age = 0; this.easein = 300; this.timeToLive = 800+Math.random()*500; this.id = ~~Math.random()*10000; } // Sets new position move (newPos) { this.pos.set(newPos) } // Physics integration integrate() { this.vel = this.vel.add(accel.fieldAt(this.pos)).scale(friction); this.pos = this.pos.add(velocity.fieldAt(this.pos)).add(this.vel); this.age++; } // Whether otside the world outside () { return /*this.pos.x < -20 || */ this.pos.x > width+100 || this.pos.y < -20 || this.pos.y > height; } teleport () { this.pos = new Vector (-19,Math.random()*height); } get color () { var opacity = smoothStep (0, this.easein, this.age)* smoothStep (this.timeToLive, this.timeToLive-this.easein,this.age); return `rgba(255,0,0,${opacity})`; } draw (context) { context.beginPath(); context.fillStyle = this.color; context.arc(this.pos.x, this.pos.y, this.r, 0, 2 * Math.PI); context.fill(); } }31:T924,/** * Provides a simple data structure for testing particle collisions **/ class CollisionGrid { // Constructor given the particle radius / half cell size and a minimum bounding rectangle (world by default) constructor (r,mbr) { this.r = r || defaults.radius; this.mbr = mbr || new MBR(Vec(0,0),Vec(width,height)); this.size = this.mbr.size(); this.d = r*2; this.nx = ~~(this.size.x/this.d); this.ny = ~~(this.size.y/this.d); this.grid = []; } add(particle) { // Adds a new particle to the grid let ix = ~~Math.max((particle.pos.x-this.mbr.min.x - this.r) / this.d, 0); let iy = ~~Math.max((particle.pos.y-this.mbr.min.y - this.r) / this.d, 0); let corner = Vec(ix*this.d+this.mbr.min.x,iy*this.d+this.mbr.min.y); let delta = Vec(this.d,this.d); for (let i of [0,1]) { for (let j of [0,1]) { let cellmin = corner.add(Vec(i*this.d,j*this.d)); let cell = new MBR(cellmin, cellmin.add(delta)); let k = (iy+j)*this.nx+(i+ix); if (cell.contains(particle.pos,particle.r)) { if (this.grid[k]) this.grid[k].push(particle); else this.grid[k] = [particle]; } } } } emptyPosition () { // Returns an empty position within the grid let k; let viable = []; for (let i = 0; i < this.nx; i++) { for (let j = 0; j < this.ny; j++) { k = j*this.nx+i; if (!(this.grid[k] || this.grid[k+1] || this.grid[k+this.nx] || this.grid[k+this.nx+1])) { viable.push(k); } } } if (viable.length==0) { mutable nospace++; k = Math.random()*this.nx*this.ny; } else { k = viable[~~(Math.random()*viable.length)]; } return this.mbr.min.add(Vec((k%this.nx +Math.random())*this.d, (~~(k/this.nx)+Math.random())*this.d)); } collide () { for (let cell of this.grid) { if (!cell) continue; let n = cell.length; for (let i = 0; i < n; i++) { let p = cell[i]; for (let j = i+1; j < n; j++) { let q = cell [j]; if (p.id != q.id // Avoid testing particles of the same object && p.pos.dist(q.pos) < p.r + q.r) { let l = new LinearConstraint (p,q,defaults.restitution/4,this.d); l.relax(); } } } } } } 32:T696,class Rope { constructor (startPos,n,sep) { n = n || 4; let size = (0.5+Math.random())*defaults.radius; this.size = size; sep = sep || size*2; let delta = Vec(sep/(n-1),0); let newp = new Particle(startPos,size); newp.id = this; this.p = [newp]; this.c = []; startPos = this.p[0].pos; for (let i = 1; i < n; i++) { startPos = startPos.add(delta); let newp = new Particle (startPos,size); newp.timeToLive = this.p[0].timeToLive; newp.id = this.p[0].id; this.p.push (newp); this.c.push(new LinearConstraint(this.p[i],this.p[i-1], defaults.restitution, sep)); if (i-2>=0) this.c.push(new StraightConstraint(this.p[i-2],this.p[i-1],this.p[i],defaults.restitution/4)); } } get age () { return this.p[0].age; } get timeToLive () { return this.p[0].timeToLive } outside () { for (let q of this.p) { if (q.outside()) return true; } return false; } teleport() { let v = Vec(-100,Math.random()*height).sub(this.p[0]); for (let q of this.p) { q.move (q.pos.add(v)); } } timeStep () { for (let q of this.p) q.integrate(); for (let i = 0; i < defaults.iterations; i++) { for (let c of this.c) c.relax() } } draw (ctx) { if (displayOptions.includes('p')) { for (let q of this.p) q.draw(ctx); } let bez = new Bezier(this.p[0].pos,this.p[1].pos,this.p[2].pos,this.p[3].pos); if (displayOptions.includes('c')) bez.draw(ctx); if (displayOptions.includes('t')) { ctx.fillStyle = this.p[0].color; ctx.font = this.size*2+"px "+basefont; textOnCurve ("River",bez,ctx) } } } 33:[] 2e:{"title":"River fields","cells":[{"id":0,"value":"md`# River fields\n\nA variation of Sketchable vector fields that uses a more sophisticated physical simulation to display word clouds .`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"canvas = { \n const w = width, h = height;\n const context = DOM.context2d(w, h, 1);\n let [rows,cols] = fieldSampleSize;\n while (true) {\n context.clearRect (0,0,width,height);\n var p = new Vector();\n if (displayOptions.includes(\"f\")) {\n var curField = fieldToSketch == \"velocity\" ? velocity : accel;\n for (let i = 0; i < rows; i++) {\n p.y = h / (rows+1) * (i+0.5);\n for (let j = 0; j < cols; j++) {\n p.x = w / (cols+1) * (j+0.5);\n context.beginPath();\n context.moveTo(p.x,p.y);\n var q = p.add(curField.fieldAt(p));\n context.lineTo(q.x,q.y);\n context.stroke();\n }\n }\n curField.draw(context)\n }\n // for (let q of particles) {\n // q.draw(context);\n // }\n //context.font = font;\n context.textBaseline=\"middle\";\n for (let r of ropes) {\n r.draw(context);\n }\n yield context.canvas;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"viewof displayOptions = checkbox({\n title: 'Display Options',\n options: [\n { value: \"f\", label: \"Field\"},\n { value: \"p\", label: \"Particles\" },\n { value: \"c\", label: \"Curves\" },\n { value: \"t\", label: \"Text\" }\n ],\n value: ['c']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"{\n reset;\n mutable riverAccel = [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"viewof fieldToSketch = select([\"velocity\", \"acceleration\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"viewof pop = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"viewof fieldType = select([\"linear\", \"atract\", \"repel\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof strength = slider({\n min: 0.1, \n max: 5, \n step: 0.1, \n value : 5,\n title: 'Strength',\n description: \"Strength of the stroke\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"viewof radius = slider ({\n min:1, \n max:200, \n title:\"Radius\",\n description:\"radius of influence of each input stroke\", \n value:50 \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"viewof friction = slider({min:0.8, max:1, step:0.01})","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"popaction = { \n (viewof pop).onclick = function() {\n if (fieldToSketch==\"velocity\") {\n if (riverVelocity.length>1) riverVelocity.pop();\n }\n else {\n if (riverAccel.length>0) riverAccel.pop();\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"height = ~~(width*9/16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"/**\n * A linear velocity field. Line segment pq \n * generates a field of the given strength in its vicinity, but decaying to \n * 0 at distance radius from the line segment. The field has direction q-v\n **/\nclass LinearField { \n constructor (p,q,strength,radius) { \n [this.p,this.q,this.s,this.r] = [p,q,strength||10,radius||30];\n this.v = q.sub(p).normalize();\n }\n fieldAt(p) {\n return this.v.scale(this.s*smoothStep (this.r,0,p.distSegment(this.p,this.q)))\n }\n draw (ctx) {\n ctx.beginPath();\n ctx.moveTo(this.p.x,this.p.y);\n ctx.lineTo(this.q.x,this.q.y);\n ctx.stroke();\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":" /**\n * A radial velocity field. Point p\n * generates a field of the given strength in its vicinity, but decaying to \n * 0 at distance radius from the line segment. If strength is positive, it atracts\n * particles, whereas if negative it repels.\n **/\nclass RadialField {\n constructor (p,strength,radius) { \n [this.p,this.s,this.r] = [p,strength||10,radius||30];\n }\n fieldAt(q) {\n return q.sub(this.p).normalize().scale(smoothStep (this.r,0,q.dist(this.p))*this.s)\n }\n draw (ctx) {\n ctx.beginPath();\n ctx.arc(this.p.x, this.p.y, this.r, 0, 2 * Math.PI);\n ctx.stroke();\n }\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"class ConstantField {\n constructor (v) {\n this.v = v;\n }\n fieldAt (p) {\n return this.v;\n }\n draw(ctx) {\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"fieldSampleSize=[15,30]","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"/**\n * Returns the sum of several fields\n **/\nclass SumField {\n constructor (fields) {\n this.fields = fields;\n }\n fieldAt(p) {\n var v = new Vector();\n for (let f of this.fields) {\n v = v.add(f.fieldAt(p));\n }\n return v;\n }\n draw(ctx) {\n for (let f of this.fields) {\n f.draw(ctx);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"smoothStep = function(edge0,edge1,x) {\n var t = Math.min(Math.max((x - edge0) / (edge1 - edge0), 0.0), 1.0);\n return t * t * (3.0 - 2.0 * t);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"mutable riverVelocity = [new ConstantField (Vec(1,0))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"mutable riverAccel = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"velocity = new SumField(riverVelocity)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"accel = new SumField (riverAccel)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"canvasInteraction = {\n canvas.onmousedown = function (event) {\n mutable stroke = [new Vector(event.offsetX, event.offsetY)];\n }\n canvas.onmouseup = function (event) {\n var p = stroke[0];\n var q = new Vector(event.offsetX, event.offsetY);\n mutable stroke = [p,q];\n var f = null;\n if (fieldType == \"linear\") {\n f = new LinearField(p,q,strength,radius);\n } else if (fieldType == \"atract\") {\n f = new RadialField (q, -strength, radius);\n } else {\n f = new RadialField (q, strength, radius);\n }\n if (fieldToSketch == \"velocity\") {\n riverVelocity.push (f);\n console.log (riverVelocity);\n //mutable riverVelocity = riverVelocity; \n }\n else {\n riverAccel.push(f);\n //mutable riverAccel = riverAccel;\n }\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"mutable stroke = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"defaults = ({restitution : 0.2, iterations : 1, radius:15 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"/**\n * Constraint to keep the distance between two particles constant\n */\nclass LinearConstraint {\n \n constructor (p0,p1,restitution,s) {\n [this.p0,this.p1,this.r,this.s] = [p0,p1,restitution||defaults.restitution, s || p0.pos.dist(p1.pos)];\n this.relax()\n }\n \n relax() {\n let v = this.p1.pos.sub (this.p0.pos);\n let d = v.mag();\n let diff = (d-this.s)/d*this.r; \n let ratio = 0.5;\n this.p0.move (this.p0.pos.add(v.scale(ratio*diff)));\n this.p1.move (this.p1.pos.add(v.scale((ratio-1)*diff)));\n }\n \n draw (ctx) { // Draws constraint on a canvas\n ctx.beginPath();\n ctx.moveTo(this.p0.pos.x,this.p0.pos.y);\n ctx.lineTo(this.p1.pos.x,this.p1.pos.y);\n ctx.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"/**\n * Constraint to keep p1 as a midpoint of p0 and p2\n */\nclass StraightConstraint {\n \n constructor (p0,p1,p2,restitution) {\n [this.p0,this.p1,this.p2,this.r] = [p0,p1,p2,restitution||defaults.restitution];\n }\n \n relax() {\n let p = this.p0.pos.add (this.p2.pos).scale(0.5);\n this.p1.move(this.p1.pos.mix(p,this.r));\n }\n draw (ctx) { // Draws constraint on a canvas\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"mutable nospace = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"basefont = \"Times\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"maxRopes=60","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"ropes = {\n var r = [];\n while(true) {\n yield (r);\n let g = new CollisionGrid(defaults.radius*2,new MBR(Vec(-width,0),Vec(width,height)));\n for (let q of r) {\n q.timeStep();\n //if (q.outside ()) q.teleport();\n for (let p of q.p) g.add(p,q);\n }\n g.collide();\n r = r.filter(q => !q.outside() && q.age < q.timeToLive);\n if (r.length < maxRopes) {\n r.push(new Rope(g.emptyPosition()))\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { Vector, Vec, Bezier, MBR } from \"@esperanc/2d-geometry-utils\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"import {checkbox,select,slider} from \"@jashkenas/inputs\"\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"import { textOnCurve } from \"@esperanc/text-along-a-bezier-curve\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}