2a:null 2b:["$","title",null,{"children":"Triangle Tiles Experiment - August 2023 | Maic López Sáenz | Observable"}] 30:T407,drawing(300, (rac, shared) => { rac.Point.zero.text('Worms one') .withPaddings(10).draw(shared.markText) let mark = shared.mark let format = rac.Text.Format.bottomLeft.withPaddings(0, 3) let center = rac.Point.canvasCenter().addY(30) let radius = 120 let wormWidth = 40 let triangle = center.triangle(3/4, radius).draw() // Margins let margin = triangle.withRadius(radius+30).draw() margin.side0().text('side0 - worm start', format) .upright().draw() margin.side1().text('side1 - cap', format) .upright().draw() margin.side2().text('side2 - worm end', format) .upright().draw() let sides = [triangle.side0(), triangle.side1(), triangle.side2()] let sideLength = triangle.side0().length sides[0].withLength(sideLength/2 - wormWidth/2) .arcWithAngleDistance(1/6).draw(mark) .withRadius(sideLength/2 + wormWidth/2).draw(mark) sides[1].translateToLength(sideLength/2) .withLength(wormWidth/2) .arcWithAngleDistance(1/2).draw(mark) triangle.draw(mark) })31:T556,function drawCrissCrossOneTile(triangle, style) { let sides = [triangle.side0(), triangle.side1(), triangle.side2()] // let shift = Math.floor(Math.random() * sides.length) let shift = 2 sides = sides.map((item, index) => { return sides[(index + shift) % sides.length] }) // Points let s0p0 = sides[0].pointAtLengthRatio(3/12) let s0p1 = sides[0].pointAtLengthRatio(6/12) let s0p2 = sides[0].pointAtLengthRatio(9/12) let s1p0 = sides[1].pointAtLengthRatio(3/12) let s1p1 = sides[1].pointAtLengthRatio(4/11) let s1p2 = sides[1].pointAtLengthRatio(5/11) let s1p3 = sides[1].pointAtLengthRatio(6/11) let s1p4 = sides[1].pointAtLengthRatio(7/11) let s1p5 = sides[1].pointAtLengthRatio(9/12) let s2p0 = sides[2].pointAtLengthRatio(3/12) let s2p1 = sides[2].pointAtLengthRatio(4.5/12) let s2p2 = sides[2].pointAtLengthRatio(6/12) let s2p3 = sides[2].pointAtLengthRatio(7.5/12) let s2p4 = sides[2].pointAtLengthRatio(9/12) // Crossings s1p0.segmentToPoint(s0p2).draw(style) s1p1.segmentToPoint(s0p1).draw(style) s1p2.segmentToPoint(s0p0).draw(style) s1p3.segmentToPoint(s2p4).draw(style) s1p4.segmentToPoint(s2p2).draw(style) s1p5.segmentToPoint(s2p0).draw(style) s0p0.segmentToPoint(s2p3).draw(style) s0p1.segmentToPoint(s2p2).draw(style) s0p2.segmentToPoint(s2p1).draw(style) triangle.draw(style) }32:T530,function drawCrissCrossTwoTile(triangle, style) { let sides = [triangle.side0(), triangle.side1(), triangle.side2()] let shift = Math.floor(Math.random() * sides.length) // let shift = 2 sides = sides.map((item, index) => { return sides[(index + shift) % sides.length] }) // Points let s0p0 = sides[0].pointAtLengthRatio(3/12) let s0p1 = sides[0].pointAtLengthRatio(6/12) let s0p2 = sides[0].pointAtLengthRatio(9/12) let s1p0 = sides[1].pointAtLengthRatio(3/12) let s1p1 = sides[1].pointAtLengthRatio(4.5/12) let s1p2 = sides[1].pointAtLengthRatio(6/12) let s1p3 = sides[1].pointAtLengthRatio(7.5/12) let s1p4 = sides[1].pointAtLengthRatio(9/12) let s2p0 = sides[2].pointAtLengthRatio(3/12) let s2p1 = sides[2].pointAtLengthRatio(4.5/12) let s2p2 = sides[2].pointAtLengthRatio(6/12) let s2p3 = sides[2].pointAtLengthRatio(7.5/12) let s2p4 = sides[2].pointAtLengthRatio(9/12) // Crossings s1p0.segmentToPoint(s0p2).draw(style) s1p1.segmentToPoint(s0p1).draw(style) s1p2.segmentToPoint(s0p0).draw(style) s1p2.segmentToPoint(s2p4).draw(style) s1p3.segmentToPoint(s2p2).draw(style) s1p4.segmentToPoint(s2p0).draw(style) s0p0.segmentToPoint(s2p3).draw(style) s0p1.segmentToPoint(s2p2).draw(style) s0p2.segmentToPoint(s2p1).draw(style) triangle.draw(style) }33:T7e0,function drawWormsTwoTile(triangle, style) { let sides = [triangle.side0(), triangle.side1(), triangle.side2()] let shift = Math.floor(Math.random() * sides.length) sides = sides.map((item, index) => { return sides[(index + shift) % sides.length] }) // Setup let sideLength = triangle.side0().length // let wormWidth = sideLength * 0.01 let wormWidth = sideLength * 0.4 // let wormWidth = sideLength * 0.15 let sideThird = sideLength / 3 // Complex curve let translate = sideLength * 0.403 let complexRadius = sideLength - translate - sideThird // let reversed = Math.floor(Math.random() * 2) == 1 let reversed = false let sideA = reversed ? sides[1] : sides[1].reverse() let sideB = reversed ? sides[0] : sides[2].reverse() let sideC = reversed ? sides[2] : sides[0].reverse() let complexCurve1 = sideA.translateToLength(translate) .withLength(complexRadius) .arc(null, reversed) let complexCurve2 = sideB.translateToLength(translate) .withLength(complexRadius) .arc(null, reversed) complexCurve1 = complexCurve1.withEndTowardsPoint(complexCurve2.center)//.debug() complexCurve2 = complexCurve2.withEndTowardsPoint(complexCurve1.center)//.debug() complexCurve1.withRadius(complexRadius - wormWidth/2).draw(style) complexCurve1.withRadius(complexRadius + wormWidth/2).draw(style) complexCurve2.withRadius(complexRadius - wormWidth/2).draw(style) complexCurve2.withRadius(complexRadius + wormWidth/2).draw(style) // Simple curve let simpleCurve = sides[0].withLength(sideThird) .arcWithAngleDistance(1/6)//.debug() simpleCurve.withRadius(sideThird - wormWidth/2).draw(style) simpleCurve.withRadius(sideThird + wormWidth/2).draw(style) // Caps sideA.translateToLength(sideThird * 1) .withLength(wormWidth/2) .arcWithAngleDistance(1/2, reversed).draw(style) sideC.translateToLength(sideThird * 1) .withLength(wormWidth/2) .arcWithAngleDistance(1/2, reversed).draw(style) triangle.draw(style) }34:T913,drawing(300, (rac, shared) => { rac.Point.zero.text('Worms two - estimated sketch') .withPaddings(10).draw(shared.markText) let mark = shared.mark let accent = shared.accent let format = rac.Text.Format.bottomLeft.withPaddings(0, 3) let center = rac.Point.canvasCenter().addY(30) let radius = 120 let triangle = center.triangle(3/4, radius).draw() // Margins let margin = triangle.withRadius(radius+30).draw() margin.side0().text('side0', format) .upright().draw() margin.side1().text('side1', format) .upright().draw() margin.side2().text('side2', format) .upright().draw() // Setup let sides = [triangle.side0(), triangle.side1(), triangle.side2()] let wormWidth = 30 let sideLength = triangle.side0().length let sideThird = sideLength / 3 // Complex curve let translate = sideLength * 0.403 let complexRadius = sideLength - translate - sideThird let reversed = Math.floor(Math.random() * 2) == 1 let sideA = reversed ? sides[1] : sides[1].reverse() let sideB = reversed ? sides[0] : sides[2].reverse() let sideC = reversed ? sides[2] : sides[0].reverse() let complexCurve1 = sideA.translateToLength(translate) .withLength(complexRadius) .arc(null, reversed) let complexCurve2 = sideB.translateToLength(translate) .withLength(complexRadius) .arc(null, reversed) complexCurve1 = complexCurve1.withEndTowardsPoint(complexCurve2.center)//.debug() complexCurve2 = complexCurve2.withEndTowardsPoint(complexCurve1.center)//.debug() complexCurve1.withRadius(complexRadius - wormWidth/2).draw(mark) complexCurve1.withRadius(complexRadius + wormWidth/2).draw(mark) complexCurve2.withRadius(complexRadius - wormWidth/2).draw(mark) complexCurve2.withRadius(complexRadius + wormWidth/2).draw(mark) // Simple curve let simpleCurve = sides[0].withLength(sideThird) .arcWithAngleDistance(1/6)//.debug() simpleCurve.withRadius(sideThird - wormWidth/2).draw(mark) simpleCurve.withRadius(sideThird + wormWidth/2).draw(mark) // Caps sideA.translateToLength(sideThird * 1) .withLength(wormWidth/2) .arcWithAngleDistance(1/2, reversed).draw(mark) sideC.translateToLength(sideThird * 1) .withLength(wormWidth/2) .arcWithAngleDistance(1/2, reversed).draw(mark) triangle.draw(mark) })35:T8d8,drawing(300, (rac, shared) => { rac.Point.zero.text('Worms two - accident') .withPaddings(10).draw(shared.markText) let mark = shared.mark let accent = shared.accent let format = rac.Text.Format.bottomLeft.withPaddings(0, 3) let center = rac.Point.canvasCenter().addY(30) let radius = 120 let triangle = center.triangle(3/4, radius).draw() // Margins let margin = triangle.withRadius(radius+30).draw() margin.side0().text('side0', format) .upright().draw() margin.side1().text('side1', format) .upright().draw() margin.side2().text('side2', format) .upright().draw() // Setup let sides = [triangle.side0(), triangle.side1(), triangle.side2()] let wormWidth = 30 let sideLength = triangle.side0().length let sideThird = sideLength / 3 // Complex curve let translate = sideLength * 0.403 let complexRadius = sideLength - translate - sideThird // let reversed = Math.floor(Math.random() * 2) == 1 let reversed = true let sideA = reversed ? sides[2] : sides[1].reverse() let sideB = reversed ? sides[1] : sides[2].reverse() let complexCurve1 = sideA.translateToLength(translate) .withLength(complexRadius) .arc(null, false) let complexCurve2 = sideB.translateToLength(translate) .withLength(complexRadius) .arc(null, false) complexCurve1 = complexCurve1.withEndTowardsPoint(complexCurve2.center).debug() complexCurve2 = complexCurve2.withEndTowardsPoint(complexCurve1.center).debug() complexCurve1.withRadius(complexRadius - wormWidth/2).draw(mark) complexCurve1.withRadius(complexRadius + wormWidth/2).draw(mark) complexCurve2.withRadius(complexRadius - wormWidth/2).draw(mark) complexCurve2.withRadius(complexRadius + wormWidth/2).draw(mark) // Simple curve let simpleCurve = sides[0].withLength(sideThird) .arcWithAngleDistance(1/6)//.debug() simpleCurve.withRadius(sideThird - wormWidth/2).draw(mark) simpleCurve.withRadius(sideThird + wormWidth/2).draw(mark) // Caps sides[0].translateToLength(sideThird * 2) .withLength(wormWidth/2) .arcWithAngleDistance(1/2).draw(mark) sides[1].translateToLength(sideThird * 2) .withLength(wormWidth/2) .arcWithAngleDistance(1/2).draw(mark) triangle.draw(mark) })36:T7ec,drawing(300, (rac, shared) => { rac.Point.zero.text('Worms two - Intersection attempts') .withPaddings(10).draw(shared.markText) let mark = shared.mark let accent = shared.accent let format = rac.Text.Format.bottomLeft.withPaddings(0, 3) let center = rac.Point.canvasCenter().addY(30) let radius = 120 let wormWidth = 20 let triangle = center.triangle(3/4, radius).draw() // Margins let margin = triangle.withRadius(radius+30).draw() margin.side0().text('side0 - ¿?', format) .upright().draw() margin.side1().text('side1 - ¿?', format) .upright().draw() margin.side2().text('side2 - ¿?', format) .upright().draw() // Points let s0p0 = triangle.side0().pointAtLengthRatio(1/3) let s0p1 = triangle.side0().pointAtLengthRatio(2/3) let s1p0 = triangle.side1().pointAtLengthRatio(1/3).debug() let s1p1 = triangle.side1().pointAtLengthRatio(2/3) let s2p0 = triangle.side2().pointAtLengthRatio(1/3).debug() let s2p1 = triangle.side2().pointAtLengthRatio(2/3) // Curves let sides = [triangle.side0(), triangle.side1(), triangle.side2()] let sideLength = triangle.side0().length let sideThird = sideLength / 3 // Complex curve let cd = sideThird + sideLength/2 -50 let complexCurve1 = sides[1].translateToLength(cd).debug() .inverse().withLength(cd - sideThird) .arc(null, false).draw(accent) let complexCurve2 = sides[2].translateToLength(cd) .inverse().withLength(cd - sideThird) .arc(null, false).draw(accent) complexCurve1.center.segmentToPoint(complexCurve2.center).draw() complexCurve1.withCenter(s1p0).draw() complexCurve2.withCenter(s2p0).draw() // Simple curve sides[0].withLength(sideThird) .arcWithAngleDistance(1/6).draw(accent) // Caps sides[0].translateToLength(sideThird * 2) .withLength(wormWidth/2) .arcWithAngleDistance(1/2).draw(accent) sides[1].translateToLength(sideThird * 2) .withLength(wormWidth/2) .arcWithAngleDistance(1/2).draw(accent) triangle.draw(mark) })37:T5ef,drawing(500, (rac, shared) => { rac.Point.zero.text('Figuring out the intersection point') .withPaddings(10).draw(shared.markText) let mark = shared.mark let accent = shared.accent let center = rac.Point.canvasCenter().addY(30) let radius = 200 let wormWidth = 20 let triangle = center.triangle(3/4, radius).draw() triangle.ray0().text(`length: ${triangle.side0().length}`, rac.Text.Format.bottomLeft) .draw(shared.markText) // Points let s1p0 = triangle.side1().pointAtLengthRatio(1/3).debug() let s2p0 = triangle.side2().pointAtLengthRatio(1/3).debug() // Curves let sideLength = triangle.side0().length let sideThird = sideLength / 3 let start = 0 let delta = 20 let repetitions = 25 for (let index = 0; index < repetitions; index++) { let translation = start + delta * index let curveRadius = sideLength - translation - sideThird let curve1 = triangle.side1().reverse().translateToLength(translation) .withLength(sideLength - translation - sideThird) .arcWithAngleDistance(1/2, false) let curve2 = triangle.side2().reverse().translateToLength(translation) .withLength(sideLength - translation - sideThird) .arcWithAngleDistance(1/2, false) if (curveRadius > 0) { curve1.draw() curve2.draw() } let intArc = curve1.intersectionArc(curve2) if (intArc !== null) intArc.draw(mark) curve1.center.segmentToPoint(curve2.center).draw() .pointAtBisector().arc(5).draw(mark) } })38:Te9f,class TriangleTile { // Creates a new TriangleTile. // + center - point at the center of the triangle // + angle - angle to the first vertex of the triangle // + radius - distance from the center to each vertex of the triangle constructor(rac, center, angle, radius) { rac.utils.assertExists(rac, center, radius) // TODO: could this be rac.Point.class? rac.utils.assertType(rac.constructor.Point, center) rac.utils.assertType(rac.constructor.Angle, angle) rac.utils.assertNumber(radius) this.rac = rac this.center = center this.angle = angle this.radius = radius } static drawTriangle(drawer, triangle) { let vertex0 = triangle.vertex0() vertex0 .segmentToPoint(triangle.vertex1()).draw() .nextSegmentToPoint(triangle.vertex2()).draw() .nextSegmentToPoint(vertex0).draw() } static debugTriangle(drawer, triangle, drawsText) { const rac = drawer.rac const pointRadius = drawer.debugPointRadius const markerRadius = drawer.debugMarkerRadius triangle.draw() // Little circle at start marker triangle.center.arc(pointRadius, triangle.angle) .draw() // Half circle start segment let perpAngle = triangle.angle.perpendicular(); let arc = triangle.center .arc(markerRadius, perpAngle, perpAngle.inverse()) .draw(); arc.startSegment().reverse() .withLengthRatio(0.5) .draw(); arc.endSegment() .reverse() .withLengthRatio(0.5) .draw(); // Radius if (triangle.radius > pointRadius) { triangle.center.segmentToAngle(triangle.angle, triangle.radius) .withStartExtension(-pointRadius) .draw() } // Perpendicular end marker let vertex0 = triangle.center .pointToAngle(triangle.angle, triangle.radius) let endMarkerStart = vertex0 .segmentToAngle(triangle.angle.perpendicular(), markerRadius/2) .withStartExtension(-pointRadius) .draw(); let endMarkerEnd = vertex0 .segmentToAngle(triangle.angle.perpendicular(false), markerRadius/2) .withStartExtension(-pointRadius) .draw(); // Little end half circle vertex0 .arc(pointRadius, endMarkerStart.angle(), endMarkerEnd.angle(), false) .draw(); // End arrow let arrowBase = endMarkerStart .nextSegmentToPoint(endMarkerEnd.endPoint()) .nextSegmentToAngleDistance(1/6, false) .draw() .nextSegmentToAngleDistance(1/6, false) .draw() } withRadius(radius) { return new TriangleTile(this.rac, this.center, this.angle, radius); } vertex0() { return this.center.pointToAngle(this.angle, this.radius) } vertex1() { let angle1 = this.angle.add(1/3) return this.center.pointToAngle(angle1, this.radius) } vertex2() { let angle2 = this.angle.add(2/3) return this.center.pointToAngle(angle2, this.radius) } ray0() { let rayAngle = this.angle.add(5/12) return this.vertex0().ray(rayAngle) } ray1() { let rayAngle = this.angle.add(9/12) return this.vertex1().ray(rayAngle) } ray2() { let rayAngle = this.angle.add(1/12) return this.vertex2().ray(rayAngle) } counterRay0() { let rayAngle = this.angle.add(7/12) return this.vertex0().ray(rayAngle) } counterRay1() { let rayAngle = this.angle.add(11/12) return this.vertex1().ray(rayAngle) } counterRay2() { let rayAngle = this.angle.add(3/12) return this.vertex2().ray(rayAngle) } side0() { return this.vertex0().segmentToPoint(this.vertex1()) } side1() { return this.vertex1().segmentToPoint(this.vertex2()) } side2() { return this.vertex2().segmentToPoint(this.vertex0()) } }39:T86d,drawing(250, (rac, shared) => { rac.Point.zero.text('TriangleTile members') .withPaddings(10).draw(shared.markText) let markText = shared.markText let center = rac.Point.canvasCenter() let spacing = 200 let radius = 80 let format = rac.Text.Format.topLeft .withPaddings(3) // Vertices let vertexTriangle = center.addX(-spacing).triangle(3/4, radius) .draw() vertexTriangle.angle.debug(vertexTriangle.center) vertexTriangle.vertex0().debug() .text('vertex0', format).draw(markText) vertexTriangle.vertex1().debug() .text('vertex1', format).draw(markText) vertexTriangle.vertex2().debug() .text('vertex2', format).draw(markText) // Side segments format = rac.Text.Format.bottomCenter.withPaddings(3, 0) vertexTriangle.side0().translatePerpendicular(40, false).debug() .translateToLengthRatio(0.5) .text('side0', format).upright().draw(markText) vertexTriangle.side1().translatePerpendicular(40, false).debug() .translateToLengthRatio(0.5) .text('side1', format).upright().draw(markText) vertexTriangle.side2().translatePerpendicular(40, false).debug() .translateToLengthRatio(0.5) .text('side2', format).upright().draw(markText) // Rays format = rac.Text.Format.bottomLeft.withPaddings(3) let rayTriangle = center.triangle(1/4, radius) .draw() rayTriangle.angle.debug(rayTriangle.center) rayTriangle.ray0().debug() .text('ray0', format).upright().draw(markText) rayTriangle.ray1().debug() .text('ray1', format).upright().draw(markText) rayTriangle.ray2().debug() .text('ray2', format).upright().draw(markText) // Counter-rays format = rac.Text.Format.topLeft.withPaddings(3) let counterTriangle = center.addX(spacing).triangle(3/4, radius) .draw() counterTriangle.angle.debug(counterTriangle.center) counterTriangle.counterRay0().debug() .text('counterRay0', format) .upright().draw(markText) counterTriangle.counterRay1().debug() .text('counterRay1', format) .upright().draw(markText) counterTriangle.counterRay2().debug() .text('counterRay2', format) .upright().draw(markText) })3a:T466,drawing(200, (rac, shared) => { rac.Point.zero.text('TriangleTile Extensions') .withPaddings(10).draw(shared.markText) let spacing = 140 let radius = 80 let startPoint = rac.Point.canvasCenter().addX(spacing/2 + spacing * -2) // point + debug let debugPoint = startPoint debugPoint.triangle(1/12, radius) .debug() .side0().reverse() .text('point.triangle\n+debug') .withPaddings(5) .debug() // with constructor let conPoint = startPoint.addX(spacing * 1) let conAngle = rac.Angle(7/12) conAngle.debug(conPoint) new TriangleTile(rac, conPoint, conAngle, radius).draw() .side1().reverse() .text('new TriangleTile') .draw() // with ray let ray = startPoint.addX(spacing * 2).ray(5/12) .debug() ray.triangle(radius).draw(shared.mark) .ray1().text('ray.triangle', rac.Text.Format.bottomLeft) .draw(shared.markText) // with segment let segment = startPoint.addX(spacing * 3).segmentToAngle(11/12, radius) .debug() segment.triangle().draw(shared.accent) .side1().reverse() .text('segment.triangle') .draw(shared.accentText) })3b:T685,function triangleRow( rac, center, // center of the triangle at index zero rowAngle, // direction in which the triangles will be drawn, a ray from center to rowAngle touches the centers of all even indexed triangles radius, // for each triangle, distance from the center to each vertex separation, // distance between the sides of adyacent triangles startIndex, // index of the first triangle that will be drawn, can be negative count) // number of triangles to draw { rowAngle = rac.Angle.from(rowAngle) // Distance between the centers of pair-index triangles let adyacentTravel = radius + separation let pairTravel = Math.sqrt(adyacentTravel**2 - (adyacentTravel/2)**2) // Center of the last pair-index drawn let pairCenter = null if (startIndex % 2 != 0) { // If the first triangle is odd, calculate the center of its pair which is not drawn let previousIndex = (startIndex -1) pairCenter = center.pointToAngle(rowAngle, pairTravel * previousIndex) } let composite = rac.Composite() // Traverse all indexes to draw let endIndex = startIndex + count for (let index = startIndex; index < endIndex; index+=1) { if (index % 2 == 0) { // Pair triangles pairCenter = center.pointToAngle(rowAngle, pairTravel * index) pairCenter.triangle(rowAngle.perpendicular(), radius) .attachTo(composite) } else { // Odd triangles depend on the position of the last paired triangle let oddCenter = pairCenter.pointToAngle(rowAngle.add(1/12), adyacentTravel) oddCenter.triangle(rowAngle.perpendicular(false), radius) .attachTo(composite) } } return composite }3c:T480,drawing(150, (rac, shared) => { rac.Point.zero.text('triangleRow test') .withPaddings(10).draw(shared.markText) let center = rac.Point.canvasCenter() let rowAngle = rac.Angle.from(1/40) let radius = 35 let separation = 5 center.ray(rowAngle) .translatePerpendicular(radius, false) .text('from index zero').draw() center.segmentToAngle(rowAngle.add(-1/12), radius).draw(shared.mark) center.segmentToAngle(rowAngle.add(1/12), radius + separation).draw(shared.accent) triangleRow(rac, center, rowAngle, radius, separation, 0, 4) .draw() let positiveStart = center.addX(-250) positiveStart.ray(rowAngle).debug() .translatePerpendicular(radius, false) .text('index 1, length 4').draw() triangleRow(rac, positiveStart, rowAngle.turn, radius, separation, 1, 4) .draw() let negativeStart = center.addX(250) let negativeRay = negativeStart.ray(rowAngle.inverse()) negativeRay.debug() .translatePerpendicular(radius, false) .inverse() .text('index -4, length 6', rac.Text.Format.bl).draw() triangleRow(rac, negativeStart, negativeRay.angle, radius, separation, -4, 6) .draw() })3d:Ta38,drawing = makeRacFactory(RacExtended, p5, p5Canvas, rac => { // https://observablehq.com/@makio135/give-me-colors // ['#edd9c0', '#f3a548', '#da393f', '#186c8f', '#42353e'] let palette = { tanish: rac.Color.fromHex('edd9c0'), orangeish: rac.Color.fromHex('f3a548'), redish: rac.Color.fromHex('da393f'), blueish: rac.Color.fromHex('186c8f'), darkish: rac.Color.fromHex('42353e') } let backgroundColor = palette.blueish let defaultColor = palette.darkish let markColor = palette.tanish let accentColor = palette.orangeish 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 debugStyle = debugColor.stroke(2) let debugTextStyle = defaultColor .withAlpha(0.2) .stroke(4) .appendFill(debugColor) let debugTextFont = defaultTextFont let debugTextSize = defaultTextSize let postSetup = function(rac) { // TODO: draw and debug functions setup here, see RacExtended for possible improvements rac.drawer.setDrawFunction(TriangleTile, TriangleTile.drawTriangle) rac.drawer.setDebugFunction(TriangleTile, TriangleTile.debugTriangle) } return { postSetup: postSetup, styles: { backgroundColor: backgroundColor, defaultStyle: defaultStyle, defaultTextStyle: defaultTextStyle, defaultTextFont: defaultTextFont, defaultTextSize: defaultTextSize, debugStyle: debugStyle, debugTextStyle: debugTextStyle, debugTextFont: debugTextFont, debugTextSize: debugTextSize }, shared: { default: defaultStyle, defaultColor: defaultColor, defaultText: defaultTextStyle, mark: markStyle, markColor: markColor, markText: markTextStyle, accent: accentStyle, accentColor: accentColor, accentText: accentTextStyle, backgroundColor: backgroundColor, palette: palette } } })3e:[] 2e:{"id":"02acddab349ee543","slug":"triangle-tiles-august-23","title":"Triangle Tiles Experiment - August 2023","thumbnail":"78d858db8be8dd7d51202f2717ff03481548286ea38f76d1b3ae944a9251df0a","access_level":"public","create_time":"$D2022-04-27T05:14:31.295Z","update_time":"$D2023-10-25T20:47:43.755Z","view_time":null,"first_public_time":"$D2023-01-20T01:53:12.038Z","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":2036,"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":0,"collection":null,"type":"notebook","body":{"title":"Triangle Tiles Experiment - August 2023","cells":[{"id":0,"value":"# Triangle Tiles Experiment - August 2023\n\nExperiments with triangle tile patterns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1609,"value":"---\n### Worms One","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":931,"value":"drawing(600, (rac, shared) => {\n rac.Point.zero.text('Triangle tiling - Worms One - Random orientation')\n .withPaddings(10).draw(shared.markText)\n \n let origin = rac.Point(140, 80)\n let rowAngle = rac.Angle.east\n let radius = 60\n let separation = 8\n\n let xCount = 9\n let yCount = 10\n\n let xRow = triangleRow(rac, origin, rowAngle, radius, separation, 0, xCount * 2)\n\n xRow.sequence.forEach((item, index) => {\n if (index % 2 != 0) { return }\n let yRow = triangleRow(rac, item.center, rowAngle.add(1/3), radius, separation, 0, yCount)\n yRow.sequence.forEach(item => {\n drawWormsOneTile(item, shared.mark)\n })\n })\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1449,"value":"function drawWormsOneTile(triangle, style) {\n let sideLength = triangle.side0().length\n // let wormWidth = sideLength * 0.01\n let wormWidth = sideLength * 0.3\n \n let sides = [triangle.side0(), triangle.side1(), triangle.side2()]\n\n let shift = Math.floor(Math.random() * sides.length)\n sides = sides.map((item, index) => {\n return sides[(index + shift) % sides.length]\n })\n \n sides[0].withLength(sideLength/2 - wormWidth/2)\n .arcWithAngleDistance(1/6).draw(style)\n .withRadius(sideLength/2 + wormWidth/2).draw(style)\n\n sides[1].translateToLength(sideLength/2)\n .withLength(wormWidth/2)\n .arcWithAngleDistance(1/2).draw(style)\n\n triangle.draw(style)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1416,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1607,"value":"---\n### Criss Cross One","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1604,"value":"drawing(600, (rac, shared) => {\n rac.Point.zero.text('Triangle tiling - Criss Cross One')\n .withPaddings(10).draw(shared.markText)\n \n let origin = rac.Point(120, 80)\n let rowAngle = rac.Angle.east\n let radius = 80\n let separation = 8\n\n let xCount = 10\n let yCount = 8\n\n let xRow = triangleRow(rac, origin, rowAngle, radius, separation, 0, xCount * 2)\n\n xRow.sequence.forEach((item, index) => {\n if (index % 2 != 0) { return }\n let yRow = triangleRow(rac, item.center, rowAngle.add(1/3), radius, separation, 0, yCount)\n yRow.sequence.forEach(item => {\n drawCrissCrossOneTile(item, shared.mark)\n })\n })\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1619,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":738,"value":"drawing(300, (rac, shared) => {\n rac.Point.zero.text('Criss-cross one')\n .withPaddings(10).draw(shared.markText)\n \n let mark = shared.mark\n let format = rac.Text.Format.bottomLeft.withPaddings(0, 3)\n \n let center = rac.Point.canvasCenter().addY(30)\n let radius = 120\n \n let triangle = center.triangle(3/4, radius).draw()\n\n // Margins\n let margin = triangle.withRadius(radius+30).draw()\n margin.side0().text('side0', format)\n .upright().draw()\n margin.side1().text('side1', format)\n .upright().draw()\n margin.side2().text('side2', format)\n .upright().draw()\n\n drawCrissCrossOneTile(triangle, mark)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1635,"value":"---\n### Criss Cross Two","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1637,"value":"drawing(600, (rac, shared) => {\n rac.Point.zero.text('Triangle tiling - Criss Cross Two')\n .withPaddings(10).draw(shared.markText)\n \n let origin = rac.Point(120, 80)\n let rowAngle = rac.Angle.east\n let radius = 80\n let separation = 8\n\n let xCount = 10\n let yCount = 8\n\n let xRow = triangleRow(rac, origin, rowAngle, radius, separation, 0, xCount * 2)\n\n xRow.sequence.forEach((item, index) => {\n if (index % 2 != 0) { return }\n let yRow = triangleRow(rac, item.center, rowAngle.add(1/3), radius, separation, 0, yCount)\n yRow.sequence.forEach(item => {\n drawCrissCrossTwoTile(item, shared.mark)\n })\n })\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1640,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":775,"value":"drawing(300, (rac, shared) => {\n rac.Point.zero.text('Criss-cross two')\n .withPaddings(10).draw(shared.markText)\n \n let mark = shared.mark\n let format = rac.Text.Format.bottomLeft.withPaddings(0, 3)\n \n let center = rac.Point.canvasCenter().addY(30)\n let radius = 120\n \n let triangle = center.triangle(3/4, radius).draw()\n\n // Margins\n let margin = triangle.withRadius(radius+30).draw()\n margin.side0().text('side0', format)\n .upright().draw()\n margin.side1().text('side1', format)\n .upright().draw()\n margin.side2().text('side2', format)\n .upright().draw()\n\n drawCrissCrossTwoTile(triangle, mark)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1653,"value":"---\n### Worms Two","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1703,"value":"drawing(600, (rac, shared) => {\n rac.Point.zero.text('Triangle tiling - Worms Two')\n .withPaddings(10).draw(shared.markText)\n \n let origin = rac.Point(120, 80)\n let rowAngle = rac.Angle.east\n let radius = 80\n let separation = 8\n\n let xCount = 10\n let yCount = 8\n\n let xRow = triangleRow(rac, origin, rowAngle, radius, separation, 0, xCount * 2)\n\n xRow.sequence.forEach((item, index) => {\n if (index % 2 != 0) { return }\n let yRow = triangleRow(rac, item.center, rowAngle.add(1/3), radius, separation, 0, yCount)\n yRow.sequence.forEach(item => {\n drawWormsTwoTile(item, shared.mark)\n })\n })\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1695,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1656,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1756,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1484,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1534,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":808,"value":"### TriangleTile class","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1291,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":815,"value":"### TriangleTile extensions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":597,"value":"function setupTriangleTileExtensions(racClass) {\n \n racClass.Point.prototype.triangle = function(angle, radius) {\n angle = this.rac.Angle.from(angle)\n return new racClass.TriangleTile(this.rac, this, angle, radius)\n }\n\n racClass.Ray.prototype.triangle = function(radius) {\n return new racClass.TriangleTile(this.rac, this.start, this.angle, radius)\n }\n\n racClass.Segment.prototype.triangle = function() {\n return new racClass.TriangleTile(this.rac, this.ray.start, this.ray.angle, this.length)\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":265,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"---\n### Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"drawing(150, (rac, shared) => {\n rac.Point.zero.text('Style Preview')\n .withPaddings(10).draw(shared.markText)\n \n let center = rac.Point.canvasCenter()\n\n let distance = 150\n let bll = rac.Text.Format.baselineLeft\n\n // default\n center.addX(distance * -1.5)\n .arc(50, 0, 1/4, false).draw()\n .endPoint().text('default', bll)\n .withPaddings(5, 0).draw()\n \n // mark\n center.addX(distance * -0.5)\n .arc(50, 0, 1/4, false).draw(shared.mark)\n .endPoint().text('mark', bll)\n .withPaddings(5, 0).draw(shared.markText)\n \n // accent\n center.addX(distance * 0.5)\n .arc(50, 0, 1/4, false).draw(shared.accent)\n .endPoint().text('accent', bll)\n .withPaddings(5, 0).draw(shared.accentText)\n \n // debug\n center.addX(distance * 1.5)\n .arc(50, 0, 1/4, false).debug(true)\n .endPoint().text('debug', bll)\n .withPaddings(5, 0).debug()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"// Extending Rac class with new objects\nRacExtended = {\n // Not really necessary, but matches format of other classes\n Rac.TriangleTile = TriangleTile\n Rac.setupDrawableProtoFunctions(TriangleTile)\n setupTriangleTileExtensions(Rac)\n \n // TODO: here add static options to P5Drawer to register Triangle as drawable\n // currently set in postSetup:\n // rac.drawer.setDrawFunction(TriangleTile, TriangleTile.drawTriangle)\n // maybe it could be\n // Rac.P5Drawer.addDrawable(TriangleTile, TriangleTile.drawTriangle)\n \n \n return Rac\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"---\n### TODOs:\n\nFor `RAC`\n+ Think about static options to P5Drawer to register Triangle as drawable, instead of postSetup\n+ check if there are notes about rac.dev.js and rac.min.js in documentation\n+ make classes available in rac.Point.class? and similar","pinned":false,"hidden":false,"mode":"md","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}) [${Rac.dated}]`\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')\n// Rac = require('https://cdn.jsdelivr.net/gh/lopsae/rac@release/1.3.0/dist/rac.min.js')\n// Rac = require('https://cdn.jsdelivr.net/gh/lopsae/rac@develop/dist/rac.dev.js')\n// Rac = require('https://cdn.jsdelivr.net/gh/lopsae/rac@1a41df07/dist/rac.dev.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"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.8.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"requireCheck('p5', '1.8.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@825'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"importCheck('@lopsae/make-rac-factory', '825')","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":352,"value":"import {requireCheck} from '@lopsae/require-utilities@306'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"importCheck('@lopsae/require-utilities', '306')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 2f:"$2e:body"