31:T626,{ const bp = new behavioral(); bp.x = 0; bp.y = 20; let spacing = 40; const lines = []; lines.push({ p1: { x: 0, y: 0 }, p2: { x: 100, y: 50 } }); lines.push({ p1: { x: lines[0].p1.x, y: lines[0].p1.y + spacing }, p2: { x: lines[0].p2.x, y: lines[0].p2.y + spacing } }); lines.push({ p1: lines[0].p2, p2: { x: lines[0].p2.x + 100, y: 0 } }); lines.push({ p1: { x: lines[2].p1.x, y: lines[2].p1.y + spacing }, p2: { x: lines[2].p2.x, y: lines[2].p2.y + spacing } }); lines.push({ p1: lines[2].p2, p2: { x: lines[2].p2.x + 100, y: 50 } }); lines.push({ p1: { x: lines[4].p1.x, y: lines[4].p1.y + spacing }, p2: { x: lines[4].p2.x, y: lines[4].p2.y + spacing } }); bp.lines = lines; Up && bp.addBThread('Up', 1, Up); Down && bp.addBThread('Down', 1, Down); Right && bp.addBThread('Right', 1, Right); GoRandomly && bp.addBThread('GoRandomly', 1, GoRandomly); Corridor && bp.addBThread('Corridor', 1, Corridor); bp.addBThread('Tick', 1, function*() { while (true) { requestFrame(bp, 'frame'); yield { wait: 'frame' }; } }); bp.addBThread('Restart', 1, function*() { while (true) { yield { wait: 'frame' }; if (bp.x === 500) { bp.x = 0; bp.y = 30; } } }); bp.run(); const canvasHeight = 100; const context = DOM.context2d(width, canvasHeight); tick(() => { redrawCircle(context, bp.x, canvasHeight, bp.y); lines.forEach(line => drawCorridor(context, line)); }); return context.canvas; }32:T457,md` Animations are a niche application but the programming idioms used when developing them define the next-big-leap for software development. Coding already is about maintaining and understanding complex ractive systems that are entirely unpredictable. Fields such as robotics, VR and gaming will push the complexity even further. Bthreads in my opinion provide strong theoretical foundations that might shape how we will think of software: [as a cooperation between scenarios (bthreads) rather than a well defined structure of modules](https://lmatteis.github.io/depending-less-on-structure/). Future ideas where bthreads can show great potential are complex legacy systems with lots of moving parts. Being able to incrementally add constraints and verify how the system behaves without having to deeply understand other modules has great prospective. Credits for the ideas & examples in this article come from Harel et al. research on [Animation Programming Using Behavioral Programming](http://www.wisdom.weizmann.ac.il/~harel/papers/BP_Animation.pdf). I just reimplemented them using JavaScript 😊. `33:T1c56,behavioral = { const isEmpty = function(arr) { return arr.length == 0; }; const notEmpty = function(arr) { return arr.length > 0; }; function compareBids(a, b) { return a.priority - b.priority; } function BProgram() { this.running = []; // contains bthreads this.pending = []; // contanins events this.lastEvent = undefined; this.disabled = []; // List of currently disabled elements } BProgram.prototype.addBThread = function(name, prio, fun) { var bound = fun.bind(this); var bt = bound(); // Activate the generator var bid = { name: name, priority: prio, bthread: bt }; this.running.push(bid); }; BProgram.prototype.addAll = function(bthreads, priorities) { for (var name in bthreads) { var fun = bthreads[name]; var prio = priorities[name]; this.addBThread(name, prio, fun); } }; BProgram.prototype.request = function(e) { var name = 'request ' + e; var bt = function*() { yield { request: [e], wait: [ function(x) { return true; } ] }; }; // XXX should be lowest priority (1 is highest) this.addBThread(name, 1, bt); this.run(); // Initiate super-step }; BProgram.prototype.run = function(drawFunction) { if (isEmpty(this.running)) { return; // TODO: Test end-case of empty current list } // This while-loop will run all generators inside `this.running` to their next step // effectively executing all the generators 1 step no matter what. // Then it will add each generator to `this.pending` while (notEmpty(this.running)) { var bid = this.running.shift(); var bt = bid.bthread; var next = bt.next(this.lastEvent); if (!next.done) { var newbid = next.value; // Run an iteration of the generator newbid.bthread = bt; // Bind the bthread to the bid for running later newbid.priority = bid.priority; // Keep copying the prio newbid.name = bid.name; // Keep copying the name this.pending.push(newbid); } else { // This is normal - the bthread has finished. } } // End of current step // selecteNextEvent() will iterate over `this.pending` which contains all the generators from above. // it will iterate it once to get all the `request`ed events // it will then iterate over this `request`ed list // * for each `request`ed event it will then iterate over `this.pending` again // to see if the event was blocked by something in `this.pending` // `this.lastEvent` is then populated with the `request`ed event that wasn't blocked by any other thread this.selectNextEvent(); // In this section, if an event was found that can be triggered, it will iterate and exhaust // `this.pending` which contains a list of generators that were earlier executed to their next step. // // Note that if no event is found (everything is blocked) this.pending remains intact with a list of generators. // // If a single event is found, we iterate the entire `this.pending` list. // * We look for events where request & wait match this.lastEvent. // * If this thread is found we add it back to this.running (causing the generator can go next() after) // AND we remove it from this.pending // * If this.lastEvent isn't found in request|wait we keep it inside this.pending if (this.lastEvent) { // There is an actual last event selected var temp = []; while (notEmpty(this.pending)) { bid = this.pending.shift(); var r = bid.request ? bid.request : []; // Always convert `request: 'FOO'` into `request: ['FOO']` if (!Array.isArray(r)) { r = [r]; } var w = bid.wait ? bid.wait : []; if (!Array.isArray(w)) { w = [w]; } var waitlist = r.concat(w); var cur = false; for (var i = 0; i < waitlist.length; i++) { var waiting = waitlist[i]; // Convert string `request|wait: 'FOO'` into `request|wait: { type: 'FOO'}` if (typeof waiting === 'string') { waiting = { type: waiting }; } if ( waiting.type === this.lastEvent.type || (typeof waiting === 'function' && waiting(this.lastEvent)) ) { cur = true; } } if (cur && bid.bthread) { // put into `running` all the threads that need to be resumed this.running.push(bid); } else { temp.push(bid); } } this.pending = temp; // call itself recursively until there's no event to select/trigger this.run(); } else { // Nothing was selected - end of super-step this.lastEvent = undefined; // Gotcha: null is not the same as undefined } }; BProgram.prototype.selectNextEvent = function() { var i, j, k; var candidates = []; var blockedEvents = []; var events = []; for (i = 0; i < this.pending.length; i++) { var bid = this.pending[i]; if (bid.request) { // Always convert `request: 'FOO'` into `request: ['FOO']` if (!Array.isArray(bid.request)) { bid.request = [bid.request]; } for (j = 0; j < bid.request.length; j++) { var e = bid.request[j]; // Convert string `request: 'FOO'` into `request: { type: 'FOO'}` if (typeof e === 'string') { e = { type: e }; } var c = { priority: bid.priority, event: e }; candidates.push(c); } } if (bid.block) { // Always convert `block: 'FOO'` into `block: ['FOO']` if (!Array.isArray(bid.block)) { bid.block = [bid.block]; } for (k = 0; k < bid.block.length; k++) { var blocked = bid.block[k]; // Convert string `block: 'FOO'` into `block: { type: 'FOO'}` if (typeof blocked === 'string') { blocked = { type: blocked }; } blockedEvents.push(blocked); } } } for (i = 0; i < candidates.length; i++) { var candidate = candidates[i]; var ok = true; for (j = 0; j < blockedEvents.length; j++) { var blocked = blockedEvents[j]; if ( candidate.event.type === blocked.type || (typeof blocked === 'function' && blocked(candidate.event)) ) { ok = false; break; } } if (ok) { events.push(candidate); } } if (events.length > 0) { events.sort(compareBids); this.lastEvent = events[0].event; this.lastEvent.priority = events[0].priority; } else { this.lastEvent = null; } }; BProgram.prototype.requestFrame = function(eventName, skip = 0) { let timesCalled = 0; const that = this; function init() { requestAnimationFrame(timeStamp => { if (timesCalled === skip) { that.request(eventName); } else { init(); timesCalled++; } }); } init(); }; return BProgram; }34:[] 2f:{"title":"Sculpting Animations Using Bthreads","cells":[{"id":0,"value":"md`# Sculpting Animations Using Bthreads\n\n[Bthreads](https://lmatteis.github.io/react-behavioral/) are the foundation of [Behavioral Programming](http://www.wisdom.weizmann.ac.il/~amarron/BP%20-%20CACM%20-%20Author%20version.pdf). This paradigm tries to make software-changes easier by being able to incrementally introduce a bthread that **blocks** something from happening. This is in contrast to most contemporary programming approaches where allowing/disallowing things is achieved via conditional logic (\\`if/else statements\\`).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"{\n const bp = new behavioral();\n\n bp.x = 20;\n\n Motion && bp.addBThread('', 1, Motion);\n\n bp.run();\n\n const context = DOM.context2d(width, height);\n tick(() => redrawCircle(context, bp.x, height, height / 2));\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"viewof Motion = {\n const bthread = checkbox({\n label: 'Motion',\n value: function*() {\n while (true) {\n this.requestFrame('circleFrame');\n yield { wait: 'circleFrame' };\n yield { request: 'takeStep' };\n this.x = calcNextX();\n }\n }\n });\n return bthread;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`Here we introduce a *Motion* bthread that drives changes to an *X* variable which is used to move a circle from left to right.\n\nTo illustrate how **blocking** works we can enhance the example with an obstacle depicted as a red element. Rather than conditionally altering the *Y* variable when the red element is hit, we instead introduce the following bthreads: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"viewof MoveUp = {\n const bthread = checkbox({\n label:\n 'MoveUp. This bthread constantly removes 1 unit from the circle\\'s Y axis effectively making the circle move upwards.',\n value: function*() {\n while (true) {\n yield { wait: 'frame' };\n yield { request: 'moveUp' };\n this.y = this.y - 2;\n }\n }\n });\n return bthread;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"viewof MoveDown = {\n const bthread = checkbox({\n label:\n 'MoveDown. This bthread constantly adds 1 unit to the circle\\'s Y axis.',\n value: function*() {\n while (true) {\n yield { wait: 'frame' };\n yield { request: 'moveDown' };\n this.y = this.y + 2;\n }\n }\n });\n return bthread;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"{\n const context = DOM.context2d(width, canvasHeight);\n const bp = new behavioral();\n\n bp.x = 20;\n bp.y = 0;\n\n bp.addBThread('Motion', 1, function*() {\n while (true) {\n requestFrame(bp, 'frame');\n yield { wait: 'frame' };\n bp.x = calcNextX();\n }\n });\n\n MoveUp && bp.addBThread('MoveUp', 1, MoveUp);\n MoveDown && bp.addBThread('MoveDown', 1, MoveDown);\n OvercomeObstacle && bp.addBThread('OvercomeObstacle', 1, OvercomeObstacle);\n\n bp.run();\n\n tick(() => {\n redrawCircle(context, bp.x, canvasHeight, canvasHeight / 2 + bp.y);\n drawObstacle(context);\n });\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"md`Both threads are constantly adding and removing values to the circle\\'s Y axis hence the circle remains on a straight line (they're effectively cancelling each other out).\n\n**But here is where the fun starts**. A new thread below is added *incrementally* called OvercomeObstacle that blocks either Up or Down motions when an obstacle is detected. *Remember to toggle it on/off to see the change ✅!*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"viewof OvercomeObstacle = checkbox({\n label:\n \"OvercomeObstacle. This bthread blocks a specific motion when it signals the obstacle.\",\n value: function* () {\n while (true) {\n if (touches(this.x, this.y)) {\n yield { wait: \"frame\", block: \"moveDown\" };\n } else if (this.y < 0 && !touches(this.x, this.y)) {\n yield { wait: \"frame\", block: \"moveUp\" };\n } else {\n yield { wait: \"frame\", block: [\"moveDown\", \"moveUp\"] };\n }\n }\n },\n defaultValue: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1759,"value":"md`*Try playing around by toggling threads on/off. For instance turning off OvercomeObstacle and MoveUp will cause the circle to go downwards.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"md`## Random Continuous Behaviors\n\nImagine a winding corridor, and suppose that one should get an object from one\nend of the corridor to the other. There are many known ways to get the object\nto its destination. The way of bthreads is to have the object freely move in any direction towards the destination and have another thread block a specific direction that causes it to hit the corridor. \n\nFirst we introduce threads in charge of moving the circle *randomly* towards the right. Specifically it can move in one of these 3 directions:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"viewof Up = checkbox({\n label: 'Up, constantly decrements Y.',\n value: function*() {\n while (true) {\n yield { wait: 'frame' };\n yield { request: 'Up' };\n this.y = this.y - 2;\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"viewof Down = checkbox({\n label: 'Down, constantly increments Y.',\n value: function*() {\n while (true) {\n yield { wait: 'frame' };\n yield { request: 'Down' };\n this.y = this.y + 2;\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"viewof Right = checkbox({\n label: 'Right, constantly increments X.',\n value: function*() {\n while (true) {\n yield { wait: 'frame' };\n yield { request: 'Right' };\n this.x = this.x + 2;\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"{\n const bp = new behavioral();\n let canvasHeight = 100;\n\n bp.x = 0;\n bp.y = canvasHeight / 2;\n\n Up && bp.addBThread('Up', 1, Up);\n Down && bp.addBThread('Down', 1, Down);\n Right && bp.addBThread('Right', 1, Right);\n GoRandomly && bp.addBThread('GoRandomly', 1, GoRandomly);\n\n bp.addBThread('Tick', 1, function*() {\n while (true) {\n requestFrame(bp, 'frame');\n yield { wait: 'frame' };\n }\n });\n\n bp.addBThread('Restart', 1, function*() {\n while (true) {\n yield { wait: 'frame' };\n if (bp.x === 500) {\n bp.x = 0;\n bp.y = 30;\n }\n }\n });\n bp.run();\n\n const context = DOM.context2d(width, canvasHeight);\n tick(() => redrawCircle(context, bp.x, canvasHeight, bp.y));\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"md`Another thread called **GoRandomly** is then introduced to interleave at random between these 3 directions, blocking either one or two of them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"viewof GoRandomly = checkbox({\n label: 'GoRandomly. This bthread blocks at random a direction.',\n value: function*() {\n const possibleEventsToBlock = ['Up', 'Down', ['Up', 'Down'], 'Right'];\n\n while (true) {\n const randomEventToBlock =\n possibleEventsToBlock[\n Math.floor(Math.random() * possibleEventsToBlock.length)\n ];\n yield { wait: 'frame', block: randomEventToBlock };\n }\n },\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"md`Next a **Corridor** is introduced not only graphically but also in the form of a bthread that blocks any of the three Up, Right and Down directions that collide with the corridor.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"viewof Corridor = checkbox({\n label: 'Corridor.',\n value: function*() {\n while (true) {\n yield {\n wait: 'frame',\n block: event => {\n let circle = { radius: radius };\n if (event.type === 'Up') {\n circle.x = this.x;\n circle.y = this.y - 2;\n } else if (event.type === 'Right') {\n circle.x = this.x + 2;\n circle.y = this.y;\n } else if (event.type === 'Down') {\n circle.x = this.x;\n circle.y = this.y + 2;\n }\n\n if (this.lines.find(line => collisionCircleLine(circle, line))) {\n return true;\n }\n }\n };\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1877,"value":"md`*An interesting outcome of the cooperative nature of bthreads is that toggling GoRandomly off still results in the Corridor blocking the appropriate movements resulting in a more smooth exit.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"md`## Takeaways\n\n* 🙈 Being able to block things incrementally allows us to make changes to a program (such as introducing a wall) without modifying existing code.\n* ✔ Bthreads are toggable! This makes your program more loosely coupled and allows you to load at runtime new features the user might need.\n* ⛔️ Upfront constraints! A developer could have developed the Corridor functionality even before implementing the motion functionality.\n* 🦴 Sculpt the behavior. Bthreads are encouraged to do many different things. New bthreads can then sculpt based on new intended behavior by blocking specific things.\n* ⚖️ Alignment with requirements. Bthreads are also called \"scenarios\" because they are more similar to how we specify the system than to how we implement it.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"radius = 11.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"function tick(fn) {\n let frame;\n\n (function _tick() {\n fn();\n frame = requestAnimationFrame(_tick);\n })();\n\n invalidation.then(() => cancelAnimationFrame(frame));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"function drawCorridor(ctx, line) {\n const path = new Path2D();\n path.moveTo(line.p1.x, line.p1.y);\n path.lineTo(line.p2.x, line.p2.y);\n ctx.strokeStyle = \"grey\";\n ctx.lineWidth = 1\n ctx.stroke(path);\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"// [x0,y0] to [x1,y1] define a line segment\n// [cx,cy] is circle centerpoint, cr is circle radius\nfunction collisionCircleLine(circle, line) {\n var cx = circle.x;\n var cy = circle.y;\n var cr = circle.radius;\n\n var x0 = line.p1.x;\n var y0 = line.p1.y;\n\n var x1 = line.p2.x;\n var y1 = line.p2.y;\n\n // calc delta distance: source point to line start\n var dx = cx - x0;\n var dy = cy - y0;\n\n // calc delta distance: line start to end\n var dxx = x1 - x0;\n var dyy = y1 - y0;\n\n // Calc position on line normalized between 0.00 & 1.00\n // == dot product divided by delta line distances squared\n var t = (dx * dxx + dy * dyy) / (dxx * dxx + dyy * dyy);\n\n // calc nearest pt on line\n var x = x0 + dxx * t;\n var y = y0 + dyy * t;\n\n // clamp results to being on the segment\n if (t < 0) {\n x = x0;\n y = y0;\n }\n if (t > 1) {\n x = x1;\n y = y1;\n }\n\n return (cx - x) * (cx - x) + (cy - y) * (cy - y) < cr * cr;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"// Check if rectangle a touches rectangle b\n// Each object (a and b) should have 2 properties to represent the\n// top-left corner (x1, y1) and 2 for the bottom-right corner (x2, y2).\nfunction touches(x, y, b = obstacle) {\n const a = {\n x1: x,\n y1: canvasHeight / 2 + y,\n x2: x + radius,\n y2: canvasHeight / 2 + y + radius\n };\n\n // has horizontal gap\n if (a.x1 > b.x2 || b.x1 > a.x2) return false;\n\n // has vertical gap\n if (a.y1 > b.y2 || b.y1 > a.y2) return false;\n\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"canvasHeight = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"function drawObstacle(context) {\n context.fillStyle = \"#FF0000\";\n context.fillRect(\n obstacle.x1,\n obstacle.y1,\n obstacle.x2 - obstacle.x1,\n obstacle.y2 - obstacle.y1\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"obstacle = {\n return {\n x1: width / 2,\n y1: 40,\n x2: width / 2 + 50,\n y2: 60\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"function redrawCircle(context, x, canvasHeight = height, y = 0) {\n context.clearRect(0, 0, width, canvasHeight);\n context.beginPath();\n context.arc(x, y, radius, 0, 2 * Math.PI);\n context.fillStyle = \"#000000\";\n context.fill();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"function requestFrame(bp, eventName, skip = 0) {\n let timesCalled = 0;\n\n function init() {\n requestAnimationFrame(timeStamp => {\n if (timesCalled === skip) {\n bp.request(eventName);\n } else {\n init();\n timesCalled++;\n }\n });\n }\n init();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 33","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"function calcNextX() {\n return (\n ((Math.sin(Date.now() / 1000) + 1) / 2) * (width - 2 * radius) + radius\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"function checkbox({ label = '', value = false, defaultValue = true } = {}) {\n let wrapper = html``;\n let check = html``;\n wrapper.append(check);\n wrapper.append(html`${label}` || '');\n\n check.checked = !!defaultValue;\n\n check.addEventListener('change', e => {\n wrapper.value = check.checked ? value : false;\n wrapper.dispatchEvent(new CustomEvent('input'));\n });\n\n // we need to have a starting value\n wrapper.value = check.checked ? value : false;\n\n return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}