Εισαγωγή στη Γενετική Τέχνη: τι είναι και πώς το φτιάχνετε

Η δημιουργική τέχνη μπορεί να είναι ένα εκφοβιστικό θέμα - φαίνεται ότι υπάρχουν πολλά μαθηματικά και η τέχνη είναι από μόνη της δύσκολη!

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

Πρώτον, τι είναι το art art;

Το Code art είναι κάθε τέχνη που δημιουργείται χρησιμοποιώντας κώδικα. Υπάρχουν ατελείωτα παραδείγματα στο CodePen - για παράδειγμα CSS art.

Τι είναι η δημιουργική τέχνη;

Συχνά, η δημιουργική τέχνη εμπνέεται από τη μοντέρνα τέχνη, ειδικά από την ποπ αρτ που κάνει μεγάλη χρήση τακτικών γεωμετρικών σχεδίων.

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

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

Υπάρχουν επίσης πιο ομαλά αυτόνομα συστήματα. Ένα παράδειγμα είναι το Fractal του Mandelbrot, που προέρχεται από μια παραπλανητικά απλή εξίσωση.

Μπορούμε επίσης να ενσωματώσουμε και τις δύο προσεγγίσεις, την ανάμειξη και το χάος!

Το έργο τέχνης γίνεται μια συνεργασία μεταξύ του υπολογιστή και του καλλιτέχνη. Ορισμένες πτυχές του έργου τέχνης ελέγχονται από τον κωδικοποιητή, αλλά όχι όλες. Ο καλλιτέχνης ελέγχει τόσο την τυχαιότητα όσο και τη σειρά στην τέχνη.

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

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

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

Παραδείγματα γενετικής τέχνης

Τα λουλούδια της Kate Compton

Cellular Automata και η άκρη του χάους

Κινούμενη δημιουργική τέχνη σε πολύχρωμα από τον Phil Nash

Ιμπρεσιονιστές Blobs από τον Murasaki Uma

Δημιουργημένο δέντρο από τη Miriam Nadler

Τι πηγαίνει σε ένα κομμάτι δημιουργικής τέχνης;

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

Πώς μπορείτε να προσεγγίσετε ένα δημιουργικό έργο τέχνης;

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

Το πρώτο είναι να μην έχετε αποτελέσματα στο μυαλό και να δείτε τι παράγει ο υπολογιστής καθώς παίζετε.

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

Από πού πρέπει να ξεκινήσετε;

Αν γνωρίζετε JavaScript, το p5.js είναι ένα καταπληκτικό μέρος για να ξεκινήσετε. Ο στόχος του είναι να «κάνει την κωδικοποίηση προσβάσιμη για καλλιτέχνες, σχεδιαστές, εκπαιδευτικούς και αρχάριους». Είναι ένα περιτύλιγμα στο Canvas API και απλοποιεί πολλά μαθηματικά. Επικεντρώνεται στο σχέδιο, αλλά μπορείτε επίσης να κάνετε αλληλεπίδραση ήχου, βίντεο ή κάμερας web με αυτό εάν ενδιαφέρεστε για αυτές τις μορφές τέχνης!

Μια γρήγορη εισαγωγή στο P5

Πρώτα, φορτώστε το p5 CDN. Στη συνέχεια, στο αρχείο JavaScript, θα προσθέσετε δύο συναρτήσεις που θα χρησιμοποιηθούν σε σχεδόν ποτέ σενάριο p5: setupκαι draw. Αυτά τα ονόματα είναι απαραίτητα για να τα καλέσει το p5.

setupκαλείται κατά την έναρξη του προγράμματος. Πιθανότατα θα δημιουργήσετε έναν καμβά για να σχεδιάσετε μέσα του χρησιμοποιώντας τη createCanvasλειτουργία και μπορείτε να ορίσετε ορισμένες προεπιλογές εκεί. Λέγεται μόνο μία φορά!

drawκαλείται μετά την εγκατάσταση και εκτελείται συνεχώς έως ότου καλέσετε noLoop, κάτι που θα το σταματήσει να τρέχει ξανά. Μπορείτε να ελέγξετε πόσες φορές drawεκτελείται κάθε δευτερόλεπτο με τη frameRateλειτουργία.

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

