2b:null 2c:["$","title",null,{"children":"Umzugskette(german) aka the bucket brigade | Johannes Mainusch | Observable"}] 31:T2793,async function* plotCanvas(id="myCanvas1",w=900, r=20) { let averageLeadTime = 0 let averageVelocity = 0 const textLine1 = () => "pacmen: "+n const textLine2 = () => "pacmen velocity: "+pacmenVelocity(particles) const textLine3 = () => "lead time: "+statistics.at(-1).leadTime.toFixed(1)+" s" const textLine4 = () => "parcel velocity: "+averageVelocity+" p/min" const radius = r const height = w/2 const minDistance= 40 const maxDistance = 60 const simulationStart = new Date() const timeSpent = () => new Date()-simulationStart const minDistance2 = minDistance * minDistance; const width = w const maxDistance2 = maxDistance * maxDistance; const radius2 = radius * radius; //const context = DOM.context2d(width, height); const context = document.getElementById(id).getContext('2d'); const yOnPath = (x) => { const x1 = width*0.25 const x2 = width*0.75 const slope = (height-radius*2)/(x2-x1) if (xx2) return height - radius return radius+(x-x1)*slope } const gaussianRand = () => { var rand = 0; for (var i = 0; i < 6; i += 1) rand += Math.random() return rand / 6; } const gaussianRandom = (start, end) => Math.floor(start + gaussianRand() * (end - start + 1)) const particles = new Array(n); for (let i = 0; i < n; i++) { const rnd = Math.random() const startVelocity = -3 + gaussianRandom(-3,3) particles[i] = { i: i, x: (i+0.5)/n * width, y: yOnPath((i+0.5)/n) * height, velocity: startVelocity, originalVelocity: startVelocity, color: "rgb(42,42,73)", hasParcel: false, rotation: 0, // 0°..180° turning: false, hasParcel: false, pickupTime: 0, jammed: 0 }; pacmen.push({"x": particles[i].x, "velocity": -particles[i].originalVelocity, "color": particles[i].color}) } const pacmenVelocity = (pa) => (pa.reduce((acc, p) => acc+=Math.abs(p.originalVelocity),0)/pa.length).toFixed(2) const goingUp = p => p.originalVelocity < 0 const goingDown = p => p.originalVelocity > 0 const upStream = (pi,pj) => pi.x < pj.x ? pi : pj const downStream = (pi,pj) => pi.x < pj.x ? pj : pi const showValInId = (val = "empty", id) => {if ( id = document.getElementById(id)) id.innerText = val} const maxVelocity = particles.reduce((acc,p) => acc = Math.abs(p.velocity) > acc ? Math.abs(p.velocity) : acc, 0) const sameDirection = (pi, pj) => (pi.originalVelocity*pj.originalVelocity > 0) const upfrontIsAtStandStill = (pi,pj) => { // if opposite direction return false if (!sameDirection(pi,pj)) return false // going up, return true is upstream(pi,pj).velocity ==0 if (goingUp(pi)) return upStream(pi,pj).velocity == 0 // opposite if (goingDown(pi)) return downStream(pi,pj).velocity == 0 // catchall return false } const handoverOrSlowdownDistance = 4*radius2 //+ maxVelocity*2 const d2 = (pi, pj) => (pi.x - pj.x)**2 + (pi.y - pj.y)**2 const touching = (pi,pj) => d2(pi,pj) <= handoverOrSlowdownDistance const p_downStream = p => (p.i < particles.length-1) ? particles[p.i+1] : particles[0] const p_upStream = p => (p.i > 0) ? particles[p.i-1] : particles[particles.length-1] const noOneAhead = p => goingDown(p) ? !touching(p_downStream(p),p) : !touching(p_upStream(p),p) const oppositeDirection = (pi, pj) => (pi.velocity*pj.velocity < 0) const oneAtStandstill = (pi,pj) => pi.velocity * pj.velocity == 0 const slowDown = (pi, pj) => { let slowVelocity = Math.abs(pi.velocity) < Math.abs(pj.velocity) ? pi.velocity : pj.velocity pi.velocity = slowVelocity pj.velocity = slowVelocity } const swapParcels = (pi, pj) => { const swap = pi.hasParcel pi.hasParcel = pj.hasParcel pj.hasParcel = swap const swapColor = pi.color pi.color = pj.color pj.color = swapColor pj.pickupTime = pi.pickupTime pj.jammed = pi.jammed if (trafficJamDownstream(pj, particles)) pj.jammed++ } const pickParcel = p => { p.hasParcel = true p.color = d3.interpolate("red", "blue")(d3.randomUniform()()) p.pickupTime = new Date() } const leadTime = p => (new Date() - p.pickupTime)/1000 const updateStatistics = (p) => { mutable statistics.push({ timestamp : timeSpent()/1000, transportedParcels: transportedParcels, parcelsPerMinute: parcelSpeed(), parcelsEnRoute: particles.reduce((acc,p) => acc += p.hasParcel ? 1:0 ,0), jammed: p.jammed / n, particlesMoving: particles.reduce((acc,p) => acc += (p.velocity != 0) ? 1:0 ,0), leadTime: leadTime(p) }) averageLeadTime = (statistics.reduce((sum,cv) => sum += cv.leadTime, 0) / statistics.length).toFixed(2) averageVelocity = parcelSpeed() // keep array at max 200 entries if (statistics.length > 200) statistics.shift() } const dropParcel = p => {p.hasParcel = false ; updateStatistics(p)} const atTop = (p) => p.x <= radius const atBottom = p => p.x >= width-radius const changeDirection = p => {p.velocity *= -1; p.originalVelocity *= -1} const ABS = x => Math.abs(x) const goToBottom = p => {p.velocity = ABS(p.velocity); p.originalVelocity = ABS(p.originalVelocity)} const goToTop = p => {p.velocity = -Math.abs(p.velocity); p.originalVelocity = -Math.abs(p.originalVelocity)} const restoreOriginalVelocity = p => p.velocity = p.originalVelocity const goForABit = p => { p.x += p.velocity; p.y = yOnPath(p.x) } const trafficJam = () => particles.reduce((acc,p) => acc || !p.turning && (p.velocity != p.originalVelocity), false) const particlesDownstream = (oPart, particles) => particles.filter (p => p.x >= oPart.x) const trafficJamDownstream = (p, partticles) => particlesDownstream(p, particles).reduce((acc,p) => acc || !p.turning && (p.velocity != p.originalVelocity), false) let transportedParcels = 0 const parcelSpeed = () => Math.round(transportedParcels / timeSpent() * 600000)/10 const drawCircularShape = (context, p) => { context.beginPath() context.arc(p.x, p.y, radius, (-0.6+p.rotation/180)*Math.PI, (0.4+p.rotation/180)* Math.PI); context.fillStyle = p.hasParcel ? p.color : "white"; context.fill() context.closePath() context.beginPath() context.arc(p.x, p.y, radius, p.rotation/180*Math.PI, (1+p.rotation/180)* Math.PI); context.fillStyle = p.hasParcel ? p.color : "white"; context.fill() context.closePath() } const upStreamHasParcel = (pi,pj) => upStream(pi,pj).hasPacel const oneOfThemIsTurning = (pi,pj) => pi.turning || pj.turning const rotate = p => { p.turning = true p.velocity = 0 p.rotation += (p.originalVelocity < 0 ) ? 10 : -10 if (goingUp(p) && p.rotation >= 120) { p.turning = false goToBottom(p) restoreOriginalVelocity(p) } if (goingDown(p) && p.rotation <= 0) { p.turning = false goToTop(p) restoreOriginalVelocity(p) } } // ------------------ while (true) { await Promises.delay(10); context.save(); context.clearRect(0, 0, width, height); showValInId(maxVelocity, "_maxVelocity") const ptext = particles.reduce((acc,p, i) => { acc += "\n"+i+": px: "+Math.round(p.x)+ "\t py: "+Math.round(p.y) acc += "\t p.velocity: "+p.velocity+" oV: "+ p.originalVelocity acc += " rotation: "+p.rotation acc += " turning: "+p.turning acc += " goingUp: "+(p.originalVelocity < 0) return acc } ,"") showValInId(ptext, "_particles") mutable trafficJam = trafficJam() showValInId(trafficJam(), "_trafficJam") showValInId(transportedParcels, "_transportedParcels") showValInId(timeSpent(), "_timeSpent") showValInId(parcelSpeed(), "_parcelSpeed") // ---------- for (let i = 0; i < n; ++i) { const p = particles[i]; // if at zero, take a parcel if (atTop(p)) { if (!p.hasParcel) pickParcel(p) rotate(p) } // if at width, drop a parcel if (atBottom(p)) { if (p.hasParcel) { dropParcel(p) transportedParcels++ } rotate(p) } // go a bit if not turning if (!p.turning) goForABit(p) // draw circular shape drawCircularShape(context, p) } let pc = "" for (let i = 0; i < n; ++i) { for (let j = i + 1; j < n; ++j) { const pi = particles[i]; const pj = particles[j]; const dx = pi.x - pj.x const dy = pi.y - pj.y const d2 = dx*dx + dy*dy // what happens if you come close to another --> draw a connecting line if (d2 < maxDistance2) { context.globalAlpha = d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 1; context.beginPath(); context.moveTo(pi.x, pi.y); context.lineTo(pj.x, pj.y); //context.strokeStyle = pi.color; context.stroke(); } // if neither edge nor other particle is near by, do not do anything pc += "\n"+i + ":"+j+" handOverD: "+handoverOrSlowdownDistance+" d2: "+d2 if ( touching(pi,pj) ){ // d2 <= handoverOrSlowdownDistance) { if (sameDirection (pi, pj) || upfrontIsAtStandStill(pi,pj)) { // traffic jam // if the other dot has the same direction, slow down to the slower speed slowDown(pi, pj) } else if (upStream(pi,pj).hasParcel && !downStream(pi,pj).hasParcel) { rotate(pi) rotate(pj) if (!pj.turning) swapParcels(pi, pj) } } } showValInId(pc, "_particleCombinations") } context.restore(); context.font="24px Courier"; context.fillStyle = "white"; context.textAlign = "left"; context.fillText(textLine1(), width/2, 20); context.fillText(textLine2(), width/2, 50); context.fillText(textLine3(), width/2, 80); context.fillText(textLine4(), width/2, 110); //context.canvas.style.background = 'rgb(245,245,255)'; yield context.canvas; } }32:[] 2f:{"id":"89e6f89db5620b73","slug":null,"title":" Umzugskette(german) aka the bucket brigade","thumbnail":"3a976cc3dd4101c2e2360011546131d23d4c01c7891784e0847c64ab048f6178","access_level":"public","create_time":"$D2024-04-21T09:51:30.506Z","update_time":"$D2024-08-23T06:47:53.508Z","view_time":null,"first_public_time":"$D2024-04-23T13:19:19.021Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ae5e0aa7324794cc","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":"starter_2024"},"version":1780,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null}],"members":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null,"role":"editor"},{"type":"team","id":"ae5e0aa7324794cc","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":" Umzugskette(german) aka the bucket brigade","cells":[{"id":1768,"value":"

Umzugskette(german) aka the bucket brigade

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1207,"value":"myCanvas = html`\n

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"viewof n = Inputs.range([1, 20], {value: 15, step: 1, label: \"number of pacmen\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"### Umzugskette(german) or the bucket brigade\nImagine, you want to move from your flat in the fourth store to another and now, you and your packman shaped helpers have the task of transporting boxes from the fourth floor into you moving van. How to do that most effectively? Presumed, your boxes are light enough for everyone (i.e. not filled to the top with books), the following rules help.\nThe rules are:\n- if you have no parcel or empty hands, go up until you meet someone with a parcel\n- take over the parcel and turn around\n- go down until you meet someone with no parcel\n- if someone in front you ist going into the same direction, just slow down, do not overtake \n- if you reach the bottom, drop your parcel (into the moving van)\n- if you reach the top, pick a parcel (until all the parcels are taken)\n\nthanks to @mbostock for this: https://observablehq.com/@mbostock/connected-particles-iii ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1545,"value":"plotCanvas(\"myCanvas1\", 900)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1457,"value":"pVelocity = plotVelocity(300)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"plotLeadtimeVsTime(300)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"plotLeadtime(300)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"plotPacmenVelocityDistribution(300)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"async function* plotVelocity(w=400) {\n //const context = document.getElementById(id).getContext('2d');\n \n while(true) {\n yield Plot.plot({\n className: \"custom-plot\", \n title: \"The speed of transports\",\n subtitle: \"in parcels per minute with \"+n+\" pacmen\"+(trafficJam?\", Traffic is jammed!\":\"\"),\n margin: 0.065*w,\n height: w/2 ,\n width: w,\n grid: true,\n color: {scheme: \"burd\"},\n \n marks: [\n Plot.ruleY([0]),\n Plot.lineY(statistics, {x: \"timestamp\", y: \"parcelsPerMinute\", stroke: \"darkblue\"})\n ]\n })\n await Promises.delay(1000);\n } \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"async function* plotLeadtimeVsTime(w=400) {\n while(true) {\n yield Plot.plot({\n className: \"custom-plot\", \n title: \"The lead time\",\n subtitle: \"in seconds per minute with \"+n+\" pacmen\"+(trafficJam?\", Traffic is jammed!\":\"\"),\n margin: 0.065*w,\n height: w/2 ,\n width: w,\n grid: true,\n color: {scheme: \"burd\"},\n \n marks: [\n Plot.ruleY([0]),\n Plot.lineY(statistics, {x: \"timestamp\", y: \"leadTime\", stroke: \"darkblue\"})\n ]\n })\n await Promises.delay(1000);\n } \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"async function* plotLeadtime(w=400) {\n while(true) {\n yield Plot.plot({\n width: w,\n className: \"custom-plot\", \n title: \"Lead times in ms\",\n subtitle: \"#times parcel was jammed\",\n margin: 0.065*w,\n grid: true,\n height: w/2 ,\n color: {legend: true},\n \n marks: [\n Plot.ruleY([0]),\n Plot.rectY(statistics, Plot.binX({y: \"count\"}, {x: \"leadTime\", fill: \"jammed\", thresholds: 30}))\n ]\n })\n await Promises.delay(1000);\n } \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"mutable statistics = [{\n timestamp : 0,\n transportedParcels: 0,\n parcelsPerMinute: 0,\n parcelsEnRoute: 0,\n jammed: 0,\n particlesMoving: 0,\n leadTime: 0,\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"mutable pacmen = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"async function* plotPacmenVelocityDistribution(w=400) {\n while(true) {\n yield Plot.plot({\n width: w,\n className: \"custom-plot\", \n title: \"pacmen velocity distribution\",\n subtitle: \"\",\n margin: 0.065*w,\n grid: true,\n height: w/2 ,\n color: {legend: true},\n \n marks: [\n Plot.ruleY([0]),\n Plot.dot(pacmen, {x: \"x\", y: \"velocity\", stroke: \"blue\"})\n ]\n })\n await Promises.delay(1000);\n } \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"mutable trafficJam= false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"\n

\n Transported Parcels: \n at a speed of parcels per minute\n

timeSpent[ms]:

max Velocity:

trafficJam:

particle combis:

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1053,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"