30: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`

`; }31: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` ` }32:[] 2e:{"title":"Sine studies","cells":[{"id":0,"value":"md`# Sine studies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"drawCurve(state.numSteps, state.xMultiple, state.yMultiple)","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"drawCurve(numSteps, xMultiple, yMultiple)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":230,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":10,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"margin = ({\n top: 20,\n right: 20,\n bottom: 20,\n left: 20,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"stageWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"stageHeight = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"gridWidth = stageWidth / multiples","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"gridHeight = stageHeight / multiples","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"mutable state = ({\n numSteps: 0,\n xMultiple: 1,\n yMultiple: 2,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":220,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"anime = require(\"animejs@2.2.0\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}