{
const canvasWidth = 1000
const canvasHeight = 1000
const canvasCenter = [canvasWidth * 0.5, canvasHeight * 0.5]
const canvas = DOM.canvas(canvasWidth, canvasHeight)
const p = new paper.PaperScope()
paper.setup(canvas)
const background = new p.Path.Rectangle({
point: [0, 0],
size: [canvasWidth, canvasHeight],
fillColor: "#081d21"
})
let layer = optionLayer
let sides = optionSides
let angle = 0
let triangles = []
paper.view.onFrame = (event) => {
const triangle = new p.Path.RegularPolygon({
center: canvasCenter,
sides: sides,
radius: canvasHeight * 0.4,
strokeColor: {
gradient: {
stops: swatches[color],
radial: true,
},
origin: canvasCenter,
destination: [canvasWidth, canvasHeight]
},
})
if (fill == 'true') {
triangle.fillColor= {
gradient: {
stops: swatches[color],
radial: true,
},
origin: canvasCenter,
destination: [canvasWidth * 0.9, canvasHeight * 0.9]
}
}
for (let i = 0; i < layer; i++) {
let lenght = triangle.segments.length
iterator(triangle, lenght, angle)
}
var areaText = new p.PointText(new p.Point(40, 40))
areaText.fillColor = '#FCF8EC'
areaText.content = 'Area: ' + Math.round(triangle.area)
var lengthText = new p.PointText(new p.Point(40, 60))
lengthText.fillColor = '#FCF8EC'
lengthText.content = 'Length: ' + Math.round(triangle.length)
var pointText = new p.PointText(new p.Point(40, 80))
pointText.fillColor = '#FCF8EC'
pointText.content = 'Point nubmer: ' + triangle.segments.length
if (triangles.length >= 10) {
triangles[0].remove()
triangles.splice(0, 1)
}
triangles.push(triangle)
angle++
}
return canvas;
}
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.
