without-a-stage.md
No Stage? No Problem.
The Polypoint.Stage and all the other tools work independently. As such you can use Polypoint tools on your existing canvas.
Quick Example:
In this example we calculate the center of mass for a list of points.
const canvas = document.getElementById('playspace');
const ctx = canvas.getContext('2d');
Point.mouse.listen(canvas)
var randomPoints;
var comPoint;
var weightedComPoint;
/* A basic setup for the small points. */
const rawPointConf = { circle: { color: 'orange', width: 1}}
/* ----------------------- canvas animation frame loop --------------------- */
const runExample = function(){
generate();
let rect = canvas.getBoundingClientRect()
ctx.canvas.width = rect.width;
ctx.canvas.height = rect.height;
draw()
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath()
drawView()
// May bleed if not applied.
ctx.closePath();
requestAnimationFrame(draw);
}
/* ------------------ Polypoint drawing tools ------------------------*/
const generate = function(pointCount=4){
/* Generate a list. In this random... */
randomPoints = PointList.generate.radius(pointCount, 100, point(200,200))
/* Customise the points, randomising the mass and rotation. */
randomPoints.forEach(p => {
let mass = Math.random() * 10
p.mass = mass
p.rotation = Math.random() * 360
p.radius = Math.max(5, mass)
})
/* Call upon the list "center of mass" function */
comPoint = randomPoints.centerOfMass()
/* In this case we cater for mass and rotation additions */
weightedComPoint = randomPoints.centerOfMass('deep')
}
const drawView = function(){
/* Use the pen to draw a simple circle at the Center of Mass.*/
comPoint.pen.circle(ctx, undefined, 'teal', 3)
/* Draw an indicator at the _weighted_ Center of Mass. */
weightedComPoint.pen.indicator(ctx)
/* Draw a circle at the origin points */
randomPoints.pen.indicators(ctx, rawPointConf)
}
;runExample();
Info
keys: dict_keys(['exists', 'path', 'text', 'meta', 'rendered'])
path: without-a-stage.md
exists: True
meta: dict_keys(['filepath_exists', 'path', 'filepath', 'markdown'])