إنشاء رسوم متحركة عشوائية لحركة مرور الإنترنت باستخدام JavaScript Canvas

تصور حركة المرور على الإنترنت باستخدام الرسوم المتحركة الديناميكية على القماش

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

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

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

في هذا الدليل، سنستكشف كيفية إنشاء خطوط متحركة باستخدام لوحة JavaScript، وكيفية تنفيذ العشوائية في سعتها لتقليد حركة المرور المتقلبة على الإنترنت. في النهاية، ستكون قادرًا على إنتاج رسوم متحركة سلسة لا نهاية لها تلتقط الطبيعة غير المتوقعة للبيانات في الوقت الفعلي.

إنشاء رسوم متحركة ديناميكية باستخدام JavaScript Canvas

في هذا المثال، نستكشف كيفية تنفيذ خط متحرك باستخدام JavaScript وعنصر Canvas الخاص بـ HTML5. الهدف هو محاكاة حركة المرور على الإنترنت باستخدام خطوط السعة العشوائية. تبدأ الرسوم المتحركة بالوصول إلى عنصر اللوحة القماشية باستخدام document.getElementById() واسترجاع سياقه ثنائي الأبعاد باستخدام getContext('2d'). يسمح السياق ثنائي الأبعاد برسم الأشكال والخطوط والرسومات المعقدة. لإنشاء رسوم متحركة سلسة، تستخدم الوظيفة requestAnimationFrame() يتم استخدامه، والذي يعمل على تحسين العرض للمتصفح، مما يقلل من العمليات الحسابية غير الضرورية.

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

يكمن جوهر الرسوم المتحركة في الحلقة حيث نتحرك عبر اللوحة القماشية أفقيًا باستخدام حلقة for. لكل إحداثي x، يتم حساب إحداثي y جديد عن طريق إضافة نتيجة الموجة الجيبية إلى نقطة منتصف اللوحة، وضبطها بالسعة العشوائية التي تم إنشاؤها لقيمة x المحددة. وهذا يخلق خطًا سلسًا ومتدفقًا يتأرجح على ارتفاعات مختلفة. الطريقة خط إلى () يتم استخدامه لرسم مقطع خطي لكل إحداثي (x، y) جديد.

أخيرًا، بمجرد إنشاء مسار الخط، سيتم سكتة دماغية() يتم استدعاء الطريقة لعرض الخط على اللوحة القماشية. يتم تكرار هذه العملية إطارًا تلو الآخر، مع زيادة متغير xOffset في كل مرة لضمان استمرار تقدم الرسوم المتحركة. والنتيجة هي رسوم متحركة لا نهاية لها تحاكي حركة المرور على الإنترنت بدرجات متفاوتة من الشدة، وذلك بفضل التوزيع العشوائي في السعة. يتم تكرار العملية برمتها باستخدام requestAnimationFrame()، مما يضمن سلاسة الرسوم المتحركة وتشغيلها بشكل متزامن مع معدل تحديث المتصفح.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let xOffset = 0;
const speed = 2;
function getRandomAmplitude() {
    return Math.random() * 100;  // Generates random amplitude for each line
}
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    for (let x = 0; x < canvas.width; x++) {
        let amplitude = getRandomAmplitude();
        let y = canvas.height / 2 + Math.sin((x + xOffset) * 0.02) * amplitude;
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.stroke();
    xOffset += speed;
    requestAnimationFrame(animate);
}
animate();

const { createCanvas } = require('canvas');
const fs = require('fs');
const canvas = createCanvas(800, 400);
const ctx = canvas.getContext('2d');
let xOffset = 0;
function getRandomAmplitude() {
    return Math.random() * 100;
}
function generateFrame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    for (let x = 0; x < canvas.width; x++) {
        let amplitude = getRandomAmplitude();
        let y = canvas.height / 2 + Math.sin((x + xOffset) * 0.02) * amplitude;
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.stroke();
    xOffset += 2;
}
setInterval(() => {
    generateFrame();
    const buffer = canvas.toBuffer('image/png');
    fs.writeFileSync('./frame.png', buffer);
}, 100);

describe('Canvas Animation', () => {
    test('should create a canvas element', () => {
        document.body.innerHTML = '<canvas id="myCanvas" width="800" height="400"></canvas>';
        const canvas = document.getElementById('myCanvas');
        expect(canvas).toBeTruthy();
    });
    test('should call getRandomAmplitude during animation', () => {
        const spy = jest.spyOn(global, 'getRandomAmplitude');
        animate();
        expect(spy).toHaveBeenCalled();
    });
});

const chai = require('chai');
const fs = require('fs');
const { createCanvas } = require('canvas');
const expect = chai.expect;
describe('Server-side Canvas Animation', () => {
    it('should create a PNG file', (done) => {
        const canvas = createCanvas(800, 400);
        const ctx = canvas.getContext('2d');
        generateFrame(ctx, canvas);
        const buffer = canvas.toBuffer('image/png');
        fs.writeFileSync('./testFrame.png', buffer);
        expect(fs.existsSync('./testFrame.png')).to.be.true;
        done();
    });
});

تحسين تصور حركة المرور على الإنترنت باستخدام الرسوم المتحركة على القماش في الوقت الفعلي

أحد جوانب إنشاء رسوم متحركة قماشية ديناميكية هو القدرة على التحكم في مدى سلاسة وواقعية سلوك الرسوم المتحركة. في سياق تمثيل حركة المرور على الإنترنت، والتي غالبًا ما تكون غير متوقعة، فإن التوزيع العشوائي لسعة الموجة الجيبية هو أحد الأساليب. ومع ذلك، هناك عامل حاسم آخر وهو التحكم في سرعة وتكرار الرسوم المتحركة. ضبط التردد باستخدام الرياضيات. الخطيئة () وظيفة وضبط سرعة الرسوم المتحركة عبر requestAnimationFrame() تسمح لك الدورة بعكس تدفقات حركة المرور في العالم الحقيقي بشكل أكثر دقة.

إلى جانب السعة العشوائية، يمكن أن يساعد دمج عناصر مثل خوارزميات الضوضاء مثل ضوضاء Perlin أو Simplex في إنشاء المزيد من الأنماط العضوية. تنتج وظائف الضوضاء هذه عشوائية متماسكة، مما يضمن انتقالات أكثر سلاسة بين النقاط، على عكس الأرقام العشوائية البحتة التي يتم إنشاؤها بواسطة الرياضيات.عشوائي(). يمكن أن يؤدي ذلك إلى رسوم متحركة أكثر جاذبية بصريًا وتعكس الطبيعة غير المنتظمة لبيانات الوقت الفعلي بشكل أفضل من الموجات الجيبية الأساسية. تُستخدم خوارزميات الضوضاء على نطاق واسع في مجالات مثل تطوير الألعاب والتوليد الإجرائي.

هناك اعتبار آخر مهم عند إنشاء تصورات في الوقت الفعلي وهو تحسين أداء الرسوم المتحركة. مع رسم اللوحة القماشية بشكل مستمر، يمكن أن يزيد استهلاك الذاكرة واستخدام وحدة المعالجة المركزية (CPU)، خاصة مع الرسومات المعقدة. يمكن أن يؤدي استخدام أساليب مثل اللوحات القماشية التي تظهر على الشاشة أو تحديد عدد الإطارات المعروضة في الثانية إلى ضمان بقاء الرسوم المتحركة سلسة دون إجهاد النظام. تتبع xOffset المتغير لضبط حركة الخطوط يضمن أيضًا تدفق الرسوم المتحركة بسلاسة دون إعادة التعيين بشكل مفاجئ.