2b:null 2c:["$","title",null,{"children":"Capacitor Calculus | hzsteinberg | Observable"}] 31:T46f,{ let context = DOM.context2d(width, 200) let obj = new Capacitor(100,100,1); let voltageGraph = new VoltageGraph(400,75, 200,100); let currentGraph = new CurrentGraph(400,200); function baseCurrent(t){ let x = ((t%8)+8)%8; let baseCurrent = 0 if(x < 2)return baseCurrent; if(x < 4) return (x-2)*2+baseCurrent //rise to 5 if(x < 6)return baseCurrent+4 return -(x-6)*2 + 4+baseCurrent //fall to 1 } function forceCurrent(t){ let current = baseCurrent(t); if(t%32 < 8)return current; if(t%32 < 16)return -current; if(t%32 < 24)return -current; if(t%32 < 32)return current; } let t =0 let last_t = 0 while (true) { const true_t = Date.now() / 1000; const dt = Math.min(true_t - last_t, 1/60); t += dt; let current = forceCurrent(t*3); context.canvas.width = context.canvas.width; obj.update(dt, current); voltageGraph.addValue(t, obj.voltageGap); currentGraph.addValue(t, current); obj.draw(context) voltageGraph.draw(context); currentGraph.draw(context); yield context.canvas; last_t = true_t; } }32:T469,{ let context = DOM.context2d(width, 200) let obj = new Inductor(150,100,1); let voltageGraph = new VoltageGraph(500,75, 200,100); let currentGraph = new CurrentGraph(500,200); function baseCurrent(t){ let x = t%8; let baseCurrent = 0 if(x < 2)return baseCurrent; if(x < 4) return (x-2)*2+baseCurrent //rise to 5 if(x < 6)return baseCurrent+4 return -(x-6)*2 + 4+baseCurrent //fall to 1 } function forceCurrent(t){ let current = baseCurrent(t); if(t%16 < 8)return current; return -current } let t =0 let last_t = 0 while (true) { const true_t = Date.now() / 1000; const dt = Math.min(true_t - last_t, 1/60); t += dt; let current = forceCurrent(t*2); context.canvas.width = context.canvas.width; obj.update(dt, current*2.1); voltageGraph.addValue(t, obj.voltageGap*5); //*5 needed just for visual effects so there's no ugly dark voltages currentGraph.addValue(t, current); obj.draw(context) voltageGraph.draw(context); currentGraph.draw(context); yield context.canvas; last_t = true_t; } }33:T685,class VoltageGraph extends RealtimeGraph{ constructor(...args){ super(...args); this.title = "Voltage" this.numRenderings = 0 } draw(context){ let maxY = this.values.reduce((accumulator, currentValue)=>Math.max(accumulator, currentValue)); let minY = this.values.reduce((accumulator, currentValue)=>Math.min(accumulator, currentValue)); this.drawTitleAxesAndZeroLine(context); context.strokeStyle = drawingUtils.voltageToColor(this.values[0]); context.beginPath(); for(var i=0;i 0){ context.lineTo(this.x - this.width/2 + scaledX, this.y - this.height/2 + scaledY); if(true){ context.stroke(); //color this strand based on the lightest color it touches //this statement is necessary in case we're at the end of the array let nextVoltage = (i !== (this.values.length-1)) ? this.values[i+1] : 0; let thisVoltage = this.values[i]; let lightestVoltage = Math.abs(thisVoltage) > Math.abs(nextVoltage) ? thisVoltage : nextVoltage; context.strokeStyle = drawingUtils.voltageToColor(lightestVoltage); context.beginPath(); context.moveTo(this.x - this.width/2 + scaledX, this.y - this.height/2 + scaledY); } } } context.stroke(); this.numRenderings++ } }34:Ta43,class RealtimeGraph{ constructor(x=500,y=100,width=200, height=100, graphTitle=""){ this.values = [0] this.ts = [0] //the x-coordinates this.maxValues = 500 this.secondsToDisplay = 8 //how long should the graph be? this.width = width this.height = height this.title = graphTitle this.x = x this.y = y this.last_t = 0 //since time is assumed to always increase, this will be the max. } addValue(t, x){ this.values.push(x) this.ts.push(t) this.last_t = t; //assumed time doesn't reverse if(this.values.length > this.maxValues){ this.values.splice(0,1) this.ts.splice(0,1) } } drawTitleAxesAndZeroLine(context){ let maxY = this.values.reduce((accumulator, currentValue)=>Math.max(accumulator, currentValue)); let minY = this.values.reduce((accumulator, currentValue)=>Math.min(accumulator, currentValue)); let textX = this.x - this.width/2 - 90; context.fillStyle = "black" context.font = "16px verdana" context.fillText(this.title, textX, this.y); context.strokeStyle = "black" //axes context.beginPath() context.moveTo(this.x - this.width/2, this.y - this.height/2); context.lineTo(this.x - this.width/2, this.y + this.height/2+5); context.lineTo(this.x + this.width/2, this.y + this.height/2+5); context.stroke(); //zero line context.beginPath() let zeroYOffset = (0 - minY) / (maxY-minY)*this.height; let zeroYPos = this.y - this.height/2 + zeroYOffset; if(zeroYOffset < this.height){ context.moveTo(this.x - this.width/2, zeroYPos); context.lineTo(this.x + this.width/2, zeroYPos); } context.stroke(); context.fillStyle = "black" context.font = "16px verdana" context.fillText("0", this.x - this.width/2 - 20, zeroYPos); //'0' } draw(context){ let maxY = this.values.reduce((accumulator, currentValue)=>Math.max(accumulator, currentValue)); let minY = this.values.reduce((accumulator, currentValue)=>Math.min(accumulator, currentValue)); this.drawTitleAxesAndZeroLine(context); context.beginPath(); for(var i=0;i 0){ context.lineTo(this.x - this.width/2 + scaledX, this.y - this.height/2 + scaledY); } } context.stroke(); } }35:T5a7,class RLCCircuit{ constructor(){ let c = 10; this.capacitor = new Capacitor(600,100,1); this.resistor = new Resistor(400,100,1); this.inductor = new Inductor(150,100,5); this.objects = [this.capacitor, this.resistor, this.inductor]; this.current = 10; this.dCurrent = 0; this.d2Current = 0; //current's second derivative } update(dt){ // av'' + bv' + cv = d // y = d/c - b/cy' -a/cy'' let l = this.inductor.l; let c = this.capacitor.c; let r = this.resistor.r; if(this.capacitor !== undefined)r += this.capacitor.r; if(l !== 0){ //equation a0 y'' + a1 y' + a2 y' = 0 //equation I'' + R/L I' + 1/LC I = inputcurrent() //let secondDerivative = (-a1 * iFirstDerivative - a2*i + inputCurrent(t) ) /a0 this.d2Current = -r/l * this.dCurrent - (1/l/c)*this.current //+ inputCurrent(t) ) this.dCurrent += this.d2Current * dt; this.current += this.dCurrent * dt; }else{ //RC circuit //r d/dt I + 1/C I = 0 // I' = -1/crI this.dCurrent = -1/r/c * this.current this.current += this.dCurrent * dt; } this.current += this.dCurrent * dt; for(var i=0;i 0; let lightness = 0; if(isNegativeCharge){ hue = 240; //blue lightness = absCharge/maxChargeDisplay * 70; }else{ hue = 0; //red lightness = absCharge/maxChargeDisplay * 60; } lightness = Math.min(lightness, 70); //clamp to 100% return "hsl("+hue+", 80%, "+ lightness +"%)" } })3a:T484,class InfiniteSimulation{ constructor(w, h){ this.w = w; this.height = h; this.context = DOM.context2d(w, h) this.objects = [] this.last_t = Date.now() / 1000; this.t = 0; } run(){ let objects = this.objects; let width = this.width; let height = this.height; let context = this.context; const true_t = Date.now() / 1000; const dt = Math.min(true_t - this.last_t, 1/60); this.t += dt; let newObjects = []; //array of particles to have on the next frame for(var i=0;i width){ continue; } if(objects[i].dead){ continue; //kill some old particles if above a max limit } newObjects.push(objects[i]); } this.last_t = true_t; this.particles = newObjects; } draw(){ this.context.canvas.width = this.context.canvas.width; for(var i=0;i (pos2[i] - pos1[i])/lineLength); let arrowCenterPos = vecAdd(pos2, direction.map((x) => triangleSize * x)); const negativeTriangleDirectionVec = pos2.map((x,i) => 2/2*(pos2[i] - arrowCenterPos[i])); const halfTriangleDirectionPerpVec1 = [-negativeTriangleDirectionVec[1]/2,negativeTriangleDirectionVec[0]/2]; const halfTriangleDirectionPerpVec2 = [negativeTriangleDirectionVec[1]/2,-negativeTriangleDirectionVec[0]/2]; ctx.beginPath(); ctx.moveTo(...arrowCenterPos); ctx.lineTo(...vecAdd(vecAdd(arrowCenterPos,negativeTriangleDirectionVec),halfTriangleDirectionPerpVec1)); ctx.lineTo(...vecAdd(vecAdd(arrowCenterPos,negativeTriangleDirectionVec),halfTriangleDirectionPerpVec2)); ctx.lineTo(...arrowCenterPos); ctx.fill(); }*/ function drawArrow(ctx, x1,y1,x2,y2){//this drawArrow places the TIP of the triangle at x2,y2. //triangle const lineLength = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); const triangleSize = Math.min(15, lineLength/2); //cap triangle size at 50 let pos1 = [x1,y1]; let pos2 = [x2,y2]; let direction = pos2.map((x,i) => (pos2[i] - pos1[i])/lineLength); let arrowCenterPos = pos2; let lineEndPos = vecAdd(pos2, direction.map((x) => -triangleSize * x)); ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(...lineEndPos); ctx.stroke(); const negativeTriangleDirectionVec = pos2.map((x,i) => 2/2*(lineEndPos[i] - arrowCenterPos[i])); const halfTriangleDirectionPerpVec1 = [-negativeTriangleDirectionVec[1]/2,negativeTriangleDirectionVec[0]/2]; const halfTriangleDirectionPerpVec2 = [negativeTriangleDirectionVec[1]/2,-negativeTriangleDirectionVec[0]/2]; ctx.beginPath(); ctx.moveTo(...arrowCenterPos); ctx.lineTo(...vecAdd(vecAdd(arrowCenterPos,negativeTriangleDirectionVec),halfTriangleDirectionPerpVec1)); ctx.lineTo(...vecAdd(vecAdd(arrowCenterPos,negativeTriangleDirectionVec),halfTriangleDirectionPerpVec2)); ctx.lineTo(...arrowCenterPos); ctx.fill(); } 3c:T4aa,'sources in comments of this block' /* https://ultimateelectronicsbook.com/#lumped-element-model https://www.dummies.com/education/science/science-electronics/relate-the-current-and-voltage-of-a-capacitor/ https://www.facstaff.bucknell.edu/mastascu/eLessonsHTML/Circuit/Circuit1.html#Node%20Equations - how to write a computational solver for circuit equations (part of https://www.facstaff.bucknell.edu/mastascu/eLessonsHTML/EEIndex.html's Electrical Elements chapter). specifically https://www.facstaff.bucknell.edu/mastascu/eLessonsHTML/LC/Capac1.htm https://www.allaboutcircuits.com/textbook/direct-current/chpt-13/capacitors-and-calculus/ http://www.physics.usyd.edu.au/teach_res/mp/circuits/CN03.pdf (has some code) https://lpsa.swarthmore.edu/Representations/SysRepSS.html (matrix methods for linear DEs) learned: voltage and current aren't connected ( current is the derivative of CHARGE) but different elements have different V-I curves KVL: V adds to 0. KCL: i adds at a junction but can be nonzero around a loop (in fact we usually see current flow in a loop!) the diffequation adds to 0. capacitors act as first derivative for i, and integral for v inductors are derivative of i */3d:[] 2f:{"id":"c2020a31b6284d84","slug":"capacitor-calculus","title":"Capacitor Calculus","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2019-08-05T19:44:45.544Z","update_time":"$D2019-08-07T16:25:20.176Z","view_time":null,"first_public_time":"$D2019-08-05T19:46:59.247Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"dac515665f0522b2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":"starter_2024"},"version":284,"publish_version":284,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7b5deb57504c1a2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":null}],"members":[{"type":"individual","id":"f7b5deb57504c1a2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Capacitor Calculus","cells":[{"id":34,"value":"md`# Capacitor Calculus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"md`## This is very much a WIP.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`Electronics basics: if you measure voltage along a wire, the voltage at the beginning of a wire and at the end of a wire are always the same. But that's not true for everything. If you measure a capacitor, a resistor, and an inductor, they sometimes have different voltage at the start and the end. When do they have a voltage difference?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`This is a capacitor. If there's current, voltage will accumulate on the ends of each plate. Current brings electrons over time onto the plate, so the higher the current the more electrons are being added, and the less current the less electrons being added. Think of a capacitor as having a memory - its voltage depends on the _history_ of how much current there was. \n\n(Its voltage equal to the _integral_ of the current).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"tex.block`\\text{Voltage} = \\frac{1}{c} \\int_0^t \\text{Current(t) } dt`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"md`## An Interactive Capacitor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"{\n let context = DOM.context2d(width, 200)\n let obj = new Capacitor(100,100,1/10);\n let voltageGraph = new VoltageGraph(400,75, 200,100);\n let currentGraph = new CurrentGraph(400,200);\n \n let t =0\n let last_t = 0\n let current = 0\n while (true) {\n const true_t = Date.now() / 1000;\n const dt = Math.min(true_t - last_t, 1/60);\n t += dt;\n \n current = current*0.5 + 0.5* (capacitorCurrentSlider.value === undefined ? 0 : capacitorCurrentSlider.value);\n \n context.canvas.width = context.canvas.width;\n obj.update(dt, current);\n \n voltageGraph.addValue(t, obj.voltageGap);\n currentGraph.addValue(t, current);\n \n obj.draw(context)\n voltageGraph.draw(context);\n currentGraph.draw(context);\n yield context.canvas;\n last_t = true_t;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"mutable capacitorCurrentSlider = slider({\n min: -5, \n max: 5, \n step: 0.1, \n value: 0, \n title: 'Capacitor Current', \n description: 'Drag to change the current supplied to the capacitor! Can you figure out how the current affects the voltage?'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`# Resistor\nThis is a resistor. There will only be a difference in voltage when there's current. Proportional to how much current there is, in fact.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"tex.block`\\text{Voltage} = r \\text{ Current}(t)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"{\n let context = DOM.context2d(width, 200)\n let obj = new Resistor(100,100,1);\n let voltageGraph = new VoltageGraph(400,75, 200,100);\n let currentGraph = new CurrentGraph(400,200);\n \n function baseCurrent(t){\n let x = t%8;\n let baseCurrent = 0\n if(x < 2)return baseCurrent;\n if(x < 4) return (x-2)*2+baseCurrent //rise to 5\n if(x < 6)return baseCurrent+4\n return -(x-6)*2 + 4+baseCurrent //fall to 1\n }\n function forceCurrent(t){\n let current = baseCurrent(t);\n if(t%16 < 8)return current;\n return -current\n }\n \n let t =0\n let last_t = 0\n while (true) {\n \n const t = Date.now() / 1000;\n const dt = Math.min(t - last_t, 1/60);\n \n let current = forceCurrent(t*3);\n \n context.canvas.width = context.canvas.width;\n obj.update(dt, current*2.1);\n \n voltageGraph.addValue(t, obj.voltageGap);\n currentGraph.addValue(t, current);\n \n obj.draw(context)\n voltageGraph.draw(context);\n currentGraph.draw(context);\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"md`## An Interactive Resistor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"{\n let context = DOM.context2d(width, 200)\n let obj = new Resistor(100,100,1);\n let voltageGraph = new VoltageGraph(400,75, 200,100);\n let currentGraph = new CurrentGraph(400,200);\n \n let t =0\n let last_t = 0\n let current = 0\n while (true) {\n \n const t = Date.now() / 1000;\n const dt = Math.min(t - last_t, 1/60);\n \n current = current*0.5 + 0.5* (resistorCurrentSlider.value === undefined ? 0 : resistorCurrentSlider.value);\n\n \n context.canvas.width = context.canvas.width;\n obj.update(dt, current*2.1);\n \n voltageGraph.addValue(t, obj.voltageGap);\n currentGraph.addValue(t, current);\n \n obj.draw(context)\n voltageGraph.draw(context);\n currentGraph.draw(context);\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"mutable resistorCurrentSlider = slider({\n min: -5, \n max: 5, \n step: 0.01, \n value: 0, \n title: 'Resistor Current', \n description: 'Drag to change the current supplied to the resistor!'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`# Inductors\nThis is an inductor. There will be a difference in voltage across an inductor when there's a CHANGE in current. Then it'll resist the change.\n\n(The voltage across an inductor is the _derivative_ of current)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"tex.block`\\text{Voltage} = L \\frac{d\\text{ Current}(t)}{dt}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"md`## Control an Inductor's Current yourself`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"{\n let context = DOM.context2d(width, 200)\n let obj = new Inductor(150,100,1);\n let voltageGraph = new VoltageGraph(500,75, 200,100);\n let currentGraph = new CurrentGraph(500,200);\n \n voltageGraph.secondsToDisplay = currentGraph.secondsToDisplay = 1\n \n voltageGraph.maxValues = currentGraph.maxValues = 100\n \n let t =0\n let last_t = 0\n \n let current = 0\n \n while (true) {\n \n const true_t = Date.now() / 1000;\n const dt = Math.min(true_t - last_t, 1/60);\n t += dt;\n \n current = current*0.5 + 0.5* (inductorCurrentSlider.value === undefined ? 0 : inductorCurrentSlider.value);\n \n context.canvas.width = context.canvas.width;\n obj.update(dt, current*2.1);\n \n voltageGraph.addValue(t, obj.voltageGap*5); //*5 needed just for visual effects so there's no ugly dark voltages\n currentGraph.addValue(t, current);\n \n obj.draw(context)\n voltageGraph.draw(context);\n currentGraph.draw(context);\n yield context.canvas;\n last_t = true_t;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"mutable inductorCurrentSlider = slider({\n min: -5, \n max: 5, \n step: 0.1, \n value: 0, \n title: 'Inductor Current', \n description: 'Drag to change the current supplied to the inductor! Can you make a positive voltage for a few seconds?'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`# Putting It Together: Oscillator\n\nHere's the three linked together! There's both an integral and a derivative in here. The inductor resists the change in current, and the capacitor sees a change in voltage and so tries to make a current separately. \n\nHow much current is there at a certain point in time? To find out, we need to solve an equation using derivatives. That's a differential equation!\n(Click to restart).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"tex.block` \\begin{aligned}\n&\\ V_{Inductor} &+& \\ V_{Resistor} &+& \\ V_{Capacitor} &=0 \\\\\n&L \\frac{d\\text{ Current}(t)}{dt} \\ dt &+& \\ r \\text{ Current}(t) &+& \\frac{1}{c} \\int_0^t \\text{Current}(t) &= 0 \\\\\n\n% & L \\frac{d^2\\text{ Current}(t)}{dt^2} &+& \\ r \\frac{d\\text{ Current}(t)}{dt} &+& \\frac{1}{c} \\ \\text{Current}(t) &= 0 \\\\\n\n% & L \\text{ Current}''(t) &+& \\ r \\text{ Current}'(t) &+& \\frac{1}{c} \\ \\text{Current}(t) &= 0\\\\\n\n\n \\end{aligned} `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"{\n let circuit = new RLCCircuit(1);\n \n let s = new InfiniteSimulation(width,200);\n s.objects = [circuit];\n let currentGraph = new CurrentGraph(1000,100);\n \n \n //click to make more sound\n s.context.canvas.onclick = function(event){\n let x = event.layerX;\n let y = event.layerY;\n s.objects[0] = new RLCCircuit(1); //restart sim\n }\n \n while (true) {\n s.run(s)\n currentGraph.addValue(s.t, s.objects[0].current);\n s.draw(s)\n currentGraph.draw(s.context);\n //s.context.fillText(circuit.current, 50,50);\n yield s.context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`Code: graphing classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"class CurrentGraph extends RealtimeGraph{\n constructor(x,y,width,height){\n super(x,y,width,height); \n }\n draw(context){\n RealtimeGraph.prototype.draw.call(this, context);\n \n let textX = this.x - this.width/2 - 90;\n \n context.fillText(\"Current\", textX, this.y);\n drawArrow(context, textX, this.y + 20, textX + 30, this.y+20);\n \n let maxY = this.values.reduce((accumulator, currentValue)=>Math.max(accumulator, currentValue));\n let minY = this.values.reduce((accumulator, currentValue)=>Math.min(accumulator, currentValue));\n let zeroY = (0 - minY) / (maxY-minY)*this.height;\n let lastValueY = (this.values[this.values.length-1] - minY) / (maxY-minY)*this.height;\n \n let arrowY = this.y - this.height/2;\n let arrowX = this.x + this.width/2 + 20;\n \n drawArrow(context, this.x + this.width/2 + 20, zeroY + this.y - this.height/2, this.x + this.width/2 + 20, lastValueY + this.y - this.height/2);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`Code: circuit elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"function drawCircle(context, x,y,radius){\n context.beginPath();\n context.arc(x,y, radius, 0, 2 * Math.PI);\n context.fill();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"function vecAdd(a,b){\n return [a[0]+b[0],a[1]+b[1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 30:"$2f:body"