28:null 29:["$","title",null,{"children":"10 years of Interactive Things | Luc Guillemot | Observable"}] 2e:T661,visualization = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); // Background circles randomly positioned svg.append("g") .selectAll("g") .data(data) .join("g") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .call(g => g.append("circle") .attr("fill", (d, i) => i % 2 == 0 ? red : navy) .attr("fill-opacity", opacity) .attr("r", (d, i) => i % 2 == 0 ? big : small)); // Circles drawn along the path svg.append("g") .selectAll("g") .data(linearSamples) .join("g") .call(g => g.append("circle") .attr("cx", d => x(d[0] + d3.randomUniform(-r1, r1)())) .attr("cy", d => y(d[1] + d3.randomUniform(-r1, r1)())) .attr("fill", r1DotColor) .attr("fill-opacity", opacity) .attr("r", r1DotSize)) svg.append("g") .selectAll("g") .data(linearSamples) .join("g") .call(g => g.append("circle") .attr("cx", d => x(d[0] + d3.randomUniform(-r2, r2)())) .attr("cy", d => y(d[1] + d3.randomUniform(-r2, r2)())) .attr("fill", r2DotColor) .attr("fill-opacity", opacity) .attr("r", r2DotSize)) svg.append("g") .selectAll("g") .data(linearSamples) .join("g") .call(g => g.append("circle") .attr("cx", d => x(d[0] + d3.randomUniform(-r3, r3)())) .attr("cy", d => y(d[1] + d3.randomUniform(-r3, r3)())) .attr("fill", r3DotColor) .attr("fill-opacity", opacity) .attr("r", r3DotSize)) return svg.node(); }2f:T44c,ixtLogo = ``30:[] 2c:{"id":"4764016875865586","slug":"10-years","title":"10 years of Interactive Things","thumbnail":"be5c26620da6f6f11610133da36a7c06a9b021e840a562127272e3201f0a8a92","access_level":"public","create_time":"$D2019-07-31T11:14:02.363Z","update_time":"$D2020-06-21T09:14:40.195Z","view_time":null,"first_public_time":"$D2019-07-31T14:46:37.160Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":"starter_2024"},"version":503,"publish_version":503,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null}],"members":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"15517585ec7a69b3","slug":"experimental","title":"Experimental","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"type":"notebook","body":{"title":"10 years of Interactive Things","cells":[{"id":0,"value":"md`# 10 years of Interactive Things`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`Brand communication research for [Interactive Things 10 years anniversary](https://10.interactivethings.com/). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md`## Parameters`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`### Global parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"side = 1000 // Change here the size of the visualization (it's a square).","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"backgroundDotsNumber = 2500 // Change here the number of dots randomly positioned in the background.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"opacity = 0.8 // Change here the opacity of circles.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"red = \"#FF5555\" // This is IXT red.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"navy = \"#003B5C\" // This is IXT navy.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md`### Shape parameters\n\n\\`pathToSample\\` is the shape that you want to draw. It needs to be a single closed SVG \\`\\` element (with \\`Z\\` at the end af the \\`d\\` attribute). To position the shape correctly, it needs to be produced (in Sketch for instance) within an SVG that has the same width and height as defined in \\`side\\` above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"pathToSample = ``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"M = 400 // Change here the number of points along the path to sample: the more dots, the denser it will look!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`### Randomness parameters\nThere are three layers of circles based on ${M} dots (\\`M\\`) picked along the \\`\\` defined above. For each layers, you can tweak the parameters below.\n\nShould we use Perlin noise?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`#### First layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof r1 = slider({\n min: 1, \n max: 20, \n step: 1, \n value: 10, \n title: \"Randomness range (distance from the original shape)\", \n description: \"Integers from 1 to 20\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"\nviewof r1DotColor = color({\n value: red\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"\nviewof r1DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 2, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`#### Second layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"viewof r2 = slider({\n min: 1, \n max: 50, \n step: 1, \n value: 25, \n title: \"Randomness range\", \n description: \"Integers from 1 to 50\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"viewof r2DotColor = color({\n value: navy\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"\nviewof r2DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 3, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`#### Third layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof r3 = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 50, \n title: \"Randomness range\", \n description: \"Integers from 1 to 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"viewof r3DotColor = color({\n value: navy\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"\nviewof r3DotSize = slider({\n min: 1, \n max: 10, \n step: .2, \n value: 1, \n title: \"Dots size\", \n description: \"Integers from 1 to 10\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"shape = svg``\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"path = shape.querySelector(\"path\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// from https://observablehq.com/@mbostock/fourier-series-path-sampling\nlinearSamples = {\n const L = path.getTotalLength();\n return Array.from({length: M}, (_, i) => {\n const {x, y} = path.getPointAtLength(i / M * L);\n return [x, y];\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"width = side","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = side","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({top: 0, right: 0, bottom: 0, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"small = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"medium = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"big = 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y))\n .range([margin.top,height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"data = Array.from({length: backgroundDotsNumber}, () => ({x:Math.floor(Math.random() * side), y:Math.floor(Math.random() * side)}));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"import {color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"