Public
Edited
Sep 27, 2022
7 stars
Insert cell
Insert cell
container = DOM.element("div")

Insert cell
Two = (await import("two.js@0.8")).default
Insert cell
two = new Two({
width: width,
height: 600,
type: Two.Types.webgl
}).appendTo(((container.innerHTML = ""), container))
Insert cell
background = container.style.backgroundColor = "#131e29"
Insert cell
main = {
const margin = 2;
const stars = [];
const numberOfStars = 200;

const leftBound = -two.width / 2 + margin;
const rightBound = two.width / 2 - margin;
const topBound = -two.height / 2 + margin;
const bottomBound = two.height / 2 - margin;

for (let i = 0; i < numberOfStars; i++) {
stars.push(
two.makeCircle(
getRandomArbitrary(leftBound, rightBound),
getRandomArbitrary(topBound, bottomBound),
getRandomArbitrary(1.5, 3.3)
)
);
}

stars.forEach(star => {
star.fill = "ivory";
star.stroke = "slateblue";
star.linewidth = 2;
star.speed = getRandomArbitrary(0.5, 3.3);
});

const group = two.makeGroup(...stars);

group.translation.set(two.width / 2, two.height / 2);

two.bind("update", frameCount => {
stars.forEach(star => {
star.translation.x -= star.speed;

// Wrap around right
if (star.translation.x > rightBound)
star.translation.x = leftBound;

// Wrap around left
if (star.translation.x < leftBound)
star.translation.x = rightBound;
});
})
.play();
return "done..."
}
Insert cell
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
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