Πώς να δημιουργήσετε εκπληκτικά εφέ κάμερας Web χρησιμοποιώντας Java και επεξεργασία

Πώς να δημιουργήσετε εκπληκτικά εφέ κάμερας Web χρησιμοποιώντας Java και επεξεργασία

Η επεξεργασία είναι ένα ισχυρό εργαλείο που επιτρέπει τη δημιουργία τέχνης μέσω κώδικα. Είναι ο συνδυασμός μιας βιβλιοθήκης Java για εργασία με γραφικά και ενός ολοκληρωμένου περιβάλλοντος ανάπτυξης (IDE) που σας επιτρέπει να γράφετε και να εκτελείτε εύκολα κώδικα.





Υπάρχουν πολλά γραφικά και κινούμενα σχέδια για αρχάριους που χρησιμοποιούν Επεξεργασία, αλλά είναι επίσης ικανό να χειρίζεται ζωντανά βίντεο.





Σήμερα θα κάνετε μια ζωντανή παρουσίαση βίντεο με διαφορετικά εφέ που ελέγχονται από το ποντίκι, χρησιμοποιώντας τη βιβλιοθήκη βίντεο επεξεργασίας. Εκτός από την αναστροφή του ζωντανού βίντεο, θα μάθετε να αλλάζετε το μέγεθος και να το χρωματίζετε και πώς να το κάνετε να ακολουθεί τον κέρσορα του ποντικιού.





Εγκατάσταση έργου

Να ξεκινήσω, λήψη Επεξεργασία και ανοίξτε ένα κενό σκίτσο. Αυτό το σεμινάριο βασίζεται σε σύστημα Windows, αλλά θα πρέπει να λειτουργεί σε οποιονδήποτε υπολογιστή με κάμερα web.

Σως χρειαστεί να εγκαταστήσετε τη βιβλιοθήκη επεξεργασίας βίντεο, προσβάσιμη στο Σκίτσο> Εισαγωγή βιβλιοθήκης> Προσθήκη βιβλιοθήκης Το Ψάχνω για βίντεο στο πλαίσιο αναζήτησης και εγκαταστήστε τη βιβλιοθήκη από Το Foundationδρυμα Επεξεργασίας Το



Μόλις εγκατασταθεί, είστε έτοιμοι. Αν θέλετε να παραλείψετε την κωδικοποίηση, μπορείτε κατεβάστε ολόκληρο το σκίτσο Το Είναι πολύ καλύτερο να το φτιάξετε μόνοι σας από την αρχή, ωστόσο!

Χρήση κάμερας Web με επεξεργασία

Ας ξεκινήσουμε με την εισαγωγή της βιβλιοθήκης και τη δημιουργία ενός ρύθμιση λειτουργία. Εισαγάγετε τα ακόλουθα στο κενό σκίτσο επεξεργασίας:





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

Μετά την εισαγωγή της βιβλιοθήκης βίντεο, δημιουργείτε ένα Πιάνω κλήση στιγμιότυπου Πορτοκάλι για να αποθηκεύσετε τα δεδομένα από την κάμερα web. Σε ρύθμιση , ο Μέγεθος συνάρτηση ρυθμίζει α 640x480 παράθυρο μεγέθους pixel για εργασία.

Η επόμενη γραμμή εκχωρεί Πορτοκάλι σε μια νέα περίπτωση Πιάνω , Για Αυτό σκίτσο, το οποίο έχει το ίδιο μέγεθος με το παράθυρο, προτού πείτε στην κάμερα να ενεργοποιηθεί cam.start () Το





Μην ανησυχείτε αν δεν καταλαβαίνετε όλα αυτά τα μέρη προς το παρόν. Εν ολίγοις, έχουμε πει στην Επεξεργασία να φτιάξει ένα παράθυρο, να βρει την κάμερα μας και να την ενεργοποιήσει! Για να το εμφανίσουμε χρειαζόμαστε ένα σχεδιάζω λειτουργία. Εισαγάγετε αυτό κάτω από τον παραπάνω κώδικα, έξω από τις αγκύλες.

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

ο σχεδιάζω η λειτουργία καλείται σε κάθε πλαίσιο. Αυτό σημαίνει ότι πολλές φορές κάθε δευτερόλεπτο, αν η κάμερα έχει δεδομένα διαθέσιμος εσείς ανάγνωση τα δεδομένα από αυτό.

Αυτά τα δεδομένα εμφανίζονται στη συνέχεια ως ένα εικόνα , στη θέση 0, 0 , που είναι πάνω αριστερά του παραθύρου.

Αποθηκεύστε το σκίτσο σας και πατήστε το κουμπί αναπαραγωγής στο επάνω μέρος της οθόνης.

Επιτυχία! Τα δεδομένα που αποθηκεύονται από Πορτοκάλι εκτυπώνεται σωστά στην οθόνη κάθε καρέ. Εάν αντιμετωπίζετε προβλήματα, ελέγξτε προσεκτικά τον κωδικό σας. Η Java χρειάζεται κάθε παρένθεση και ημι-κόλον στο σωστό μέρος! Η επεξεργασία μπορεί επίσης να απαιτήσει μερικά δευτερόλεπτα για πρόσβαση στην κάμερα web, οπότε αν πιστεύετε ότι δεν λειτουργεί περιμένετε μερικά δευτερόλεπτα μετά την εκκίνηση του σεναρίου.

