מבוא לאמנות גנראטית: מהי, ואיך מכינים אותה

אמנות גנרית יכולה להיות נושא מאיים - נראה שיש הרבה מתמטיקה מעורבת, והאמנות היא מסובכת כשלעצמה!

אבל, זה לא צריך להיות קשה - אתה יכול לבנות כמה דברים ממש מגניבים בלי תואר במתמטיקה או אומנות. פוסט זה יפרק מהי אמנות גנרית אפילו ואיך תוכלו להתחיל בבניית אמנות גנרית משלכם.

ראשית, מהי אמנות קוד?

אמנות קוד היא כל אמנות שנבנית באמצעות קוד. יש אינסוף דוגמאות ב- CodePen - למשל אמנות CSS.

מהי אמנות גנראטית?

לעתים קרובות, אמנות גנראטית שואבת השראה מאמנות מודרנית, במיוחד אמנות פופ שעושה שימוש רב בתבניות גיאומטריות מסודרות.

עם זאת, זוהי קטגוריה רחבה מאוד ועשירה של אמנות שנוצרה עם קוד בעל מאפיין מרכזי. אמנות גנרית משלבת מערכת כלשהי עצמית או אוטונומית בדרך כלשהי.

אקראיות היא סוג אחד של מערכת אוטונומית. על ידי שילוב המקרה ביצירת קוד, אתה מקבל יצירת אמנות אחרת וייחודית לחלוטין בכל פעם שאתה מריץ את התסריט שלך, טוען את הדף או מגיב לאינטראקציה כלשהי של המשתמש.

יש גם מערכות אוטונומיות מסודרות יותר. דוגמה אחת היא הפרקטל של מנדלברוט, שמקורו במשוואה פשוטה מטעה.

אנו יכולים גם לשלב בין שתי הגישות, מיזוג בין סדר וכאוס!

היצירה הופכת לשיתוף פעולה בין המחשב לאמן. היבטים מסוימים של הגרפיקה נשלטים על ידי הקודן, אך לא כולם. האמן שולט הן באקראיות והן בסדר באמנות.

באופן מסוים, עם מערכת אוטונומית, האמן מוותר על השליטה באמנות שלהם, והמחשב עושה זאת עבורם. נקודת מבט ניואנסית יותר עולה כאשר שוקלים תהליך יצירתי חדש.

אמן הקודן עוסק בלולאת משוב בה הם כל הזמן משנים מערכת כדי לייצר תוצאות רצויות יותר ולעתים קרובות מפתיעות יותר.

תהליך זה מאמץ ניסויים ותאונות משמחות באופן שמעצב מחדש את תפקיד האמן. כאמנים גנרטיים אנו משתמשים ביסודות הקוד כמו לולאות, בקרת זרימה ופונקציות מיוחדות. לאחר מכן אנו משלבים אותם עם כוחות בלתי צפויים לעיתים קרובות, כדי לייצר תוצאות ייחודיות לחלוטין בשונה מכל דבר אחר שקיים.

דוגמאות לאמנות גנרית

הפרחים של קייט קומפטון

אוטומטים סלולריים וקצה הכאוס

אמנות גנרית מונפשת בצבע רב צבעוני מאת פיל נאש

כתמי אימפרסיוניסטים מאת מוראסאקי אומה

עץ שנוצר מאת מרים נדלר

מה נכנס ליצירת אמנות גנרית?

• אקראיות חיונית ליצירת אמנות גנרית. האמנות צריכה להיות שונה בכל פעם שאתה מריץ את תסריט הדור, כך שהאקראיות היא בדרך כלל חלק גדול מזה.
• אלגוריתמים - יישום אלגוריתם באופן חזותי יכול לעיתים קרובות ליצור אמנות מדהימה, למשל, העץ הבינארי שלמעלה.
• גיאומטריה - האמנות הגנראית ביותר משלבת צורות, ומתמטיקה מהשיעור בגיאומטריה בתיכון יכולה לסייע לכמה אפקטים מגניבים.

איך אתה יכול לגשת ליצירת אמנות גנרית?

ישנן שתי אסטרטגיות עיקריות ליצירת אמנות גנרית, אם כי רובן ייפלו בין שתי האסטרטגיות.

