2c:null 2d:["$","title",null,{"children":"RAC Tutorials Home | Maic López Sáenz | Observable"}] 32:T12eb,{ let isFirstRun = true let pageAngleControl = null let pageRadiusControl = null return interactiveExample(heights.large, (rac, shared) => { if (isFirstRun) { isFirstRun = false pageAngleControl = new Rac.ArcControl(rac, 0.14, rac.Angle.from(1)) pageAngleControl.style = shared.controlStyle rac.controller.controls.push(pageAngleControl) pageRadiusControl = new Rac.RayControl(rac, 0, 200) pageRadiusControl.style = shared.controlStyle pageRadiusControl.setValueWithLength(150) rac.controller.controls.push(pageRadiusControl) } shared.background.applyBackground() rac.Point.zero.text('Interactive example\nDrag the circles to modify') .withPaddings(10).draw(shared.markText) let spineYOffset = 10 let spineThick = 12 let spineWidth = 40 let spineHeight = 200 // let pageAngle = rac.Angle(0.14) // let pageRadius = 150 let pageDistance = 0.2 let lineCount = 10 let lineStartCut = -0.035 let lineEndCut = -0.03 let mark = shared.mark let center = rac.Point.canvasCenter() // Spine center let spineCenter = center .addY(-spineHeight/2 + spineYOffset) .segmentToAngle(rac.Angle.down, spineHeight) // PageRadiusControl anchoring and value let pageRadius = pageRadiusControl.distance() pageRadiusControl.anchor = spineCenter .startPoint() .segmentToAngle(rac.Angle.left, pageRadius+100).draw() .endPoint().ray(rac.Angle.down) // PageAngleControl anchoring and value pageAngleControl.anchor = spineCenter .startPoint() .segmentToAngle(rac.Angle.right, pageRadius+100).draw() .nextSegmentToAngle(rac.Angle.right, 50) .arc(null, true) let pageAngle = pageAngleControl.distance() let endOfAngleControl = pageAngleControl.anchor.center .segmentToAngle(pageAngle, pageRadius).draw() .endPoint() // Pages let leftBottomArc, rightBottomArc for (let index = 0; index <= lineCount; ++index) { let spinePoint = spineCenter.pointAtLengthRatio(index/lineCount) let leftArc = spinePoint .segmentToAngle(pageAngle.shiftToOrigin(1/2, false), pageRadius) .reverse() .arcWithAngleDistance(pageDistance, false) let rightArc = spinePoint .segmentToAngle(pageAngle, pageRadius) .reverse() .arcWithAngleDistance(pageDistance) let arcExtension = 0.05 leftArc.withEndExtension(arcExtension).draw() rightArc.withEndExtension(arcExtension).draw() if (index == 0) { // Reticules for pageAngleControl let pageAngleReticuleArc = spinePoint .segmentToAngle(pageAngle, pageRadius).draw() .reverse() .arcWithAngleDistance(pageDistance) pageAngleReticuleArc.endSegment().draw() pageAngleReticuleArc.center .segmentToPoint(endOfAngleControl).draw() // Reticules for pageRadiusControl pageAngleReticuleArc.startSegment() .reverse() .arc(rac.Angle.down, true).draw() .endPoint() .segmentToPoint(pageRadiusControl.knob()).draw() } if (index == 0 || index == lineCount) { leftArc.draw(mark) rightArc.draw(mark) } else { leftArc .withStartExtension(lineStartCut) .withEndExtension(lineEndCut) .draw(mark) rightArc .withStartExtension(lineStartCut) .withEndExtension(lineEndCut) .draw(mark) } // if if (index == lineCount) { leftBottomArc = leftArc rightBottomArc = rightArc } // if }// for // Edges of pages spineCenter.draw(mark) spineCenter.reverse() .withStartPoint(leftBottomArc.endPoint()) .draw(mark) spineCenter.reverse() .withStartPoint(rightBottomArc.endPoint()) .draw(mark) // Spine end let spineBottomLeft = spineCenter.endPoint() .add(-spineWidth/2, spineThick) let spineBottomRight = spineCenter.endPoint() .add(spineWidth/2, spineThick) spineBottomLeft.segmentToPoint(spineBottomRight) .draw(mark) // Book thickness left leftBottomArc .withAnglesTowardsPoint(spineBottomLeft, leftBottomArc.endPoint()) .withRadius(leftBottomArc.center.distanceToPoint(spineBottomLeft)) .draw(mark) .endPoint() .segmentToPoint(leftBottomArc.endPoint()) .draw(mark) // Book thickness right rightBottomArc .withAnglesTowardsPoint(spineBottomRight, rightBottomArc.endPoint()) .withRadius(rightBottomArc.center.distanceToPoint(spineBottomRight)) .draw(mark) .endPoint() .segmentToPoint(rightBottomArc.endPoint()) .draw(mark) rac.controller.drawControls() }) } 33:T634,At its basic RAC defines several geometric objects like [`Angle`][angle], [`Point`][point], [`Ray`][ray], [`Segment`][segment], and [`Arc`][arc], each with methods to produce other geometric objects or to calculate interactions between objects like [intersections][intersections] or [projections][projections]. [angle]: https://rulerandcompass.org/documentation/latest/Rac.Angle.html "Angle class documentation" [point]: https://rulerandcompass.org/documentation/latest/Rac.Point.html "Point class documentation" [ray]: https://rulerandcompass.org/documentation/latest/Rac.Ray.html "Ray class documentation" [segment]: https://rulerandcompass.org/documentation/latest/Rac.Segment.html "Segment class documentation" [arc]: https://rulerandcompass.org/documentation/latest/Rac.Arc.html "Angle class documentation" [intersections]: https://rulerandcompass.org/documentation/latest/Rac.Arc.html#intersectionChord "arc.intersectionChord documentation" [projections]: https://rulerandcompass.org/documentation/latest/Rac.Ray.html#pointProjection "ray.pointProjection documentation" As an [npm package](https://www.npmjs.com/package/ruler-and-compass) RAC can be used on any node environment since it is not strongly tied to a drawing implementation. For web RAC can be setup with a [p5.js](https://p5js.org/) instance to draw into a canvas element, which is how the examples in these tutorials work. The interactive examples in these notebooks use [a factory function](/@lopsae/make-rac-factory) that takes care of setup and boilerplate to focus on the code related to geometry and drawing.34:T83b,function makeExampleOptions(rac) { // https://coolors.co/233d4d-fe7f2d-fcca46-a1c181-619b8a let palette = { charcoal: rac.Color.fromHex('233d4d'), pumpkin: rac.Color.fromHex('fe7f2d'), sunglow: rac.Color.fromHex('fcca46'), olivine: rac.Color.fromHex('a1c181'), polishedPine: rac.Color.fromHex('619b8a') } let backgroundColor = palette.sunglow let defaultColor = palette.olivine let markColor = palette.charcoal let secondaryColor = palette.polishedPine let controlColor = palette.polishedPine let debugColor = palette.pumpkin let defaultStyle = defaultColor .withAlpha(0.4) .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.9) .stroke(3) let markTextStyle = backgroundColor .withAlpha(0.3) .stroke(3) .appendFill(markColor) let secondaryStyle = secondaryColor .withAlpha(0.8) .stroke(3) let controlStyle = controlColor .stroke(2) .appendFill(controlColor.withAlpha(0.3)); let debugStyle = debugColor .stroke(2) let debugTextStyle = backgroundColor .withAlpha(0.5) .stroke(2) .appendFill(debugColor); return { styles: { backgroundColor: backgroundColor, defaultStyle: defaultStyle, defaultTextStyle: defaultTextStyle, defaultTextFont: defaultTextFont, defaultTextSize: defaultTextSize, debugStyle: debugStyle, debugTextStyle: debugTextStyle }, shared: { palette: palette, background: backgroundColor, default: defaultStyle, defaultColor: defaultColor, defaultText: defaultTextStyle, mark: markStyle, markColor: markColor, markText: markTextStyle, secondary: secondaryStyle, secondaryColor: secondaryColor, controlStyle: controlStyle } }; }35:[] 30:{"id":"785caf09f78ea436","slug":"rac-tutorial-home","title":"RAC Tutorials Home","thumbnail":"9802bd7d18cde48702d17122d317377618b6ec774200f56bbe10e0d2958ed8a3","access_level":"public","create_time":"$D2021-05-13T18:19:24.451Z","update_time":"$D2023-10-25T20:49:03.119Z","view_time":null,"first_public_time":"$D2021-05-13T18:23:57.096Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":704,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b093ddac93b9e4ff","slug":"rac-tutorials","title":"RAC Tutorials","owner":{"id":"f15bd58f0c95f3c8","login":"lopsae","name":"Maic López Sáenz"}},"type":"notebook","body":{"titling":"auto","title":"RAC Tutorials Home","cells":[{"id":0,"value":"# RAC Tutorials Home\n\n[Ruler and Compass](https://rulerandcompass.org/) (hereafter RAC) is a library to express geometric constructions using ruler-and-compass instructions. This collection of notebooks contains tutorials to play with RAC and explore the concepts it handles.\n\nBeing an ObservableHQ notebook all example drawings can be modified to play with them, and some examples are interactive.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"---\n## Documentation\n\nThe [RAC Documentation](https://lopsae.github.io/rac/documentation/latest/) contains the most comprehensive details of the functionality RAC implements.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"---\n## Tutorials\n\nEach tutorial mounts loosely on knowledge described on the previous ones, going in order is recommended:\n\n${previews([\n{\n path: \"@lopsae/rac-tutorial-base-drawables\",\n thumbnail: \"e0fc395f5add446a09918e8dbf043ace1a12ca19f7ff076cb76b8bce22b60d1d\",\n title: \"One - Base drawables\",\n author: \"Maic Lopez Saenz\"\n},\n{\n path: \"@lopsae/rac-tutorial-complex-drawables\",\n thumbnail: \"9e00d8b24b88e7050b5442ea70b1db0b6bc2dc03ee7627e14599352e7de4a063\",\n title: \"Two - Complex drawables\", \n author: \"Maic Lopez Saenz\"\n},\n{\n path: \"@lopsae/rac-tutorial-styles\",\n thumbnail: \"3d24088ee7c2725872eb76644de8bb787a610c7b27492121d60ce5e1cd551b28\",\n title: \"Three - Styles\",\n author: \"Maic Lopez Saenz\"\n}\n])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"md`---\n\n## ⚠️ In progress\n\nThese tutorials are still a work in progress, thread carefully:\n\n${previews([\n{\n path: \"@lopsae/rac-tutorial-prototype-four\",\n thumbnail: \"190016d81614c99ae9d7630ed27f8889c5f1711faff329467f3cd9bfa0d882ed\",\n title: \"[Prototype] Four - Controls\",\n author: \"Maic Lopez Saenz\"\n}\n])}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"---\n## About the examples\n\nEvery example in these tutorials runs a self contained instance of RAC and [p5.js](https://p5js.org/).\n\nEach example is run by calling `example(cellHeight, drawFunction)` which produces the `div` element that is displayed.\n\n`cellHeight` is the height for this example. All tutorials notebooks define a `heights` object, so if you want a larger canvas to play around use instead `heights.medium`, `heights.large`, or any height you want.\n\n`drawFunction(rac, shared)` is the inline anonymous function that runs the drawing code. It receives as parameters:\n+ `rac` – a `Rac` instance ready to use for drawing\n+ `shared` – an object that contains convenience object like `shared.palette` with the colors used in the examples\n\nIn most of the examples `shared` is omitted, check the [Styles Tutorial](/@lopsae/rac-tutorial-styles) for examples that use the `shared` object.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"example(heights.medium, (rac, shared) => {\n \n let center = rac.Point.canvasCenter()\n rac.Stroke(8).apply() // make all following strokes thicker\n\n let originColor = shared.palette.polishedPine\n let targetColor = shared.palette.pumpkin\n\n let totalRays = 40\n for (let index = 0; index <= totalRays; index++) {\n let ratio = index/totalRays\n\n let color = originColor.linearTransition(ratio, targetColor)\n let angle = ratio * 0.88 + 0.06 + 0.25\n center.ray(angle)\n .translateToDistance(20)\n .draw(color.stroke())\n }\n \n rac.Point.zero.text('Example with shared styles')\n .withPaddings(10)\n .draw(shared.markText)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"example = makeRacFactory(Rac, p5, p5Canvas, rac => {\n return makeExampleOptions(rac);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"interactiveExample = makeRacFactory(Rac, p5, p5Canvas, rac => {\n let options = makeExampleOptions(rac)\n options.isInteractive = true\n options.postSetup = rac => {\n rac.drawer.p5.frameRate(30)\n }\n return options\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"heights = ({\n small: 150,\n medium: 250,\n large: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"// Based on https://observablehq.com/@d3/gallery\nfunction previews(notebooks) {\n return htl.html`

${notebooks.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"// Based on https://observablehq.com/@d3/gallery\nfunction preview({path, title, author, thumbnail}) {\n return htl.html` event.currentTarget.firstElementChild.style.borderColor = \"#1b1e23\"} onmouseout=${event => event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\"}>\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"---\n### Colophon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"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":593,"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":69,"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":589,"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":71,"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":75,"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":78,"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":80,"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":18,"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":42,"value":"importCheck('@lopsae/styles', '159')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":30,"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":577,"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":580,"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"