2a:null 2b:["$","title",null,{"children":"Hello Planck (with canvas or svg) | linard-y | Observable"}] 31:T85d,viewof scheduler = { const play = mybutton({value: false, image:'play'}); const pause = mybutton({value: false, image:'pause'}); const reset = mybutton({value: false, image:'redo'}); const sel = select({ options: ["SVG", "Canvas"], value: "SVG" }); const form = html`

${play} ${pause} ${reset} Rendering mode ${sel}

`; var scheduler = new Scheduler(sel.value, global); form.append( html`

Click on Play button to start !

` ); play.addEventListener('click', () => { form.value = {action : 'playing', mode: sel.value, renderer: scheduler.renderer, body: scheduler.world.m_bodyCount}; scheduler.start(); form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); pause.addEventListener('click', () => { form.value = {action : 'paused', mode: sel.value, renderer: scheduler.renderer, body: scheduler.world.m_bodyCount}; scheduler.stop(); form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); reset.addEventListener('click', () => { form.value = {action : 'stopped', mode: sel.value, renderer: scheduler.renderer, body: scheduler.world.m_bodyCount}; scheduler.stop(); scheduler.renderer.clear(); DestroyScene(scheduler.world); scheduler = new Scheduler(sel.value, global); BuildScene(scheduler.world); scheduler.draw(); form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); sel.addEventListener('change', () => { scheduler.stop(); form.value = {action : 'stopped', mode: sel.value, renderer: scheduler.renderer, body: scheduler.world.m_bodyCount}; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); reset.click(); }); reset.click(); return form; }32:Ta84,BuildScene = (world) => { let W = global.width; let H = global.height; Array.from({length: 256}, (_, i) => i).forEach(n => AddBallToScene(world, n)); const ground = world.createBody(); ground.id = 'ground'; const groundFixDef = { density : 0.0, friction : 0.6 }; ground.createFixture(planck.Edge(planck.Vec2(0, H-1), planck.Vec2(W, H-1)), groundFixDef); const globeBodyDef = {position: planck.Vec2(3*W/4-5, 0.0), bullet: true}; const globeFixDef = {friction: .2, restitution: .79, density: 2}; const globe = world.createDynamicBody(globeBodyDef); globe.id = 'globe'; globe.createFixture(planck.Circle(8.0), globeFixDef); globe.render = { svg: {f:GlobeSVG, d:'none'}, canvas: {f:GlobeCanvas, d:'none'} }; const rotator = world.createDynamicBody(planck.Vec2(W/4, H/3)); rotator.id = 'rotator'; rotator.setAngularVelocity(20); rotator.setLinearVelocity(planck.Vec2(-800, 0.0)); rotator.createFixture(planck.Polygon(Blade(0)), .5); rotator.createFixture(planck.Polygon(Blade(1)), .5); rotator.createFixture(planck.Polygon(Blade(2)), .5); rotator.createFixture(planck.Polygon(Blade(3)), .5); rotator.createFixture(planck.Polygon(Blade(4)), .5); rotator.createFixture(planck.Polygon(Blade(5)), .5); rotator.render = { style : {fill: 'steelblue'} }; const joint_rotator = world.createJoint(planck.RevoluteJoint({ motorSpeed: .25 * Math.PI, maxMotorTorque: 10000.0, enableMotor: true, lowerAngle: 0 * Math.PI, upperAngle: 2 * Math.PI, enableLimit: false, collideConnected: true }, ground, rotator, planck.Vec2(W/4, H/3))); joint_rotator.id='rotator-ground'; const platform = world.createBody({ position: planck.Vec2(3*W/4+10, 2*H/3), type: 'dynamic', bullet: true }); platform.createFixture(planck.Box(10, 0.2, planck.Vec2(-10, 0), 0.0), 2.0); platform.id='platform'; platform.render = { style : {fill: 'white', stroke:'black', lineWidth: 0.05} }; const joint_platform = world.createJoint(planck.RevoluteJoint({ lowerAngle: 0.0, upperAngle: Math.PI/4, enableLimit: true }, ground, platform, planck.Vec2(3*W/4+10, 2*H/3))); joint_platform.id = 'platform-ground'; const crateFixDef = {friction: .8, restitution: .1, density: 20, userData : 'crate'}; const crate = world.createDynamicBody(planck.Vec2(W/10, -H)); crate.createFixture(planck.Polygon([ planck.Vec2(4, 0), planck.Vec2(4, 4), planck.Vec2(0, 4), planck.Vec2(0, 0) ]), crateFixDef ); crate.id = 'crate'; crate.render = { svg: {f:AttachImageSVG, d: crate_img_url}, canvas: {f:AttachImageCanvas, d: crate_img_url} }; }33:T16f3,class CanvasRenderer { constructor(world, options = {}) { const defaultScale = 16 const defaultOptions = { scale: 16, width: width / defaultScale, height: width / defaultScale / 2, lineWidth: 2 / defaultScale, bkgrdColor: 'black', fill: 'none', stroke: { dynamic: 'floralwhite', static: 'floralwhite', kinematic: 'floralwhite' } }; this.options = Object.assign(defaultOptions, options); this.world = world; this.ctx = DOM.context2d(this.options.width*this.options.scale, this.options.height*this.options.scale); this.ctx.fillStyle = this.options.bkgrdColor; this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); this.output = this.ctx.canvas; } clear() { this.ctx.save(); this.ctx.setTransform(1, 0, 0, 1, 0, 0); this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); this.ctx.restore(); this.ctx.fillStyle = this.options.bkgrdColor; this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); } renderWorld() { this.clear(); for (let body = this.world.getBodyList(); body; body = body.getNext()) { if (body.render && body.render.hidden) { continue; } var styleOptions = { lineWidth: this.options.lineWidth, fill: this.options.fill }; if (body.isDynamic()) { styleOptions.stroke = this.options.stroke.dynamic; } else if (body.isKinematic()) { styleOptions.stroke = this.options.stroke.kinematic; } else if (body.isStatic()) { styleOptions.stroke = this.options.stroke.static; } if (body.render && body.render.style) { styleOptions = Object.assign(styleOptions, body.render.style); } StyleContext(this.ctx, styleOptions); for (let fixture = body.getFixtureList(); fixture; fixture = fixture.getNext()) { const type = fixture.getType(); const shape = fixture.getShape(); if (type === "circle") { this.drawCircle(body, shape, styleOptions);} if (type === "edge") {this.drawEdge(body, shape, styleOptions);} if (type === "polygon" | type === 'chain') {this.drawPolygon(body, shape, styleOptions);} } } for (let joint = this.world.getJointList(); joint; joint = joint.getNext()) { this.drawJoint(joint); } } buildWorld() { this.renderWorld(); } updateWorld() { // Destroy all bodies in destroy_list for (var i in this.world.destroy_list) { this.world.destroyBody(this.world.destroy_list[i]); } // Reset the array this.world.destroy_list.length = 0; } drawCircle(body, shape, options) { const pos = body.getPosition(); if (body.render && body.render.canvas) { const size = {x:shape.m_radius * 2 + options.lineWidth * 2, y: shape.m_radius * 2 + options.lineWidth * 2}; const locpos = {x: - shape.m_radius, y: - shape.m_radius}; this.ctx.save(); TransformContext(this.ctx, { scale: {x:this.options.scale, y:this.options.scale}, translate: body.getPosition(), rotate:body.getAngle() }); var res = body.render.canvas.f(this.ctx, locpos, size, body.render.canvas.d) ; this.ctx.restore(); if (res) { return; } } this.ctx.save(); TransformContext(this.ctx, { scale: {x:this.options.scale, y:this.options.scale}, translate: body.getPosition(), rotate:body.getAngle() }); StyleContext(this.ctx, options); this.ctx.beginPath(); this.ctx.arc(0, 0, shape.m_radius, 0, 2 * Math.PI); this.ctx.fill(); this.ctx.stroke(); this.ctx.restore(); } drawEdge(body, shape, options) { const pos = body.getPosition(); this.ctx.save(); TransformContext(this.ctx, { scale: {x:this.options.scale, y:this.options.scale}, translate: body.getPosition(), rotate:body.getAngle() }); StyleContext(this.ctx, options); this.ctx.beginPath(); this.ctx.moveTo(shape.m_vertex1.x, shape.m_vertex1.y); this.ctx.lineTo(shape.m_vertex2.x, shape.m_vertex2.y); this.ctx.lineCap = 'round'; this.ctx.fill(); this.ctx.stroke(); this.ctx.restore(); } drawPolygon(body, shape, options) { const pos = body.getPosition(); const vertices = shape.m_vertices; if (!vertices.length) { return;} const bb = bBox(shape.m_vertices); if (body.render && body.render.canvas) { this.ctx.save(); TransformContext(this.ctx, { scale: {x:this.options.scale, y:this.options.scale}, translate: body.getPosition(), rotate:body.getAngle() }); var res = body.render.canvas.f(this.ctx, {x:0, y:0}, {x:bb.width, y:bb.height}, body.render.canvas.d) ; this.ctx.restore(); if (res) { return; } } this.ctx.save(); TransformContext(this.ctx, { scale: {x:this.options.scale, y:this.options.scale}, translate: body.getPosition(), rotate:body.getAngle() }); StyleContext(this.ctx, options); this.ctx.beginPath(); this.ctx.moveTo(vertices[0].x, vertices[0].y); for (let i = 1; i < vertices.length; ++i) { this.ctx.lineTo(vertices[i].x, vertices[i].y);} if (vertices.length > 2) { this.ctx.closePath();} this.ctx.fill(); this.ctx.stroke(); this.ctx.restore(); } drawJoint(joint) { this.ctx.save(); this.ctx.scale(this.options.scale, this.options.scale) StyleContext(this.ctx, {stroke: 'peru', lineWidth:this.options.lineWidth}); const a = joint.getAnchorA(); const b = joint.getAnchorB(); this.ctx.beginPath(); this.ctx.moveTo(a.x, a.y); this.ctx.lineTo(b.x, b.y); this.ctx.fill(); this.ctx.stroke(); this.ctx.restore(); } }34:T16f3,class SVGRenderer { constructor(world, options = {}) { const defaultScale = 16 const defaultOptions = { scale: defaultScale, width: width / defaultScale, height: width / defaultScale / 2, lineWidth: 2 / defaultScale, bkgrdColor: 'black', fill: 'none', stroke: { dynamic: 'white', static: 'white', kinematic: 'white' } }; this.options = Object.assign(defaultOptions, options); this.world = world; this.svg = d3.select(DOM.svg(this.options.width*this.options.scale, this.options.height*this.options.scale)); this.svg.append("rect") .attr("width", this.options.width*this.options.scale) .attr("height", this.options.height*this.options.scale) .style("fill", this.options.bkgrdColor) .style("stroke", 'none'); this.output = this.svg.node(); } clear() { this.svg.selectAll("*").remove(); this.svg.append("rect") .attr("width", this.options.width*this.options.scale) .attr("height", this.options.height*this.options.scale) .style("fill", this.options.bkgrdColor) .style("stroke", 'none'); } buildWorld() { const {svg, options} = this; for (let body = this.world.getBodyList(); body; body = body.getNext()) { if (body.render && body.render.hidden) { continue; } const styleOptions = { lineWidth: this.options.lineWidth, fill: 'none' }; if (body.isDynamic()) { styleOptions.stroke = options.stroke.dynamic; } else if (body.isKinematic()) { styleOptions.stroke = options.stroke.kinematic; } else if (body.isStatic()) { styleOptions.stroke = options.stroke.static; } if (body.render && body.render.style) { Object.assign(styleOptions, body.render.style); } body.view = this.svg.selectAll('.'+ body.id + '_fixture') .data([body]) .enter().append('g') .attr('class', body.id + '_fixture') .attr('transform', (d) => 'scale(' + this.options.scale + ') translate(' + d.getPosition().x + ',' + d.getPosition().y + ') rotate(' + d.getAngle()*180/Math.PI + ')'); for ( let fixture = body.getFixtureList(); fixture; fixture = fixture.getNext()) { const type = fixture.getType(); const shape = fixture.getShape(); if (type === "circle") { this.buildCircleBody(body, shape, styleOptions); } if (type === "edge") { this.buildEdgeBody(body, shape, styleOptions); } if (type === "polygon" | type === 'chain') { this.buildPolygonBody(body, shape, styleOptions); } } } for (let joint = this.world.getJointList(); joint; joint = joint.getNext()) { const layer= this.svg.selectAll('.'+joint.id) .data([joint]) .enter().append('path') .attr('class', (d) => d.id) .attr('d', (d)=>{return 'M ' + d.getAnchorA().x + ' ' + d.getAnchorA().y + ' L ' + d.getAnchorB().x + ' ' + d.getAnchorB().y;}) .style('fill', 'none') .style('stroke', 'peru') .style("stroke-width", this.options.lineWidth) .style("stroke-linecap", "round"); } } buildCircleBody(body, shape, options) { if (body.render && body.render.svg) { const size = {x:shape.m_radius * 2 + options.lineWidth * 2, y: shape.m_radius * 2 + options.lineWidth * 2}; const pos = {x: - shape.m_radius - options.lineWidth * 2, y: - shape.m_radius - options.lineWidth * 2}; if (body.render.svg.f(body.view, pos, size, body.render.svg.d) == true) { return ;} } body.view.append('circle') .attr('r', shape.m_radius) .style('fill', options.fill) .style('stroke', options.stroke) .style("stroke-width", options.lineWidth); } buildEdgeBody(body, shape, options) { body.view.append('path') .attr('d', (d) => 'M ' + shape.m_vertex1.x + ' ' + shape.m_vertex1.y + ' L ' + shape.m_vertex2.x + ' ' + shape.m_vertex2.y) .style('fill', options.fill) .style('stroke', options.stroke) .style("stroke-width", options.lineWidth) .attr("stroke-linecap", "round"); } buildPolygonBody(body, shape, options) { const path_data = "M " + shape.m_vertices.map(v => [v.x, v.y].join(' ')).join(' L ') + " Z"; if (body.render && body.render.svg) { const bb = bBox(shape.m_vertices); if (body.render.svg.f(body.view, {x:0, y:0}, {x:bb.width, y:bb.heigth}, body.render.svg.d) == true) { return ;} } const p = body.view.append('path') .attr('d', path_data) .style('fill', options.fill) .style('stroke', options.stroke) .style("stroke-width", options.lineWidth) .attr("stroke-linecap", "round"); } renderWorld() { return; } updateWorld() { const {svg, options} = this const lw = this.options.lineWidth; // Destroy all bodies in destroy_list for (var i in this.world.destroy_list) { this.world.destroyBody(this.world.destroy_list[i]); } // Reset the array this.world.destroy_list.length = 0; for (let body = this.world.getBodyList(); body; body = body.getNext()) { this.svg.selectAll('.'+ body.id + '_fixture') .data([body]) .attr('transform', (d) => 'scale(' + this.options.scale + ') translate(' + d.getPosition().x + ',' + d.getPosition().y + ') rotate(' + d.getAngle()*180/Math.PI + ')'); } for (let joint = this.world.getJointList(); joint; joint = joint.getNext()) { this.svg.selectAll('.'+joint.id) .data([joint]) .style('fill', 'none') .style('stroke', 'black') .style("stroke-width", lw) .attr("stroke-linecap", "round"); } } }35:T75f,class Scheduler { constructor(rendereringMode, options = {}) { const defaultOptions = { fps: 60, speed: 1, }; this.options = Object.assign(defaultOptions, options); this.world = planck.World(planck.Vec2(0, 9.8), true); this.world.destroy_list = []; if (rendereringMode=='SVG') { this.renderer = new SVGRenderer(this.world, this.options); } else { this.renderer = new CanvasRenderer(this.world, this.options); } this.draw = () => this.renderer.buildWorld(); this.render = () => this.renderer.renderWorld(); this.update = () => this.renderer.updateWorld(); this.fps = 0; this.delta = 0; this.timer = null; } start() { if (this.timer) { return } const step = 1 / this.options.fps; const slomo = 1 / this.options.speed; const slowStep = slomo * step; let last = performance.now(); let dt = 0; let now; const tick = () => { now = performance.now(); dt = dt + Math.min(1, (now - last) / 1000); while (dt > slowStep) { this.world.step(step); this.update(step); dt -= slowStep; } this.delta = (now - last) / 1000 this.fps = 1 / this.delta last = now; mutable info = {frame: this.timer, fps:Math.floor(this.fps)}; this.render(); this.timer = requestAnimationFrame(tick); }; this.timer = requestAnimationFrame(tick); } stop() { if (this.timer) { mutable info = {frame: this.timer, fps:Math.floor(this.fps)}; cancelAnimationFrame(this.timer) this.timer = null } } }36:[{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1592323550252.88,"size":545534},{"id":"be55f16a89bb412e7a87acd633cc7c87c0a8dceceb1fd581943cd7e0f50abc26e9691b004bb825e7ab6ab22c3260e48f342ccaba3932a79cf9a3c8275081021b","href":"https://static.observableusercontent.com/files/be55f16a89bb412e7a87acd633cc7c87c0a8dceceb1fd581943cd7e0f50abc26e9691b004bb825e7ab6ab22c3260e48f342ccaba3932a79cf9a3c8275081021b","name":"crate.png","type":"image/png","lastModified":1592376975465.012,"size":73118}] 2e:{"id":"51b29993ff8521ca","slug":"hello-planck-with-canvas-or-svg","title":"Hello Planck (with canvas or svg)","thumbnail":"90616889b3f497ddd80ca6342258a4a7330097c5cdb0860d82ae575a681bb3da","access_level":"public","create_time":"$D2020-06-10T12:05:31.681Z","update_time":"$D2020-06-18T12:52:21.001Z","view_time":null,"first_public_time":"$D2020-06-18T12:35:39.412Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":1798,"publish_version":1798,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Hello Planck (with canvas or svg)","cells":[{"id":0,"value":"md`# Hello Planck (with canvas or svg)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"md`### Work in progress \n(mainly to do : add mouse and keyboard interactivity)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"mutable info = Object({frame: 0, fps: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"yield scheduler.renderer.output;","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`## World building functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"AddBallToScene = (world, n) => {\n let W = global.width;\n let H = global.height;\n\n const ballBodyDef = {position: planck.Vec2(randBetween(0,W), -n*randBetween(1,5)*H), bullet: true};\n const ballFixDef = {friction: .2, restitution: .09, density: 4};\n const ball = world.createDynamicBody(ballBodyDef);\n ball.id = 'ball' + n;\n ball.createFixture(planck.Circle(0.5), ballFixDef);\n ball.render = { \n style : {fill: 'white'}\n };\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"DestroyScene = (world) => {\n // Destroy all bodies\n for (let body = world.getBodyList(); body; body = body.getNext()) {\n world.destroyBody(body);\n }\n // Destroy all joints\n for (let joint = world.getJointList(); joint; joint = joint.getNext()) {\n world.destroyJoint(joint);\n }\n return world.m_bodyCount;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"function Blade(d) {\n var P0 = planck.Vec2(0.4, 0);\n var P1 = planck.Vec2(8, 1.5);\n var P2 = planck.Vec2(8, -1.5);\n var angle = 2* d * Math.PI / 6;\n\n const rotate = (v, a) => planck.Vec2(Math.cos(a) * v.x - Math.sin(a) * v.y, Math.sin(a) * v.x + Math.cos(a) * v.y);\n\n var path = [\n rotate(P0, angle),\n rotate(P1, angle),\n rotate(P2, angle)\n ];\n\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":" worldJSON = FileAttachment(\"land-50m.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"land = topojson.feature(worldJSON, worldJSON.objects.land);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"GlobeSVG = (svg, pos, size, data) => {\n // Display geo data\n const projection = d3.geoOrthographic()\n .rotate([110, -40])\n .fitWidth(Math.min(size.x,size.y), sphere)\n .precision(0.1);\n const geoPath = d3.geoPath(projection);\n const graticule = d3.geoGraticule().step([20, 20])();\n \n const g = svg.append('g').attr('transform','translate(' + pos.x + ',' + pos.y + ')');\n \n g.append(\"path\")\n .attr(\"d\", geoPath(sphere))\n .attr(\"stroke\", \"azure\")\n .attr(\"stroke-width\", \"0.1\")\n .attr(\"fill\", \"steelblue\");\n \n g.append('path')\n .attr('class', 'graticule')\n .attr(\"stroke\", \"azure\")\n .attr(\"stroke-width\", \"0.05\")\n .attr(\"d\", geoPath(graticule))\n .attr('fill', 'none');\n g.append('path')\n .attr('class', 'land')\n .attr(\"d\", geoPath(land))\n .attr('fill', 'floralwhite');\n \n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"GlobeCanvas = (ctx, pos, size, data) => {\n const projection = d3.geoOrthographic()\n .rotate([110, -40])\n .fitWidth(Math.min(size.x, size.y), sphere)\n .precision(0.1);\n\n const path = d3.geoPath(projection, ctx);\n const graticule = d3.geoGraticule().step([20, 20])();\n \n ctx.lineWidth = 0.2;\n \n ctx.save();\n ctx.translate(pos.x, pos.y);\n ctx.beginPath(), path(sphere), ctx.clip(), ctx.fillStyle = \"steelblue\", ctx.fillRect(0, 0, size.x, size.y);\n ctx.beginPath(), path(graticule), ctx.lineWidth = 0.05, ctx.strokeStyle = \"azure\", ctx.stroke();\n ctx.beginPath(), path(land), ctx.fillStyle = \"floralwhite\", ctx.fill();\n ctx.beginPath(), path(sphere), ctx.lineWidth = 0.3, ctx.strokeStyle = \"azure\", ctx.stroke();\n ctx.restore();\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"AttachImageSVG = (svg, pos, size, data) => { \n svg.append('image')\n .attr(\"xlink:href\", data )\n .attr(\"x\", pos.x)\n .attr(\"y\", pos.y)\n .attr(\"width\", size.x)\n .attr(\"height\", size.y);\n return true;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1641,"value":"AttachImageCanvas = (ctx, pos, size, data) => { \n const img = new Image();\n img.src = data;\n ctx.drawImage(img, pos.x, pos.y, size.x, size.y);\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`## Globals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"global = Object({\n width: width/10,\n height: 40,\n scale: 10,\n fps: 60,\n speed:1\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"crate_img_url = await FileAttachment('crate.png').url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"faStyle({regular: true, solid: true, brands: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`## Rendering classes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`## Imports & Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"planck = require(\"https://cdn.jsdelivr.net/gh/shakiba/planck.js/dist/planck-with-testbed.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"import {select, button, input} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"import {style as faStyle} from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"// calculate the bounding box\nbBox = (points) => {\n var maxX = Number.MIN_VALUE;\n var maxY = Number.MIN_VALUE;\n var minX = Number.MAX_VALUE;\n var minY = Number.MAX_VALUE;\n\n points.forEach(function(d) {\n if (d.x > maxX) maxX = d.x;\n if (d.y > maxY) maxY = d.y;\n if (d.x < minX) minX = d.x;\n if (d.y < minY) minY = d.y;\n })\n return {\n ul: {x: minX, y: minY},\n ur: {x: maxX, y: minY},\n lr: {x: maxX, y: maxY},\n ll: {x: minX, y: maxY},\n width: maxX - minX,\n height: maxY - minY,\n midX: (maxX - minX) / 2,\n midY: (maxY - minY) / 2\n };\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"randBetween = (min, max) => {\n const range = max - min;\n return min + range * Math.random();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"function mybutton(config = {}) {\n const {\n value = false, image, title, description, disabled\n } = typeof config === \"string\" ? {value: config} : config;\n const form = input({\n type: \"button\", title, description,\n attributes: {disabled, value},\n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1739,"value":"StyleContext = (ctx, StyleOptions) => {\n const default_options = {\n lindeWidth : 1,\n lineDash : [0],\n fill : 'none',\n stroke : 'floralwhite'\n }\n const options = Object.assign(default_options, StyleOptions);\n ctx.fillStyle = options.fill;\n ctx.strokeStyle = options.stroke;\n ctx.lineWidth = options.lineWidth; \n ctx.setLineDash(options.lineDash);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1743,"value":"TransformContext = (ctx, Transformation) => {\n ctx.scale(Transformation.scale.x, Transformation.scale.y);\n ctx.translate(Transformation.translate.x, Transformation.translate.y);\n ctx.rotate(Transformation.rotate);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"