Skip to content

Commit 2edb4cd

Browse files
gsainigsaini
committed
chore: Remove script.js and update string literal style in neural-network.js.
1 parent e9f14b2 commit 2edb4cd

File tree

2 files changed

+149
-152
lines changed

2 files changed

+149
-152
lines changed

‎src/neural-network.js‎

Lines changed: 148 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,163 @@
11
class NeuralNetwork {
2-
constructor() {
3-
this.canvas = document.getElementById('neural-network-bg');
4-
this.ctx = this.canvas.getContext('2d');
5-
this.particles = [];
6-
this.pulses = []; // Array to store active pulses
7-
this.particleCount = 100;
8-
this.connectionDistance = 150;
9-
this.mouseDistance = 200;
10-
11-
this.mouse = {
12-
x: null,
13-
y: null
14-
};
15-
16-
this.init();
17-
this.animate();
18-
19-
window.addEventListener('resize', () => this.resize());
20-
window.addEventListener('mousemove', (e) => this.handleMouseMove(e));
21-
window.addEventListener('mouseout', () => this.handleMouseOut());
2+
constructor() {
3+
this.canvas = document.getElementById('neural-network-bg');
4+
this.ctx = this.canvas.getContext('2d');
5+
this.particles = [];
6+
this.pulses = []; // Array to store active pulses
7+
this.particleCount = 100;
8+
this.connectionDistance = 150;
9+
this.mouseDistance = 200;
10+
11+
this.mouse = {
12+
x: null,
13+
y: null,
14+
};
15+
16+
this.init();
17+
this.animate();
18+
19+
window.addEventListener('resize', () => this.resize());
20+
window.addEventListener('mousemove', (e) => this.handleMouseMove(e));
21+
window.addEventListener('mouseout', () => this.handleMouseOut());
22+
}
23+
24+
init() {
25+
this.resize();
26+
this.createParticles();
27+
}
28+
29+
resize() {
30+
this.canvas.width = window.innerWidth;
31+
this.canvas.height = window.innerHeight;
32+
this.createParticles(); // Recreate particles on resize to maintain density
33+
}
34+
35+
createParticles() {
36+
this.particles = [];
37+
// Reduced density for a cleaner look (larger divisor)
38+
const area = this.canvas.width * this.canvas.height;
39+
this.particleCount = Math.floor(area / 25000);
40+
41+
for (let i = 0; i < this.particleCount; i++) {
42+
this.particles.push({
43+
x: Math.random() * this.canvas.width,
44+
y: Math.random() * this.canvas.height,
45+
// Much slower velocity for a professional, calm feel
46+
vx: (Math.random() - 0.5) * 0.3,
47+
vy: (Math.random() - 0.5) * 0.3,
48+
size: Math.random() * 1.5 + 0.5, // Smaller particles
49+
color: '#00f2ff',
50+
});
2251
}
23-
24-
init() {
25-
this.resize();
26-
this.createParticles();
27-
}
28-
29-
resize() {
30-
this.canvas.width = window.innerWidth;
31-
this.canvas.height = window.innerHeight;
32-
this.createParticles(); // Recreate particles on resize to maintain density
33-
}
34-
35-
createParticles() {
36-
this.particles = [];
37-
// Reduced density for a cleaner look (larger divisor)
38-
const area = this.canvas.width * this.canvas.height;
39-
this.particleCount = Math.floor(area / 25000);
40-
41-
for (let i = 0; i < this.particleCount; i++) {
42-
this.particles.push({
43-
x: Math.random() * this.canvas.width,
44-
y: Math.random() * this.canvas.height,
45-
// Much slower velocity for a professional, calm feel
46-
vx: (Math.random() - 0.5) * 0.3,
47-
vy: (Math.random() - 0.5) * 0.3,
48-
size: Math.random() * 1.5 + 0.5, // Smaller particles
49-
color: '#00f2ff'
52+
}
53+
54+
handleMouseMove(e) {
55+
this.mouse.x = e.x;
56+
this.mouse.y = e.y;
57+
}
58+
59+
handleMouseOut() {
60+
this.mouse.x = null;
61+
this.mouse.y = null;
62+
}
63+
64+
animate() {
65+
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
66+
67+
// Update and draw particles
68+
for (let i = 0; i < this.particles.length; i++) {
69+
const p = this.particles[i];
70+
71+
// Move
72+
p.x += p.vx;
73+
p.y += p.vy;
74+
75+
// Bounce off edges
76+
if (p.x < 0 || p.x > this.canvas.width) p.vx *= -1;
77+
if (p.y < 0 || p.y > this.canvas.height) p.vy *= -1;
78+
79+
// Mouse interaction
80+
if (this.mouse.x != null) {
81+
const dx = this.mouse.x - p.x;
82+
const dy = this.mouse.y - p.y;
83+
const distance = Math.sqrt(dx * dx + dy * dy);
84+
85+
if (distance < this.mouseDistance) {
86+
const forceDirectionX = dx / distance;
87+
const forceDirectionY = dy / distance;
88+
const force = (this.mouseDistance - distance) / this.mouseDistance;
89+
// Gentler interaction
90+
const directionX = forceDirectionX * force * 0.05;
91+
const directionY = forceDirectionY * force * 0.05;
92+
93+
p.vx += directionX;
94+
p.vy += directionY;
95+
}
96+
}
97+
98+
// Draw particle
99+
this.ctx.beginPath();
100+
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
101+
this.ctx.fillStyle = 'rgba(0, 242, 255, 0.5)'; // Semi-transparent particles
102+
this.ctx.fill();
103+
104+
// Connect particles
105+
for (let j = i; j < this.particles.length; j++) {
106+
const p2 = this.particles[j];
107+
const dx = p.x - p2.x;
108+
const dy = p.y - p2.y;
109+
const distance = Math.sqrt(dx * dx + dy * dy);
110+
111+
if (distance < this.connectionDistance) {
112+
this.ctx.beginPath();
113+
// Subtler connections (lower opacity)
114+
const opacity = (1 - distance / this.connectionDistance) * 0.15;
115+
this.ctx.strokeStyle = `rgba(0, 242, 255, ${opacity})`;
116+
this.ctx.lineWidth = 1;
117+
this.ctx.moveTo(p.x, p.y);
118+
this.ctx.lineTo(p2.x, p2.y);
119+
this.ctx.stroke();
120+
121+
// Randomly spawn a pulse on this connection
122+
if (Math.random() < 0.0005) {
123+
// Low probability for subtlety
124+
this.pulses.push({
125+
x: p.x,
126+
y: p.y,
127+
targetX: p2.x,
128+
targetY: p2.y,
129+
progress: 0,
130+
speed: 0.02 + Math.random() * 0.03, // Random speed
50131
});
132+
}
51133
}
134+
}
52135
}
53136

54-
handleMouseMove(e) {
55-
this.mouse.x = e.x;
56-
this.mouse.y = e.y;
57-
}
137+
// Update and draw pulses
138+
for (let i = this.pulses.length - 1; i >= 0; i--) {
139+
const pulse = this.pulses[i];
140+
pulse.progress += pulse.speed;
58141

59-
handleMouseOut() {
60-
this.mouse.x = null;
61-
this.mouse.y = null;
62-
}
142+
if (pulse.progress >= 1) {
143+
this.pulses.splice(i, 1); // Remove finished pulses
144+
continue;
145+
}
63146

64-
animate() {
65-
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
66-
67-
// Update and draw particles
68-
for (let i = 0; i < this.particles.length; i++) {
69-
const p = this.particles[i];
70-
71-
// Move
72-
p.x += p.vx;
73-
p.y += p.vy;
74-
75-
// Bounce off edges
76-
if (p.x < 0 || p.x > this.canvas.width) p.vx *= -1;
77-
if (p.y < 0 || p.y > this.canvas.height) p.vy *= -1;
78-
79-
// Mouse interaction
80-
if (this.mouse.x != null) {
81-
const dx = this.mouse.x - p.x;
82-
const dy = this.mouse.y - p.y;
83-
const distance = Math.sqrt(dx * dx + dy * dy);
84-
85-
if (distance < this.mouseDistance) {
86-
const forceDirectionX = dx / distance;
87-
const forceDirectionY = dy / distance;
88-
const force = (this.mouseDistance - distance) / this.mouseDistance;
89-
// Gentler interaction
90-
const directionX = forceDirectionX * force * 0.05;
91-
const directionY = forceDirectionY * force * 0.05;
92-
93-
p.vx += directionX;
94-
p.vy += directionY;
95-
}
96-
}
97-
98-
// Draw particle
99-
this.ctx.beginPath();
100-
this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
101-
this.ctx.fillStyle = 'rgba(0, 242, 255, 0.5)'; // Semi-transparent particles
102-
this.ctx.fill();
103-
104-
// Connect particles
105-
for (let j = i; j < this.particles.length; j++) {
106-
const p2 = this.particles[j];
107-
const dx = p.x - p2.x;
108-
const dy = p.y - p2.y;
109-
const distance = Math.sqrt(dx * dx + dy * dy);
110-
111-
if (distance < this.connectionDistance) {
112-
this.ctx.beginPath();
113-
// Subtler connections (lower opacity)
114-
const opacity = (1 - distance / this.connectionDistance) * 0.15;
115-
this.ctx.strokeStyle = `rgba(0, 242, 255, ${opacity})`;
116-
this.ctx.lineWidth = 1;
117-
this.ctx.moveTo(p.x, p.y);
118-
this.ctx.lineTo(p2.x, p2.y);
119-
this.ctx.stroke();
120-
121-
// Randomly spawn a pulse on this connection
122-
if (Math.random() < 0.0005) { // Low probability for subtlety
123-
this.pulses.push({
124-
x: p.x,
125-
y: p.y,
126-
targetX: p2.x,
127-
targetY: p2.y,
128-
progress: 0,
129-
speed: 0.02 + Math.random() * 0.03 // Random speed
130-
});
131-
}
132-
}
133-
}
134-
}
135-
136-
// Update and draw pulses
137-
for (let i = this.pulses.length - 1; i >= 0; i--) {
138-
const pulse = this.pulses[i];
139-
pulse.progress += pulse.speed;
140-
141-
if (pulse.progress >= 1) {
142-
this.pulses.splice(i, 1); // Remove finished pulses
143-
continue;
144-
}
145-
146-
const currentX = pulse.x + (pulse.targetX - pulse.x) * pulse.progress;
147-
const currentY = pulse.y + (pulse.targetY - pulse.y) * pulse.progress;
147+
const currentX = pulse.x + (pulse.targetX - pulse.x) * pulse.progress;
148+
const currentY = pulse.y + (pulse.targetY - pulse.y) * pulse.progress;
148149

149-
this.ctx.beginPath();
150-
this.ctx.arc(currentX, currentY, 1.5, 0, Math.PI * 2);
151-
this.ctx.fillStyle = 'rgba(0, 242, 255, 0.8)'; // Bright pulse
152-
this.ctx.fill();
153-
}
154-
155-
requestAnimationFrame(() => this.animate());
150+
this.ctx.beginPath();
151+
this.ctx.arc(currentX, currentY, 1.5, 0, Math.PI * 2);
152+
this.ctx.fillStyle = 'rgba(0, 242, 255, 0.8)'; // Bright pulse
153+
this.ctx.fill();
156154
}
155+
156+
requestAnimationFrame(() => this.animate());
157+
}
157158
}
158159

159160
// Initialize when DOM is loaded
160161
document.addEventListener('DOMContentLoaded', () => {
161-
new NeuralNetwork();
162+
new NeuralNetwork();
162163
});

‎src/styles.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ body {
5151
}
5252

5353
@keyframes gridFloat {
54-
5554
0%,
5655
100% {
5756
transform: translate(0, 0) scale(1);
@@ -123,7 +122,6 @@ section {
123122
}
124123

125124
@keyframes bounce {
126-
127125
0%,
128126
100% {
129127
transform: translateY(0);
@@ -418,8 +416,6 @@ footer {
418416
opacity: 0.8;
419417
}
420418

421-
422-
423419
@media (max-width: 768px) {
424420
section {
425421
padding: 2rem 1rem;
@@ -504,4 +500,4 @@ footer {
504500
font-size: 0.75rem;
505501
padding: 0.3rem 0.8rem;
506502
}
507-
}
503+
}

0 commit comments

Comments
 (0)