2c:null 2d:["$","title",null,{"children":"RAC Drawing Template | Maic López Sáenz | Observable"}] 32:T623,{ let isFirstRun = true let angleControl = null return interactiveDrawing(400, (rac, shared) => { if (isFirstRun) { isFirstRun = false angleControl = new Rac.ArcControl(rac, 0, rac.Angle.zero) } shared.backgroundColor.applyBackground() rac.Point.zero.text('Demo interactive drawing') .withPaddings(10).draw(shared.markText) let center = rac.Point.canvasCenter() // Control anchoring and value. let controlCenter = center.addX(-300) angleControl.anchor = controlCenter.arc(80) let baseAngle = angleControl.distance() // Control decorations. controlCenter .text(`${baseAngle.turn.toFixed(2)}`, rac.Text.Format.centered) .draw(shared.controlText) controlCenter .arc(30, baseAngle.add(-0.3), baseAngle.add(0.3)) .draw(shared.controlStroke) .pointAtLengthRatio(0.5) .segmentToAngle(baseAngle, 90).draw(shared.controlStroke) .endPoint().arc(6).draw(shared.controlStroke) // Mandala. center.arc(160, baseAngle).draw(shared.accent) .startSegment().debug() center.ray(baseAngle).translateToDistance(210).debug(true) let secondaryRate = 3 let circleCount = secondaryRate * 9 for (let index = 0; index < circleCount; ++index) { let angle = baseAngle.add(index/circleCount) let arc = center.pointToAngle(angle, 90).arc(60) if (index % secondaryRate == 0) { arc.draw(shared.mark) } else { arc.draw() } } rac.controller.drawControls() }) // interactiveDrawing }33:T5c2,drawing(150, (rac, shared) => { rac.Point.zero.text('Style Preview') .withPaddings(10).draw(shared.markText) let center = rac.Point.canvasCenter() let distance = 140 let format = rac.Text.Format.bottomLeft let pad = 5 // default let defaultString = `default\nstroke:${shared.default.styles[0].weight}` center.addX(distance * -2) .arc(50, 0, 1/4, false).draw() .endPoint() .text(defaultString, format) .withPaddings(pad, 0).draw() // mark let markString = `mark\nstroke:${shared.mark.styles[0].weight}` center.addX(distance * -1) .arc(50, 0, 1/4, false).draw(shared.mark) .endPoint() .text(markString, format) .withPaddings(pad, 0).draw(shared.markText) // accent let accentString = `accent\nstroke:${shared.accent.styles[0].weight}` center.addX(distance * 0) .arc(50, 0, 1/4, false).draw(shared.accent) .endPoint() .text(accentString, format) .withPaddings(pad, 0).draw(shared.accentText) // control let controlString = `control\nstroke:${shared.control.styles[0].weight}` center.addX(distance * 1) .arc(50, 0, 1/4, false).draw(shared.control) .endPoint() .text(controlString, format) .withPaddings(pad, 0).draw(shared.controlText) // debug let debugString = `debug\nstroke:${shared.debug.weight}` center.addX(distance * 2) .arc(50, 15/16, 1/4, false).debug(true) .endPoint() .text(debugString, format) .withPaddings(pad, 0).debug() })34:Tc99,function makeDrawingOptions(rac) { // https://observablehq.com/@makio135/give-me-colors // ['#edd9c0', '#f3a548', '#da393f', '#186c8f', '#42353e'] // replacing redish: #c54a25 // adding greenish: #8ab889 let palette = { tanish: rac.Color.fromHex('edd9c0'), orangeish: rac.Color.fromHex('f3a548'), blueish: rac.Color.fromHex('186c8f'), darkish: rac.Color.fromHex('42353e'), redish: rac.Color.fromHex('c54a25'), greenish : rac.Color.fromHex('8ab889') } let backgroundColor = palette.blueish let defaultColor = palette.darkish let markColor = palette.tanish let accentColor = palette.orangeish let controlColor = palette.greenish let pointerColor = palette.tanish let debugColor = palette.redish let defaultStyle = defaultColor .withAlpha(0.6) .stroke(2) .appendFill(rac.Fill.none) let defaultTextStyle = rac.Stroke.none .appendFill(defaultColor) let defaultTextFont = 'Spot Mono Medium, Spot Mono, Menlo, monospace' let defaultTextSize = 15 let markStyle = markColor .withAlpha(0.8) .stroke(3) .appendFill(rac.Fill.none) let markTextStyle = backgroundColor .withAlpha(0.3) .stroke(3) .appendFill(markColor) let accentStyle = accentColor .stroke(3) .appendFill(rac.Fill.none) let accentTextStyle = backgroundColor .withAlpha(0.3) .stroke(3) .appendFill(accentColor) let pointerStyle = pointerColor .withAlpha(0.5) .stroke(3) .appendFill(pointerColor.withAlpha(0.1)) let controlStroke = controlColor.stroke(2) let controlStyle = controlStroke .appendFill(controlColor.withAlpha(0.3)) let controlTextStyle = backgroundColor .withAlpha(0.3) .stroke(3) .appendFill(controlColor) let debugStyle = debugColor.stroke(2) let debugTextStyle = defaultColor .withAlpha(0.3) .stroke(2) .appendFill(debugColor) let debugTextFont = defaultTextFont let debugTextSize = defaultTextSize let optionsObject = { styles: { backgroundColor: backgroundColor, defaultStyle: defaultStyle, defaultTextStyle: defaultTextStyle, defaultTextFont: defaultTextFont, defaultTextSize: defaultTextSize, debugStyle: debugStyle, debugTextStyle: debugTextStyle, debugTextFont: debugTextFont, debugTextSize: debugTextSize, pointerStyle: pointerStyle, controlStyle: controlStyle }, shared: { palette: palette, backgroundColor: backgroundColor, default: defaultStyle, defaultColor: defaultColor, defaultText: defaultTextStyle, mark: markStyle, markColor: markColor, markText: markTextStyle, accent: accentStyle, accentColor: accentColor, accentText: accentTextStyle, control: controlStyle, controlColor: controlColor, controlStroke: controlStroke, controlText: controlTextStyle, debug: debugStyle, debugColor: debugColor, debugText: debugTextStyle } } return optionsObject }35:[] 30:{"id":"d7b63c149a51ccb6","slug":"rac-drawing-template","title":"RAC Drawing Template","thumbnail":"36fcc81976e8aac1882db7db70e9c40db3ce57923ab0589aa044d9b00155890b","access_level":"public","create_time":"$D2021-07-01T01:20:17.294Z","update_time":"$D2026-04-12T02:57:46.055Z","view_time":null,"first_public_time":"$D2021-07-01T20:06:56.259Z","has_unpublished_edits":null,"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":443,"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,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"RAC Drawing Template","cells":[{"id":0,"value":"# RAC Drawing Template\n\nNotebook setup with RAC and P5js, ready to fork and start drawing.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"drawing(400, (rac, shared) => {\n rac.Point.zero.text('Demo drawing')\n .withPaddings(10).draw(shared.markText)\n \n let center = rac.Point.canvasCenter()\n center.arc(160).draw(shared.accent)\n .startSegment().debug()\n center.ray(0).translateToDistance(210).debug(true)\n\n let secondaryRate = 3\n let circleCount = secondaryRate * 9\n for (let index = 0; index < circleCount; ++index) {\n let angle = rac.Angle(index/circleCount)\n let arc = center.pointToAngle(angle, 90).arc(60)\n if (index % secondaryRate == 0) {\n arc.draw(shared.mark)\n } else {\n arc.draw()\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"---\n### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"drawing = makeRacFactory(Rac, p5, p5Canvas, rac => {\n let optionsObject = makeDrawingOptions(rac)\n return optionsObject\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"interactiveDrawing = makeRacFactory(Rac, p5, p5Canvas, rac => {\n let optionsObject = makeDrawingOptions(rac)\n optionsObject.isInteractive = true\n optionsObject.postSetup = rac => {\n rac.drawer.p5.frameRate(30)\n }\n \n return optionsObject\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"makeDrawingOptions(new Rac())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"---\n### Colophon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Examples using:\n> RAC: `${Rac.version} (${Rac.build}) ${Rac.dated}`\n>
\n> p5Canvas: `${p5Canvas.version}`\n>
\n> makeRacFactory: `${makeRacFactory.version}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Rac = require('ruler-and-compass@1.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"requireCheck('ruler-and-compass', '1.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"p5 = require('p5@1.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"requireCheck('p5@1.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"import {p5Canvas} from '@lopsae/p5-canvas@1180'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"importCheck('@lopsae/p5-canvas', '1180')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import {makeRacFactory} from '@lopsae/make-rac-factory@825'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"importCheck('@lopsae/make-rac-factory', '825')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {styles} from '@lopsae/styles@159'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"importCheck('@lopsae/styles', '159')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {importCheck} from '@lopsae/import-utilities@552'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"importCheck('@lopsae/import-utilities', '552')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"import {requireCheck} from '@lopsae/require-utilities@306'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"importCheck('@lopsae/require-utilities', '306')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"