2a:null 2b:["$","title",null,{"children":"makeRacFactory example | Maic López Sáenz | Observable"}] 30:T7c4,exampleDrawing = makeRacFactory(Rac, p5, p5Canvas, rac => { // A palette of colors to define style settings for all drawings // https://coolors.co/ef476f-ffd166-f1962f-118ab2-073b4c let palette = { midnightGreen: rac.Color.fromHex('073b4c'), blueNcs: rac.Color.fromHex('118ab2'), carrotOrange: rac.Color.fromHex('f1962f'), orangeYellow: rac.Color.fromHex('ffd166'), paradisePink: rac.Color.fromHex('ef476f') } let backgroundColor = palette.blueNcs let defaultColor = palette.midnightGreen let secondaryColor = palette.orangeYellow let accentColor = palette.carrotOrange let debugColor = palette.paradisePink let defaultStyle = defaultColor .withAlpha(0.4) .stroke(2) .appendFill(rac.Fill.none) let secondaryStyle = secondaryColor .withAlpha(0.8) .stroke(3) .appendFill(rac.Fill.none) let accentStyle = accentColor .withAlpha(0.9) .stroke(3) let defaultTextStyle = secondaryColor.fill() .appendStroke(rac.Stroke.none); let defaultTextFont = 'Spot Mono Medium, Spot Mono, Menlo, monospace'; let defaultTextSize = 15; let debugStyle = debugColor.stroke(2) let debugTextStyle = backgroundColor .withAlpha(0.5) .stroke(2) .appendFill(debugStyle) return { // The styles object defines the initial configuration of all created drawings styles: { backgroundColor: backgroundColor, defaultStyle: defaultStyle, defaultTextStyle: defaultTextStyle, defaultTextFont: defaultTextFont, defaultTextSize: defaultTextSize, debugStyle: debugStyle, debugTextStyle: debugTextStyle }, // The shared object is passed along to the drawing funcion of each cell shared: { secondary: secondaryStyle, secondaryColor: secondaryColor, accent: accentStyle, accentColor: accentColor, backgroundColor: backgroundColor, palette: palette } } })31:T44e,// The factory function is called with the height and the drawing code for this cell exampleDrawing(300, (rac, shared) => { rac.Point.zero.text('First drawing') .withPaddings(10).draw() let center = rac.Point.canvasCenter() let arcCount = 20 let length = 400 let offsetAngle = rac.Angle.from(1/24) let angleDelta = rac.Angle.from(0.3) // Create all arcs let arcs = rac.Composite() for (let index = 0; index < arcCount; ++index) { let ratio = index/arcCount let arcCenterX = ratio*length + center.x - length/2 center.withX(arcCenterX) .arc(80) .attachTo(arcs) } // Draw circles arcs.draw() // Draw triangles arcs.sequence.forEach((arc, index) => { let ratio = index/arcCount let totalDelta = angleDelta.mult(ratio) let angleStart = offsetAngle.shift(totalDelta) arc = arc.withAngleDistance(1/3) arc.shift(angleStart.turn + 0/3).chordSegment().draw(shared.accent) arc.shift(angleStart.turn + 1/3).chordSegment().draw(shared.secondary) arc.shift(angleStart.turn + 2/3).chordSegment().draw(shared.secondary) }) })32:[] 2e:{"id":"e52b744ef25be022","slug":"make-rac-factory-example","title":"makeRacFactory example","thumbnail":"e7e0fea185ca251bf126f0a8218200e40e92526087d894dc371c0bef7a0fd621","access_level":"public","create_time":"$D2023-07-13T06:56:54.921Z","update_time":"$D2023-10-19T18:30:42.291Z","view_time":null,"first_public_time":"$D2023-07-13T06:56:54.921Z","fork":{"id":"d7b63c149a51ccb6","slug":"rac-drawing-template","title":"RAC Drawing Template","owner":{"id":"f15bd58f0c95f3c8","login":"lopsae","name":"Maic López Sáenz"}},"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":441,"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":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"makeRacFactory example","cells":[{"id":0,"value":"# `makeRacFactory` example\n\n`makeRacFactory` produces a `factory` function that can be used to create any number of drawing cells in a notebook, each with independent `RAC` and `P5js` instances, and its own block of drawing code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":191,"value":"---\n## Setting up an `exampleDrawing` factory\n\n`makeRacFactory` receives as parameters the constructor functions for `RAC`, `P5js`, and the `p5Canvas` function. These can be the objects retrieved by `require` or `import` functions.\n\nThe last parameter for `makeRacFactory` is a function that creates an object containing settings each time a drawing is created. This object defines visual settings like colors, stroke, and fill styles; and can also be used to setup `P5js` and `RAC` settings.\n\n`makeRacFactory` returns a factory function, in this examples called `exampleDrawing`, which can be used any number of times to create independent drawing cells:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"---\n## First drawing\n\n`exampleDrawing` is called with the height of the cell and a function parameter that contains the drawing code for this specific cell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"---\n## More drawings\nEach call to `exampleDrawing` will create another independent drawing. The style configuration is shared between all cells, but each has its own drawing function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":206,"value":"exampleDrawing(200, (rac, shared) => {\n rac.Point.zero.text('Second drawing')\n .withPaddings(10).draw()\n \n let center = rac.Point.canvasCenter()\n\n let arcCount = 40\n let length = 600\n let offsetAngle = rac.Angle.zero\n let angleDelta = rac.Angle.from(1.5/(arcCount-1))\n\n // Create all arcs\n let arcs = rac.Composite()\n for (let index = 0; index < arcCount; ++index) {\n let ratio = index/arcCount\n let arcCenterX = ratio*length + center.x - length/2\n center.withX(arcCenterX)\n .arc(60)\n .attachTo(arcs)\n }\n\n // Draw circles\n arcs.draw()\n\n arcs.sequence.forEach((arc, index) => {\n let currentDelta = angleDelta.mult(index)\n let currentAngle = offsetAngle.shift(currentDelta)\n let lastDelta = angleDelta.mult(index -1)\n let lastAngle = offsetAngle.shift(lastDelta)\n // Draw point for current angle\n arc.pointAtAngle(currentAngle).arc(5).draw(shared.accent)\n // Draw arc since last angle\n arc.withStart(lastAngle).withEnd(currentAngle).draw(shared.secondary)\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"---\n### Colophon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"Examples using:\n> RAC: `${Rac.version} (${Rac.build})`\n>
\n> p5Canvas: `${p5Canvas.version}`\n>
\n> makeRacFactory: `${makeRacFactory.version}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"// Rac = require('https://unpkg.com/ruler-and-compass@1.3.0')\nRac = require('ruler-and-compass@1.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"requireCheck('ruler-and-compass', '1.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"p5 = require('p5@1.7.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"requireCheck('p5', '1.7.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"import {p5Canvas} from '@lopsae/p5-canvas@1180'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"importCheck('@lopsae/p5-canvas', 1180)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"import {makeRacFactory} from '@lopsae/make-rac-factory@784'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"importCheck('@lopsae/make-rac-factory', '784')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"import {styles} from '@lopsae/styles@159'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"importCheck('@lopsae/styles', 159)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"import {importCheck} from '@lopsae/import-utilities@552'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"importCheck('@lopsae/import-utilities', 552)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"import {requireCheck} from '@lopsae/require-utilities@306'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":222,"value":"importCheck('@lopsae/require-utilities', 306)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"