31:T140c,function newGame() { const context = DOM.context2d(width, height); const path = d3.geoPath(projection, context); path.pointRadius(6); const center = [width / 2, height / 2]; context.canvas.tabIndex = 0; context.canvas.focus(); const totalMsg = html``; const nextStopMsg = html``; const textEl = html`

${nextStopMsg} ${totalMsg}`; const noseEl = html`

★`; let C = d3.shuffle(cities.slice()); let party = 0; let total_population = d3.sum(mutable found, (d) => d.population); let population = 0; let lastNth = null; let lastPopulation = null; function render(land, nosetip, video) { if (video && !party) party = Date.now(); const t = (Date.now() - party) / 2000; const currentCity = mutable city; context.clearRect(0, 0, width, height); // context.fillStyle = "#333"; // context.fillRect(0, 0, width, height); // draw video on canvas, or ask permission if (video) { const videoScale = (0.17 * width) / video.videoWidth; // move nose star noseEl.style.left = `${ (video.videoWidth + nosetip[0]) * videoScale - 4.2 }px`; noseEl.style.top = `${nosetip[1] * videoScale - 7}px`; } context.lineWidth = 2; context.beginPath(); path(sphere); context.fillStyle = d3.interpolateSinebow(Date.now() / 100000); context.fill(); context.beginPath(); path(land); context.fillStyle = "#000"; context.fill(); context.strokeStyle = "#000"; context.beginPath(), path(sphere), context.stroke(); for (const d of mutable found) { context.beginPath(); path({ type: "Point", coordinates: [d.lng, d.lat] }); context.fillStyle = d.color; context.fill(); } context.textAlign = "center"; context.font = "bold 23px sans-serif"; const nth = mutable found.length + 1; context.strokeStyle = "black"; context.fillStyle = "white"; context.lineJoin = "round"; context.lineWidth = 3; const opacity = Math.min(d3.easeCubicIn(t), 1); context.globalAlpha = opacity; if (nth !== lastNth) { nextStopMsg.innerText = `Next stop: (#${mutable found.length + 1}) ${currentCity.city}, ${currentCity.country} for ${d3.format(",")(currentCity.population)} new friends.`; } nextStopMsg.style.opacity = opacity; const star = video ? "★" : "0PEN VIDE0 F33D TO PLAY"; context.strokeText(star, width / 2, height / 2 + 7); context.fillText(star, width / 2, height / 2 + 7); context.globalAlpha = 1; if (population < total_population) population += Math.ceil((total_population - population) / 10); if (population !== lastPopulation) { totalMsg.innerText = `Total friends found: ${d3.format(",")(population)}`; } lastPopulation = population; lastNth = nth; // uncomment to check the alignment of the start with the center // context.strokeStyle = "red"; // context.beginPath(); // context.arc(width / 2, height / 2, 10, 0, 2 * Math.PI); // context.stroke(); context.beginPath(); const radius = 2 + 10 * Math.exp(-mutable found.length / 10); path( d3.geoCircle().center([currentCity.lng, currentCity.lat]).radius(radius)() ); context.lineWidth = 4; context.strokeStyle = currentCity.color; context.stroke(); // ### WIN!!! ### if ( d3.geoDistance( [currentCity.lng, currentCity.lat], projection.invert(center) ) < (radius * Math.PI) / 180 ) { total_population += currentCity.population; party = Date.now(); mutable found.push(currentCity); mutable found = mutable found; mutable city = C.pop(); // when someone has finished the 2000 cities, start again!! if (C.length === 0) { C = d3.shuffle(cities.slice()); } if (sound) coinSound(); } if (t < 1) { makeParty(context, t, party); } } // first render render(land110, [0, 0, 0]); return Object.assign( html`

${noseEl}

${context.canvas}

${textEl}

`, { render } ); }32:T530,video = { const constrains = { qvga: { width: 320, height: 240 }, vga: { width: 640, height: 480 } }; const stream = navigator.mediaDevices ? navigator.mediaDevices.getUserMedia({ video: { deviceId: videoDevice ? { exact: videoDevice } : null, ...constrains.qvga } }) : // deprecated API new Promise((resolve, reject) => navigator.getUserMedia( { video: { deviceId: videoDevice ? { exact: videoDevice } : null }, ...constrains.qvga }, resolve, reject ) ); const video = html`

`; // video.style.visibility = "hidden"; // video.width = 160; // video.height = 100; video.style.transform = "scaleX(-1)"; yield stream.then((stream) => { if ("srcObject" in video) video.srcObject = stream; else video.src = URL.createObjectURL(stream); invalidation.then(() => { stream.getTracks().forEach((t) => t.stop()); URL.revokeObjectURL(video.src); }); return new Promise((resolve) => { video.onloadedmetadata = () => { video.style.maxWidth = `${0.17 * width}px`; chart.querySelector(".video-container").replaceChildren(video); resolve(video); }; }); }); }33:T5a4,function drag(projection) { let v0, q0, r0, a0, l; function pointer(event, that) { const t = d3.pointers(event, that); if (t.length !== l) { l = t.length; if (l > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); dragstarted.apply(that, [event, that]); } // For multitouch, average positions and compute rotation. if (l > 1) { const x = d3.mean(t, (p) => p[0]); const y = d3.mean(t, (p) => p[1]); const a = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); return [x, y, a]; } return t[0]; } function dragstarted(event) { v0 = versor.cartesian(projection.invert(pointer(event, this))); q0 = versor((r0 = projection.rotate())); } function dragged(event) { const p = pointer(event, this); const v1 = versor.cartesian(projection.rotate(r0).invert(p)); const delta = versor.delta(v0, v1); let q1 = versor.multiply(q0, delta); // For multitouch, compose with a rotation around the axis. if (p[2]) { const d = (p[2] - a0) / 2; const s = -Math.sin(d); const c = Math.sign(Math.cos(d)); q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1); } projection.rotate(versor.rotation(q1)); // In vicinity of the antipode (unstable) of q0, restart. if (delta[0] < 0.7) dragstarted.apply(this, [event, this]); } return d3.drag().on("start", dragstarted).on("drag", dragged); }34:[{"id":"efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","href":"https://static.observableusercontent.com/files/efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","name":"land-50m.json","type":"application/octet-stream","lastModified":1637394181827.838,"size":545534},{"id":"eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","href":"https://static.observableusercontent.com/files/eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","name":"land-110m.json","type":"application/octet-stream","lastModified":1637394181827.838,"size":55207},{"id":"c5a14cbbdda52de123effcf50fddbf91cdfd5d897b07023cbd7699cca16b6dfaef140dc68af0a4e39b471a31ed3ae22f2a73b3e9a2343617c35f523ed1aae5f9","href":"https://static.observableusercontent.com/files/c5a14cbbdda52de123effcf50fddbf91cdfd5d897b07023cbd7699cca16b6dfaef140dc68af0a4e39b471a31ed3ae22f2a73b3e9a2343617c35f523ed1aae5f9","name":"512216__saviraz__coins.mp3","type":"audio/mpeg","lastModified":1637622522195.808,"size":8371},{"id":"fcbd72944f86b40550e8a4e11345d83bce903e5260e2da007717d05e4f1c1039f03d733a16ca4902e096194d9fc35826ad51d7d6464a79a35cdf001d2805d527","href":"https://static.observableusercontent.com/files/fcbd72944f86b40550e8a4e11345d83bce903e5260e2da007717d05e4f1c1039f03d733a16ca4902e096194d9fc35826ad51d7d6464a79a35cdf001d2805d527","name":"allCities.csv","type":"text/csv","lastModified":1637654522050.707,"size":523368}] 2f:{"title":"The Earth-Nose-Direction game","cells":[{"id":0,"value":"# The Earth-Nose-Direction game\n\n*How many friends can you find?*","pinned":false,"hidden":false,"mode":"md"},{"id":981,"value":"chart = newGame()","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"viewof sound = Inputs.toggle({ label: \"Sound\", value: \"off\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"viewof reset = Inputs.button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof projectionName = Inputs.select(\n new Map([\n [\"🌍 Orthographic\", \"geoOrthographic\"],\n [\"🗺🗺 Mercator\", \"geoMercator\"],\n [\"🌪🌪🌪 Wiechel\", \"geoWiechel\"]\n ]),\n { label: \"difficulty level\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"share = md`## SHARE! [https://bit.ly/earth-nose-game](https://bit.ly/earth-nose-game)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"viewof multiplier = Inputs.range([1, 10], {\n label: \"sensitivity multiplier\",\n value: 3.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"viewof videoDevice = Inputs.select(new Map(devices.video))","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof pause = Inputs.toggle({ label: \"Pause\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"---\n\n*code starts below*","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"function makeParty(context, t, party) {\n context.beginPath();\n context.arc(width / 2, height / 2, t * height, 0, 2 * Math.PI);\n context.strokeStyle = d3.interpolateSinebow(30 * t);\n context.lineWidth = 30 * Math.sqrt(t);\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"mutable found = (reset, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"mutable city = (reset, cities[(Math.random() * cities.length) | 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"cities = d3\n .sort(allCities, (d) => -d.population)\n .slice(0, 2048)\n .map((d) => ((d.color = d3.interpolateSinebow(Math.random())), d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"allCities = FileAttachment(\"allCities.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"noseTip2d = predictions[0].annotations.noseTip[0] //.slice(0, 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"nosetipStart = {\n if (reset > 0) {\n viewof reset.value = 0;\n viewof reset.dispatchEvent(new Event(\"input\"));\n return noseTip2d;\n }\n return this || noseTip2d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"rotate = {\n reset;\n return [0, 0, 0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"continuousRender = {\n const diff = noseTip2d.map((d, i) => (d - nosetipStart[i]) * multiplier);\n rotate[0] += (diff[0] - rotate[0]) * 0.06;\n rotate[1] += (-diff[1] - rotate[1]) * 0.06;\n rotate[2] += (-diff[2] - rotate[2]) * 0.06;\n\n // make sure we don't crash\n if (isNaN(rotate[0] + rotate[1] + rotate[2])) {\n rotate[0] = rotate[1] = rotate[2] = 0;\n }\n\n projection.rotate(rotate);\n chart.render(land110, noseTip2d, video);\n\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"ack = md`### Acknowledgments \n\nNotebook developed and edited by:\n* [@fil](https://observablehq.com/@fil)\n* [@mootari](https://observablehq.com/@mootari/)\n* [@radames](https://observablehq.com/@radames)\n\nThanks for the fantastic feedback/ideas from all our [ambassadors](https://observablehq.com/ambassadors) friends who almost broke their noses/necks testing the notebook.\n\n##### Notes\n* [Coins Sound Credits](https://freesound.org/people/Saviraz/sounds/512216/)\n* [Face Mesh Model Card](https://drive.google.com/file/d/1VFC_wIpw4O7xBOiTgUldl79d9LA-LsnA/view)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"predictions = {\n let predictions = this || 0;\n if (pause) return yield predictions;\n while (true) {\n predictions = await predictionsGen(video).next();\n yield predictions.value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"coinSound = {\n const src = await FileAttachment(\"512216__saviraz__coins.mp3\").url();\n const audio = new Audio();\n audio.src = src;\n audio.volume = 0.3;\n function play() {\n if (!audio.paused) audio.currentTime = 0;\n audio.play();\n }\n return play;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"projection = d3[projectionName]().precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3\n .geoPath(projection.fitWidth(width, sphere))\n .bounds(sphere);\n const dy = Math.ceil(y1 - y0);\n const height = Math.min(dy, 800),\n l = Math.min(Math.ceil(x1 - x0), dy);\n projection.fitExtent(\n [\n [2, 2],\n [width - 2, height - 2]\n ],\n sphere\n );\n return height;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"land110 = FileAttachment(\"land-110m.json\").json().then(world => topojson.feature(world, world.objects.land))","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"versor = require(\"versor@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-geo-polygon@1.9\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"predictIrises_ = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"import {\n model,\n predictionsGen,\n predictIrises\n} with { predictIrises_ as predictIrises } from \"@radames/face-landmarks-detection-tensorflow-js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"devices = {\n await navigator.mediaDevices.getUserMedia({\n audio: false,\n video: true\n });\n return navigator.mediaDevices.enumerateDevices().then((devices) => {\n return {\n video: devices\n .filter((e) => e.kind === \"videoinput\")\n .map((e) => [e.label, e.deviceId])\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}

The E.N.D Game