Public
Edited
Mar 23, 2024
9 stars
Insert cell
Insert cell
{
let height = width / 1.5;
let canvas = DOM.canvas(width, height);
let ps = new paper.PaperScope();

ps.setup(canvas);

const clear_white = new ps.Color(1, 1, 1, 0);
const center = new ps.Point(width / 2, height / 2);

const background = new ps.Path.Rectangle(
new ps.Rectangle(new ps.Point(0, 0), new ps.Point(width, height))
);

background.fillColor = {
gradient: {
stops: [
[color, 0],
[color2, 1]
],
radial: true
},
origin: background.bounds.topLeft,
destination: background.bounds.bottomRight
};

const dot_size = 2;
const radius = 100;

for (var i = 0; i < 5000; i++) {
let angle = Math.random() * Math.PI * 2;
// To get points clustered near the center with only a few long ones
// we raise a uniform random by a high power, thus reducing the density near 1
let length = Math.pow(Math.random(), 5) * width * 0.2;

let cos_angle = Math.cos(angle);
let sin_angle = Math.sin(angle);
let outer_line = new ps.Point(
center.x + cos_angle * (length + radius - dot_size),
center.y + sin_angle * (length + radius - dot_size)
);
let outer = new ps.Point(
center.x + cos_angle * (length + radius),
center.y + sin_angle * (length + radius)
);
let inner = new ps.Point(
center.x + cos_angle * radius,
center.y + sin_angle * radius
);

let line = new ps.Path();
line.strokeColor = {
gradient: {
stops: [
[clear_white, 0],
["white", 1]
]
},
origin: center,
destination: outer
};
line.strokeWidth = 3;
line.opacity = 0.2;
line.add(inner);
line.add(outer_line);

let dot = ps.Path.Circle(outer, dot_size);
dot.fillColor = "white";
dot.opacity = 0.7;
}

return canvas;
// comment to test backups
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { footer } from "@tomlarkworthy/footer"
Insert cell
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