2b:null 2c:["$","title",null,{"children":"Sine studies | Steffen Hänsch | Observable"}] 31:T6e0,{ const numSteps = numSegments; const clockStepSize = (Math.PI * 2) / numSteps; const colors = chroma.scale(['#fafa6e','#2A4858']) .mode('lch').colors(numSteps) const lines = (radius, xMultiple, yMultiple, colors) => { return _.times(numSteps, step => { const angleBase = step * clockStepSize; const nextAngleBase = (step + 1) * clockStepSize; const anglePrimary = angleBase * xMultiple; const angleSecondary = angleBase * yMultiple; const nextAnglePrimary = nextAngleBase * xMultiple; const nextAngleSecondary = nextAngleBase * yMultiple; return ` `; }); }; const grid = _.times(multiples, columnIndex => { return _.times(multiples , rowIndex => { return ` ${lines((gridWidth / 2) - 5, columnIndex, rowIndex, colors)} `; }) }); return html`

`; }32:T4e5,drawCurve = (numSteps, xMultiple, yMultiple) => { const clockStepSize = (Math.PI * 2) / numSteps const svgWidth = 100; const svgHeight = 100; const radius = 40; let points = ""; const colors = chroma.scale(['#fafa6e','#2A4858']) .mode('lch').colors(numSteps) const lines = _.times(numSteps, step => { const angleBase = step * clockStepSize; const nextAngleBase = (step + 1) * clockStepSize; const anglePrimary = angleBase * xMultiple; const angleSecondary = angleBase * yMultiple; const nextAnglePrimary = nextAngleBase * xMultiple; const nextAngleSecondary = nextAngleBase * yMultiple; const currentPosX = (svgWidth / 2) + Math.cos(anglePrimary) * radius; const currentPosY = (svgHeight / 2) + Math.cos(angleSecondary) * radius; return ` `; }); return html` ` }33:[] 2f:{"id":"a0c1ed248613004e","slug":"sine-studies","title":"Sine studies","thumbnail":null,"access_level":"public","create_time":"$D2019-02-09T15:50:48.530Z","update_time":"$D2020-07-19T20:27:05.531Z","view_time":null,"first_public_time":"$D2020-07-19T20:26:04.345Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":"starter_2024"},"version":370,"publish_version":370,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null}],"members":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Sine studies","cells":[{"id":0,"value":"md`# Sine studies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"drawCurve(state.numSteps, state.xMultiple, state.yMultiple)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"drawCurve(numSteps, xMultiple, yMultiple)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"viewof numSteps = slider({\n min: 2, \n max: 200, \n step: 1, \n value: 50,\n description: \"number of steps\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"viewof xMultiple = slider({\n min: 0, \n max: 10, \n step: 0.1, \n value: 1,\n description: \"x multiple\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"viewof yMultiple = slider({\n min: 0, \n max: 10, \n step: 0.1, \n value: 2,\n description: \"y multiple\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"viewof multiples = slider({\n min: 2, \n max: 12, \n step: 1, \n value: 7,\n description: \"multiples\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"viewof numSegments = slider({\n min: 2, \n max: 100, \n step: 1, \n value: 12,\n description: \"number of Segments\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"margin = ({\n top: 20,\n right: 20,\n bottom: 20,\n left: 20,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"stageWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"stageHeight = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"gridWidth = stageWidth / multiples","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"gridHeight = stageHeight / multiples","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"mutable state = ({\n numSteps: 0,\n xMultiple: 1,\n yMultiple: 2,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"animation ={\n const state = {\n numSteps: 0,\n xMultiple: 1,\n yMultiple: 2,\n };\n const randomValues = () => {\n anime({\n targets: state,\n numSteps: function() {\n return anime.random(0, 100);\n },\n xMultiple: function() {\n return anime.random(2.0, 7.0);\n },\n yMultiple: function() {\n return anime.random(2.0, 7.0);\n },\n easing: 'easeInOutQuad',\n duration: 1250,\n delay: 750,\n update: function() {\n mutable state = state;\n },\n complete: randomValues\n });\n }\n \n randomValues();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"anime = require(\"animejs@2.2.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"