2b:null 2c:["$","title",null,{"children":"Perception Illusion (part III) | Alain Roan | Observable"}] 31:T74f,mutable images= [{"file": "https://gist.githubusercontent.com/AlainRo/e3423d22c3747ded4c6e03dc1685e371/raw/dcb4720f404a5ef166cfb6367230298a5b53ee03/Empty.png", "timer": 0, "title": "Blank"}, {"file":"https://gist.githubusercontent.com/AlainRo/e3423d22c3747ded4c6e03dc1685e371/raw/692b92486cdd9c89aef3e8c14d4c85bc2bbffd47/Capture%2520d%25E2%2580%2599%25C3%25A9cran%25202019-02-16%2520%25C3%25A0%252010.01.29.png", "timer": 50, "title": "Same shape, different color"}, {"file":"https://gist.githubusercontent.com/AlainRo/e3423d22c3747ded4c6e03dc1685e371/raw/dcb4720f404a5ef166cfb6367230298a5b53ee03/Capture%2520d%25E2%2580%2599%25C3%25A9cran%25202019-02-16%2520%25C3%25A0%252010.01.42.png", "timer": 50,"title": "Different shape, different color"}, {"file":"https://gist.githubusercontent.com/AlainRo/e3423d22c3747ded4c6e03dc1685e371/raw/dcb4720f404a5ef166cfb6367230298a5b53ee03/Capture%2520d%25E2%2580%2599%25C3%25A9cran%25202019-02-16%2520%25C3%25A0%252010.02.28.png", "timer": 50, "title": "Different shape, different color"}, {"file":"https://gist.githubusercontent.com/AlainRo/e3423d22c3747ded4c6e03dc1685e371/raw/dcb4720f404a5ef166cfb6367230298a5b53ee03/Capture%2520d%25E2%2580%2599%25C3%25A9cran%25202019-02-16%2520%25C3%25A0%252010.02.40.png", "timer": 100, title: "Different shape, different color"}, {"file":"https://gist.githubusercontent.com/AlainRo/e3423d22c3747ded4c6e03dc1685e371/raw/dcb4720f404a5ef166cfb6367230298a5b53ee03/Capture%2520d%25E2%2580%2599%25C3%25A9cran%25202019-02-16%2520%25C3%25A0%252010.02.55.png", "timer": 100, "title": "Different shape, different color"}, {"file":"https://gist.githubusercontent.com/AlainRo/e3423d22c3747ded4c6e03dc1685e371/raw/dcb4720f404a5ef166cfb6367230298a5b53ee03/Capture%2520d%25E2%2580%2599%25C3%25A9cran%25202019-02-16%2520%25C3%25A0%252010.03.08.png", "timer": 100, "title": "Different shape, different color"}]32:[] 2f:{"id":"9b2c89230a042344","slug":"perception-illusion-part-iii","title":"Perception Illusion (part III)","thumbnail":"89c3c057c211bb003203ee1ca95285320080d06b268555e4f28a159d06a95cbc","access_level":"public","create_time":"$D2019-02-17T16:08:18.721Z","update_time":"$D2022-09-12T09:03:16.072Z","view_time":null,"first_public_time":"$D2019-11-06T16:30:05.954Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f8fce27399341cf5","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":"starter_2024"},"version":325,"publish_version":325,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null}],"members":[{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"38b69149df7452a7","slug":"illusions","title":"Illusions","owner":{"id":"f8fce27399341cf5","login":"alainro","name":"Alain Roan"}},"type":"notebook","body":{"title":"Perception Illusion (part III)","cells":[{"id":0,"value":"md`# Perception Illusion (part III)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`This is an experiment about perception time of variations around color, shape, size, ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Different Color, same shape` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"{const form = html``;\n form.inc.onclick = () => {\n putImg('#reddot1', images[1].file);\n d3.timeout(() => putImg('#reddot1', images[0].file), images[1].timer);\n mutable images[1].timer = images[1].timer + 100;\n d3.select('#id1').text(images[1].timer);\n };\n form.init.onclick = () => {\n mutable images[1].timer = 50;\n d3.select('#id1').text(images[1].timer);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`## Color and shape`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"{const form = html``;\n form.inc.onclick = () => {\n putImg('#reddot2', images[2].file);\n d3.timeout(() => putImg('#reddot2', images[0].file), images[2].timer);\n mutable images[2].timer = images[2].timer + 100;\n d3.select('#id2').text(images[2].timer);\n };\n form.init.onclick = () => {\n mutable images[2].timer = 100;\n d3.select('#id2').text(images[2].timer);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`## Shape`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"{const form = html``;\n form.inc.onclick = () => {\n putImg('#reddot3', images[3].file);\n d3.timeout(() => putImg('#reddot3', images[0].file), images[3].timer);\n mutable images[3].timer = images[3].timer + 100;\n d3.select('#id3').text(images[3].timer);\n };\n form.init.onclick = () => {\n mutable images[3].timer = 100;\n d3.select('#id3').text(images[3].timer);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`## Shape same color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"{const form = html``;\n form.inc.onclick = () => {\n putImg('#reddot4', images[4].file);\n d3.timeout(() => putImg('#reddot4', images[0].file), images[4].timer);\n mutable images[4].timer = images[4].timer + 100;\n d3.select('#id4').text(images[4].timer);\n };\n form.init.onclick = () => {\n mutable images[4].timer = 100;\n d3.select('#id4').text(images[4].timer);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md`## Synthesis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"Summary = {\n compute;\n const el = html``\n const data = images;\n \n const x = d3.scaleLinear()\n .domain(d3.extent(data.map(e => e.timer)))\n .range([0, 400])\n \n const diag = d3.select(el)\n .selectAll('rect')\n .data(data)\n .enter();\n \n diag\n .append('rect')\n .attr('x', 250)\n .attr('y', (d, i) => i * 200/5)\n .attr('width', d => x(d.timer))\n .attr('height', 200/5 -5)\n .attr('fill', 'gold');\n \n diag\n .append('text')\n .attr('x', 0)\n .attr('y', (d, i) => i * 200/5 + 20)\n .text(d => d.title);\n \n return html` ${el} `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof compute = button({value: \"Compute synthesis\", description:\"When you have finished\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`### Misc. imports and definitions` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"function incTimer(img, index) {\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function putImg(img, src){ \n d3.select(img).attr('src',src);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"