31:[] 2f:{"title":"Het HEM","cells":[{"id":0,"value":"md`# Het HEM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`\n\n- [Beeldbank Stadsarchief](https://beeldbank.amsterdam.nl/beeldbank/indeling/grid?q_searchfield=hembrug)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`Hoogtekaart:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"svg`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"{\n synth.oscillator.partials = values\n synth.triggerAttackRelease('C4', '8n') \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"pathString = { \n const data = values.map((value, index) => [index, lineHeight - value * lineHeight])\n \n const path = d3.line()\n .curve(d3.curveNatural);\n return path(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"lineHeight = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"values = Array.from(along(pointA, pointB))\n .map(getPixel)\n .map((pixel) => chroma(`rgba(${pixel[0]}, ${pixel[1]}, ${pixel[2]}, ${pixel[3] / 255})`).luminance())","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"function *along(a, b) {\n const steps = Math.ceil(pythagoras(a, b) * resolution)\n \n const stepX = (b.x - a.x) / steps\n const stepY = (b.y - a.y) / steps\n \n let point = {\n x: a.x,\n y: a.y\n }\n \n yield point\n \n for (let i = 0; i < steps; i++) {\n point = {\n x: point.x + stepX,\n y: point.y + stepY\n }\n \n yield point\n }\n\n return\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"pythagoras = (a, b) => Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"resolution = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"getPixel = {\n const canvas = document.createElement('canvas')\n canvas.width = imgWidth\n canvas.height = imgHeight\n \n const context = canvas.getContext('2d')\n const img = new Image()\n img.onload = function() {\n context.drawImage(img, 0, 0)\n }\n img.crossOrigin = 'Anonymous'\n img.src = wmsUrl\n \n return function ({x, y}) {\n const imageData = context.getImageData(x, y, 1, 1)\n return imageData.data \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"synth = {\n const synth = new Tone.Synth().toMaster()\n invalidation.then(() => synth.dispose())\n return synth\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof pointA = point(imgWidth / 2 - 100, imgHeight / 2 - 100, {minX: 0, maxX: width, minY: 0, maxY: imgHeight, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof pointB = point(imgWidth / 2 + 100, imgHeight / 2 + 100, {minX: 0, maxX: width, minY: 0, maxY: imgHeight, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"imgWidth = 1354","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"imgHeight = 866","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"wmsUrl = `https://geodata.nationaalgeoregister.nl/ahn3/wms?&service=WMS&request=GetMap&version=1.1.1&layers=ahn3_05m_dsm&styles=&format=image%2Fpng&transparent=true&srs=EPSG%3A28992&width=1354&height=866&bbox=116674,492488,117811,493215`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"Tone = await require('tone')","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"import {point, draggable} from '@awhitty/svg-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}