<canvas id="view"></canvas>
body {
background: #FFF;
}
#view {
position: fixed;
top: 0;
left: 0;
}
// Controls
const amt = 500;
const gui = new dat.GUI();
let state = {
movement: 1
};
gui.add(state, "movement", 0.1, 5, 0.1).listen();
// Pixi
const app = new PIXI.Application({
view: document.querySelector("#view"),
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xffffff,
antialias: true
});
function CreateMolecule() {
const g = Object.create(new PIXI.Graphics());
g.beginFill(0xb3dbf4);
g.lineStyle(2, 0x0069aa, 1);
g.drawCircle(0, 0, Math.random() * 5 + 5);
g.endFill();
g.position.set(
Math.random() * window.innerWidth,
Math.random() * window.innerHeight
);
return g;
}
let dots = [];
for (let i = 0; i < amt; i++) {
const dot = CreateMolecule();
dots = [...dots, dot];
app.stage.addChild(dot);
}
// Ticker
const ticker = new PIXI.Ticker();
ticker.add(() => {
for (let i = 0; i < dots.length; i++) {
dots[i].position.x += (Math.random() < 0.5 ? -1 : 1) * state.movement;
dots[i].position.y += (Math.random() < 0.5 ? -1 : 1) * state.movement;
}
}, PIXI.UPDATE_PRIORITY.LOW);
ticker.start();
View Compiled
This Pen doesn't use any external CSS resources.