25:null 26:["$","title",null,{"children":"Perception Illusion (part I) | Alain Roan | Observable"}] 2b:[] 29:{"id":"e2044c89ee5cf0ea","slug":"perception-illusion-part-i/2","title":"Perception Illusion (part I)","thumbnail":"02fa7dcfb0fff2cfecdd02d45621de08f1a0ac22609514a91e3f7f1d0ae33c6b","access_level":"public","create_time":"$D2019-01-02T09:19:42.405Z","update_time":"$D2019-01-02T14:13:00.852Z","view_time":null,"first_public_time":"$D2022-09-29T18:03:12.350Z","fork":{"id":"3810610548ede024","slug":"perception-illusion-part-i","title":"Perception Illusion (part I)","owner":{"id":"f8fce27399341cf5","login":"alainro","name":"Alain Roan"}},"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":620,"publish_version":620,"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":null,"type":"notebook","body":{"title":"Perception Illusion (part I)","cells":[{"id":0,"value":"md`# Perception Illusion (part I)\nThis is a well known optical illusion that I recreated with d3/canvas after discovering this Japanese [website](http://www.psy.ritsumei.ac.jp/~akitaoka/kosaku2e.html). I was amazed by the magic of the appearing/disappearing shapes and deligthed by the luminance curve which says a lot about the way our vision works. \n\nThe color area hides rectangles having the exact same color of their background. By dragging them around with mouse or finger you wont believe that their color is not changing. ***(hint: press \" Show me \" button to see them first).*** \n\nOnce visible, try to replace the shape at the location where it is perfectly hidden.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"viewof uniform = checkbox({\n options: [{ value: \"true\", label: \"Uniform color\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"md `Strangely enough, a uniform color appears like being a gradient. Try it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"viewof blackwhite = checkbox({\n options: [{ value: \"true\", label: \"Grey scale\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"viewof show = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"canvas = DOM.context2d(width, height).canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"context.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"PerceivedLuminance = {\n const svg = d3.select(DOM.svg(width, heightChart));\n \n svg.append(\"path\")\n .datum(dataDiff)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", lineD);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md` = ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"RealLuminance = {\n const svg = d3.select(DOM.svg(width, heightChart));\n \n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", line);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md` - ` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"Background = {\n const svg = d3.select(DOM.svg(width, heightChart));\n \n svg.append(\"path\")\n .datum(dataApp)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", lineL);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md `The upper section of the background (10 pixels from the top) is continously read in order to show the perceived luminance: real luminance - background luminance(10 pixels from the bottom). This curve explains nicely why we see what we see. ***(hint: try to drag the rectangles at the top of the area and see what happen).***`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"rects = [\n [250, 200, 150, 70],\n [350, 100, 150, 70],\n [450, 5, 150, 70]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"context =canvas.getContext(\"2d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"initialColor = function(rect){\n const start = getColor(context, rect[0], 10),\n stop = getColor(context, rect[0] + rect[2], 10);\n rect[4] = d3.rgb.apply(null, start).hex();\n rect[5] = d3.rgb.apply(null, stop).hex();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"grd = {\n const g = context.createLinearGradient(0,0,width,0);\n g.addColorStop(0, blackwhite ? \"black\" : d3.rgb(255,255,0)); \n g.addColorStop(1, blackwhite ? \"white\" : d3.rgb(255,0,0));\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n d3.select(canvas)\n .call(d3.drag().subject(dragsubject).on(\"drag\", dragged))\n .call(render, true);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function dragsubject() {\n var i,\n x = d3.event.x,\n y = d3.event.y,\n dx,\n dy;\n\n for (i = rects.length - 1; i >= 0; --i) {\n const r = rects[i];\n dx = x - r[0];\n dy = y - r[1];\n if (dx > 0 && dx < r[2] && dy > 0 && dy < r[3]) {\n r.x = r[0];\n r.y = r[1];\n return r;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function dragged() {\n d3.event.subject[0] = d3.event.x;\n d3.event.subject[1] = d3.event.y;\n render(true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"mutable flag = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"function render(show, reset) {\n context.clearRect(0, 0, width, height);\n context.fillStyle = grd;\n context.fillRect(0, 0, width, height);\n rects.forEach(r => draw(r, show, reset));\n context.fill();\n mutable flag = true; // Force eval\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function draw(rect, show, reset) {\n //console.log('Show', show);\n if (!rect[4] || reset) initialColor(rect);\n let g;\n if (!uniform){ // gradient\n g = context.createLinearGradient(rect[0],0,rect[0]+rect[2],0);\n g.addColorStop(0, rect[4]);\n g.addColorStop(1, rect[5]);\n }\n else { // middle point\n const c1 = d3.color(rect[4]).rgb();\n const c2 = d3.color(rect[5]).rgb();\n console.log(c1, c2);\n g = d3.rgb((c1.r + c2.r) /2, (c1.g + c2.g) /2, (c1.b + c2.b) /2).hex();\n }\n context.fillStyle = g; \n context.fillRect(rect[0], rect[1], rect[2], rect[3]); \n if (!show){\n context.strokeStyle = '#FFFFFF';\n context.strokeRect(rect[0], rect[1], rect[2], rect[3]);\n context.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"{show; // show the rectangles for a short instant \n render(false);\n d3.timeout(() => render(true), 500);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"{blackwhite; render(true, true)} // draw everything when color changes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`---\n\n## Luminance curves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"data = d3.range(nb).map(e => luminance(getColor(context, e * width/nb, 10, flag)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"dataApp = d3.range(nb).map(e => luminance(getColor(context, e * width/nb, height -10, flag)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"dataDiff = data.map((e, i) => data[i] - dataApp[i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"heightChart = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":" x = d3.scaleLinear()\n .domain([0, nb])\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(i))\n .y(d => \n d3.scaleLinear()\n .domain([0, d3.max(data, d => d)]).nice()\n .range([heightChart, 0])(d)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"lineL = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(i))\n .y(d => \n d3.scaleLinear()\n .domain([0, d3.max(dataApp)]).nice()\n .range([heightChart, 0])(d)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"lineD = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(i))\n .y(d =>\n d3.scaleLinear()\n .domain(d3.extent(dataDiff)).nice()\n .range([heightChart, 0])(d)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"nb = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"luminance = function (color) { // see wikipedia\n return 0.2126*color[0] + 0.7152*color[1] + 0.0722*color[2];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function getColor(context, x, y){\n return context.getImageData(x, y, 1, 1).data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"md`---\n\n## Misc imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"import {checkbox, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2b","stdlib":"1","titling":"auto"}} 2a:"$29:body"