RAC Tutorials HomeRAC Tutorial Two - Complex DrawablesRAC Tutorial Three - StylesRAC Tutorial Prototype Four (Controls)
RAC Tutorial One - Base Drawables
example(heights.small, (rac) => {
let center = rac.Point.canvasCenter() // get the center of the canvas
center.debug() // debug the center
center.arc(40) // make a circle
.draw() // draw it!
center.arc(50).draw() // make and draw another circle
center.arc(60).debug(true)
});
example(heights.small, (rac) => {
let center = rac.Point.canvasCenter(); // get the center of the canvas
center // using the center point...
.arc(50).draw() // make and draw an arc
.startSegment().debug() // debug the start segment
.endPoint() // from the end of the segment...
.arc(40).draw() // make and draw a second arc
.startPoint() // get the start point of the arc...
.arc(30)//.draw() // skip drawing this one, try adding it
.startPoint()
.arc(20).debug() // debug this one, try removing the debug()
.startPoint()
.arc(10).draw();
});
example(heights.small, (rac) => {
rac.Stroke(5).apply() // increase stroke to make points more visible
let center = rac.Point.canvasCenter()
center.draw() // draw a point at the center
.addX(20).draw() // new point with x+20
.addX(40).draw() // another new point with x+40
.debug(true) // calling debug(true) will add verbose information
rac.Point(center.x - 100, center.y).draw() // point using coordinates
.addY(30).draw().debug() // new point with y+30
.addY(-60).draw(); // another new point with y-60
});
example(heights.small, (rac) => {
let center = rac.Point.canvasCenter();
// debugging with an angle
rac.Angle.down.debug(center);
rac.Angle.sw.debug(center.addX(50)); // southwest
// debugging with a point
center.addX(100).debugAngle(rac.Angle.north);
// notice that zero draws a complete circle for debug
rac.Angle.zero.debug(center.addX(150));
// Building an angle with its turn value
let angle = rac.Angle(0.55);
// calling angle.debug(point, true) will draw the turn value
angle.debug(center.addX(-100), true);
});
example(heights.small, (rac) => {
rac.Stroke(5).apply()
let center = rac.Point.canvasCenter()
let leftCenter = center.addX(-100)
leftCenter.debugAngle(rac.Angle.left)
leftCenter.draw()
// All equivalent to left, or 1/2 turn
leftCenter.pointToAngle(rac.Angle.left, 50).draw()
leftCenter.pointToAngle(rac.Angle.w, 60).draw()
leftCenter.pointToAngle(rac.Angle(1/2), 70).draw()
leftCenter.pointToAngle(rac.Angle(2.5), 80).draw()
let seCenter = center
seCenter.debugAngle(rac.Angle.se)
seCenter.draw()
// All equivalent to southeast, or 1/8 turn
seCenter.pointToAngle(rac.Angle.se, 50).draw()
seCenter.pointToAngle(rac.Angle(1/8), 60).draw()
seCenter.pointToAngle(rac.Angle(-0.875), 70).draw()
let neCenter = center.addX(100)
neCenter.debugAngle(rac.Angle.ne)
neCenter.draw()
// All equivalent to northeast, or 7/8 turn
neCenter.pointToAngle(rac.Angle.ne, 50).draw()
neCenter.pointToAngle(rac.Angle(7/8), 60).draw()
neCenter.pointToAngle(rac.Angle(1.875), 70).draw()
})
example(heights.small, (rac) => {
let center = rac.Point.canvasCenter()
let centerArc = center.arc(40).draw()
// 1/8 and .se are equivalent
centerArc.pointAtAngle(1/8).debug()
centerArc.radiusSegmentAtAngle(rac.Angle.se).draw()
center.ray(1/2).draw() // passing a turn value
center.ray(1/2 + 1/16).draw()
center.ray(rac.Angle.nw).draw() // passing a Angle object
center.ray(rac.Angle(5/8 + 1/16)).draw()
})
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.
