31:T532,gameloop = { let n = 0; let {r, x, xSpeed, y, ySpeed} = mutable ball; function pauseBall(duration){ // create inspection function to pause the ball mutable ball = {r, x, y, xSpeed, ySpeed} return Promises.delay(duration, mutable ball) } while (true) { // make it run forever // make ball moving x = x + xSpeed; y = y + ySpeed; // make ball bouncing the wall if (x < r) { // when ball is moving left against the wall, turn ball's direction to the right xSpeed = Math.abs(xSpeed); // pause the ball for inspection yield pauseBall(3000); } if (x + r > w) { // when the ball is moving right against the wall, turn to the left xSpeed = -Math.abs(xSpeed); // pause the ball for inspection yield pauseBall(3000); } if (y < r) { ySpeed = Math.abs(ySpeed); // when the ball is moving up against the wall, turn to the bottom // pause the ball for inspection yield pauseBall(3000); } if (y + r > h) {// when the ball is moving down against the wall, turn to the top ySpeed = -Math.abs(ySpeed); // pause the ball for inspection yield pauseBall(3000); } mutable ball = {r, x, y, xSpeed, ySpeed}; yield true; } }32:[{"id":"95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","href":"https://static.observableusercontent.com/files/95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","name":"chart.png","type":"image/png","lastModified":1574699671504.71,"size":157153},{"id":"961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","href":"https://static.observableusercontent.com/files/961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","name":"chart.svg","type":"image/svg+xml","lastModified":1574699671504.71,"size":20368}] 2f:{"title":"Breakout: bounce against the walls","cells":[{"id":0,"value":"md`# Breakout: bounce against the walls\ncode along with jashkenas [youtube](https://youtu.be/Aznz6oLbuFQ)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof c = {\n var c = DOM.context2d(w, h);\n c.canvas.value = c;\n return c.canvas; // a canvas has nothing on it\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"draw = {\n gameloop; \n \n c.fillStyle=\"black\";\n c.fillRect(0,0,w,h);\n \n const {r, x, y} = mutable ball; \n \n c.beginPath();\n c.fillStyle = \"red\";\n c.arc(x, y, r, 0, 2 * Math.PI);\n c.fill();\n \n // draw bouncing wall inspection\n c.fillStyle = \"green\"\n c.font = \"15px Arial\"\n if ( x < r ) c.fillText(`x < r : ${x < r}`, x + 20, (y < h/2)? y + 20 : y - 20); // hit left wall\n if ( x + r > w ) c.fillText(`x + r > w : ${x + r > w}`, x - 120 , (y < h/2)? y + 20 : y - 20); // hit right wall\n if ( y < r ) c.fillText(`y < r : ${y < r}`, ( x < w/2) ? x + 20 : x - 80, y + 20, ); // hit top wall\n if ( y + r > h ) c.fillText(`y + r > h : ${y + r > h}`,( x < w/2) ? x + 20 : x - 80, y - 20); // hit bottom wall\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof w = slider({min:100, max: width, value: 700, step: 1, title: \"width\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof h = slider({min: 100, max: 800, value: 350, step: 1, title: \"height\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof speed = slider({min: 1, max: 50, value: 5, step: 1, title: \"speed\"}) // speed is global, cause mutable ball to react too","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"viewof scale = slider({min: 5, max: 100, value: 10, step: 1, title: \"scale\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable ball = ({r: scale, x: 0, y: 0, xSpeed: speed, ySpeed: speed}); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"videoyt(\"Aznz6oLbuFQ\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {videoyt, slider} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"FileAttachment(\"chart.svg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"FileAttachment(\"chart.png\").image()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}