יצירת עננים בקוד


(maorbar) #1

הי,
אני מנסה ליצור בקוד עננים.
מצאתי קוד די מגניב אבל אלה יותר עננים ערפיליים והייתי מעדיף אותם יותר מה שנקרא volumetric clouds.
כיוונים כלשהו?


(Itzik Arzoni) #2

אתה יכול לצייר דוגמא של Volumetric Clouds ?

כזה?


(maorbar) #3

חשבתי לצייר צורה באופן דינאמי ולהחיל עליה את ה-Perlin Noise.


(Itzik Arzoni) #4

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

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

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


(maorbar) #5

אחרי בדיקה ב-PS, נראה שמה שאתה מציע יעבוד.


(Itzik Arzoni) #6

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


(maorbar) #7

לא צריך להזיז. עכשיו רק צריך לנסות לגרום לזה להיראות יותר ריאליסטי.


(Itzik Arzoni) #8

רצית כזה?

http://www.flashandmath.com/intermediate/clouds/clouds.swf

עריכה: פשיי איזה טריק נחמד!
הנה הלינק.


(maorbar) #9

איציק זה הלינק מההודעה הראשונה שלי…


(Itzik Arzoni) #10

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


(maorbar) #11

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


(Itzik Arzoni) #13

ת’אמת זה היה ממש מגניב.
אתה יכול ליצור פה עננים כאוות נפשך.
אני בסופו של דבר אבין איך להעלות לפה קובץ פלאש ולהציג אותו בפוסט, בינתיים תצטרך להוריד. ( @Michael אולי יודע? )

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

  function thresholdImage() {
    var bmd2:BitmapData = new BitmapData(perlinData.width, perlinData.height , true, 0xFFCCCCCC);
    var pt:Point = new Point(0, 0);
    var rect:Rectangle = new Rectangle(0, 0, perlinData.width, perlinData.height);
    var threshold:Int =  getThreshold();
    var color:Int = 0xE10229; //Replacement color)
     var maskColor:Int = 0xffffff; //What channels to affect (this is the default).
     perlinData.threshold(perlinData, rect, pt, "<", threshold, color, maskColor, true);
  }

אחר כך עברתי עם כמה פילטרים, והבהרתי את זה קצת עם מטריצה של צבעים:

bevelFilter =  new DropShadowFilter(20, -Params.shade, 0, 1, 30, 30, 1, 1, true);
bevelFilter2 = new DropShadowFilter(25,  Params.shade, 0xffffff, 1,30, 30, 1, 1, true);
cmf = new ColorMatrixFilter([2, 0, 0, 0, 255,
   				           0, 2, 0, 0, 255,
					    0, 0, 2, 0, 255,
					   1, 0, 0, 0, 0]);

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

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

זה נראה כמו פלאש, אבל זה הכל נכתב בהקס, באמצעות OpenFl. :smiley:

עריכה: הנה הפרוייקט.


פיתוח אלגוריתם יעיל וכללי של עננים
(מיכאל שלמה) #15

ואוו מגניב!
גם מגניב שהקוד של OpenFl ניראה בדיוק כמו פלאש!
לא הבנתי בדיוק איך xml יכול לשנות באופן דינאמי את הפלאש…


(Itzik Arzoni) #16

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

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

<Slider  skin:Paint-border="1" min="0" max="254"  value="clouds.Params.period" h="25" slider-w = "50" slider-heightPt = "100" slider-skin:Paint-color = "0xFF0000" on-change="clouds.Params.period = Math.round($this.value);" />

אתה יכול לראות שב on-change רשמתי פקודת הקס, להציב את הערך של הסליידר במשתנה שקיים בהקס. בתוכנית אני בכל פריים קורא את המשתנים האלו כדי לרנדר מחדש את העננים.


(מיכאל שלמה) #17

אני יודע שב-PhotoShop ישנו כלי שיודע להשלים את החסר, כלומר, אם נניח יש לנו תמונת נוף עם בן אדם שאנחנו רוצים “להעלים” אותו אז PS יודע למחוק אותו להשלים את החסר בהתאם למה שיש מצידי התמונה. לפי מה שאני זוכר הוא עושה את זה בצורה מעוררת השתאות כשמדובר בעננים. אולי אפשר לחקות את העיקרון הזה?

אני חושב שזה הכלי הזה: http://blog.gilbertconsulting.com/2013/07/automatically-extend-background-in.html


(Itzik Arzoni) #18

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

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