2d:null 2e:["$","title",null,{"children":"Sketchable vector fields | Claudio Esperança | Observable"}] 33:T44e,/** * My homebrew 2D Vector class **/ class Vector { constructor (x,y) { [this.x,this.y] = [x||0,y||0] } get mag () { // Magnitude (length) return Math.sqrt(this.dot(this)); } add (v) { // Vector sum return new Vector(this.x+v.x,this.y+v.y); } sub (v) { // Vector distance return new Vector(this.x-v.x,this.y-v.y); } dist(q) { // Distance to point return this.sub(q).mag } dot (q) { // Dot product return this.x*q.x + this.y*q.y; } scale (alpha) { // Multiplication by scalar return new Vector (this.x*alpha, this.y*alpha) } mix (q, alpha) { // this vector * (1-alpha) + q * alpha return new Vector (this.x * (1-alpha) + q.x * alpha, this.y * (1-alpha) + q.y * alpha); } normalize () { return this.scale (1/this.mag) } distSegment(p,q) { // Distance to line segment var s = p.dist(q); if (s < 0.00001) return this.dist(p); var v = q.sub(p).scale(1.0/s); var u = this.sub(p); var d = u.dot(v); if (d < 0) return this.dist(p); if (d > s) return this.dist(q); return p.mix(q,d/s).dist(this); } }34:[] 31:{"id":"a9b5333696a458ce","slug":"sketchable-vector-fields","title":"Sketchable vector fields","thumbnail":"db49134daa09bb419b4ad1b1d61f1a4cf4fdcb80476556a231f35485c6af2f3b","access_level":"public","create_time":"$D2018-06-22T19:36:58.636Z","update_time":"$D2018-06-23T23:36:19.206Z","view_time":null,"first_public_time":"$D2018-06-23T15:09:30.009Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":276,"publish_version":276,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Sketchable vector fields","cells":[{"id":0,"value":"md`# Sketchable vector fields\n\nThe idea here is to practice how to do sketching interactions within observable in such a way as to illustrate the key parts.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"canvas = {\n const w = width, h = height;\n const context = DOM.context2d(w, h, 1);\n let [rows,cols] = fieldSampleSize;\n var p = new Vector();\n if (showField) {\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 }\n for (let q of particles) {\n context.beginPath();\n context.fillStyle = q.color;\n context.arc(q.pos.x, q.pos.y, 20, 0, 2 * Math.PI);\n context.fill();\n }\n yield context.canvas;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof showField = checkbox({\n title: 'Show the field',\n options: [\n { value: \"show\", label: 'On' }\n ],\n value: \"show\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"viewof strength = slider({\n min: 1, \n max: 20, \n step: 1, \n value : 5,\n title: 'Strength',\n description: \"Strength of the stroke\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"height = ~~(width*9/16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"fieldSampleSize=[30,60]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"class ConstantField {\n constructor (v) {\n this.v = v;\n }\n fieldAt (p) {\n return this.v;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"mutable fields = {\n reset; // This makes a new value be generated if the reset button is pressed\n yield [\n new ConstantField (new Vector (2,0))\n //new LinearField (new Vector (200,100), new Vector(400,100), 20, 40)\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"curField = new SumField(fields)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 console.log (stroke,q,p);\n var newField = new LinearField(p,q,strength,radius);\n //mutable fields = [newField].concat(fields);\n fields.push(newField);\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"mutable stroke = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"class Particle {\n constructor () {\n this.pos = new Vector(Math.random()*width,Math.random()*height);\n this.age = 0;\n this.easein = 300;\n this.timeToLive = 500+Math.random()*500;\n }\n move(field) {\n this.pos = this.pos.add(field.fieldAt(this.pos)).add(new Vector(0.2-Math.random()*0.4,0.2-Math.random()*0.5));\n this.age++;\n }\n outside () {\n return this.pos.x < -20 || this.pos.x > width+20 || this.pos.y < -20 || this.pos.y > height;\n }\n teleport () {\n this.pos = new Vector (-19,Math.random()*height);\n }\n get color () {\n var opacity = smoothStep (0, this.easein, this.age)* smoothStep (this.timeToLive, this.timeToLive-this.easein,this.age);\n return `rgba(255,0,0,${opacity})`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"particles = {\n var p = [];\n var maxParticles = 200;\n while(true) {\n yield (p);\n for (let q of p) {\n q.move(curField);\n if (q.outside()) q.teleport();\n }\n p = p.filter(q => q.age < q.timeToLive);\n if (p.length < maxParticles) p.push(new Particle())\n }\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"import {checkbox,slider} from \"@jashkenas/inputs\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"