RAC Tutorials HomeRAC Tutorial One - Base DrawablesRAC Tutorial Two - Complex DrawablesRAC Tutorial Three - Styles
RAC Tutorial Prototype Four (Controls)
interactiveExample(heights.small, (rac) => {
// TODO
let center = rac.Point.canvasCenter().debug()
})
interactiveExample(heights.medium, (rac, shared) => {
shared.background.applyBackground()
let center = rac.Point.canvasCenter()
let pointer = rac.Point.pointer()
center.segmentToPoint(rac.Point.pointer()).debug(true)
.arc().draw()
})
{
let rayControl = null;
return interactiveExample(heights.medium, (rac, shared) => {
if (!rayControl) {
rayControl = new Rac.RayControl(rac, 1/2, 200)
}
shared.background.applyBackground()
let center = rac.Point.canvasCenter()
rayControl.anchor = center.ray(rac.Angle.right)
let controlDistance = rayControl.distance()
center.arc(controlDistance).draw()
rac.controller.drawControls()
}) // interactiveExample
}
{
let arcControl = null;
return interactiveExample(heights.medium, (rac, shared) => {
if (!arcControl) {
arcControl = new Rac.ArcControl(rac, 1/2, rac.Angle.half)
}
shared.background.applyBackground()
let center = rac.Point.canvasCenter()
arcControl.anchor = center.arc(120, 1/4)
let controlKnob = arcControl.knob()
let angle = center.angleToPoint(controlKnob).inverse()
center.ray(angle).draw()
rac.controller.drawControls()
}) // interactiveExample
}
Rac = require('https://unpkg.com/ruler-and-compass@1.1.0')
// Rac = require('https://unpkg.com/ruler-and-compass@1.0.1/dist/rac.dev.js')
// Rac = require('https://cdn.jsdelivr.net/gh/lopsae/rac@develop/dist/rac.min.js')
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.
