كيفية إنشاء تأثيرات كاميرا ويب مذهلة باستخدام Java والمعالجة

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

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

---

---

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

إعداد مشروع

لتبدأ، تحميل المعالجة وافتح رسمًا فارغًا. يعتمد هذا البرنامج التعليمي على نظام Windows ، ولكن يجب أن يعمل على أي جهاز كمبيوتر مزود بكاميرا ويب.

قد تحتاج إلى تثبيت مكتبة معالجة الفيديو ، التي يمكن الوصول إليها ضمن رسم> استيراد مكتبة> إضافة مكتبة . بحث عن فيديو في مربع البحث ، وقم بتثبيت المكتبة من مؤسسة المعالجة .

بمجرد التثبيت ، تكون جاهزًا للانطلاق. إذا كنت تريد تخطي الترميز ، يمكنك ذلك قم بتنزيل المخطط الكامل . من الأفضل بكثير أن تصنعه بنفسك من الصفر!

استخدام كاميرا الويب مع المعالجة

لنبدأ باستيراد المكتبة وإنشاء ملف اقامة وظيفة. أدخل ما يلي في رسم المعالجة الفارغ:

---

---

import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}


بعد استيراد مكتبة الفيديو ، تقوم بإنشاء ملف يأسر مثيل يسمى البرتقالي لتخزين البيانات من كاميرا الويب. في اقامة ، ال بحجم وظيفة إعداد أ 640 × 480 نافذة بحجم بكسل للعمل فيها.

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

---

---

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

void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}


ال يرسم يتم استدعاء وظيفة كل إطار. هذا يعني أنه عدة مرات كل ثانية ، لو الكاميرا بها بيانات متوفرة أنت اقرأ البيانات منه.

ثم يتم عرض هذه البيانات كملف صورة ، في هذا المنصب 0 ، 0 ، وهو أعلى يسار النافذة.

احفظ مخططك ، واضغط على زر التشغيل أعلى الشاشة.

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

تقليب الصورة

الآن بعد أن حصلت على صورة كاميرا ويب مباشرة ، دعنا نتعامل معها. في وظيفة الرسم ، استبدل الصورة (كام ، 0،0) ؛ مع هذين السطرين من التعليمات البرمجية.

scale(-1,1);
image(cam,-width,0);


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

يتطلب قلب الصورة رأسًا على عقب بضع تغييرات صغيرة فقط.

scale(-1,-1);
image(cam,-width,-height);


هذه المرة ، كلاهما x و و تم قلب القيم ، مما أدى إلى قلب صورة الكاميرا الحية رأسًا على عقب. لقد قمت حتى الآن بترميز صورة عادية وصورة مقلوبة أفقيًا وصورة مقلوبة رأسياً. دعونا نضع طريقة للتنقل بينهما.

جعلها دورة

بدلاً من إعادة كتابة الكود الخاص بك في كل مرة ، يمكننا استخدام الأرقام للتنقل عبرها. إنشاء ملف عدد صحيح في الجزء العلوي من التعليمات البرمجية الخاصة بك يسمى الجلاد .

import processing.video.*;
int switcher = 0;
Capture cam;


يمكننا استخدام قيمة الجلاد لتحديد ما يحدث لصورة الكاميرا. عندما يبدأ الرسم ، فإنك تعطيه قيمة 0 . الآن يمكننا استخدام المنطق لتغيير ما يحدث للصورة. تحديث الخاص بك يرسم طريقة لتبدو مثل هذا:

void draw(){
if (cam.available()){
cam.read();
}
if(switcher==0){
image(cam,0,0);
}
else if(switcher == 1){
scale(-1,1);
image(cam,-width,0);
}
else if(switcher == 2){
scale(-1,-1);
image(cam,-width,-height);
}
else{
println('Switcher = 0 again');
switcher = 0;
}
}


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

باستخدام الماوس

تحتوي المعالجة على طرق مضمنة للوصول إلى الماوس. لاكتشاف متى ينقر المستخدم على الماوس ، أضف الرمز الماوس تعمل في الجزء السفلي من البرنامج النصي الخاص بك.

القرص الخاص بي يعمل على 100

void mousePressed(){
switcher++;
}


تستمع المعالجة إلى أي نقرات بالماوس وتقطع البرنامج لتنفيذ هذه الطريقة عندما يكتشف إحداها. في كل مرة يتم استدعاء الطريقة ، تزداد قيمة المحول بمقدار واحد. احفظ البرنامج النصي وقم بتشغيله.

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

إضافة المزيد من التأثيرات

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

else if(switcher == 3){
tint(256, 0, 0);
image(cam, 0, 0, width/2, height/2);
tint(0, 256, 0);
image(cam, width/2, 0, width/2, height/2);
tint(0, 0, 256);
image(cam, 0, height/2, width/2, height/2);
tint(256, 0, 256);
image(cam, width/2, height/2, width/2, height/2);
}


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

ال لون تضيف الوظيفة اللون إلى كل صورة كاميرا. الأرقام بين قوسين الأحمر والأخضر والأزرق (RGB) القيم. تلوين كل الكود التالي مع اللون المختار.

احفظ والعب لترى النتيجة. حاول تغيير أرقام RGB في كل منها لون وظيفة لتغيير الألوان!

جعلها تتبع الفأر

أخيرًا ، دعنا نجعل الصورة الحية تتبع موضع الماوس باستخدام وظائف مفيدة من مكتبة المعالجة. أضف هذا فوق آخر جزء من منطقك.

else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}


هنا ، أنت تضع الصورة من الكاميرا في الماوس و فأري . تم تضمينها في قيم المعالجة التي ترجع البكسل الذي يشير إليه الماوس.

هذا كل شيء! خمسة أشكال مختلفة من الفيديو المباشر من خلال الكود. ومع ذلك ، عند تشغيل الكود ، ستلاحظ مشكلتين.

الانتهاء من المدونة

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

void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!


في بداية كل إطار ، يعيد هذا الرمز تعيين لون الصبغة إلى الأبيض ، ويضيف لون خلفية باللون الأسود لإيقاف ترك الفيديو للمسارات. الآن عند اختبار البرنامج ، كل شيء يعمل على أكمل وجه!

تأثيرات Webcame: Art From Code

المعالجة قوية للغاية ، ويمكنك استخدامها للقيام بالعديد من الأشياء. إنها منصة ممتازة لصنع الفن باستخدام الكود ، لكنها مناسبة بنفس القدر للتحكم في الروبوتات!

إذا لم تكن Java هي الشيء الذي تفضله ، فهناك مكتبة JavaScript تعتمد على المعالجة تسمى p5.js. إنه قائم على المستعرض ، ويمكن حتى للمبتدئين استخدامه لإنشاء رسوم متحركة تفاعلية رائعة!

حقوق الصورة: Syda_Productions / الإيداع

يشارك يشارك سقسقة بريد الالكتروني 3 طرق للتحقق مما إذا كان البريد الإلكتروني حقيقيًا أم مزيفًا

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

اقرأ التالي مواضيع ذات صلة

• برمجة
• جافا
• كاميرا ويب
• يعالج
• دروس الترميز

نبذة عن الكاتب إيان باكلي(216 مقالة منشورة)

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

المزيد من Ian Buckley

اشترك في نشرتنا الإخبارية

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

انقر هنا للاشتراك