Частицы замерзают при вызове нового скрипта ⇐ CSS

[Anonymous]

У меня возникла проблема с приложением моделирования консоли js, из-за которой частичная анимация, которую я создал для заполнения пустого пространства, зависает, когда я действительно пытаюсь дать консоли что-то для работы. Я пытался найти решения, но не смог найти ничего/не смог найти ничего, что имело бы объяснение. Я полагаю, что это может быть как-то связано с перегрузкой цикла в parti.js, но я не уверен, что это проблема, и если это так, то я не уверен, что можно исправить.
Консоль.html:






JavaScript Console

body {
font-family: 'Lucida Grande', sans-serif;
background-color: #1e1e1e;
margin: 0;
padding: 0;
}

.console {
width: 90%;
height: 80vh;
border: 1px solid #333;
padding: 10px;
overflow-y: scroll;
margin: 20px auto;
background-color: #2c2c2c;
transition: all 0.2s ease;
border-radius: 5px;
color: #d4d4d4;
font-family: monospace;
position: relative;
z-index: 1;
}

.console-focused {
outline: 1px solid #ccc;
border: 1px solid #ccc;
box-shadow: inset 0 0 0 1px #ccc;
}

.console .input-line {
color: #ffffff !important;
}

.console .result-line {
color: #ffffff !important;
}

.input-container {
display: flex;
align-items: center;
justify-content: center;
}

.input {
width: 84%;
height: 5vh;
padding: 10px;
border: 1px solid #333;
border-radius: 5px;
transition: all 0.3s ease;
outline: none;
font-family: monospace;
background-color: #2c2c2c;
color: #d4d4d4;
}

.input:hover, .input:focus {
outline: 1px solid #ccc;
border: 1px solid #ccc;
box-shadow: inset 0 0 0 1px #ccc;
}

.input::placeholder {
color: #d4d4d4;
}

.clear-btn {
height: 8.25vh;
display: block;
margin-left: 10px;
padding: 8px 16px;
background-color: #2c2c2c;
color: #d4d4d4;
border: 1px solid #333;
border-radius: 5px;
cursor: pointer;
font-family: monospace;
transition: all 0.3s ease;
}

.clear-btn:hover {
outline: 1px solid #ccc;
border: 1px solid #ccc;
box-shadow: inset 0 0 0 1px #ccc;
}

.console p {
margin: 0;
line-height: 1.2;
}

.console .input-line {
color: #9cdcfe;
}

.console .result-line {
color: #d4d4d4;
}

.console .error-line {
color: #f48771;
}

.particle-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: none;
}

.particle {
position: absolute;
width: 8px;
height: 8px;
background-color: #3498db;
border-radius: 50%;
}









Clear




let context = {};

function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}

function log(message, type = 'log') {
var consoleDiv = document.getElementById('console');
var messageClass = type === 'input' ? 'input-line' : (type === 'error' ? 'error-line' : 'result-line');
consoleDiv.innerHTML += '
' + escapeHtml(message) + '
';
consoleDiv.scrollTop = consoleDiv.scrollHeight;
}

function clearConsole() {
var consoleDiv = document.getElementById('console');
consoleDiv.innerHTML = '';
context = {};
}

function executeCode(input) {
try {
if (input.startsWith("log ")) {
var variableName = input.substring(4).trim();
log(variableName + ': ' + eval(variableName), 'result');
} else {
log('>> ' + input, 'input');
var func = new Function('context', 'with(context) { return ' + input + '; }');
var result = func(context);
log('Result: ' + result, 'result');
}
} catch (error) {
log('Error: ' + error.message, 'error');
}
}

document.getElementById("input").addEventListener("keydown", function(event) {
if (event.key === "Enter") {
var value = this.value;
executeCode(value);
this.value = "";
}
});

document.getElementById("clearBtn").addEventListener("click", function() {
clearConsole();
});

document.getElementById("input").addEventListener("focus", function() {
document.getElementById('console').classList.add('console-focused');
});

document.getElementById("input").addEventListener("blur", function() {
document.getElementById('console').classList.remove('console-focused');
});

createParticles('particle-container', {
particleSize: 2,
particleSpacing: 100,
attractionStrength: 0.01,
attractionDistanceThreshold: Infinity,
maxSpeed: 2,
particleColor: '#e2e2e2',
particleOpacity: 0.8
});






parti.js:
function createParticles(containerId, options) {
const defaults = {
particleSize: 8,
particleSpacing: 100,
attractionStrength: 0.01,
attractionDistanceThreshold: 200,
maxSpeed: 2,
wrapAroundEdges: true,
backgroundColor: 'transparent',
particleColor: '#ffffff',
particleOpacity: 1
};

const settings = Object.assign({}, defaults, options);
const particleContainer = document.getElementById(containerId);
const particles = [];
let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;

// Set container styles
particleContainer.style.backgroundColor = settings.backgroundColor;

function createParticle(x, y) {
const particle = {
x,
y,
vx: 0,
vy: 0,
element: document.createElement('div')
};
particle.element.classList.add('particle');
particle.element.style.width = `${settings.particleSize}px`;
particle.element.style.height = `${settings.particleSize}px`;
particle.element.style.backgroundColor = settings.particleColor;
particle.element.style.opacity = settings.particleOpacity;
particleContainer.appendChild(particle.element);
return particle;
}

// Create particles
for (let x = 0; x < window.innerWidth; x += settings.particleSpacing) {
for (let y = 0; y < window.innerHeight; y += settings.particleSpacing) {
particles.push(createParticle(x, y));
}
}

document.addEventListener('mousemove', (event) => {
mouseX = event.clientX;
mouseY = event.clientY;
});

function updateParticles() {
for (let i = 0; i < particles.length; i++) {
const particle = particles;

const dx = mouseX - particle.x;
const dy = mouseY - particle.y;
const distance = Math.sqrt(dx * dx + dy * dy);

// Check if the particle is within a certain distance from the mouse
if (distance < settings.attractionDistanceThreshold) {
const ax = settings.attractionStrength * dx / distance;
const ay = settings.attractionStrength * dy / distance;

particle.vx += ax;
particle.vy += ay;
}

const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
if (speed > settings.maxSpeed) {
particle.vx = (particle.vx / speed) * settings.maxSpeed;
particle.vy = (particle.vy / speed) * settings.maxSpeed;
}

particle.x += particle.vx;
particle.y += particle.vy;

if (settings.wrapAroundEdges) {
if (particle.x < 0) particle.x = window.innerWidth;
if (particle.x > window.innerWidth) particle.x = 0;
if (particle.y < 0) particle.y = window.innerHeight;
if (particle.y > window.innerHeight) particle.y = 0;
}

particle.element.style.transform = `translate(${particle.x}px, ${particle.y}px)`;
}
requestAnimationFrame(updateParticles);
}

updateParticles();
}



Подробнее здесь: https://stackoverflow.com/questions/785 ... -is-called