2b:null 2c:["$","title",null,{"children":"SSVEP Layout | Chuncheng | Observable"}] 31:T5dc,{ let plt1, plt2; selectedBlock; plt1 = Plot.plot({ grid: true, x: { domain: [0, 1] }, y: { domain: [0, 1], reverse: true }, color: { legend: true, scheme: "RdBu", type: "cyclical" }, marks: [ Plot.ruleX([selectedBlock.cx]), Plot.ruleY([selectedBlock.cy]), Plot.dot(blocks, { x: "cx", y: "cy", fill: "omega", stroke: "gray", tip: true }), Plot.text(blocks, { x: "cx", y: "cy", text: "uid", dx: -10, dy: -5 }), Plot.link(blocks, { x1: "x1", y1: "y1", x2: "x2", y2: "y1" }), Plot.link(blocks, { x1: "x1", y1: "y2", x2: "x2", y2: "y2" }), Plot.link(blocks, { x1: "x1", y1: "y1", x2: "x1", y2: "y2" }), Plot.link(blocks, { x1: "x2", y1: "y1", x2: "x2", y2: "y2" }), // Plot.link([selectedBlock], { x1: "x1", y1: "y1", x2: "x2", y2: "y2" }) ] }); plt2 = Plot.plot({ grid: true, x: { nice: true }, y: { nice: true }, color: { legend: true, scheme: "RdBu", type: "cyclical" }, marks: [ Plot.dot(blocks, { x: "omega", y: "phi", fill: "uid", r: 5, tip: true }), Plot.dot(blocks, { x: "omega", y: "phi", strokd: "black", r: 5, tip: true }), Plot.text(blocks, { x: "omega", y: "phi", text: "uid", dx: -10, dy: -5 }), Plot.ruleX([selectedBlock.omega]), Plot.ruleY([selectedBlock.phi]) ] }); return htl.html`

${plt1} ${plt2}

`; }32:T428,draw = regl({ frag: ` #define PI 3.1415926 precision mediump float; uniform float seconds; varying float vomega, vphi; void main () { // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); float omega = vomega; float phi = vphi; gl_FragColor = vec4(vec3(cos(seconds*omega*2.0*PI + phi)*0.5+0.5), 1.0); }`, vert: ` precision mediump float; attribute vec3 position; attribute float omega, phi; varying float vomega, vphi; void main () { vomega = omega; vphi = phi; // Linear (0, 1) -> (1, -1) vec3 p = position; p.y = 1.0 - p.y; gl_Position = vec4(p * 2.0 - 1.0, 1.0); }`, attributes: { position: model.positions, omega: model.omegas, phi: model.phis }, uniforms: { seconds: regl.prop("seconds") }, elements: model.cells, blend: { enable: true, func: { srcRGB: "src alpha", srcAlpha: 1, dstRGB: "one minus src alpha", dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" } } })33:[] 2f:{"id":"803b23c2e5bb59b6","slug":"ssvep-layout","title":"SSVEP Layout","thumbnail":"fc11a83b6124374c6c408ac61c3070b8956fbc8624a8f53ba7257c587cdc0bec","access_level":"public","create_time":"$D2024-05-06T02:13:26.381Z","update_time":"$D2024-07-24T02:58:16.658Z","view_time":null,"first_public_time":"$D2024-05-06T02:13:26.381Z","fork":{"id":"ab682d19bec9f569","slug":"regl","title":"Regl","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":903,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"},{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SSVEP Layout","cells":[{"id":0,"value":"# SSVEP Layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"viewof layoutOption = Inputs.form({\n nx: Inputs.range([3, 10], { label: \"Nx\", step: 1 }),\n ny: Inputs.range([3, 10], { label: \"Ny\", step: 1 }),\n width: Inputs.range([0.05, 0.1], { label: \"Width\", step: 0.01 }),\n height: Inputs.range([0.05, 0.1], { label: \"Height\", step: 0.01 }),\n maxOmega: Inputs.range([20, 40], { label: \"Max omega\", step: 0.1 }),\n minOmega: Inputs.range([10, 20], { label: \"Min omega\", step: 0.1 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"viewof selectBlock = Inputs.select(\n blocks.map((d) => d.uid),\n { label: \"Select block\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"viewof selectedBlockOption = Inputs.form({\n omega: Inputs.range([layoutOption.minOmega, layoutOption.maxOmega], {\n label: \"Omega\",\n value: blocks[selectedBlockIdx].omega\n }),\n phi: Inputs.range([0, 2 * Math.PI], {\n label: \"Phi\",\n value: blocks[selectedBlockIdx].phi\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"viewof timeSlower = Inputs.range([1, 100], {\n label: \"Time slower x times\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"viewof showLabel = Inputs.toggle({ label: \"Show label\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"{\n let seconds = getSeconds() / timeSlower,\n omega = 2,\n phi = 1,\n c = d3.color(color);\n\n // regl.clear({ color: [0, 0.1, 0.26, 1] });\n regl.clear({ color: [c.r / 255, c.g / 255, c.b / 255, 1] });\n // regl.clear({ color });\n\n draw({ seconds });\n\n statsMonitor.update();\n\n yield htl.html`\nSecond: ${seconds.toFixed(2)}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"htl.html`\n

\n ${SSVEPCanvas}\n\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"viewof color = Inputs.color({ label: \"Background color\", value: \"#001a42\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"statsMonitor.dom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"SSVEPCanvas = DOM.canvas(width, (width * 9) / 16)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"abc","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":761,"value":"{\n selectedBlockOption;\n\n let canvas = document.getElementById(\"canvas-2\"),\n { width, height } = canvas,\n ctx = canvas.getContext(\"2d\");\n\n ctx.clearRect(0, 0, width, height);\n\n if (showLabel) {\n blocks.map((d, i) => {\n let { x1, y1, x2, y2, cx, cy, omega, phi, uid } = d;\n\n ctx.font = \"italic 16px Courier\";\n ctx.textAlign = \"center\";\n ctx.fillStyle = \"yellow\";\n\n ctx.textBaseline = \"bottom\";\n ctx.fillText(`W: ${omega.toFixed(2)}`, cx * width, y1 * height);\n\n ctx.textBaseline = \"top\";\n ctx.fillText(`P: ${phi.toFixed(2)}`, cx * width, y2 * height);\n\n ctx.font = \"24px Bold\";\n ctx.textBaseline = \"middle\";\n ctx.strokeStyle = \"red\";\n ctx.fillStyle = color;\n ctx.fillText(`${uid}`, cx * width, cy * height);\n ctx.strokeText(`${uid}`, cx * width, cy * height);\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"framebuffer = {\n let { width, height } = SSVEPCanvas,\n data = Array(width * height * 4)\n .fill(0)\n .map(() => 0),\n texture = regl.texture({\n type: \"float\",\n width,\n height,\n data\n });\n\n return regl.framebuffer({ color: texture, depthStencil: false });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"tic = new Date().getTime() / 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"getSeconds = () => {\n let seconds = now / 1000;\n seconds -= tic;\n return seconds;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"model = {\n selectedBlock;\n\n let cells = [],\n positions = [],\n omegas = [],\n phis = [];\n\n blocks.map((d) => {\n let { x1, x2, y1, y2, omega, phi } = d;\n positions.push([x1, y1, 0]);\n positions.push([x1, y2, 0]);\n positions.push([x2, y2, 0]);\n positions.push([x2, y1, 0]);\n\n for (let i = 0; i < 4; ++i) {\n omegas.push(omega);\n phis.push(phi);\n }\n\n let n = positions.length - 4;\n cells.push([n, n + 1, n + 2]);\n cells.push([n + 2, n + 3, n]);\n });\n\n return { cells, positions, omegas, phis };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"selectedBlockIdx = blocks.findIndex((d) => d.uid === selectBlock)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"selectedBlock = {\n let { omega, phi } = selectedBlockOption;\n\n Object.assign(blocks[selectedBlockIdx], { omega, phi });\n\n return blocks[selectedBlockIdx];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"blocks = {\n let { nx, ny, width, height, minOmega, maxOmega } = layoutOption,\n scaleCx = d3.scaleLinear().domain([-1, nx]).range([0, 1]),\n scaleCy = d3.scaleLinear().domain([-1, ny]).range([0, 1]),\n rndOmega = d3.randomUniform(minOmega, maxOmega),\n rndPhi = d3.randomUniform(0, 2 * Math.PI),\n uid = 1;\n\n let blocks = [],\n cx,\n cy;\n\n for (let i = 0; i < nx; ++i) {\n for (let j = 0; j < ny; ++j) {\n cx = scaleCx(i);\n cy = scaleCy(j);\n blocks.push({\n uid,\n cx: cx,\n cy: cy,\n x1: cx - width / 2,\n y1: cy - height / 2,\n x2: cx + width / 2,\n y2: cy + height / 2,\n omega: rndOmega(),\n phi: rndPhi()\n });\n uid += 1;\n }\n }\n\n return blocks;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"blocks","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"bunny = (await import(\"https://cdn.skypack.dev/bunny@1.0.1\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"normals = (await import(\"https://cdn.skypack.dev/angle-normals@1.0.0\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"regl = (await import(\"https://cdn.skypack.dev/regl@2\")).default({\n canvas: SSVEPCanvas,\n pixelRatio: 1.0,\n extensions: [\"oes_standard_derivatives\", \"oes_texture_float\"],\n attributes: { antialias: true }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"reglCamera = (await import(\"https://cdn.skypack.dev/regl-camera@2.1.1\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"statsMonitor = {\n const stats = new Stats(),\n { dom } = stats;\n dom.style.position = \"relative\";\n\n return stats;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"Stats = require(\"https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"