30:T443,{ setTimeout(paddleDigest); // Drag interaction let prevMouseCoords; const canvasSel = d3.select(canvas); canvasSel.call(d3.drag() .on('start', ev => { mutable started = true; // Hide cursor canvasSel.style('cursor', 'none'); // (Re-)start simulation forceSim.restart(); prevMouseCoords = null; }) .on('drag', ev => { let coords = d3.pointer(ev); if (coords.every(c => c === 0)) (coords = [ev.x, ev.y]); if(!prevMouseCoords) (prevMouseCoords = coords); const deltas = coords.map((coord, idx) => (coord - prevMouseCoords[idx]) * MOUSE_SENSITIVITY); prevMouseCoords = coords; paddles.forEach(d => { const vertical = d.isVertical(), dim = vertical?'y':'x', delta = deltas[vertical?1:0], min = PADDLE_MARGIN + PADDLE_LENGTH / 2, max = ( vertical ? height : width ) - PADDLE_LENGTH / 2 - PADDLE_MARGIN; d[dim] = Math.max(min, Math.min(max, d[dim] + delta)); }); paddleDigest(); }) .on('end', () => { // Reset cursor canvasSel.style('cursor', null); }) ); }31:T487,class Paddle { constructor(pos='b', length=20, thickness=5, initX=0, initY=0) { this.pos = pos; this.length = length; this.thickness = thickness; this.x = initX; this.y = initY; } isVertical() { return this.pos === 'l' || this.pos === 'r'; } getWidth() { return this.isVertical() ? this.thickness : this.length } getHeight() { return this.isVertical() ? this.length : this.thickness } getEdgeLine() { const edge = this.thickness/2 * (this.pos === 't' || this.pos === 'l' ? 1 : -1), edges = [edge, edge], sides = [-this.length/ 2, this.length/2], vertical = this.isVertical(), xOffset = vertical?edges:sides, yOffset = vertical?sides:edges; if (this.pos === 't' || this.pos === 'r') { sides.reverse(); // Reverse line direction for flipped axis paddles (t, r) } return { from: { x: this.x + xOffset[0], y: this.y + yOffset[0] }, to: { x: this.x + xOffset[1], y: this.y + yOffset[1] } } } getEdgeFrom() { return this.getEdgeLine().from; } getEdgeTo() { return this.getEdgeLine().to; } }32:[] 2e:{"title":"Quad Pong","cells":[{"id":0,"value":"# Quad Pong\n\nA quadrilateral self-version of the [Pong](https://en.wikipedia.org/wiki/Pong) classic game.\n\nUses the [d3-force](https://github.com/d3/d3-force) simulation engine and custom forces to handle the collision and bounce between balls ([d3.forceBounce](https://github.com/vasturiano/d3-force-bounce)) and with the paddles ([d3.forceSurface](https://github.com/vasturiano/d3-force-surface)).\n\nClick-drag to control the paddles' horizontal and vertical positions. Each time a ball bounces on a paddle you get 1 point. Each time it goes off screen you lose 2 points.\n\nUse the top-left +/- buttons to add/remove balls from the system.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"

\n Balls: ${numBalls}\n ${addBallButton}\n ${removeBallButton}\n

\n\n

\n Score: ${score}\n

\n\n

Ready?

click-drag to start

\n\n ${canvas}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":74,"value":"**DOM manipulation**","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"addBallButton = {\n const but = html``;\n but.addEventListener('click', addBall);\n return but;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"removeBallButton = {\n const but = html``;\n but.addEventListener('click', removeBall);\n return but;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"canvas = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"paddleDigest = () => {\n let paddle = d3.select('g#paddlesG').selectAll('rect.paddle').data(paddles);\n\n paddle.exit().remove();\n\n paddle.merge(\n paddle.enter().append('rect')\n .classed('paddle', true)\n .attr('width', d => d.getWidth())\n .attr('height', d => d.getHeight())\n .attr('transform', d => `translate(-${d.getWidth()/2},-${d.getHeight()/2})`)\n .attr('rx', 4)\n .attr('ry', 4)\n .attr('fill', 'white')\n .attr('stroke', 'white')\n .attr('stroke-width', 0)\n )\n .attr('x', d => d.x)\n .attr('y', d => d.y);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"ballDigest = () => {\n let ball = d3.select('g#ballsG').selectAll('circle.ball').data(forceSim.nodes());\n\n ball.exit().remove();\n\n ball.merge(\n ball.enter().append('circle')\n .classed('ball', true)\n .attr('fill', 'white')\n .attr('stroke', 'white')\n .attr('stroke-width', 0)\n )\n .attr('r', d => d.r)\n .attr('cx', d => d.x)\n .attr('cy', d => d.y);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"impactDigest = () => {\n d3.selectAll('.ball, .paddle')\n\t\t.filter(d => d.impacted)\n\t\t.each(d => d.impacted = false)\n\t\t.attr('stroke-width', 3)\n\t\t\t.transition().duration(0).delay(100)\n\t\t\t\t.attr('stroke-width', 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"flashCanvas = () => d3.select('svg#canvas').style('filter', 'invert(100%)')\n\t\t.transition().duration(0).delay(40)\n\t\t\t.style('filter', null);","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"**State**","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"mutable started = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"mutable numBounces = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"mutable numOffsides = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"score = numBounces - numOffsides * OFFSIDE_POINTS_PENALTY","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"mutable numBalls = INIT_NUM_BALLS","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"addBall = () => {\n forceSim.nodes([...forceSim.nodes(), resetBallMotion()]);\n mutable numBalls = forceSim.nodes().length;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"removeBall = () => {\n forceSim.nodes(forceSim.nodes().slice(0, -1));\n mutable numBalls = forceSim.nodes().length;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"resetBallMotion = ball => {\n ball = ball || new Ball(BALL_RADIUS);\n ball.resetMotion(width / 2, height / 2, INIT_BALL_VELOCITY_RANGE);\n return ball;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"paddles = [\n new Paddle('t', PADDLE_LENGTH, PADDLE_THICKNESS, width / 2, PADDLE_MARGIN - PADDLE_THICKNESS/2),\n new Paddle('b', PADDLE_LENGTH, PADDLE_THICKNESS, width / 2, height - PADDLE_MARGIN + PADDLE_THICKNESS/2),\n new Paddle('l', PADDLE_LENGTH, PADDLE_THICKNESS, PADDLE_MARGIN - PADDLE_THICKNESS/2, height / 2),\n new Paddle('r', PADDLE_LENGTH, PADDLE_THICKNESS, width - PADDLE_MARGIN + PADDLE_THICKNESS/2, height / 2)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"**Force Simulation**","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"forceSim = d3.forceSimulation()\n .alphaDecay(0)\n .velocityDecay(0)\n .stop()","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"{ \n !forceSim.nodes().length && forceSim.nodes([...new Array(INIT_NUM_BALLS)].map(resetBallMotion))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"{ \n forceSim\n .on('tick', () => { \n impactDigest(); \n ballDigest(); \n })\n .force('paddle-bounce', d3.forceSurface()\n .surfaces(paddles)\n .elasticity(1 + BOUNCE_ACCELERATION)\n .radius(node => node.r)\n .from(paddle => paddle.getEdgeFrom())\n .to(paddle => paddle.getEdgeTo())\n .oneWay(true)\n .onImpact((ball, paddle) => {\n ball.impacted = paddle.impacted = true;\n mutable numBounces++;\n })\n )\n .force('bounce', d3.forceBounce()\n .radius(node => node.r)\n .onImpact((ball1, ball2) => { ball1.impacted = ball2.impacted = true; })\n )\n .force('off-side', () => {\n forceSim.nodes().forEach(ball => {\n if (!ball.isWithin(0, 0, width, height)) {\n resetBallMotion(ball);\n mutable numOffsides++;\n flashCanvas();\n }\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"**Settings**","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"height = (width, Math.min(580, screen.availHeight - 50))","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"PADDLE_LENGTH = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"PADDLE_THICKNESS = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"PADDLE_MARGIN = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"BALL_RADIUS = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"INIT_NUM_BALLS = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"INIT_BALL_VELOCITY_RANGE = [0.8, 1.5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"BOUNCE_ACCELERATION = 0.14","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"OFFSIDE_POINTS_PENALTY = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"MOUSE_SENSITIVITY = 3 // Paddle movement/Mouse movement (per px)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"**Components**","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"class Ball {\n constructor(radius) {\n this.r = radius;\n }\n\n resetMotion(cx=0, cy=0, velocityRange=[0.5, 1]) {\n this.x = cx;\n this.y = cy;\n\n const angle = Math.random() * 2 * Math.PI,\n velocity = Math.random() * (velocityRange[1] - velocityRange[0]) + velocityRange[0];\n this.vx = Math.cos(angle) * velocity;\n this.vy = Math.sin(angle) * velocity;\n }\n\n getBbox() {\n return {\n t: this.y - this.r,\n b: this.y + this.r,\n l: this.x - this.r,\n r: this.x + this.r\n }\n }\n\n isWithin(x, y, width, height) {\n const p = this.getBbox();\n return p.l > x && p.r < x + width && p.t > y && p.b < y + height;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"**Style**","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":4,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"d3 = require('d3@7', 'd3-force-bounce', 'd3-force-surface')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}