Pixel Forge
مباشرPixel Forge استوديو خاص للفن بالبكسل يعمل داخل المتصفح. يقصّ الصور ويغيّر حجمها إلى شبكة بكسلية، ويطبّق تعديلات الألوان وتقليل اللوحة اللونية، ثم يحوّل النتيجة إلى أشكال بكسلية قابلة للضبط ويحرّك البكسلات وهي تتجمّع في العمل الفني النهائي، وكل ذلك محلياً داخل المتصفح.
ReactTypeScriptNext.jsHTML CanvasWeb WorkersIndexedDB
- المشكلة
- معظم أدوات تحويل الصور إلى فن بكسلي تقدّم فلتراً ثابتاً أو ترسل الصورة الأصلية إلى خادم. احتاج Pixel Forge إلى جعل التحويل عملية إبداعية يمكن فحصها، مع الحفاظ على خصوصية صور المستخدم وبياناته.
- الحل
- بنيتُ استوديو أصلياً للمتصفح حول معاينة تفاعلية باستخدام HTML Canvas، مع التحكم بدقة الشبكة والمسافات ومعالجة اللوحة اللونية والتنعيم والأشكال البكسلية وأنماط إعادة البناء والخلفيات وأدوات التكبير والفحص. تعمل معالجة الصور في Web Workers، وتبقى التفضيلات في تخزين المتصفح، وتُحفظ المشاريع الأخيرة محلياً عبر IndexedDB. يمكن حفظ ملفات المشروع وإعادة استيرادها بصيغة JSON، مع تصدير PNG وSVG وWebP وGIF وWebP متحرك وبيانات البكسل.
- التحديات
- إبقاء اللوحة عالية الدقة وعناصر التحكم المباشرة وتقليل الألوان وحركة إعادة البناء سريعة الاستجابة تطلّب فصل معالجة البكسلات عن خيط الواجهة وتنسيق مخرجات الـ workers مع الخط الزمني. كما كان على مسار التصدير الحفاظ على بنية البكسلات نفسها عبر صيغ الصور النقطية والمتجهة والمتحركة والبيانات الخام.
- النتيجة
- محطة عمل خاصة وأنيقة للفن البكسلي تحوّل صورة مرفوعة أو عينة مدمجة إلى تركيب متحرك دون إرسال المصدر خارج الجهاز. وهي تُظهر عرضاً سريعاً على اللوحة، ومعالجة صور تعتمد على الـ workers، وتخزين مشاريع محلياً، ومسار تصدير متعدد الصيغ في تجربة متصفح مركّزة.