31:T667,function onTick() { // Keep total time elapsed up to date mutable totalMsElapsed = mutable totalMsElapsed + msPerTick; const oldGasPedal = mutable gasPedal; const oldX = mutable x; const oldV = mutable v; // 1. Update pos as defined by current v mutable x = oldX + actualV * sPerTick; // 2. Update v as defined by a mutable v = Math.max(0, oldV + a * sPerTick); // 3. Update gas pedal values mutable gasPedal = desiredGasPedal; console.log(mutable gasPedal, oldGasPedal); // 4. Cruise control // 4.1 Track how long velocity has been retained if (roundV(oldV) === roundV(v)) { mutable vRetainedFor = mutable vRetainedFor + msPerTick; } else { mutable vRetainedFor = 0; } // 4.2 // Evaluate if cruise control should be turned on if ( !mutable cruiseControlIsActive && !brakePedal && // Never activate when break is used actualV >= minCruiseControlV && vRetainedFor > minCruiseControlActivationT ) { mutable cruiseControlV = actualV; mutable cruiseControlIsActive = true; } // 4.3 // Turn cruise control off when breaking if (mutable cruiseControlIsActive && brakePedal) { mutable cruiseControlIsActive = false; } // 4.4 // Turn cruise control off when user accelerates // We could compare V, but we're specifically interested in user interaction (V could increase when going downhill) if (mutable cruiseControlIsActive && mutable gasPedal > oldGasPedal) { // We must reset this counter, or CC will just be turned on in the next cycle mutable vRetainedFor = 0; // Turn CC off mutable cruiseControlIsActive = false; } }32:T5e7,aframeHtml = `

`33:T75e,PedalInput = (label, showValue) => { let value = 0; const formWidth = 200; const margin = 13; function getValue(event) { return Math.max(0, Math.min(1, (event.pageX - margin) / formWidth)); } function setValue(node, v) { node.value = v; node.dispatchEvent(new Event("input", { bubbles: true })); // Native events bubble, so we should too } // Bindings function bindOnMouseDown() { node.onmousedown = (event) => { setValue(node, getValue(event)); bindOnMove(); }; } function bindOnMouseUp() { node.onmouseup = () => { setValue(node, 0); unbindOnMove(); }; } function bindOnMove() { node.onmousemove = (event) => { setValue(node, getValue(event)); }; } function unbindOnMove() { node.onmousemove = null; } // Form const range = htl.html`

`; const output = htl.html``; const node = htl.html`

${ label || "" }

${output}

${range}

`; // Bindings bindOnMouseDown(); bindOnMouseUp(); // Update the display whenever the value changes Object.defineProperty(node, "value", { get() { return value; }, set(v) { value = v; const p = Math.round(value * 100); output.value = p || ""; range.style.width = formWidth * v + "px"; } }); node.value = value; return node; }34:[] 2f:{"title":"Vehicle Simulation: Cruise Control","cells":[{"id":0,"value":"# Vehicle Simulation: Cruise Control","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"Let's drive a car on Observable!\n\nControl the car with the gas and brake pedals. Keeping a steady speed for ${minCruiseControlActivationTSec} seconds activates cruise control when above ${toKmh(minCruiseControlV)} km/h.","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"viewof showScene = Inputs.toggle({ label: \"Render 3D scene\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"showScene && !hideScene ? html`${aframeHtml}` : md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof toggleButton = Inputs.button(\n simulationIsRunning ? \"Pause simulation\" : \"Start simulation\",\n {\n reduce() {\n simulationIsRunning ? pauseSimulation() : startSimulation();\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"\n\n\n ${Math.round(toKmh(actualV))} km/h\n\n\n minCruiseControlV ? '#666' : '#ddd'};padding: 1px 6px 0 6px;border-radius:30px;font-family:sans-serif;font-weight:bold;font-size: 0.75em;\">\n ${cruiseControlIsActive ? 'CC' : (actualV > minCruiseControlV && vRetainedFor > 2000 ? (Math.floor((minCruiseControlActivationT - vRetainedFor) / 1000) + 1) : 'CC OFF')}\n","pinned":false,"hidden":false,"mode":"html"},{"id":151,"value":"// viewof desiredGasPedal = Inputs.range([0, 1], {\n// label: \"Gas %\",\n// value: 0,\n// step: 0.01,\n// format(value) {\n// return Math.round(value * 100);\n// },\n// disabled: !!brakePedal\n// })\n\nviewof desiredGasPedal = PedalInput(\"Gas\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"// viewof brakePedal = Inputs.range([0, 1], {\n// label: \"Brake %\",\n// value: 0,\n// step: 0.01,\n// format(value) {\n// return Math.round(value * 100);\n// }\n// })\n\nviewof brakePedal = PedalInput(\"Brake\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"{\n const xDelta = 20; // Seconds on x-axis\n const sElapsed = totalMsElapsed / 1000;\n const scrollRate = 200;\n const minX = Math.max(\n 0,\n Math.round((sElapsed - xDelta) * scrollRate) / scrollRate\n );\n const maxX =\n Math.max(xDelta, Math.round(sElapsed * scrollRate) / scrollRate) + 0.1;\n\n return Plot.plot({\n width,\n height: 240,\n x: {\n domain: [minX, maxX]\n },\n y: {\n grid: true,\n domain: [0, 165]\n },\n marks: [\n Plot.line(analysis, {\n x: \"t\",\n y: ({ v }) => toKmh(v)\n }),\n Plot.line(analysis, {\n x: \"t\",\n y: ({ gas }) => Math.round(100 * gas),\n stroke: \"#ccc\"\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"Inputs.table([...analysis].splice(-40).reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1677,"value":"### Preferences","pinned":false,"hidden":false,"mode":"md"},{"id":1723,"value":"These options allow drivers to customise cruise control behavior, but you wouldn't change these while driving.","pinned":false,"hidden":false,"mode":"md"},{"id":1764,"value":"Completely disable cruise control:","pinned":false,"hidden":false,"mode":"md"},{"id":1666,"value":"viewof cruiseControlDisabled = Inputs.toggle({label: \"Disabled\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"Cruise control only activates when driving at speeds higher than this:","pinned":false,"hidden":false,"mode":"md"},{"id":1659,"value":"viewof minCruiseControlVKmh = Inputs.range([15, 100], {label: \"km/h\", value: 20, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"Keep a steady speed for this many seconds to activate cruise control.","pinned":false,"hidden":false,"mode":"md"},{"id":1731,"value":"viewof minCruiseControlActivationTSec = Inputs.range([0.5, 10], {label: \"Seconds\", step: 0.5, value: 4})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1532,"value":"# Why?","pinned":false,"hidden":false,"mode":"md"},{"id":1541,"value":"Can modern digital tools help solve problems with \"real-life\" products? Can we model better solutions in digital simulations?","pinned":false,"hidden":false,"mode":"md"},{"id":1557,"value":"tweet(\"1431643204684812294\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"We'll learn about how exactly the interaction should be turned into a solution, how we need to interpret the input and how the expected outcome should be produced.\n\nFor a car manufacturer, the cost of this type of prototyping is negligible compared to doing almost anything else.\n\nThis type of modeling is often done with more expensive tools like [Simulink](https://se.mathworks.com/products/simulink.html). These are more powerful when it comes to advanced, accurate physics simulation for example, but can be clunky and slow for creative, early-phase prototyping and have a high learning curve.","pinned":false,"hidden":false,"mode":"md"},{"id":1534,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"# Simulation logic","pinned":false,"hidden":false,"mode":"md"},{"id":1414,"value":"Reload the page to reset the simulation.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1269,"value":"# Analysis","pinned":false,"hidden":false,"mode":"md"},{"id":1518,"value":"This collects the profiling data displayed in the table at the top.","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"function getAnalysis() {\n return {\n t: totalMsElapsed / 1000,\n v: actualV,\n gas: gasPedal,\n brake: brakePedal,\n totalF: totalF,\n engineF: engineF,\n cruiseControlF: cruiseControlF,\n x,\n a,\n E\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"mutable analysis = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1134,"value":"# Cruise control","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"minCruiseControlV = cruiseControlDisabled\n ? 10000 // hack to implement disabling\n : (minCruiseControlVKmh / 3.6) // km/h -> m/s","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"minCruiseControlActivationT = minCruiseControlActivationTSec * 1000 // ms","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"mutable cruiseControlV = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"// Cruise control is turned on, but user might still have foot on gas pedal\nmutable cruiseControlIsActive = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":1464,"value":"// FIXME: This should measure/calculate the actual force to keep constant speed\n// Now it naively accelerates or breaks intermittently without this constant base force\ncruiseControlF = {\n // Maximum force for CC to use\n const maxF = 7500;\n\n // deltaV = actualV - cruiseControlV // Difference in target vs current speed\n // F = ma\n // v = s/t\n // currentA = a\n // calculate time it would take to reach a\n\n // First iteration: increase force linearly based on V\n // 180 / 3.6 / 50 = 1 -> full throttle at 180 km/h\n const multiplier = actualV / 50;\n const F = multiplier * maxF;\n\n // Only break when exceeding speed limit significantly\n if (actualV > cruiseControlV && toKmh(actualV - cruiseControlV) < 5) {\n return 0;\n }\n\n // Accelerate or decelerate\n return actualV < cruiseControlV ? F : -F;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1142,"value":"# Engine","pinned":false,"hidden":false,"mode":"md"},{"id":1444,"value":"mutable gasPedal = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"maxGasForce = 1000 * 7.5 // N","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"maxBreakForce = -(15 * 1000) // N","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"// Force produced by engine\n// FIXME: it would be more accurate to model a separate force for brakes\nengineF = {\n // Breaking (takes precedence over everything else)\n if (brakePedal) {\n return maxBreakForce * brakePedal;\n }\n\n // Cruise control looks at target speed and\n if (cruiseControlIsActive) {\n return cruiseControlF;\n }\n\n return maxGasForce * gasPedal;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1454,"value":"# Physics","pinned":false,"hidden":false,"mode":"md"},{"id":1069,"value":"g = 9.81","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"m = 800 // kg","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"mutable x = 0.0 // m","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"mutable v = 0.0 // m/s","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"mutable vRetainedFor = 0 // ms, how long current speed has been retained","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"a = totalF / m // m/s²","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"actualV = Math.max(0, v) // Braking, friction and air cannot push the car backwards","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"breakF = 0.0","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"frictionF = {\n const f = 0.075 * g * m;\n return v > 0 ? -1 * f : 0; // N\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"airF = -1 * 1 * Math.pow(actualV, 2.3) // N","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"totalF = engineF + breakF + frictionF + airF // N","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"E = 0.5 * m * Math.pow(actualV, 2) // J","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"# Simulation loop\n\nThis code sets up a loop that runs at a given time interval. This runs the actual happenings of our little simulated world.","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"msPerTick = 1000 / 40 // frames per second","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"sPerTick = msPerTick / 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mutable totalMsElapsed = 0 // Total time elapsed since beginning of simulation","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"mutable leftoverMs = 0 // How many ms was left from last tick","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"mutable simulationIsRunning = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"function onUpdate(msSinceLastFrame) {\n const isRunning = loop.isRunning();\n if (mutable simulationIsRunning != isRunning) {\n mutable simulationIsRunning = isRunning;\n }\n\n // Simulate n number of ticks (the actual simulation happens here)\n const ms = leftoverMs + msSinceLastFrame;\n const tickCount = Math.floor(ms / msPerTick);\n for (let i = 0; i < tickCount; ++i) {\n onTick(msPerTick);\n }\n\n // Store number of leftover ms that was not enough to get its own tick\n mutable leftoverMs = ms - tickCount * msPerTick;\n\n // Finally, update plots and analysis\n const maxAnalysisCount = 20 / sPerTick;\n mutable analysis = mutable analysis.concat([getAnalysis()]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"function startSimulation() {\n loop.start();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"function pauseSimulation() {\n loop.stop();\n\n mutable simulationIsRunning = loop.isRunning();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"loop.setUpdate(onUpdate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"loop = require(\"mainloop.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":745,"value":"# 3D-visualisation","pinned":false,"hidden":false,"mode":"md"},{"id":906,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"// https://aframe.io/docs/1.2.0/introduction/best-practices.html\naframe.registerComponent(\"vehicle-position\", {\n tick: function (time, timeDelta) {\n\n var position = this.position || {\n x: getVehicleX(),\n y: 0.5,\n z: -2\n };\n\n position.x = getVehicleX();\n\n this.el.setAttribute(\"position\", position);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"function getVehicleX () {\n return mutable x\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"aframeVersion = \"1.2.0\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"aframe = require(`https://aframe.io/releases/${aframeVersion}/aframe.min.js`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1858,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1854,"value":"The 3D scene won't initiate correctly on page load. It needs some time:","pinned":false,"hidden":false,"mode":"md"},{"id":1839,"value":"mutable hideScene = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"setTimeout(() => {\n mutable hideScene = false\n}, 1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1340,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":1549,"value":"import { tweet } from \"@jerryjappinen/embed\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"// Round to one km/h\nfunction roundV(v) {\n return fromKmh(Math.round(toKmh(v)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"function toKmh(mPerS) {\n return mPerS * 3.6;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1754,"value":"function fromKmh (kmh) {\n return kmh / 3.6;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1815,"value":"import { baseStyles } from \"@jerryjappinen/ui\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1816,"value":"baseStyles","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1129,"value":"## Attributions\n\n- Car model: [Lexyc16](https://sketchfab.com/3d-models/mercedes-benz-a45-amg-2018-9482f251f9c34a6e91d7777db5934cfc)\n- Ground texture:","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}