optimization and some fixes
This commit is contained in:
@@ -61,9 +61,7 @@ export const NetrunnerMatrix: React.FC<NetrunnerMatrixProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const isMobile = checkIsMobile();
|
const isMobile = checkIsMobile();
|
||||||
const pixelScale = isMobile
|
const pixelScale = Math.min(window.devicePixelRatio || 1, 1.5);
|
||||||
? 1.0
|
|
||||||
: Math.min(window.devicePixelRatio || 1, 1.5);
|
|
||||||
const initialWidth = container.clientWidth * pixelScale;
|
const initialWidth = container.clientWidth * pixelScale;
|
||||||
const initialHeight = container.clientHeight * pixelScale;
|
const initialHeight = container.clientHeight * pixelScale;
|
||||||
|
|
||||||
|
|||||||
@@ -193,6 +193,8 @@ function drawEye(ctx, cx, cy, gazeX, gazeY, dir, isClosed) {
|
|||||||
const eyeRadius = 36 * (1 - isClosed) + 8 * isClosed;
|
const eyeRadius = 36 * (1 - isClosed) + 8 * isClosed;
|
||||||
const laserWidth = 140 * isClosed;
|
const laserWidth = 140 * isClosed;
|
||||||
|
|
||||||
|
const shadowMult = isMobile ? 0.2 : 1.0;
|
||||||
|
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.fillStyle = bgFill;
|
ctx.fillStyle = bgFill;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
@@ -208,7 +210,7 @@ function drawEye(ctx, cx, cy, gazeX, gazeY, dir, isClosed) {
|
|||||||
ctx.strokeStyle = color;
|
ctx.strokeStyle = color;
|
||||||
ctx.lineWidth = 4 * (1 - isClosed) + 3 * isClosed;
|
ctx.lineWidth = 4 * (1 - isClosed) + 3 * isClosed;
|
||||||
ctx.shadowColor = color;
|
ctx.shadowColor = color;
|
||||||
ctx.shadowBlur = 15 * (1 - isClosed) + 8 * isClosed;
|
ctx.shadowBlur = (15 * (1 - isClosed) + 8 * isClosed) * shadowMult;
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
if (isVpnOn && isClosed > 0.1) {
|
if (isVpnOn && isClosed > 0.1) {
|
||||||
@@ -224,21 +226,54 @@ function drawEye(ctx, cx, cy, gazeX, gazeY, dir, isClosed) {
|
|||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.translate(cx + gazeX, cy + gazeY);
|
ctx.translate(cx + gazeX, cy + gazeY);
|
||||||
|
|
||||||
// Добавляем плавное вращение для кибер-интерфейса зрачка
|
|
||||||
const t = performance.now() * 0.0015;
|
const t = performance.now() * 0.0015;
|
||||||
|
|
||||||
// 1. Внешнее кибер-кольцо (вращающееся, прерывистое)
|
// 1. Внешнее кибер-кольцо
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.rotate(t);
|
ctx.rotate(t);
|
||||||
ctx.strokeStyle = color;
|
ctx.strokeStyle = color;
|
||||||
ctx.lineWidth = 1.5;
|
ctx.lineWidth = 1.5;
|
||||||
ctx.globalAlpha = 0.7 * alphaMult;
|
ctx.globalAlpha = 0.7 * alphaMult;
|
||||||
ctx.setLineDash([8, 6, 2, 6]); // Техно-паттерн
|
ctx.setLineDash([8, 6, 2, 6]);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(0, 0, 16, 0, Math.PI * 2);
|
ctx.arc(0, 0, 16, 0, Math.PI * 2);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
|
// 2. Внутреннее сплошное кольцо
|
||||||
|
ctx.strokeStyle = isDarkMode ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.globalAlpha = alphaMult;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(0, 0, 10, 0, Math.PI * 2);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// 3. ЗРАЧОК (Теперь он живой: пульсирует и имеет энерго-ядро)
|
||||||
|
const pulse = Math.sin(t * 5) * 0.15 + 0.85; // Пульсация масштаба от 0.7 до 1.0
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.scale(pulse, pulse); // Применяем дыхание
|
||||||
|
|
||||||
|
// Внешний ромб зрачка
|
||||||
|
ctx.fillStyle = isDarkMode ? "#fff" : "#000";
|
||||||
|
ctx.shadowBlur = 10 * shadowMult;
|
||||||
|
ctx.shadowColor = color;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, -6);
|
||||||
|
ctx.lineTo(5, 0);
|
||||||
|
ctx.lineTo(0, 6);
|
||||||
|
ctx.lineTo(-5, 0);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Внутреннее ядро (микро-точка)
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(0, 0, 1.5, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
// 2. Внутреннее сплошное кольцо для глубины
|
// 2. Внутреннее сплошное кольцо для глубины
|
||||||
ctx.strokeStyle = isDarkMode ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
|
ctx.strokeStyle = isDarkMode ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)";
|
||||||
ctx.lineWidth = 1;
|
ctx.lineWidth = 1;
|
||||||
|
|||||||
@@ -481,9 +481,6 @@ impl MatrixEngine {
|
|||||||
_ => 1.0,
|
_ => 1.0,
|
||||||
};
|
};
|
||||||
|
|
||||||
// 1. ГИРОСКОП: Постоянный снос
|
|
||||||
drop.base_x += self.tilt_x * parallax_factor * 5.0;
|
|
||||||
|
|
||||||
// Бесконечный экран
|
// Бесконечный экран
|
||||||
let wrap_margin = 150.0;
|
let wrap_margin = 150.0;
|
||||||
if drop.base_x < -wrap_margin {
|
if drop.base_x < -wrap_margin {
|
||||||
@@ -506,11 +503,17 @@ impl MatrixEngine {
|
|||||||
for sw in self.shockwaves.iter().filter(|s| s.active) {
|
for sw in self.shockwaves.iter().filter(|s| s.active) {
|
||||||
let dx = current_x - sw.x;
|
let dx = current_x - sw.x;
|
||||||
let dy = current_y - sw.y;
|
let dy = current_y - sw.y;
|
||||||
|
|
||||||
|
// ОПТИМИЗАЦИЯ: Отсекаем капли вне зоны действия волны до вычисления sqrt()
|
||||||
|
if dx.abs() > sw.radius + 40.0 || dy.abs() > sw.radius + 40.0 {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
let dist = (dx * dx + dy * dy).sqrt();
|
let dist = (dx * dx + dy * dy).sqrt();
|
||||||
|
|
||||||
if (dist - sw.radius).abs() < 40.0 {
|
if (dist - sw.radius).abs() < 40.0 {
|
||||||
let force = (sw.life / sw.max_life) * 18.0 * parallax_factor;
|
let force = (sw.life / sw.max_life) * 18.0 * parallax_factor;
|
||||||
drop.vel_x += (dx / dist.max(1.0)) * force;
|
drop.vel_x += (dx / dist.max(1.0_f32)) * force;
|
||||||
force_white = true;
|
force_white = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -625,7 +628,7 @@ impl MatrixEngine {
|
|||||||
1 => 0.7,
|
1 => 0.7,
|
||||||
_ => 1.0,
|
_ => 1.0,
|
||||||
};
|
};
|
||||||
let final_x = drop.base_x + drop.offset_x;
|
let final_x = drop.base_x + drop.offset_x + (self.tilt_x * 30.0 * parallax_factor);
|
||||||
|
|
||||||
let base_idx = i * 6;
|
let base_idx = i * 6;
|
||||||
self.render_buffer[base_idx] = final_x;
|
self.render_buffer[base_idx] = final_x;
|
||||||
|
|||||||
Reference in New Issue
Block a user