הראשון הוא שלא יהיו לך תוצאות בראש ולראות מה המחשב מייצר כשאתה משחק.

השנייה היא שיש לך מושג סופי מאוד איך אתה רוצה שהאמנות תיראה, והאקראיות רק משנה מעט את התוצאה הסופית.

מאיפה כדאי להתחיל?

אם אתה מכיר JavaScript, p5.js הוא מקום מדהים להתחיל בו. מטרתה היא "להנגיש קידוד לאמנים, מעצבים, אנשי חינוך ומתחילים." זהו עטיפה בממשק ה- API, וזה מפשט הרבה את המתמטיקה. זה מתמקד בציור, אבל אתה יכול גם לעשות איתו אינטראקציות קול, וידאו או מצלמות רשת אם אתה מעוניין בצורות אמנות אלה!

מבוא מהיר ל- P5

ראשית, טען את ה- p5 CDN. לאחר מכן, בקובץ ה- JavaScript שלך, תוסיף שתי פונקציות שישמשו בתסריט p5 כמעט אי פעם: setupו- draw. שמות אלה נחוצים כדי ש- p5 יתקשר אליהם.

setupנקרא כאשר התוכנית מתחילה. ככל הנראה תיצור בד לצייר עליו באמצעות createCanvasהפונקציה, ותוכל להגדיר שם כמה ברירות מחדל. זה נקרא רק פעם אחת!

drawנקרא לאחר ההתקנה, והוא מבוצע כל הזמן עד שאתה מתקשר noLoop, מה שימנע ממנו לפעול שוב. אתה יכול לקבוע כמה פעמים drawפועל בכל שנייה עם frameRateהפונקציה.

עם אמנות גנרית, אני בדרך כלל מכניס noLoopאת setupהפונקציה, מה שגורם drawלרוץ רק פעם אחת במקום ברציפות.

הנה תבנית התחלה p5 ב- CodePen.

מכיוון שדיברנו כל כך הרבה על חשיבותה של אקראיות לאמנות גנראטית, פונקציה חשובה נוספת ב- p5 היא random. זה עובד באופן דומה לזה של JavaScript, Math.randomאך אתה יכול להגדיר טווח למספרים כך שלא תצטרך לעשות כל כך הרבה מתמטיקה כדי להביא את המספר לפורמט שימושי.

p5 קווים

אתה יכול ליצור שורה ב- p5.js כך:

line(startX, startY, endX, endY)

לאחר מכן, תוכל ליצור באופן אקראי חבורה של קווים וליצור יצירה פשוטה של ​​אמנות גנראטיבית כזו:

אפילו תסריטים פשוטים באמת יכולים ליצור יצירות אמנות מגניבות!

p5 צורות

ניתן גם ליצור צורות עם 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 וקודי hex.

אתה יכול גם לשנות את צבע המתאר באמצעות stroke. אתה יכול גם להסיר את המתאר באמצעות noStrokeאו להפוך אותו לרוחב אחר עם strokeWeight.

מחברים את הכל ביחד

ברגע שיש לנו את כל החלקים האלה, נוכל לשלב את הטכניקות לבניית דברים ממש מגניבים.

אסטרטגיה נוספת: הדרכות לצבוט

אתה יכול גם ליצור אמנות גנרית ממש מגניבה על ידי לקיחת יצירה של מישהו אחר ולבנות ממנה. לדוגמא, הנה תוצאה של הדרכה מאת דן שיפמן:

להלן שני שינויים בו כדי ליצור אפקטים שונים:

הנה אוסף Codepen עם עוד יותר!

אתה יכול לעקוב אחר הדרכות, להזין פרויקטים של CodePens או Glitch וליצור משהו חדש וייחודי. רק דאגו לתת גם לאמן המקורי קצת קרדיט.

שליף

הנה גיליון רמאות עם כל הפונקציונליות של P5 שהשתמשנו בה הדרכה זו.

קרא עוד

• אומנות גנרית
• רכבת קידוד
• שיחה של טים הולמן

שמור על קשר

פוסט זה נכתב יחד עם ג'יימס רייכארד. אם אתה יוצר אמנות משלך, דאג לצייץ אותנו אלינו! (עלי וג'יימס).

פורסם במקור באתר dev.to.