Published
Edited
Aug 26, 2021
2 stars
example(heights.small, (rac, shared) => {
let center = rac.Point.canvasCenter()
// Colors from the shared object
let olivine = shared.palette.olivine
let pumpkin = shared.palette.pumpkin
// These examples are configured to start
// with a stroke weight of 2 and no fill
// Right side, just stroke widths
center.addX(15)
.arc(40, rac.Angle.u, rac.Angle.d).debug()
.withRadius(80).draw() // draws with current stroke weight of 2
.withRadius(120).draw(rac.Stroke(8)) // draws with stroke weight of 8
.withRadius(160).draw(rac.Stroke(15)) // draws with stroke weight of 15
.withRadius(200).draw() // draws again with current style (weight 2)
rac.Stroke(7).apply() // all subsequent calls to draw() will use a stroke weight of 7
// Left side, applying fills
center.addX(-15)
.arc(180, rac.Angle.u, rac.Angle.d, false).draw() // no fill
.withRadius(140).draw(pumpkin.fill()) // draws with a pumpkin fill
.withRadius(100).draw(olivine.fill()) // draws with a olivine fill
.withRadius(60).draw() // again without fill
.withRadius(20).draw()
// notice that without fill, the olivine previously drawn shows through
})
example(heights.small, (rac, shared) => {
let center = rac.Point.canvasCenter()
// Colors from the shared object
let olivine = shared.palette.olivine
let pine = shared.palette.polishedPine
center.arc(30).draw() // draw with current stroke weight of 2
rac.Stroke(12).apply() // all subsequent calls to draw() will use a stroke weight of 12
center.arc(60).draw()
center.arc(90).draw()
center.arc(120).draw(rac.Stroke(5)) // draw with stroke weight of 5
center.arc(150).draw(rac.Stroke(null, olivine)) // draw with with olivine and existing weight of 12
center.arc(180).draw(rac.Stroke(5, pine)) // draw with stroke weight of 5 and pine
center.arc(210).draw(rac.Stroke.none) // does not draw since there is no fill and no stroke
.debug() // to show the no-stroke arc, when commented this arc is not visible at all
})
example(heights.small, (rac, shared) => {
let center = rac.Point.canvasCenter()
rac.Stroke(4).apply()
// Colors from the shared object
let olivine = shared.palette.olivine
let pine = shared.palette.polishedPine
let pumpkin = shared.palette.pumpkin
center.arc(30, 23/40, 17/40).draw() // draw with the current no-fill
center.arc(50, 31/40, 9/40)
.draw(rac.Fill(pumpkin)) // draw with a pumpkin fill
center.arc(70, 35/40, 5/40)
.draw(rac.Fill(pine)) // draw with a pine fill
rac.Fill(olivine).apply() // all subsequent calls to draw() will use a olivine fill
center.arc(100, 38/40, 2/40).draw()
center.arc(130, 39/40, 1/40).draw()
center.arc(170, 38/40, 2/40)
.draw(rac.Fill.none) // draw with no-fill
})
example(heights.small, (rac, shared) => {
let center = rac.Point.canvasCenter().withY(heights.small/4)
rac.Stroke(15).apply() // make all following strokes thicker
center.ray(0).draw() // default style, blackish color
center.ray(1/15)
.draw(rac.Color.red.stroke()) // draw with a red stroke
let pinkish = rac.Color.red
.linearTransition(0.5, rac.Color.white) // halfway color between red and white
center.ray(2/15)
.draw(pinkish.stroke(5)) // draw with a pinkish stroke with weight 5
let grayish = rac.Color(0.6, 0.5, 0.5, 0.3)
center.ray(3/15)
.draw(grayish.stroke()) // draw with a transparentish grayish stroke
let greenish = rac.Color(0.5, 0.7, 0.5)
greenish.stroke().apply() // all subsequent draws will use a greenish stroke
center.ray(4/15).draw()
greenish.withAlpha(0.5) // make a transparentish greenish
.stroke().apply()
center.ray(5/15).draw()
center.ray(6/15).draw()
center.ray(7/15).draw()
})
example(heights.small, (rac, shared) => {
let center = rac.Point.canvasCenter()
// Colors from the shared object
let olivine = shared.palette.olivine
let pine = shared.palette.polishedPine
let pumpkin = shared.palette.pumpkin
rac.Stroke(12).apply()
center.arc(150).draw() // draws with default style
let style = new Rac.Style(rac, pine.stroke(), olivine.fill())
center.arc(120).draw(style)
style = new Rac.Style(rac, pine.stroke(), pumpkin.fill())
style.apply() // apply as new default
center.arc(90).draw()
center.arc(60).draw()
})
example(heights.small, (rac, shared) => {
let center = rac.Point.canvasCenter()
// Colors from the shared object
let pine = shared.palette.polishedPine
// Debugs with the already configured debug style
center.segmentToAngle(1/8, 50).draw()
.nextSegmentToAngle(5/6, 70).debug()
.nextSegmentToAngle(1/6, 90).draw()
.nextSegmentToAngle(5/6, 110).debug()
// Sets new debug style for all subsequent calls to debug()
rac.drawer.debugStyle = pine.stroke(5)
center.segmentToAngle(3/8, 50).draw()
.nextSegmentToAngle(4/6, 70).debug()
.nextSegmentToAngle(2/6, 90).draw()
.nextSegmentToAngle(4/6, 110).debug()
})
Rac = require('https://unpkg.com/ruler-and-compass@1.0.1')
p5 = require('p5@1.4.0')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
