▲ 11 r/HTML
I have made the Infinite Craft Background (HTML + CSS + JS)
Ive made it with Html Css and Javascript and it has interactivity. For example if you left click you push all of the dots away and with the right click it pulls them to the mouse for middle clicking I haven't implemented anything yet, but heres the Video and Code:
Oh and the link to the website: https://pinbug.github.io/
index.html:
sds<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Craft Background</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<canvas id="canv"></canvas>
<h1 style="position: absolute; top: 50%; left: 25%; color: white; z-index: 10; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Infinite Craft Background</h1>
<script src="script.js"></script>
</body>
</html>
style.css:
body {
margin: 0;
overflow-x: hidden;
height: 200vh;
background: #111;
}
#canv {
display: block;
position: fixed;
top: -10%;
left: -10%;
filter: saturate(1.5) contrast(1.2) blur(0rem);
}
script.js:
const canvas = document.getElementById("canv");
const ctx = canvas.getContext("2d");
function resize() {
canvas.width = window.innerWidth * 1.2;
canvas.height = window.innerHeight * 1.2;
}
resize();
window.addEventListener("resize", resize);
const mouse = {
x: 0,
y: 0,
inside: false,
left: false,
right: false,
middle: false
};
window.addEventListener("mousedown", e => {
if (e.button === 0) mouse.left = true;
if (e.button === 1) mouse.middle = true;
if (e.button === 2) mouse.right = true;
});
window.addEventListener("mouseup", e => {
if (e.button === 0) mouse.left = false;
if (e.button === 1) mouse.middle = false;
if (e.button === 2) mouse.right = false;
});
window.addEventListener("mousemove", e => {
mouse.x = e.clientX;
mouse.y = e.clientY;
mouse.inside = true;
});
document.addEventListener("mouseleave", () => {
mouse.inside = false;
});
let lastScrollY = window.scrollY;
let scrollDelta = 0;
const dots = [];
for (let i = 0; i < canvas.width / 2; i++) {
const timer = 120 + Math.random() * 100;
const vx = (Math.random() - 0.5) * 2;
const vy = (Math.random() - 0.5) * 2;
dots.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx,
vy,
startVx: vx,
startVy: vy,
targetVx: (Math.random() - 0.5) * 2,
targetVy: (Math.random() - 0.5) * 2,
timer,
timerMax: timer
});
}
function balancePressure(dots, radius = 100) {
const result = [];
const r2 = radius * radius;
for (let i = 0; i < dots.length; i++) {
let vx = 0;
let vy = 0;
const a = dots[i];
for (let j = 0; j < dots.length; j++) {
if (i === j) continue;
const b = dots[j];
const dx = a.x - b.x;
const dy = a.y - b.y;
const dist2 = dx * dx + dy * dy;
if (dist2 >= r2 || dist2 === 0) continue;
const dist = Math.sqrt(dist2);
const force = (radius - dist) / radius;
vx += dx / dist * force;
vy += dy / dist * force;
}
result.push({
x: vx,
y: vy
});
}
return result;
}
function update() {
if (!mouse.left && !mouse.right && !mouse.middle) {
balancePressure(dots, 90).forEach((force, i) => {
force.x *= 0.5;
force.y *= 0.5;
dots[i].vx += force.x;
dots[i].vy += force.y;
dots[i].x += dots[i].vx;
dots[i].y += dots[i].vy;
dots[i].vx *= 0.9;
dots[i].vy *= 0.9;
if (dots[i].x < 0) { dots[i].x = 0; dots[i].vx *= -1; }
if (dots[i].x > canv.width) { dots[i].x = canv.width; dots[i].vx *= -1; }
if (dots[i].y < 0) { dots[i].y = 0; dots[i].vy *= -1; }
if (dots[i].y > canv.height) { dots[i].y = canv.height; dots[i].vy *= -1; }
});
}
for (const d of dots) {
d.timer--;
d.vx *= 0.9;
d.vy *= 0.9;
if (d.timer <= 0) {
d.timer = 120 + Math.random() * 100;
d.timerMax = d.timer;
d.startVx = d.baseVx ?? d.vx;
d.startVy = d.baseVy ?? d.vy;
d.targetVx = (Math.random() - 0.5) * 2;
d.targetVy = (Math.random() - 0.5) * 2;
}
const t = 1 - d.timer / d.timerMax;
d.baseVx = d.startVx + (d.targetVx - d.startVx) * t;
d.baseVy = d.startVy + (d.targetVy - d.startVy) * t;
d.vx += (d.baseVx - d.vx) * 0.03;
d.vy += (d.baseVy - d.vy) * 0.03;
if (mouse.inside) {
let radius = canvas.width * 0.1;
if (mouse.left) {
radius *= 2.5;
}
else if (mouse.right) {
radius *= 0.75;
}
const dx = d.x - mouse.x - radius / Math.PI;
const dy = d.y - mouse.y - radius / Math.PI;
const distSq = dx * dx + dy * dy;
if (distSq > 0 && distSq < radius * radius) {
const dist = Math.sqrt(distSq);
const force = (1 - dist / radius) * 0.8;
d.vx += (dx / dist) * force;
d.vy += (dy / dist) * force;
}
}
d.vx += (Math.random() - 0.5) * 0.05;
d.vy += (Math.random() - 0.5) * 0.05;
}
const repelRadius = 40;
const repelRadiusSq = repelRadius * repelRadius;
const repelStrength = 0.08;
for (let i = 0; i < dots.length; i++) {
const a = dots[i];
for (let j = i + 1; j < dots.length; j++) {
const b = dots[j];
const dx = b.x - a.x;
const dy = b.y - a.y;
const distSq = dx * dx + dy * dy;
if (distSq > 0 && distSq < repelRadiusSq) {
const dist = Math.sqrt(distSq);
const force = (1 - dist / repelRadius) * repelStrength;
const nx = dx / dist;
const ny = dy / dist;
a.vx -= nx * force;
a.vy -= ny * force;
b.vx += nx * force;
b.vy += ny * force;
}
}
}
for (const d of dots) {
d.x += d.vx;
d.y += d.vy;
if (d.x < 0) {
d.x = canvas.width;
}
if (d.x > canvas.width) {
d.x = d.x - canvas.width;
}
if (d.y < 0) {
d.y = 0;
d.vy *= -1;
}
if (d.y > canvas.height) {
d.y = canvas.height;
d.vy *= -1;
}
d.y += -scrollDelta;
if (d.y > canvas.height) {
d.y = d.y - canvas.height;
}
else if (d.y < 0) {
d.y = d.y + canvas.height;
}
}
}
function draw() {
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.strokeStyle = "#66ccff";
for (let i = 0; i < dots.length; i++) {
for (let j = i + 1; j < dots.length; j++) {
const dx = dots[i].x - dots[j].x;
const dy = dots[i].y - dots[j].y;
const dist = Math.hypot(dx,dy);
const maxdist = 120;
if (dist < maxdist) {
ctx.globalAlpha = 1 - dist / maxdist;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(dots[i].x, dots[i].y);
ctx.lineTo(dots[j].x, dots[j].y);
ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
ctx.fillStyle = "white";
for (const d of dots) {
ctx.beginPath();
ctx.fillStyle = "#66ccff";
ctx.arc(d.x, d.y, 2, 0, Math.PI * 2);
ctx.fill();
}
}
function loop() {
scrollDelta = window.scrollY - lastScrollY;
lastScrollY = window.scrollY;
update();
draw();
requestAnimationFrame(loop);
}
loop();
u/LegitimateTeach6702 — 5 days ago