31:[] 2f:{"title":"The Sine Map","cells":[{"id":230,"value":"md`\n# The Sine Map\n${html`

An experiment in iterated chaos

`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`\n One day, I was messing around with recurrence relations in Grapher (you know, like a normal person), and I stumbled across the following function:\n${tex.block`\n\\begin{aligned}\n x_{n+1} &= \\sin(k(y_n + x_n))\\\\\n y_{n+1} &= \\sin(k(y_n - x_n))\n\\end{aligned}\n`}\nIt seems to have two different \"modes\": the first mode, shown below on the left, occurs when the starting coordinate is either on an axis (*x* or *y* = 0) or on a diagonal (*x* = *y*). Any other starting position (besides the origin) produces the second mode, shown below on the right.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"{\n const left = drawSineMap({ k, start: [0.1, 0.1], size: width / 3, lines });\n const right = drawSineMap({ k, start: [0.1, 0.2], size: width / 3, lines });\n left.style.display = right.style.display = 'inline-block';\n left.style.margin = right.style.margin = '0 15px';\n left.style.textAlign = right.style.textAlign = 'center';\n return html`${left}${right}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof lines = checkbox({\n options: [{ value: \"toggle\", label: \"Lines\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"md`Try modifying the *k* parameter with the control below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"createNumberInput(viewof k)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"md`\nNotice how certain values of *k* result in a clearly defined [limit cycle](https://en.wikipedia.org/wiki/Limit_cycle) in one or both of the modes. Some examples:\n\n ${[1.599, 1.75, 1.92, 2, 2.36, 3.339, 3.392, 3.393, 3.968, 5.27].map(num => createNumberButton(num, viewof k))}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"md`**Note:** Each graph is skipping the first ${defaultSkip} iterations. This is controlled by the \\`defaultSkip\\` parameter below. You can edit this parameter (and any other cell) by clicking in the left margin; pressing \\`shift-return\\` will run the cell, applying your changes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"defaultSkip = 3000","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"md`Likewise, you can change the number of drawn iterations by modifying the \\`defaultIterations\\` parameter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"defaultIterations = 10000","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"md`## A variant`","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"md`As I was putting together this Observable notebook, I started messing around with the iteration function and found an interesting variant:\n${tex.block`\n \\begin{alignedat}{2}\n x_{n+1} &= \\sin(k(y_n\\space\\space/&x_n))\\\\\n y_{n+1} &= \\sin(k(y_n\\space- \\space&x_n))\n \\end{alignedat}\n`}\n\nThe result resembles an attractor for certain values of *k*:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"{\n const map = drawSineMap({\n k: k2, start: [0.1, 0.2], size: width / 2 - 30, lines: lines2, iterations: 10000, iterationFunc: iterate2\n });\n const container = DOM.element('div', { style: 'overflow:auto;' });\n map.style.float = 'left';\n map.style.textAlign = 'center';\n container.append(map);\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"viewof lines2 = checkbox({\n options: [{ value: \"toggle\", label: \"Lines\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"createNumberInput(viewof k2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"md`What does it all mean? I have no idea.\n\nAn interactive bifurcation diagram of the original Sine Map can be located [here](http://matt-diamond.com/sineMap.html).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"function iterate([x, y], k) {\n return [\n Math.sin(k * (y + x)),\n Math.sin(k * (y - x))\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"function iterate2([x, y], k) {\n return [\n Math.sin(k * (y / x)),\n Math.sin(k * (y - x))\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"viewof k = new View(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"viewof k2 = new View(0.75)","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"defaultStart = [0.1, 0.1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function drawSineMap({\n k = 5,\n start = defaultStart,\n skip = defaultSkip,\n iterations = defaultIterations,\n lines = true,\n size = 500,\n lineWidth = 100 / iterations,\n iterationFunc = iterate,\n dotSize = 5000 / iterations\n} = {}) {\n const ctx = getCanvasContext(size, lineWidth);\n let position = start;\n for (let i = 0; i < skip; i++) {\n position = iterationFunc(position, k);\n }\n if (lines) ctx.beginPath();\n ctx.moveTo(...translate(position, size));\n for (let i = 0; i < iterations; i++) {\n position = iterationFunc(position, k);\n if (lines) {\n ctx.lineTo(...translate(position, size));\n } else {\n ctx.fillRect(...translate(position, size), dotSize, dotSize);\n }\n }\n if (lines) ctx.stroke();\n const startString = `[${start[0]}, ${start[1]}]`;\n const captionText = generateCaption({\n k: k.toFixed(3),\n start: startString,\n iterations\n });\n return wrapCanvas(ctx.canvas, captionText);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"generateCaption = function (params) {\n return Array.from(Object.entries(params)).map(([key, val]) => `${key}: ${val}`).join(', ');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"getCanvasContext = function(size, lineWidth) {\n const ctx = document.createElement('canvas').getContext('2d');\n ctx.canvas.width = ctx.canvas.height = size + 5;\n ctx.lineWidth = lineWidth;\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"wrapCanvas = function(canvas, caption) {\n const container = document.createElement('div');\n const captionDiv = document.createElement('div');\n captionDiv.style.padding = '10px 0 0';\n captionDiv.innerHTML = caption;\n container.append(canvas, captionDiv);\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"function translate([ x, y ], size) {\n const factor = size / 2;\n return [\n Math.round(factor + (x * factor)),\n Math.round(factor - (y * factor))\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"createNumberInput = function(view){\n const div = html`\n \n \n `;\n \n bind(div.querySelector(\"[type=range]\"), view);\n bind(div.querySelector(\"[type=number]\"), view);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"createNumberButton = function (number, view) {\n const btn = html``;\n btn.style.margin = '0 5px';\n btn.onclick = () => view.value = number;\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"import { View, bind } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"import { checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}