30:T71e,{ let w = width; let ctx = DOM.context2d(w,w); ctx.canvas.oncontextmenu = e => { e.preventDefault(); return false } while (true) { let restart = false; let geom; if (geometrySource === 'random') { geom = newGeometry(); } else { geom = favorites.shift(); favorites.push (geom.map(x=>[x[0],x[1]])); } let original = geom.map(x=>[x[0],x[1]]); let increment; let randomizeIncrements = () => { increment = geom.map(x => Math.pow(10, logAngularVelocityIncrement)*(Math.random() > 0.5 ? -1 : 1)); geom = original.map(x=>[x[0],x[1]]); } randomizeIncrements(); let steps; ctx.canvas.onmousedown = e => { e.preventDefault(); if (e.button == 0) { restart = true; } else if (e.button == 1) { steps = 0; randomizeIncrements(); } else if (e.button == 2 && geometrySource === 'random') { favorites.push (original) } }; for (steps = 0; steps < iterationsPerDesign && !restart; steps++) { for (let i = 0; i < geom.length; i++) { let [r,v] = geom[i], dang = increment[i]; v += dang; geom[i][1] = v; } let sp = new Spirograph( {x:w/2,y:w/2} , geom); ctx.fillStyle = `rgb(0,0,0,${clearScreenAlpha})`; ctx.fillRect(0,0,w,w); let {px,py} = sp.pos; ctx.strokeStyle = 'white'; ctx.beginPath(); ctx.moveTo(px,py); for (let i = 0; i < pointsPerCurve; i++) { sp.step(0.5); let {x,y} = sp.pos; ctx.lineTo(x,y); } ctx.stroke(); ctx.closePath(); ctx.beginPath (); ctx.fillStyle = 'red'; ctx.fillText ("radii="+geom.map(x=>x[0])+" velocities="+original.map(x=>x[1]), 10, w-10); yield ctx.canvas; } } }31:T459,md`Pick next geometry from: ${bindRadioGroup ({options:["favorites","random"]}, viewof geometrySource)}
For random pick,
    ${bindSliderNumber ({min:2,max:7,step:1}, viewof spiroCount)} Number of gears
    ${bindSliderNumber ({min:10,max:100,step:1}, viewof totalAngularVelocity)} Total angular velocity
    ${bindSliderNumber ({min:0.05,max:0.9,step:0.05}, viewof velocityUniformity)} Angular velocity uniformity ratio
    ${bindSliderNumber ({min:0.05,max:0.9,step:0.05}, viewof radiusUniformity)} Radius uniformity ratio
How many iterations before a new geometry is picked? ${bindSliderNumber ({min:100,max:10000,step:100}, viewof iterationsPerDesign)}
Number of points per curve: ${bindSliderNumber ({min:500,max:10000,step:100}, viewof pointsPerCurve)}
Angular velocity increment per iteration (in log10 units) : ${bindSliderNumber ({min:-7,max:-3,step:0.1}, viewof logAngularVelocityIncrement)} Transparency factor for clearing screen: ${bindSelect({options:[0.05,0.1,0.2,0.5,1]}, viewof clearScreenAlpha)} `32:[] 2e:{"title":"Spirograph","cells":[{"id":0,"value":"md`# Spirograph\n\nI am sure [this toy](https://en.wikipedia.org/wiki/Spirograph) has been enjoyed by many of you when you were little. This is my take on how to waste your time with several spirograph designs without wasting ink and paper. The idea is to move a mechanical arm with many articulations at the tip of which you attach a pen. This is analogous to having gears that are attached to other gears as in the original Spirograph toy. The length of each bone (gear radius) and the angular velocity of each joint are picked randomly. Each iteration becomes different from the previous by varying the speed of each joint ever so slightly. \n\nRandomly picking spirograph geometries can yield boring designs, but every so often you find a good one. I've set this demo to show a few I particularly like, but you can set random mode in the panel below and click on the picture to generate a new random geometry. You can add it to the set of favorite designs by clicking with the right button.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"comment('**Left** click below picks another design.
**Middle** click restarts design.
**Right** click adds it to favorites (if in random mode).')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"comment('Main interface')","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"comment('This is the array of favorite designs. It is initialized with a few I particularly like.')","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"favorites = claudiosFavorites","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"comment('These are a few geometries I found interesting.')","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"claudiosFavorites = [[[192,-1],[32,0],[104,13],[42,9],[63,-25]],[[15,-16],[110,8],[61,-1],[185,1],[62,-22]],[[176,0],[42,-38],[72,2],[53,-6],[90,-2]],[[28,-13],[62,-17],[133,11],[81,2],[129,5]],[[26,18],[265,1],[17,13],[77,-13],[48,3]],[[13,0],[97,14],[229,-4],[68,-6],[26,-24]],[[253,-4],[82,-14],[98,12]],[[246,2],[26,-19],[161,9]],[[246,7],[115,-4],[72,-19]],[[191,-4],[213,-3],[29,-23]],[[196,10],[75,17],[162,-3]],[[66,-15],[173,11],[194,4]],[[87,-3],[196,-9],[150,18]],[[85,-1],[130,20],[218,-9]],[[149,6],[31,-21],[253,3]],[[315,2],[90,6],[28,-22]],[[120,9],[77,-19],[236,2]],[[281,-4],[81,-12],[71,14]],[[25,-10],[84,-14],[324,6]],[[274,-6],[120,10],[39,-14]],[[39,-21],[303,-3],[91,6]],[[241,5],[86,10],[106,15]],[[74,20],[224,-8],[135,-2]]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"comment('The `Spirograph` class.')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"class Spirograph {\n constructor (center,geom=[[100,1]]) {\n // A spirograph centered at center. Gears are defined by the geom array. Each gear is a pair consisting\n // of a radius and angular velocity in degrees per step\n this.c = center;\n this.hands = geom.map(rv => ({radius:rv[0], vel:rv[1], angle:0}));\n }\n step(dt = 1) {\n // Move gears one step. Dt is a speeding up/slowing down factor\n for (let h of this.hands) {\n h.angle += h.vel*dt;\n }\n }\n get pos () {\n // Obtain the position of the \"pen\", i.e., the position of the last gear in the chain\n let {x,y} = this.c;\n for (let {radius,vel,angle} of this.hands) {\n angle *= Math.PI/180;\n x += radius*Math.cos(angle);\n y += radius*Math.sin(angle);\n }\n return ({x:x,y:y});\n }\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"comment('Returns an array with `m` random integers adding up to `n`. Parameter `uniformRatio` controls how uniform the split is.')","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"simpleSplit = function (n,m,uniformRatio=0.1) {\n let pieces = [];\n let uniformPart = ~~(n*0.1/m);\n n -= uniformPart*m;\n for (let i = 1; i < m; i++) {\n let p = ~~(n*Math.random());\n pieces.push (p);\n }\n pieces.sort ((a,b)=>a-b);\n pieces.push (n)\n return pieces.map((x,i) => uniformPart+x-(i>0?pieces[i-1]:0))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"comment('Randomly produces a new Geometry for a `Spirograph` drawing.')","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"newGeometry = function () {\n let len = ~~(width/2.2);\n let vel = totalAngularVelocity;\n let n = spiroCount;\n let geom = [];\n let r = simpleSplit (len, n, radiusUniformity);\n let v = simpleSplit (vel, n, velocityUniformity).map(x => Math.random() > 0.5 ? -x : x);\n for (let i = 0; i < n; i++) {\n geom.push ([r[i],v[i]])\n }\n return geom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`## GUI variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"viewof spiroCount = new View(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"viewof totalAngularVelocity = new View(30)","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"viewof iterationsPerDesign = new View(1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"viewof pointsPerCurve = new View (10000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof geometrySource = new View('favorites')","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"viewof logAngularVelocityIncrement = new View(-4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof radiusUniformity = new View(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"viewof velocityUniformity = new View(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"viewof clearScreenAlpha = new View(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"import { bindSelect, bindSliderNumber, bindRadioGroup, View } from \"@esperanc/inline-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"import {comment,util_style} from \"@esperanc/notebook-css-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"util_style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}