Ακολουθεί ένα πρότυπο εκκίνησης p5 στο CodePen.

Δεδομένου ότι έχουμε μιλήσει τόσο πολύ για τη σημασία της τυχαιότητας για τη δημιουργική τέχνη, μια άλλη σημαντική λειτουργία στο σελ random. 5 είναι . Λειτουργεί παρόμοια με τα JavaScript Math.randomαλλά μπορείτε να ορίσετε ένα εύρος για τους αριθμούς, έτσι ώστε να μην χρειάζεται να κάνετε τόσα μαθηματικά για να πάρετε τον αριθμό σε χρήσιμη μορφή.

p5 Γραμμές

Μπορείτε να δημιουργήσετε μια γραμμή στο p5.js ως εξής:

line(startX, startY, endX, endY)

Στη συνέχεια, μπορείτε να δημιουργήσετε τυχαία μια δέσμη γραμμών και να δημιουργήσετε ένα απλό κομμάτι δημιουργικής τέχνης όπως αυτό:

Ακόμη και πραγματικά απλά σενάρια μπορούν να δημιουργήσουν υπέροχα έργα τέχνης!

σελ. 5 Σχήματα

Μπορείτε επίσης να δημιουργήσετε σχήματα με κύκλους, τρίγωνα και τετράγωνα όπως το p5.

Ακολουθεί ένα παράδειγμα δημιουργίας ορισμένων σχημάτων με το p5:

// circle ellipse(xCoordinate, yCoordinate, width, height) 
// square rect(xCoordinate, yCoordinate, width, height) 
// triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

Στη συνέχεια, μπορούμε να δημιουργήσουμε περισσότερα σχήματα για να δημιουργήσουμε κάτι πιο διασκεδαστικό!

p5 Κίνηση

Μπορούμε να προσθέσουμε κίνηση στα σχέδιά μας αφαιρώντας την noLoopκλήση λειτουργίας στη setupσυνάρτηση - δείτε το!

Χρώμα

Μπορείτε επίσης να παίξετε με χρώμα με δημιουργική τέχνη επιλέγοντας τυχαία χρώματα. Μπορείτε να το κάνετε μαθηματικά μέσω τιμών RGB ή μπορείτε να δημιουργήσετε μια παλέτα χρωμάτων με τον αγαπημένο σας επιλογέα χρωμάτων (το χρησιμοποιούμε αυτό).

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

Μπορείτε επίσης να αλλάξετε το χρώμα του περιγράμματος χρησιμοποιώντας stroke. Μπορείτε επίσης να καταργήσετε αυτό το περίγραμμα χρησιμοποιώντας noStrokeή να το κάνετε διαφορετικό πλάτος με strokeWeight.

Συνδυάζοντας τα όλα μαζί

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

Μια άλλη στρατηγική: Tweaking Tutorials

Μπορείτε επίσης να δημιουργήσετε πραγματικά εντυπωσιακή δημιουργική τέχνη παίρνοντας τη δουλειά κάποιου άλλου και φτιάχνοντας από αυτήν. Για παράδειγμα, εδώ είναι το αποτέλεσμα ενός σεμιναρίου του Dan Shiffman:

Ακολουθούν δύο τροποποιήσεις για τη δημιουργία διαφορετικών εφέ:

Εδώ είναι μια συλλογή Codepen με ακόμη περισσότερα!

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

Σκονάκι

Ακολουθεί ένα cheat sheet με όλες τις λειτουργίες P5 που χρησιμοποιήσαμε για αυτό το σεμινάριο.

Διαβάστε περισσότερα

  • Γενετική Τέχνη
  • Τρένο κωδικοποίησης
  • Συζήτηση από τον Tim Holman

Κρατάω επαφή

Αυτή η ανάρτηση συν-γράφτηκε με τον James Reichard. Αν δημιουργήσετε τη δική σας τέχνη, φροντίστε να μας το Tweet! (Ali και James).

Αρχικά δημοσιεύθηκε στο dev.to.