RAC Tutorials HomeRAC Tutorial One - Base DrawablesRAC Tutorial Three - StylesRAC Tutorial Prototype Four (Controls)
RAC Tutorial Two - Complex Drawables
example(heights.small, (rac) => {
let center = rac.Point.canvasCenter().draw(rac.Stroke(6))
rac.Ray(center.x, center.y, 1/2).draw()
center
.ray(1/8).draw()
.pointAtDistance(30).debug() // debugs where the next ray will start
.ray(9/10).draw()
.pointAtDistance(50)
.ray(1/12).draw()
.pointAtDistance(50)
.ray(13/14).draw()
.pointAtDistance(50)
.ray(1/16).draw().debug() // debug this one
.pointAtDistance(50)
.ray(17/18).draw()
.pointAtDistance(50)
.ray(1/20).draw()
})
example(heights.small, (rac) => {
let center = rac.Point.canvasCenter().draw(rac.Stroke(6))
rac.Segment(center.x, center.y, 1/3, 20).draw()
.nextSegmentToAngle(2/3, 40).draw()
.nextSegmentToAngle(3/3, 60).draw()
.nextSegmentToAngle(1/3, 80).draw()
.nextSegmentToAngle(2/3, 100).draw()
.nextSegmentToAngle(3/3, 200).draw()
.nextSegmentToAngle(1/3, 100).debug(true)
})
example(heights.small, (rac, shared) => {
let center = rac.Point.canvasCenter().draw(rac.Stroke(6))
center.arc(30) // when ommiting `start` and `end` both default to `rac.Angle.zero`
.draw() // thus drawing a complete circle
rac.Arc(center.x, center.y, 50, 7/16) // providing only `start` sets `end` to the same angle
.debug() // debug will show the `start` and `clockwise` orientiation
center.arc(80, 7/8, 1/8).draw()
center.arc(140, 1/16, 15/16, false).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.
