هذا ما سنقوم بإنشائه، حرك الماوس فوق الجزيئات لترى التأثير.

في هذه المقالة، سأرشدك خلال عملية إنشاء رسوم متحركة جسيمية جذابة باستخدام JavaScript وHTML5 Canvas. لا يعمل هذا المشروع على تحسين جماليات صفحة الويب الخاصة بك فحسب، بل يعد أيضًا بمثابة فرصة رائعة للتعمق في بعض مفاهيم البرمجة المثيرة للاهتمام. هيا بنا نتعمق!

نظرة عامة على المشروع

تتميز الرسوم المتحركة بالجزيئات التي تتحرك بنمط دائري حول نقطة مركزية. عندما يحوم الماوس فوق اللوحة القماشية، تنجذب الجزيئات إلى المؤشر، مما يخلق تأثيرًا ديناميكيًا وجذابًا. سنستخدم مكتبة Simplex Noise لتقديم بعض العشوائية وجعل حركة الجزيئات أكثر عضوية وجاذبية بصريًا.

التقنيات المستخدمة

• لوحة HTML5: لعرض الرسوم المتحركة.
• جافا سكريبت: لإدارة منطق الرسوم المتحركة.
• CSS: للتصميم والتخطيط.
• الضوضاء البسيطة: لإضافة العشوائية إلى حركة الجسيمات.

تهيئة البيئة

للبدء، قم بإنشاء ملف HTML وقم بتضمين مكتبة Simplex Noise باستخدام علامة البرنامج النصي التالية:

تنفيذ جافا سكريبت

هذا هو الجزء الأساسي من الرسوم المتحركة لدينا في JavaScript. سنقوم بتحديد تكوين الجسيمات وإعداد اللوحة القماشية لرسمها.

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

في الكود أعلاه، قمنا بتكوين خصائص مختلفة لجزيئاتنا، بما في ذلك عددها وسرعتها ونصف قطرها ولونها (درجة اللون) ولون خلفية اللوحة القماشية.

تهيئة الجزيئات

نقوم بتهيئة الجزيئات في نمط دائري وتخصيص خصائص عشوائية لها:

function initParticles() {
    particleProps = new Float32Array(config.particleCount * config.particlePropCount);
    const angleIncrement = TAU / config.particleCount;

    for (let i = 0; i 




  
  
  رسم الجسيمات


 تتم معالجة منطق الرسوم المتحركة الأساسي في وظيفة الرسم، حيث نقوم بتحديث وعرض الجسيمات بشكل مستمر:



function draw() {
    tick  ;
    ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
    ctx.b.fillStyle = config.backgroundColor;
    ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

    drawParticles();
    renderGlow();
    renderToScreen();
    requestAnimationFrame(draw);
}








  
  
  تصميم CSS


لضمان ظهور الرسوم المتحركة لدينا مصقولة، سنستخدم بعض CSS لتصميم الجسم والقماش:



body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    margin: 0;
    background: #000; /* Optional: background color */
}

.content--canvas {
    position: absolute; 
    top: 0;
    z-index: 1;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
}

canvas {
    display: block; 
}





 لا تتردد في تجربة خصائص الجسيمات في كائن التكوين لإنشاء الرسوم المتحركة الفريدة الخاصة بك! تحقق من العرض التجريبي المباشر على CodePen وشارك أفكارك أو تحسيناتك في التعليقات أدناه.