Αναστρέφοντας την εικόνα

Τώρα που έχετε μια ζωντανή εικόνα κάμερας, ας την χειριστούμε. Στη λειτουργία κλήρωσης, αντικαταστήστε εικόνα (κάμερα, 0,0); με αυτές τις δύο γραμμές κώδικα.

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

Αποθηκεύστε και επαναλάβετε το σκίτσο. Μπορείτε να δείτε τη διαφορά; Χρησιμοποιώντας ένα αρνητικό κλίμακα αξία, όλα τα Χ οι τιμές (τα οριζόντια εικονοστοιχεία) αντιστρέφονται τώρα. Εξαιτίας αυτού, πρέπει να χρησιμοποιήσουμε την αρνητική τιμή του παραθύρου πλάτος για να τοποθετήσετε σωστά την εικόνα.

Η ανατροπή της εικόνας απαιτεί μόνο μερικές μικρές αλλαγές.

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

Αυτή τη φορά και οι δύο Χ και και οι τιμές ανατρέπονται, ανατρέποντας την εικόνα της ζωντανής κάμερας. Μέχρι στιγμής έχετε κωδικοποιήσει μια κανονική εικόνα, μια οριζόντια αναστρέψιμη εικόνα και μια κάθετα αναποδογυρισμένη εικόνα. Ας δημιουργήσουμε έναν τρόπο να κάνουμε ποδήλατο μεταξύ τους.

Κάνοντας τον Κύκλο

Αντί να ξαναγράφουμε τον κώδικά σας κάθε φορά, μπορούμε να χρησιμοποιήσουμε αριθμούς για να τους περιηγηθούμε. Δημιούργησε ένα νέο ακέραιος αριθμός στο επάνω μέρος του κώδικα που ονομάζεται διακόπτης Το

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!

Χρήση του ποντικιού

Η επεξεργασία έχει ενσωματωμένες μεθόδους πρόσβασης στο ποντίκι. Για να εντοπίσετε πότε ο χρήστης κάνει κλικ στο ποντίκι, προσθέστε το ποντίκι πιεσμένο λειτουργία στο κάτω μέρος του σεναρίου σας.

γιατί ορισμένα μηνύματα κειμένου λένε παραδομένα και άλλα όχι
void mousePressed(){
switcher++;
}

Η επεξεργασία ακούει τυχόν κλικ του ποντικιού και διακόπτει το πρόγραμμα για να πραγματοποιήσει αυτήν τη μέθοδο όταν εντοπίσει ένα. Κάθε φορά που καλείται η μέθοδος, η τιμή του διακόπτη γίνεται μεγαλύτερη κατά μία. Αποθηκεύστε και εκτελέστε το σενάριό σας.

Τώρα, όταν πατάτε το κουμπί του ποντικιού, κάνει κύκλους στους διαφορετικούς προσανατολισμούς των βίντεο, πριν επιστρέψει στο πρωτότυπο. Μέχρι τώρα μόλις γυρίσατε το βίντεο, τώρα ας κάνουμε κάτι λίγο πιο ενδιαφέρον.

Προσθήκη περισσότερων εφέ

Τώρα, θα κωδικοποιήσετε ένα τετράχρωμο εφέ ζωντανής εικόνας παρόμοιο με τα περίφημα έργα τέχνης του Andy Warhol. Η προσθήκη περισσότερων εφέ είναι τόσο απλή όσο η προσθήκη μιας άλλης ρήτρας στη λογική. Προσθέστε αυτό στο σενάριό σας μεταξύ του τελευταίου αλλιως αν δήλωση, και αλλού Το

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 τρόποι για να ελέγξετε αν ένα email είναι πραγματικό ή ψεύτικο

Εάν έχετε λάβει ένα email που φαίνεται λίγο αμφίβολο, είναι πάντα καλύτερο να ελέγχετε την αυθεντικότητά του. Ακολουθούν τρεις τρόποι για να διαπιστώσετε εάν ένα μήνυμα ηλεκτρονικού ταχυδρομείου είναι πραγματικό.

Διαβάστε Επόμενο
Σχετικά θέματα
  • Προγραμματισμός
  • Ιάβα
  • Κάμερα Web
  • Επεξεργασία
  • Φροντιστήρια κωδικοποίησης
Σχετικά με τον Συγγραφέα Ο anαν Μπάκλεϊ(216 δημοσιευμένα άρθρα)

Ο Ian Buckley είναι ανεξάρτητος δημοσιογράφος, μουσικός, ερμηνευτής και παραγωγός βίντεο που ζει στο Βερολίνο της Γερμανίας. Όταν δεν γράφει ή δεν είναι στη σκηνή, ασχολείται με ηλεκτρονικά ή κώδικα DIY με την ελπίδα να γίνει τρελός επιστήμονας.

Περισσότερα από τον Ian Buckley

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή