2a:null 2b:["$","title",null,{"children":"makeRacFactory(rc, p5c, cf, mo) | Maic López Sáenz | Observable"}] 30:T123d,makeRacFactory = { function makeRacFactory(RacClass, p5Class, p5CanvasFunc, makeOptions) { function racFactory(cellHeight, drawFunction) { return p5CanvasFunc(p5Class, sketch => { let rac = null; // Object with styles to apply ONLY in the first draw let stylesToApply = null; // Object to pass along with every draw let shared = null; // When true the sketch listen to mousePressed/Dragged/Released // when false those events are ignored let isInteractive = false; // Set to true when mousePressed start inside canvas, // as to properly track mouseDragged/Released let isTrackingPointer = false; sketch.setup = function() { rac = new RacClass(); rac.setupDrawer(sketch); let options = makeOptions(rac); stylesToApply = options.styles ?? null; shared = options.shared ?? null; if (options.isInteractive === true) { isInteractive = true; } sketch.createCanvas(width, cellHeight); sketch.noLoop(); if (options.postSetup != null) { options.postSetup(rac); } }; // setup sketch.draw = function() { if (stylesToApply !== null) { // Background stylesToApply.backgroundColor.applyBackground(); // Default stype stylesToApply.defaultStyle.apply(); // Default text styles if (stylesToApply.defaultTextStyle != null) { stylesToApply.defaultTextStyle.applyToClass(rac.constructor.Text); } if (stylesToApply.defaultTextFont != null) { rac.textFormatDefaults.font = stylesToApply.defaultTextFont; } if (stylesToApply.defaultTextSize != null) { rac.textFormatDefaults.size = stylesToApply.defaultTextSize; } // Debug style if (stylesToApply.debugStyle != null) { rac.drawer.debugStyle = stylesToApply.debugStyle; } if (stylesToApply.debugTextStyle != null) { rac.drawer.debugTextStyle = stylesToApply.debugTextStyle; } if (stylesToApply.debugTextFont != null) { rac.drawer.debugTextOptions.font = stylesToApply.debugTextFont; } if (stylesToApply.debugTextSize != null) { rac.drawer.debugTextOptions.size = stylesToApply.debugTextSize; } // Control styles if (stylesToApply.pointerStyle != null) { rac.controller.pointerStyle = stylesToApply.pointerStyle; } if (stylesToApply.controlStyle != null) { rac.controller.controlStyle = stylesToApply.controlStyle; } // No longer needed stylesToApply = null; } drawFunction(rac, shared); }; // draw // Returns true if the pointer is inside this canvas. // All interactions need to be checked since pointer events // are broadcasted to all existing p5 canvases. function isPointerInCanvas(pointer) { let isInside = !( pointer.y < 0 || pointer.y >= rac.drawer.p5.height || pointer.x < 0 || pointer.x >= rac.drawer.p5.width) return isInside }; sketch.mousePressed = function(event) { const pointer = rac.Point.pointer(); if (isInteractive && isPointerInCanvas(pointer)) { isTrackingPointer = true; rac.controller.pointerPressed(pointer); sketch.redraw(); } } sketch.mouseDragged = function(event) { if (isInteractive && isTrackingPointer) { const pointer = rac.Point.pointer(); rac.controller.pointerDragged(pointer); sketch.redraw(); } } sketch.mouseReleased = function(event) { if (isInteractive && isTrackingPointer) { isTrackingPointer = false; const pointer = rac.Point.pointer(); rac.controller.pointerReleased(pointer); sketch.redraw(); } } }); // p5CanvasFunc }; // racFactory return racFactory; } // function makeRacFactory Object.defineProperty(makeRacFactory, 'version', { enumerable: true, configurable: false, writable: false, value: version }); return makeRacFactory; }31:T77b,#### `makeOptions` Function The `makeOptions` parameter function is called once within every call to `factory`. It receives a new `Rac` instance on each call and produces an `options` object used to configure the `p5` and `rac` instance. `makeOptions` receives as parameters: + `rac: {Rac}` — The `Rac` instance created for the current call to `factory` `makeOptions` must return an `options` object with the following properties: + `style: {Object}` *optional* — with the properties: + `backgroundColor: {Rac.Color}`
Color to setup as background + `defaultStyle: {Rac.Stroke|Rac.Fill|Rac.StyleContainer}`
Style to setup as default + `defaultTextStyle: {Rac.Stroke|Rac.Fill|Rac.StyleContainer}` *optional*
Style to setup as default for text + `defaultTextFont: {String}` *optional*
Font to setup as default for text + `defaultTextSize: {Number}` *optional*
Size to setup as default for text + `debugStyle: {Rac.Stroke|Rac.Fill|Rac.StyleContainer}` *optional*
Style to setup for debugging + `debugTextStyle: {Rac.Stroke|Rac.Fill|Rac.StyleContainer}` *optional*
Style to setup for debug text + `debugTextFont: {String}` *optional*
Font to setup for debug text + `debugTextSize: {Number}` *optional*
Size to setup for debug text + `pointerStyle: {Rac.Stroke|Rac.Fill|Rac.StyleContainer}` *optional*
Style to setup as pointer default + `controlStyle: {Rac.Stroke|Rac.Fill|Rac.StyleContainer}` *optional*
Style to setup as control default + `postSetup: {Function(rac)}` *optional*
Function called after all setup of the `Rac` instance is done and before the first draw, receives the `Rac` instance as parameter + `isInteractive: {Bool}` *optional*
When `true` interaction with the cell is enabled, otherwise the cell will not listen to pointer events + `shared: {Object}` *optional*
Object passed along to calls to `draw`32:T636,exampleFactory = makeRacFactory(Rac, p5, p5Canvas, rac => { // https://coolors.co/b7094c-ba3b87-251f33-2e6f95-00ccf5 let palette = { amaranthPurple: rac.Color.fromHex('b7094c'), fandango: rac.Color.fromHex('ba3b87'), darkPurple: rac.Color.fromHex('251f33'), sapphireBlue: rac.Color.fromHex('2e6f95'), vividSkyBlue: rac.Color.fromHex('00ccf5') }; let defaultStyle = palette.vividSkyBlue .withAlpha(0.4) .stroke(2) .appendFill(rac.Fill.none); let defaultTextSyle = palette.vividSkyBlue .fill() .appendStroke(rac.Stroke.none); let defaultTextFont = 'Spot Mono Medium, Spot Mono, Menlo, monospace'; let defaultTextSize = 15; let debugStyle = palette.fandango.stroke(2) .appendFill(rac.Fill.none) let debugTextStyle = palette.fandango.fill() .appendStroke(rac.Stroke.none); let debugTeFont = defaultTextFont; let debugTextSize = defaultTextSize; let amaranth = palette.amaranthPurple .withAlpha(0.75) .stroke(3); let background = palette.darkPurple; return { postSetup: rac => { rac.drawer.p5.frameRate(30); }, styles: { backgroundColor: background, defaultStyle: defaultStyle, defaultTextStyle: defaultTextSyle, defaultTextFont: defaultTextFont, defaultTextSize: defaultTextSize, debugStyle: debugStyle, debugTextStyle: debugTextStyle, debugTextFont: defaultTextFont, debugTextSize: defaultTextSize }, shared: { background: background, amaranth: amaranth } }; })33:T776,interactiveExampleFactory = makeRacFactory(Rac, p5, p5Canvas, rac => { // https://coolors.co/b7094c-ba3b87-251f33-2e6f95-00ccf5 let palette = { amaranthPurple: rac.Color.fromHex('b7094c'), fandango: rac.Color.fromHex('ba3b87'), darkPurple: rac.Color.fromHex('251f33'), sapphireBlue: rac.Color.fromHex('2e6f95'), vividSkyBlue: rac.Color.fromHex('00ccf5') }; let backgroundColor = palette.darkPurple; let defaultStyle = palette.vividSkyBlue .withAlpha(0.4) .stroke(2) .appendFill(rac.Fill.none); let defaultTextSyle = palette.vividSkyBlue .fill() .appendStroke(rac.Stroke.none); let defaultTextFont = 'Spot Mono Medium, Spot Mono, Menlo, monospace'; let defaultTextSize = 15; let debugStyle = palette.fandango.stroke(2) .appendFill(rac.Fill.none) let debugTextStyle = palette.fandango.fill() .appendStroke(rac.Stroke.none); let debugTeFont = defaultTextFont; let debugTextSize = defaultTextSize; let pointerStyle = palette.amaranthPurple .stroke(2) .appendFill(palette.amaranthPurple.withAlpha(0.2)); let controlStyle = palette.vividSkyBlue .withAlpha(0.8) .stroke(2); let amaranth = palette.amaranthPurple .withAlpha(0.75) .stroke(3); return { isInteractive: true, postSetup: rac => { rac.drawer.p5.frameRate(30); }, styles: { backgroundColor: backgroundColor, defaultStyle: defaultStyle, defaultTextStyle: defaultTextSyle, defaultTextFont: defaultTextFont, defaultTextSize: defaultTextSize, debugStyle: debugStyle, debugTextStyle: debugTextStyle, debugTextFont: defaultTextFont, debugTextSize: defaultTextSize, pointerStyle: pointerStyle, controlStyle: defaultStyle }, shared: { background: backgroundColor, amaranth: amaranth } }; })34:T6e6,{ let angleControl = null; return interactiveExampleFactory(400, (rac, shared) => { shared.background.applyBackground(); if (!angleControl) { angleControl = new Rac.ArcControl(rac, 0, rac.Angle.zero); // angleControl.setValueWithArcLength(3/4); angleControl.addMarkerAtCurrentValue(); angleControl.markers.push(1/2); } rac.Point.zero.text('Interactive example, angle: ' + angleControl.distance().turn) .withPaddings(10).draw(); let center = rac.Point.canvasCenter(); angleControl.anchor = center.arc(130, rac.Angle.east); let startAngle = rac.Angle.north; let endAngle = rac.Angle.s.shift(angleControl.distance()); let angleRange = startAngle.distance(endAngle); center.arc(160, endAngle, startAngle).debug(); let knobAngle = center.angleToPoint(angleControl.knob()); center.ray(knobAngle) .translateToDistance(190).debug(true) let startRadius = 40; let endRadius = 120; let radiusRange = endRadius - startRadius; let totalSteps = 40; for (let step = 0; step <= totalSteps; step += 1) { // let angle = startAngle.add(step * 1/80); let angle = startAngle.add(step * angleRange.turn / totalSteps); let radius = startRadius + (step * radiusRange / totalSteps); let pointOne = center.pointToAngle(angle, radius); let pointTwo = center.pointToAngle(angle.add(1/3), radius); let pointThree = center.pointToAngle(angle.add(2/3), radius); pointOne.segmentToPoint(pointTwo) .draw() .nextSegmentToPoint(pointThree) .draw() .nextSegmentToPoint(pointOne) .draw(); } // for rac.controller.drawControls(); }); // interactiveExampleFactory }35:[] 2e:{"id":"44e205c1390469c2","slug":"make-rac-factory","title":"makeRacFactory(rc, p5c, cf, mo)","thumbnail":"b22fa36296898bbc5d1541aca7f6c44cb6c86838287a0aec68dfeee321c5f17c","access_level":"public","create_time":"$D2021-03-09T03:16:08.388Z","update_time":"$D2023-10-25T20:46:45.908Z","view_time":null,"first_public_time":"$D2021-03-09T04:23:20.490Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f15bd58f0c95f3c8","login":"lopsae","name":"Maic López Sáenz","avatar_url":"https://avatars-next.observableusercontent.com/0893731e3547c49619042dd456ec0027d4e8c2f1359fc3c07859cb1fc2eb1ea4","tier":"starter_2024"},"version":825,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4770505bbf3a462a","login":"lopsae","name":"Maic López Sáenz","avatar_url":"https://avatars-next.observableusercontent.com/0893731e3547c49619042dd456ec0027d4e8c2f1359fc3c07859cb1fc2eb1ea4","tier":null}],"members":[{"type":"individual","id":"4770505bbf3a462a","login":"lopsae","name":"Maic López Sáenz","avatar_url":"https://avatars-next.observableusercontent.com/0893731e3547c49619042dd456ec0027d4e8c2f1359fc3c07859cb1fc2eb1ea4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"makeRacFactory(rc, p5c, cf, mo)","cells":[{"id":0,"value":"# `makeRacFactory(rc, p5c, cf, mo)`\n\nProduces a `factory` function that returns with each call a cell-generator with a new [RAC instance](https://rulerandcompass.org/documentation/1.2.1/Rac.html) attached and ready for drawing.\n\n`makeRacFactory` receives as a parameter a `makeOptions` function that may setup a new `rac` instance settings and produces an `options` object with style and other settings. `makeOptions` is called every time the `factory` function is called.\n\nThe `factory` function receives as a parameter a `draw` function that is called to redraw the produced cell-generator.\n\nThe intended use is to setup a single `factory` function in a notebook, which then can be called for each cell that will display a RAC drawing by providing only the drawing code.\n\nFor a simplified example of this setup see [`@lopsae/make-rac-factory-example`](https://observablehq.com/@lopsae/make-rac-factory-example).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":452,"value":"#### Import:\n${await makeImportStatement(['makeRacFactory'], true)}\n\nStable pinned name: `${await getCurrentStableName()}`\n
\nVersion (pin): `${version} (${await getCurrentStableVersion()})`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":412,"value":"version = '1.1.10'\n// 1.1.10 (825) - Add support for `debugTextFont` and `debugTextSize`, dependency updates\n// 1.1.9 (784) - Update to use RAC 1.3.0 in examples, no functional changes\n// 1.1.8 (770) - Add documentation link to make-rac-factory-example\n// 1.1.7 (764) - Add support for `defaultTextStyle`, `defaultTextFont`, and `defaultTextSize`\n// 1.1.6 (708) - Dependency updates, no functional changes\n// 1.1.5 (653) - Notebooks update, no functional changes\n// 1.1.4 (638) - Update to use RAC 1.2.0 and P5js 1.4.2 in examples, no functional change\n// 1.1.3 (621) - URL renamed to make-rac-factory, no funcional change\n// 1.1.2 (545) - Update to use RAC 1.1.0 in examples, no functional change\n// 1.1.1 (521) - Update to use RAC 1.0.1 in examples, no functional change\n// 1.1.0 (510) - Updated to use cell modes, no functional change\n// 1.0.1 (458) - First labeled version, fixed to used Rac in instance mode","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"---\n### Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"---\n### Parameters\n+ `RacClass: {Class}` — The [`Rac` constructor](https://rulerandcompass.org/documentation/latest/Rac.html), the object loaded by `require('https://unpkg.com/ruler-and-compass')`\n+ `p5Class: {Class}` — The [`p5` constructor](https://p5js.org/reference/#/p5/p5), the object loaded by `require('p5')`\n+ `p5CanvasFunc: {function}` — The [`p5Canvas` function](https://observablehq.com/@lopsae/p5-canvas)\n+ `makeOptions: {function}` — A function that produces an `options` object that contains configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":660,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":607,"value":"---\n### Return\n`makeRacFactory` returns a function with the signature:\n```\nfactory(cellHeight, draw(rac, shared))\n```\n\nIn this documentation the returned function is referenced as `factory`.\n\nThe returned `factory` function receives as parameters:\n+ `cellHeight: {Number}`
The height of the cell that will be yielded by the returned generator\n+ `draw: {Function(rac, shared)}`
The function that will be called for each redraw of the yielded cell, receives as parameters\n + `rac: {Rac}` — the `Rac` instance for this cell\n + `shared: {Object}` — The shared object provided by `options.shared`, or `null` if none was provided","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":609,"value":"---\n### About the produced cell-generator\n`factory` returns for each call a new cell-generator that yields a `div` element setup as canvas for a new [p5.js instance](https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace) and a new [RAC instance](https://rulerandcompass.org/documentation/latest/Rac.html). The generator yields the `div` once during setup, once after the first call to `draw`, and after each subsequent call to `draw`.\n\nThe `div` is produced using [p5Canvas](https://observablehq.com/@lopsae/p5-canvas), which page contains more detailed documentation regarding the generator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":224,"value":"---\n### Example factories","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":549,"value":"---\n### Static example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"exampleFactory(300, (rac, shared) => {\n rac.Point.zero.text('Static example, only drawed once')\n .withPaddings(10).draw();\n \n let center = rac.Point.canvasCenter();\n let angle = rac.Angle.n;\n for (let radius = 40; radius <= 120; radius += 2) {\n let pointOne = center.pointToAngle(angle, radius);\n let pointTwo = center.pointToAngle(angle.add(1/3), radius);\n let pointThree = center.pointToAngle(angle.add(2/3), radius);\n \n pointOne.segmentToPoint(pointTwo)\n .draw()\n .nextSegmentToPoint(pointThree)\n .draw()\n .nextSegmentToPoint(pointOne)\n .draw();\n \n angle = angle.add(1/80);\n }\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"---\n### Animating example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"{\n let angleOffset = 0;\n \n return exampleFactory(300, (rac, shared) => {\n rac.drawer.p5.loop();\n shared.background.applyBackground();\n\n rac.Point.zero.text('Animating example, drawn: ' + rac.drawer.p5.frameCount)\n .withPaddings(10).draw();\n \n let center = rac.Point.canvasCenter();\n let arc = center.arc(110).draw();\n let angle = rac.Angle.n;\n\n let totalSteps = 120;\n for (let step = 0; step < totalSteps; step += 1) {\n let currentAngle = angle.add(step/totalSteps);\n\n let crestCount = 10;\n let lengthCrest = 15;\n let sine = Math.sin(Rac.TAU * crestCount * (angleOffset + step/totalSteps));\n let lengthDelta = lengthCrest * sine;\n\n arc.radiusSegmentAtAngle(currentAngle)\n .withLengthAdd(lengthDelta)\n .draw(shared.amaranth);\n } // for\n \n center.ray(-angleOffset)\n .translateToDistance(160).debug(true);\n angleOffset += 1/1000;\n });\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":559,"value":"---\n### Interactive example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":143,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"---\n### Colophon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":497,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"Examples using:\n> RAC: `${Rac.version} (${Rac.build})`\n>
\n> p5Canvas: `${p5Canvas.version}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"Rac = require('ruler-and-compass@1.3.0')\n// Rac = require('https://cdn.jsdelivr.net/gh/lopsae/rac@hash/dist/rac.dev.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"requireCheck('ruler-and-compass', '1.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"p5 = require('p5@1.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"requireCheck('p5', '1.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import {p5Canvas} from '@lopsae/p5-canvas@1180'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"importCheck('@lopsae/p5-canvas', 1180)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":485,"value":"import {styles} from '@lopsae/styles@159'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"importCheck('@lopsae/styles', 159)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"import {importCheck, makeImportStatement, getCurrentStableVersion, getCurrentStableName} from '@lopsae/import-utilities@552'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"importCheck('@lopsae/import-utilities', 552)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"import {requireCheck} from '@lopsae/require-utilities@306'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"importCheck('@lopsae/require-utilities', 306)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"