30:T821,canvas = { let grid = createGrid(size.x, size.y) let ctx = DOM.context2d(size.x, size.y) let pixels = ctx.getImageData(0,0,size.x,size.y) grid[290][290] = 3000 grid[310][310] = -3000 let mouse = {pos: {x:0,y:0}, down:false, button:0, over:false} window.addEventListener('mousedown', (event) => {mouse.down = true; mouse.button = event.button; }) window.addEventListener('mouseup', (event) => {mouse.down = false}) ctx.canvas.addEventListener('mouseclick', (event) => {event.preventDefault()}) ctx.canvas.addEventListener('mousemove', (event) => {event.preventDefault();mouse.pos = mousePosition(event)}) ctx.canvas.addEventListener('mouseenter', (event) => {console.log("hello");mouse.over = true}) ctx.canvas.addEventListener('mouseleave', (event) => {mouse.over = false; console.log("leave")}) ctx.canvas.addEventListener('contextmenu', (event) => {event.preventDefault()}) let scale = new ColorTable(d3.interpolateRdBu) while(true){ //don't add heat to boundary so it stays at zero if (mouse.down && mouse.over && between(mouse.pos.x, 1, size.x - 2) && between(mouse.pos.y, 1, size.y - 2)) { if (mouse.button == 0) {grid[mouse.pos.x][mouse.pos.y] += mutable heat_rate } else if (mouse.button == 2) {grid[mouse.pos.x][mouse.pos.y] -= mutable heat_rate } } propagateHeat(grid) for (let x = 1; x < size.x; x++){ for (let y = 1; y < size.y; y++){ //let color = Math.floor(grid[x][y] * 255) let val = grid[x][y] let color = scale.color(1 - (val/2 + .5)) let offset = (((y - 1) * size.x) + ((x - 1) % size.x)) * 4 pixels.data[offset] = color.r pixels.data[offset + 1] = color.g pixels.data[offset + 2] = color.b pixels.data[offset + 3] = 255 } } ctx.putImageData(pixels, 0,0) if (mouse.over){ let temp = grid[mouse.pos.x][mouse.pos.y] ctx.font = "14px Arial" ctx.fillText("temp: " + temp.toFixed(2),10,20) } yield ctx.canvas } }31:[] 2e:{"title":"Heat Equation","cells":[{"id":0,"value":"md`# Heat Equation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md `To enable mouse interaction, open cell below this message and rerun cell (shift-enter)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"md `#### Left Click to add heat, right click to add cold`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":" heat_rate_slider = {\n var input = DOM.range(0, 100);\n input.value = mutable heat_rate;\n input.oninput = () => mutable heat_rate = Math.floor(input.valueAsNumber)\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"mutable heat_rate = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"size = {return {x:600, y:600}}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"laplace = function(grid){\n \n let result = createGrid(grid.length, grid[0].length)\n \n for (let x = 1; x < size.x-1; x++){\n for (let y = 1; y < size.y-1; y++){\n let sum = \n (grid[x][y] * -3) + \n (grid[x - 1][y] * .5) +\n (grid[x + 1][y] * .5) +\n (grid[x][y - 1] * .5) +\n (grid[x][y + 1] * .5) +\n (grid[x - 1][y - 1] * .25) +\n (grid[x + 1][y - 1] * .25) +\n (grid[x - 1][y + 1] * .25) +\n (grid[x + 1][y + 1] * .25) \n \n result[x][y] = sum/3 \n }\n }\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"propagateHeat = function(grid){ \n let delta = laplace(grid)\n let rows = grid.length\n let cols = grid[0].length\n \n for (let x = 0; x < rows; x++){\n for (let y = 0; y < cols; y++){\n grid[x][y] = grid[x][y] + delta[x][y]\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"createGrid = function(width,height){\n let arr = []\n \n for (let x = 0; x < width; x++){\n arr.push([])\n for (let y = 0; y < height; y++){\n arr[x][y] = 0\n }\n }\n \n return arr\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"//given an element and mouse event, returns cursor position reletive to element\nmousePosition = function(event){\n let bounds = event.target.getBoundingClientRect()\n let x = event.x - bounds.left \n let y = event.y - bounds.top \n \n return {x:x, y: y} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"//return true if x between a and b inclusive\nbetween = function(x,a,b){\n return (x >= a) && (x <= b)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"//precomputes a color table for a given d3 color scale, used for faster pixel based canvas rendering\nColorTable = class{\n constructor(scale){\n this.table = []\n let step = .01\n \n for (let i = 0; i < 1; i+= step){\n this.table.push(d3.color(scale(i)).rgb())\n }\n this.n = this.table.length\n }\n \n color(i){\n let index;\n if (i < 0) {return this.table[0]}\n else if (i > 1) {return this.table[this.n - 1]}\n else {\n let index = Math.floor(i * this.n)\n return this.table[index]\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}