3e:null 3f:["$","title",null,{"children":"Custom Spirographs | Cody Rushing | Observable"}] 45:T1535,projectCanvas = { // setup const cellWidth = Math.min(width, window.innerHeight); const dimensions = [cellWidth, cellWidth * 0.8]; const context = DOM.context2d(...dimensions); const canvas = context.canvas; const paper = new p.PaperScope(); paper.setup(context.canvas); paper.view.viewSize = new paper.Size(...dimensions); const tool = new paper.Tool(); // cleanup invalidation.then(() => { paper.project.activeLayer.removeChildren(); paper.project.clear(); paper.view.draw(); tool.remove(); }); // draw stencil tool.activate(); // minimum movement threshold for adding new point. prevents too much noise tool.fixedDistance = 30; let stencil = new paper.Path(); stencil.strokeColor = 'black'; stencil.strokeWidth = 10; stencil.opacity = 0.5; let move; let rotor = new paper.Group(); rotor.importJSON(rotorJSON); rotor.opacity = 0; let radius = rotor.firstChild.radius; // select the rotor dots let colorDots = rotor.children.slice(2); // create a path for each color in the rotor let colorPaths = colorDots.map( colorDot => { const p = new paper.Path(); p.strokeColor = colorDot.fillColor; p.strokeWidth = 1; return p; } ); if(!stencilJSON){ rotor.opacity = 0; stencil.opacity = 0.5; } // expose a method that can be called by the controls listener canvas.update = function({ hideStencil, hideRotor }){ if(stencilJSON){ stencil.opacity = hideStencil ? 0 : 1; rotor.opacity = hideRotor ? 0 : 1; } }; function addPoint(point){ if(stencil && !stencil.closed){ stencil.add(point); if(stencil.segments.length){ // select first segment stencil.firstSegment.selected = true; } } } function checkForClose(point){ // if near the starting point, close the path if (stencil && stencil.segments.length > 1) { let firstPoint = stencil.segments[0].point; if(point.getDistance(firstPoint) < 10){ stencil.simplify(); // stencil.smooth(); stencil.firstSegment.selected = false; tool.fixedDistance = null; stencil.closed = true; // export path as JSON mutable stencilJSON = stencil.exportJSON(); } } } function updateCursor(event){ if(stencil && stencil.closed && stencil.contains(event.point)){ context.canvas.style.cursor = 'grab'; } else { context.canvas.style.cursor = 'default'; } } tool.onMouseDown = function(event) { move = stencil.closed && stencil.contains(event.point); if(move){ context.canvas.style.cursor = 'grabbing'; } else { checkForClose(event.point); addPoint(event.point); } } tool.onMouseDrag = function(event) { if(move){ [stencil, rotor, ...colorPaths].forEach( p => { p.position.x += event.delta.x; p.position.y += event.delta.y; } ); } else { addPoint(event.point); } } tool.onMouseUp = function(event) { checkForClose(event.point); updateCursor(event); } tool.onMouseMove = updateCursor; // a stencil has been created - draw the spirograph if(stencilJSON){ // remove fixed distance for easy moving tool.fixedDistance = null; stencil.importJSON(stencilJSON); stencil.fullySelected = false; // how many pixels to move with each iteration let stepLength = 1; let curveIndex = 0; let stencilPosition = 0; let curvePosition = 0; let startAngle = rotor.rotation; for(let i=0; stencilPosition curve.length){ curvePosition -= curve.length; curveIndex = curveIndex < stencil.curves.length - 1 ? curveIndex + 1 : 0; curve = stencil.curves[curveIndex]; } let t = curvePosition/curve.length; let curvePoint = curve.getPointAtTime(t); let normal = curve.getNormalAtTime(t); // normal may point to inside of shape, if so, invert it if(stencil.contains(curvePoint.add(normal))){ normal = normal.multiply(-1); } // move rotor to next part of curve rotor.position = curvePoint.add(normal.multiply(radius+5)); // rotate rotor let angleDelta = -stepLength/(2 * Math.PI * radius) * 360; // mutation rotation property here does not cause the value to update (shrug) rotor.rotation += angleDelta; startAngle += angleDelta; colorPaths.forEach( (p, i) => { const colorDot = colorPaths[i]; const config = colorConfigs[i]; const colorAngle = degreesToRadians(startAngle + config.angle); p.add( new paper.Point( rotor.position.x + Math.cos(colorAngle) * radius * config.radius, rotor.position.y + Math.sin(colorAngle) * radius * config.radius ) ); } ); if(i % 60 === 0){ yield canvas; } } } else { // hide rotor when creating stencil rotor.opacity = 0; } yield canvas; }46:T61a,rotorMaker = { const canvasWidth = 100 * 2 + 5; const dimensions = [canvasWidth, canvasWidth]; const context = DOM.context2d(...dimensions); const paper = new p.PaperScope(); paper.setup(context.canvas); paper.view.viewSize = new paper.Size(...dimensions); // cleanup invalidation.then(() => { paper.project.activeLayer.removeChildren(); paper.project.clear(); paper.view.draw(); }); const rotor = new paper.Shape.Circle(new paper.Point(canvasWidth/2, canvasWidth/2), rotorRadius) rotor.strokeColor = 'black'; rotor.strokeWidth = 3; const center = new paper.Shape.Circle(new paper.Point(canvasWidth/2, canvasWidth/2), 2) center.strokeWidth = 0.5; center.strokeColor = 'black'; const rotorGroup = new paper.Group([rotor, center]); colorConfigs.forEach( ({color, radius, angle}, i, arr) => { // const angle = Math.PI * 2 / arr.length * i - Math.PI / 2; const distanceFromCenter = rotor.radius * radius; const a = degreesToRadians(angle); const colorDot = new paper.Shape.Circle( rotor.position.add( new paper.Point( Math.cos(degreesToRadians(angle)) * distanceFromCenter, Math.sin(degreesToRadians(angle)) * distanceFromCenter ) ), 3 ); colorDot.fillColor = color; colorDot.strokeWidth = 1; colorDot.strokeColor = 'black'; colorDot.rotate(1); rotorGroup.addChild(colorDot); } ); mutable rotorJSON = rotorGroup.exportJSON(); yield context.canvas; }47:Tb75,mutable stencilJSON = `["Path",{"applyMatrix":true,"opacity":0.5,"selected":true,"segments":[[[153,164.89999],[0,0],[8.93731,35.74923]],[[194.9036,242.78428],[-25.4694,-27.31913],[6.81911,7.31435]],[[216.55277,263.55237],[-4.65361,-8.85121],[4.65361,8.85121]],[[221.38908,293.15997],[-1.9828,-9.80145],[1.9828,9.80145]],[[228.44112,322.31934],[-2.81038,-9.59697],[2.81038,9.59697]],[[238.2323,350.67657],[-0.80434,-9.9676],[2.65621,32.9165]],[[199.61516,430.01412],[14.88086,-25.74319],[-10.00728,17.31212]],[[174.2353,484.36995],[9.28334,-17.71086],[-9.28374,17.71163]],[[143.84687,536.09567],[9.69942,-17.48745],[-7.01605,12.64951]],[[122.32665,591.57548],[-2.52187,-16.3492],[0.49964,3.23917]],[[154.74613,642.04384],[-2.05506,-2.24002],[17.8928,19.50319]],[[235.88851,676.87222],[-26.00481,-1.71259],[19.93293,1.31271]],[[295.69503,673.05336],[-19.92729,-1.39572],[9.97556,0.6987]],[[325.3366,677.67689],[-9.84831,-1.73517],[9.84831,1.73517]],[[354.77345,683.46239],[-9.9103,1.33642],[9.9103,-1.33642]],[[381.62631,670.08614],[-9.28846,3.70466],[9.28846,-3.70466]],[[410.31402,661.3103],[-9.16478,4.00085],[29.19314,-12.74415]],[[491.74246,628.009],[-35.07012,-4.36451],[26.96975,3.35641]],[[575.00353,661.78468],[-24.21214,-0.57661],[9.99717,0.23808]],[[603.58539,652.67001],[-9.8129,1.92537],[19.6258,-3.85074]],[[663.39925,647.94743],[-19.98395,0.80102],[9.99198,-0.40051]],[[693.39922,647.90746],[-9.69274,2.45983],[9.69274,-2.45983]],[[719.78779,633.63709],[-8.9085,4.54297],[26.55549,-13.54221]],[[805.55709,609.93526],[-30.71632,-2.13096],[13.60989,0.94419]],[[864.82056,615.16034],[-14.52103,9.39002],[8.39727,-5.43009]],[[878.26972,588.34392],[-1.26156,9.9201],[1.26156,-9.9201]],[[871.9607,559.01482],[2.25478,9.74248],[-9.01912,-38.96993]],[[841.05246,443.08235],[8.17395,39.17257],[-6.13455,-29.39901]],[[833.03059,353.60532],[-0.4562,30.00205],[0.30405,-19.99566]],[[836.7823,293.72881],[0.83905,19.98037],[-1.27398,-30.33739]],[[811.87154,207.66634],[11.20543,27.56641],[-3.76567,-9.26389]],[[800.75401,179.80238],[3.36692,9.41615],[-3.36692,-9.41615]],[[791.68326,151.20655],[6.87409,7.26271],[-6.87409,-7.26271]],[[763.62895,140.57851],[9.53141,3.02528],[-19.058,-6.04903]],[[704.69351,130.48226],[20.17644,-0.4797],[-9.99717,0.23769]],[[674.9637,134.49952],[9.31672,-3.633],[-13.29994,5.18623]],[[628.39221,172.0967],[9.79144,-9.53219],[-21.07616,20.51813]],[[558.85953,228.78914],[26.46609,-13.91347],[-29.03719,15.26512]],[[470.78065,237.3321],[31.36115,0.42499],[-18.84957,-0.25544]],[[411.66264,229.80742],[17.67787,9.46101],[-24.35105,-13.03243]],[[346.40636,167.88706],[23.95576,15.26714],[-21.78481,-13.88358]],[[289.22468,151.00051],[24.32083,5.29605],[-19.53529,-4.25396]],[[230.79157,137.46958],[19.74298,3.15255],[-12.48875,-1.9942]],[[171.22414,137.74653],[12.4442,-7.58756],[-8.53807,5.20589]],[[154.27432,162.49939],[5.64994,-8.25095],[0,0]]],"closed":true,"strokeColor":[0,0,0],"strokeWidth":10}]`48:[] 43:{"id":"c5bb15b5ae3796a9","slug":"build-your-own-spirographs","title":"Custom Spirographs","thumbnail":"c8d1b5172e83b59d211d9ff7f4c2596eb72ae977156a3ff0f3f2735b3c14bf7f","access_level":"public","create_time":"$D2020-10-17T13:46:56.091Z","update_time":"$D2023-04-30T21:50:13.111Z","view_time":null,"first_public_time":"$D2020-11-08T04:56:47.881Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"da453ccea7f021b9","login":"codyrushing","name":"Cody Rushing","avatar_url":"https://avatars-next.observableusercontent.com/a91368ea312a72f98af3029732b0f7fc67b47b763116f25a9a9c046245cc0857","tier":"starter_2024","bio":"My approach to software engineering focuses on performance, elegance, and resilience. My specialties include expressive UIs, data visualization, API development, and system design."},"version":741,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"514f3026c16db8ac","login":"codyrushing","name":"Cody Rushing","avatar_url":"https://avatars-next.observableusercontent.com/a91368ea312a72f98af3029732b0f7fc67b47b763116f25a9a9c046245cc0857","tier":null,"bio":"My approach to software engineering focuses on performance, elegance, and resilience. My specialties include expressive UIs, data visualization, API development, and system design."}],"members":[{"type":"individual","id":"514f3026c16db8ac","login":"codyrushing","name":"Cody Rushing","avatar_url":"https://avatars-next.observableusercontent.com/a91368ea312a72f98af3029732b0f7fc67b47b763116f25a9a9c046245cc0857","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Custom Spirographs","cells":[{"id":0,"value":"md`# Custom Spirographs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"viewof redrawButton = html`

${Object.assign(html`