88 lines
2.2 KiB
JavaScript
Executable file
88 lines
2.2 KiB
JavaScript
Executable file
// create background element
|
|
let canvas = document.createElement("canvas");
|
|
document.body.appendChild(canvas);
|
|
canvas.style.cssText = `
|
|
background: #f0ffd6;
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
z-index:-99999;
|
|
`
|
|
console.log("HEY");
|
|
|
|
// set it's size
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
let context = canvas.getContext('2d');
|
|
|
|
// this will be populated and used later
|
|
drawableObjectList = [];
|
|
|
|
// this is the object that'll look cool
|
|
class Point {
|
|
constructor() {
|
|
this.x = Math.random() * window.innerWidth;
|
|
this.y = Math.random() * window.innerHeight;
|
|
|
|
this.dx = (Math.random()) - 0.5;
|
|
this.dy = (Math.random()) - 0.5;
|
|
}
|
|
draw() {
|
|
context.fillStyle = "#00a878"
|
|
context.strokeStyle = "#00a878"
|
|
// find and draw links
|
|
drawableObjectList.forEach((point) => {
|
|
if (point.x > this.x - 100 && point.x < this.x + 100 &&
|
|
point.y > this.y - 100 && point.y < this.y + 100) {
|
|
context.beginPath()
|
|
context.moveTo(this.x, this.y)
|
|
context.lineTo(point.x, point.y)
|
|
context.stroke();
|
|
}
|
|
});
|
|
|
|
// draw point
|
|
context.beginPath();
|
|
context.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
|
|
context.fill();
|
|
context.stroke();
|
|
|
|
// move point
|
|
this.x += this.dx;
|
|
this.y += this.dy;
|
|
|
|
// keep point in bounds
|
|
if (this.x > window.innerWidth || this.x < 0) {
|
|
this.dx *= -1
|
|
}
|
|
if (this.y > window.innerHeight || this.y < 0) {
|
|
this.dy *= -1
|
|
}
|
|
}
|
|
}
|
|
|
|
// populate element array
|
|
for (let i = 0; i < 100; i++) {
|
|
drawableObjectList.push(new Point());
|
|
}
|
|
|
|
function loop() {
|
|
// Loop and clear frame
|
|
requestAnimationFrame(loop);
|
|
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
|
|
|
// Draw objects.
|
|
drawableObjectList.forEach((point) => {
|
|
point.draw();
|
|
});
|
|
|
|
// Handle page size change
|
|
if (canvas.width != window.innerWidth) {
|
|
canvas.width = window.innerWidth;
|
|
}
|
|
if (canvas.height != window.innerHeight) {
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
}
|
|
loop();
|