Public
Edited
Sep 24, 2023
Insert cell
# Animation
Insert cell
viewof degree = Inputs.range([0, 360], {label: "Dgree", step: 3, value: 0})
Insert cell
{
const canvasWidth = 300;
const canvasHeight = 400;
const center = [canvasWidth * 0.5, canvasHeight * 0.5];

const canvas = DOM.canvas(canvasWidth, canvasHeight);

const p = new paper.PaperScope();
paper.setup(canvas);

var path = new p.Path.Rectangle({
point: center,
size: [75, 75],
fillColor: "red"
});

let baseDegree = degree;

path.onFrame = function (event) {
this.rotate(baseDegree);
this.fillColor.hue -= 1
};

return canvas;
}
Insert cell
Insert cell
paper = require("paper")
Insert cell

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.
Learn more