დიზაინერისთვის საინტერესო პროგრამირების სახელმძღვანელო-გაუშვით თქვენი სურათი (მეორე ნაწილი): 8 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:15

უმეტესობისთვის მათემატიკა უსარგებლო ჩანს. ჩვენს ყოველდღიურ ცხოვრებაში ყველაზე ხშირად გამოიყენება მხოლოდ დამატება, გამოკლება, გამრავლება და გაყოფა. თუმცა, სულ სხვაა, თუ შეგიძლია შექმნა პროგრამით. რაც უფრო მეტს იცნობ, მით უფრო მშვენიერ შედეგს მიიღებ.

ნაბიჯი 1: მოძრაობა და ფუნქცია

ნება მომეცით გაჩვენოთ რამდენიმე უცნობი სურათი თქვენი გემოვნების სტიმულირებისთვის.

Რა არის ეს? ახლა უბრალოდ შეინახეთ ეს კითხვა ჯერ და ბოლოს თქვენ იცით და გამოიყენებთ მას.

ბოლო თავში ჩვენ ვისწავლეთ ფუნქციის დაყენება და ფუნქციის დახაზვა, რამაც შეიძლება სტატიკური გრაფიკა დინამიური გახადოს. თუმცა, მოძრაობის ეს ფორმატი ძალიან მარტივია. ჩვენ ვაპირებთ გამოვიყენოთ ცოდნის ფუნქცია, რომელიც ადრე დავისწავლეთ, რათა ჩვენი გრაფიკა საკუთარი ხასიათით გამოვიყენოთ.

რამდენი ფუნქცია შეგიძლიათ ამოიცნოთ ზემოთ მოცემული სურათებიდან? რა სახის ურთიერთობა აქვთ მათ მოძრაობასთან? ახლა ავიღოთ კვადრატული ფუნქცია მისგან, შემთხვევით დავამატოთ რამდენიმე პარამეტრი და ვნახოთ რა მოხდება. მაგალითად, y = x² / 100.

ასე გამოიყურება ფუნქციის სურათი. დააკოპირეთ ქვემოთ მოცემული კოდი.

[cceN_cpp theme = "გამთენიისას"] float x, y; void setup () {ზომა (300, 300); ფონი (0); x = 0; } void draw () {ინსულტი (255); ინსულტი წონა (2); y = ძალა (x, 2) / 100.0; // ფუნქცია pow დაუბრუნდება აღნიშვნის რიცხვის მე -3 ხარისხს. (x, 2) წარმოადგენს x- ის კვადრატს. პირველი პარამეტრი არის ძირითადი ნომერი, ხოლო მეორე არის ინდექსი. წერტილი (x, y); x ++; } [/cceN_cpp]

გაშვებული ეფექტი

შემდეგი, აირჩიეთ ფუნქცია ცოდვა. ფორმულა: y = 150 + ცოდვა (x).

დააკოპირეთ შემდეგი კოდი.

[cceN_cpp theme = "გამთენიისას"] float x, y; void setup () {ზომა (300, 300); ფონი (0); x = 0; } void draw () {y = სიმაღლე/2 + ცოდვა (რადიანები (x)) * 150; // ფუნქცია რადიანი გარდაქმნის x- ს კუთხედ. x ++; ინსულტი (255); ინსულტი წონა (2); წერტილი (x, y); } [/cceN_cpp]

გაშვებული ეფექტი

ეს არის გრაფიკა, რომელსაც ვიღებთ კოდის მუშაობის შემდეგ. და ეს არის მათი მოძრაობის კვალი. პირველთან შედარებით, შედეგი აშკარაა. ფუნქციის სურათი რეალურად შეესაბამება მოძრაობის კვალს! ეს საკმაოდ მარტივია. თქვენ უბრალოდ უნდა შეცვალოთ x, y მნიშვნელობა კოორდინატში. პირველი ჩანაწერი, რომელიც ჩვენ დავხატეთ, ექვივალენტურია y = x² / 100 ფუნქციის გრაფიკასთან. ეს უკანასკნელი კი უტოლდება y = 150 + sin (x) ფუნქციის გრაფიკას. მაგრამ პროგრამაში, y ღერძის მიმართულება საპირისპიროა. ასე რომ, ორიგინალ გრაფიკასთან შედარებით, ტრეკი თავდაყირა დადგება. ახლა, ვფიქრობ, თქვენ უნდა გქონდეთ განცდა, რომ ზოგიერთი რთული კითხვა, რომელიც დიდი ხანია თქვენს თავში ტრიალებს, მყისიერად წყდება. გასაოცარია, რომ ეს ფანტასტიკური ფუნქციები, რაც ადრე ვისწავლეთ, შეიძლება გამოყენებულ იქნას გრაფიკული მოძრაობის გასაკონტროლებლად!

ნაბიჯი 2: ფუნქციის დასაწერად

მე ჩამოვთვალე რამდენიმე ხშირად გამოყენებული ფუნქცია ქვემოთ. ვიმედოვნებთ, რომ ეს დაგვეხმარება კომპიუტერში ამოცნობის ფუნქციების გადათარგმნაში.

ამრიგად, ქვემოთ მოცემული ფორმულა პროგრამაში უნდა დაიწეროს ასე:

y = x² → y = pow (x, 2) ან y = sq (x)

y = x³ → y = ძალა (x, 3)

y = xⁿ → y = ძალა (x, n)

y = 4ⁿ → y = ძალა (4, n)

y ＝ logₑ² → y = ჟურნალი (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

თქვენ ასევე შეგიძლიათ შემთხვევით ჩაწეროთ ფუნქცია პროგრამაში და ნახოთ როგორი იქნება მისი მოძრაობის ტრეკი. გახსოვდეთ, რომ გაითვალისწინეთ ღირებულების ველი და განსაზღვრის დომენი, წინააღმდეგ შემთხვევაში თქვენი გრაფიკა ამოიწურება ეკრანზე.

ტრიგონომეტრიული ფუნქცია

ახლა, მოდით წავიდეთ შემდგომ, რომ ვიცოდეთ ტრიგონომეტრიული ფუნქციების ზოგიერთი ნაწერი.

ჩვენ უნდა გავამახვილოთ ყურადღება, რომ პროგრამაში ფუნქციის პარამეტრის შეყვანა კუთხესთან შედარებით იღებს რადიანს. ამრიგად, ცოდვა 90 ° ჩაიწერება ცოდვაში (PI ／ 2). თუ თქვენ არ იცნობთ ამ მეთოდს, შეგიძლიათ გამოიყენოთ რანდიანის ფუნქცია, რომ კუთხე რადიანად გადააკეთოთ და შემდეგ ჩაწეროთ sin （რადიანი (90)).

ფუნქციის ხარისხების გამოყენება შედარებით საპირისპიროა. მას შეუძლია რადიანი გარდაქმნას კუთხედ. შეიყვანეთ ბეჭდვა (გრადუსი (PI/2)) პირდაპირ რედაქტირების ზონაში და ნახეთ რას მიიღებთ.

ნაბიჯი 3: აკონტროლეთ გრაფიკული მოძრაობა ტრიგონომეტრიული ფუნქციით

აქ არის შემთხვევა, რომ ნახოთ გრაფიკული მოძრაობის რეალური ეფექტი.

[cceN_cpp theme = "გამთენიისას"] ცურავს x, y; void setup () {ზომა (700, 300); } void draw () {ფონი (234, 113, 107); y = ცოდვა (რადიანი (x)) * 150 + 150; x ++; noStroke (); ელიფსი (x, y, 50, 50); } [/cceN_cpp]

ფუნქცია ცოდვა არის პერიოდული ფუნქცია. მისი მინიმალური მნიშვნელობა არის －1, ხოლო მაქსიმალური მნიშვნელობა 1. ეკრანის სიმაღლე 300. მითითებულია y = sin (რადიანი (x)) * 150 + 150, ამიტომ y მნიშვნელობის ცვლილების დიაპაზონი კარგად იქნება კონტროლირებული 0 -ის ფარგლებში 300 -მდე.

დაწნული წრე

ისე, ჩვენ საბოლოოდ შევედით ამ თავის ყველაზე მნიშვნელოვან ნაწილში. როგორ დავხატოთ წრე გზა პროგრამაში? როგორ გამოვიყენოთ ფუნქციები მის გამოსახატავად? ნება მომეცით კიდევ ერთხელ გაჩვენოთ ის ორი სურათი, რაც ამ სტატიის დასაწყისში ვნახეთ.

სინამდვილეში მათ ვიზუალურად გამოავლინეს ურთიერთობა წრეწირის კოორდინატსა და ტრიგონომეტრიულ ფუნქციას შორის. ზემოთ მოცემულ სურათებში მოძრაობა განპირობებულია მუდმივად მზარდი დამოუკიდებელი ცვლადით θ. მარცხენა არის ფუნქცია sin და cos, ხოლო მარჯვენა არის წერტილი, რომელიც აკეთებს წრიულ მოძრაობას რუქის შედგენის შემდეგ. ძალიან ჭკვიანი არაა? ეს აღარ არის იდუმალი. თქვენ შეგიძლიათ გამოიყენოთ კოდი მის გასაცნობად.

მარტივი მაგალითი:

[cceN_cpp თემა = "გამთენიისას"] ცურავს x, y, r, R, კუთხე; void setup () {ზომა (300, 300); r = 20; // წრის დიამეტრი R = 100; // მოძრაობის ბილიკის რადიუსი x = 0; კუთხე = 0; y = სიმაღლე/2; } void draw () {ფონი (234, 113, 107); თარგმნა (სიგანე/2, სიმაღლე/2); // გადაიტანეთ ორიგინალური წერტილი ეკრანის ცენტრში. noStroke (); x = R * cos (კუთხე); y = R * ცოდვა (კუთხე); ელიფსი (x, y, r, r); კუთხე += 0.05; } [/cceN_cpp]

შეხედე! გამოჩნდება მბრუნავი წრე! აქ, დამოუკიდებელი ცვლადი აღარ არის მუდმივი ზრდის bit გახდება კუთხე (უდრის θ სურათზე). ეს არის კუთხე. მათ შორის, xy– ს აქვს შედარებით გამრავლებული R კოეფიციენტი, რაც იწვევს წრის მოძრაობის რადიუსის გაფართოებას (R არის რადიუსისთვის). თუ არ არის R გამრავლება, მისი მოძრაობის გზა შემოიფარგლება -1 – დან 1 – ის ფარგლებში.

რატომ არ გამოვიყენოთ მზარდი x? თავად ფუნქციის თვისების მიხედვით, განსაზღვრულ დომენში ნებისმიერ x- ს აქვს მხოლოდ y, რომელიც მას ემთხვევა. ასე რომ, თვითმფრინავის მართკუთხა განზომილების კოორდინატთა სისტემაში თქვენ ვერ იპოვით "უბრალო ფუნქციას", რომელიც პირდაპირ წრე მიაპყროს. ანუ ჩვენ აღარ შეგვიძლია გამოვიყენოთ ეს ფორმატი.

y = (x- ის უცნობი გამოთქმა?);

x ＋＋;

ასე რომ, ჩვენ უნდა შევცვალოთ ჩვენი იდეა. ამოირჩიეთ სხვა კუთხე, როგორც დამოუკიდებელი ცვლადი, შემდეგ გამოიყენეთ ფუნქცია sin და cos, რომ გარდაქმნათ იგი ჰორიზონტალურ და ვერტიკალურ კოორდინატებად.

x = R * cos (კუთხე);

y = R * ცოდვა (კუთხე);

კუთხე += 0.05;

ზოგიერთ თქვენგანს შეიძლება აინტერესებდეს, რატომ შეუძლია მას აჩვენოს წრის მოძრაობის გზა. ტრიგონომეტრიული ფუნქციის განმარტების თანახმად, ჩვენ შეგვიძლია მარტივად განვსაზღვროთ, რომ ეს ფუნქცია სცოდავს საპირისპირო მხარის თანაფარდობას ჰიპოტენუზასთან; ფუნქცია cos არის ჰიპოტენუზის მიმდებარე თანაფარდობა. სადაც არ უნდა იყოს წრის წერტილი, r (რადიუსი) უცვლელი დარჩება. ამიტომ შეგვიძლია დავასკვნათ x კოორდინატის და y კოორდინატის გამოთქმა.

რადგან ეს არ არის მათემატიკური მითითება, აქ მე ვაპირებ შეწყვიტო მეტი ცოდნის ჩვენება ტრიგონომეტრიული ფუნქციის შესახებ თქვენთვის. თუ გსურთ იცოდეთ ან უბრალოდ დაგავიწყდათ, შეგიძლიათ სცადოთ ხელახლა გადახედოთ საკუთარ თავს.

რასაკვირველია, ყველაფერი კარგადაა, თუ ბოლომდე ვერ გაიგებ. თქვენ მხოლოდ უნდა იცოდეთ როგორ გამოიყენოთ იგი წრის დასახატად. ესეც ერთგვარი "პროგრამირების იდეაა". მოგვიანებით, ჩვენ ხშირად გამოვიყენებთ ზოგიერთ მოდულს, რომელიც დამზადებულია სხვების მიერ გარკვეული სახის ფუნქციის განსახორციელებლად. უბრალოდ ნუ აიძულებ თავს დაწვრილებით იცოდე.

თუმცა, ფუნქცია sin და cos საერთოა. თუ გსურთ შექმნათ უმაღლესი დონის შემოქმედება, უმჯობესია სცადოთ ამის საფუძვლიანად ცოდნა. თუ ამ კითხვამ თავად შეიძლება გვიბიძგოს უფრო მეტი მათემატიკური ცოდნის შესასწავლად, უფრო საინტერესო საგნები გელოდებათ ამოთხრა.

ეს არის სურათები, რომლებიც ახლო ნათესავია ტრიგონომეტრიულ ფუნქციასთან.

ნაბიჯი 4: მოძრაობის საკოორდინაციო სისტემა

წინა ეფექტები ეხება გრაფიკულ კოორდინატთა ცვლილებებს. საკოორდინატო სისტემა თავისთავად სტატიკურია. სინამდვილეში ჩვენ შეგვიძლია გავაკეთოთ კოორდინატული ნაბიჯი მოძრაობითი ეფექტის გასაცნობიერებლად. ეს არის ზუსტად ისე, როგორც ხალხი სანაპიროზე უყურებს სხვა ადამიანებს ნავში. ნავში მყოფი ადამიანებისთვის ნავი სტატიკურია. მაგრამ რა მოხდება, თუკი ნავი თვითონ მოძრაობს, მაშინ ნავში მყოფი ხალხი მასთან ერთად მოძრაობს. ყოფილი შემთხვევები ყველა ეხება "ადამიანებს, რომლებიც ნავში გარბიან". სინამდვილეში, ნავი არ მოძრაობს. ქვემოთ მოცემულია რამდენიმე საერთო ფუნქცია საკოორდინატო სისტემის შესაცვლელად.

ფუნქციის თარგმნა

ფუნქციის თარგმნა, რაზეც ადრე ვისაუბრეთ, გამოიყენება გრაფიკული კოორდინაციის სისტემის ჰორიზონტალურ გადასატანად.

გამოძახების ფორმატი:

თარგმნეთ (a, b)

პირველი პარამეტრი ნიშნავს გადაადგილებას პიქსელებისთვის x ღერძის პოზიტიური მიმართულებით. მეორე პარამეტრი ნიშნავს გადაადგილებას y ღერძის პოზიტიური მიმართულებით b პიქსელებისთვის.

შეადარეთ ორი კოდი და შეეცადეთ იპოვოთ რაიმე განსხვავება. (კოდის გასამარტივებლად, ჩვენ შეგვიძლია წავშალოთ ფუნქციის ზომა, ეკრანის სიგანე და სიმაღლე ნაგულისხმევია 100.)

სანამ გამოვიყენებთ:

ელიფსი (0, 0, 20, 20);

გამოყენების შემდეგ:

თარგმნა (50, 50);

ელიფსი (0, 0, 20, 20);

ფუნქცია ბრუნავს

გამოძახების ფორმატი:

როტაცია (ა)

იგი გამოიყენება კოორდინატთა სისტემის ბრუნვის მიზნით. როდესაც პარამეტრი დადებითია, ის აირჩევს საწყის წერტილს ცენტრალურ წერტილად და ბრუნავს საათის ისრის მიმართულებით. პარამეტრის შეყვანა იგივეა, რაც ტრიგონომეტრიული ფუნქცია რადიანის გამოსაყენებლად.

გამოყენებამდე:

ელიფსი (50, 50, 20, 20);

გამოყენების შემდეგ:

როტაცია (რადიანები (30));

ელიფსი (50, 50, 20, 20);

პროგრამის ეფექტი არის ის, რომ წრე ბრუნავს კოორდინატთა ცენტრის წერტილის გარშემო საათის ისრის მიმართულებით 30 გრადუსით.

ფუნქციის მასშტაბი

გამოძახების ფორმატი:

მასშტაბი (ა)

ამ ფუნქციას შეუძლია გაადიდოს კოორდინატთა სისტემა. მნიშვნელობა არის სკალირებისთვის. როდესაც პარამეტრი აღემატება 1 -ს, მაშინ გაადიდეთ; თუ ის 1 -ზე დაბალია, მაშინ გაადიდეთ.

გამოყენებამდე:

ელიფსი (0, 0, 20, 20);

გამოყენების შემდეგ:

მასშტაბი (4);

ელიფსი (0, 0, 20, 20);

წრე ზემოთ სურათზე გადიდებულია ოთხჯერ თავდაპირველი ზომით. ასევე, შეგიძლიათ გამოიყენოთ ორი პარამეტრი x ღერძისა და y ღერძის მიმართულებით ცალკე გასადიდებლად.

მასშტაბი (4, 2);

ელიფსი (0, 0, 20, 20);

ტრანსფორმაციის ფუნქციის სუპერპოზიცია

აქ, სუპერპოზიცია არის ცვლილებები კოორდინატთა სისტემასთან შედარებით. სხვა სიტყვებით რომ ვთქვათ, ეფექტების გადაჭარბება შესაძლებელია.

თარგმნა (40, 10);

თარგმნეთ (10, 40);

ელიფსი (0, 0, 20, 20);

მისი საბოლოო ეფექტი იქნება ტოლი

თარგმნა (50, 50);

ელიფსი (0, 0, 20, 20);

იგივე როტაცია ფუნქცია

როტაცია (რადიანები (10));

როტაცია (რადიანები (20));

ელიფსი (50, 50, 20, 20);

უდრის

როტაცია (რადიანები (30));

ელიფსი (50, 50, 20, 20);

ორივე ფუნქციის მასშტაბი და ცენტრის ბრუნვა საწყის წერტილზე მასშტაბირებისა და ბრუნვისათვის. თუ გვინდა როტაციის ეფექტი მივიღოთ ცენტრალური პოზიციით (50, 50), ჩვენ უნდა ვიფიქროთ საპირისპირო გზით. ჯერ გადაიტანეთ ორიგინალური წერტილი პოზიციაში (50, 50), შემდეგ დაამატეთ მბრუნავი გარდაქმნის ფუნქცია. საბოლოოდ გააკეთეთ თქვენი გრაფიკა დახატული თავდაპირველ წერტილზე.

გამოყენებამდე:

ელიფსი (50, 50, 50, 20);

გამოყენების შემდეგ:

თარგმნა (50, 50);

როტაცია (რადიანები (45));

ელიფსი (0, 0, 50, 20); // იმისათვის, რომ დავინახოთ როტაციის კუთხის ცვლილება, ჩვენ გავაკეთეთ ოვალური.

შეიძლება ჩანდეს ბრუნვა. თქვენ უბრალოდ უნდა ივარჯიშოთ, შემდეგ კი მიხვდებით. (თქვენ ასევე შეგიძლიათ სცადოთ ფუნქციის თანმიმდევრობის შეცვლა და ბრუნვა განსხვავების სანახავად.)

ჰორიზონტალური მოძრაობა და წრიული მოძრაობა

შემდეგ შემთხვევებში, ჩვენ ვაცნობიერებთ მოძრაობის ეფექტს კოორდინატთა სისტემის შეცვლის გზით. ამავე დროს, მინდა გკითხოთ, მიმართეთ წინა თავის მაგალითს. უმეტეს დროს, თქვენ ნახავთ, რომ გააცნობიეროთ გარკვეული სახის ეფექტი, შეგიძლიათ გამოიყენოთ სრულიად განსხვავებული მეთოდი.

ნაბიჯი 5: ჰორიზონტალური მოძრაობა

[cceN_cpp თემა = "გამთენიისას"]

int x, y; void setup () {ზომა (300, 300); x = 0; y = სიმაღლე/2; } void draw () {ფონი (234, 113, 107); noStroke (); თარგმნა (x, y); ელიფსი (0, 0, 50, 50); x ++; } [/cceN_cpp]

წრის კოორდინატი არ იცვლება, მაგრამ იცვლება მისი კოორდინატების სისტემა.

მოძრაობის მოძრაობა

[cceN_cpp theme = "გამთენიისას"] float r, R, კუთხე; void setup () {ზომა (300, 300); r = 20; // წრის განზომილება R = 100; // მოძრაობის ბილიკის რადიუსი} void draw () {ფონი (234, 113, 107); თარგმნა (სიგანე/2, სიმაღლე/2); // გადაიტანეთ ორიგინალური წერტილი ეკრანის ცენტრში. როტაცია (კუთხე); noStroke (); ელიფსი (0, R, r, r); კუთხე += 0.05; } [/cceN_cpp]

განა ის არ არის უფრო მკაფიო და მარტივი, ვიდრე ტრიგონომეტრიული ფუნქცია? თქვენ შეიძლება გქონდეთ შეკითხვა აქ. მიიღეთ მაგალითი მბრუნავი კოდი. ცხადია, ზემოაღნიშნული გარდაქმნის ფუნქცია ფარდობითია და საშუალებას იძლევა შეთავსება. თუ ჩვენ ვწერთ თარგმანს (სიგანე/2, სიმაღლე/2) ფუნქციის გათამაშებაში, ეს არ ნიშნავს რომ ყოველ ჯერზე ფუნქციის გათამაშება ერთხელ მუშაობს, კოორდინატთა სისტემა გადაინაცვლებს მანძილს ქვედა ქვედა მარჯვენა მიმართულებით საწყისი ბაზიდან? გონივრულად ის სამუდამოდ არ დარჩება ეკრანის ცენტრში.

თქვენ შეგიძლიათ გაიგოთ ამ გზით. მას შემდეგ, რაც ფუნქციის გათამაშების კოდი დაასრულებს ოპერაციას ქვემოდან, მეორე ოპერაციისას კოორდინატთა სისტემა დაუბრუნდება საწყის სტატუსს. საკოორდინატო სისტემის საწყისი წერტილი ნაგულისხმევი იქნება, რათა დაბრუნდეს მარცხენა ზედა კუთხეში. ასე რომ, თუ ჩვენ გვინდა, რომ კოორდინატთა სისტემა განუწყვეტლივ შეიცვალოს, ფუნქციის ბრუნვის კუთხის პარამეტრები მუდმივად გაზრდის მის მნიშვნელობას.

კოორდინატთა სტატუსზე წვდომა

ზოგჯერ, ჩვენ არ გვსურს, რომ კოორდინირებული სისტემის სტატუსის შეცვლა დაფუძნდეს პირველს. ამ დროს ჩვენ უნდა გამოვიყენოთ ფუნქცია pushMatrix და popMatrix. ეს ორი ფუნქცია ჩვეულებრივ წყვილში ჩნდება. ფუნქცია pushMatrix არის ადრე popMatrix. მათი გამოყენება არ შეიძლება მხოლოდ, თორემ არასწორი იქნება.

მაგალითი:

[cceN_cpp theme = "გამთენიისას"] pushMatrix (); // შეინახეთ საკოორდინატო სისტემის სტატუსის თარგმნა (50, 50); ელიფსი (0, 0, 20, 20); popMatrix (); // კოორდინატთა სისტემის სტატუსის წაკითხვა rect (0, 0, 20, 20); [/cceN_cpp]

ამ მაგალითში, თარგმანის გამოყენებამდე (50, 50), ჩვენ ვიყენებთ ფუნქციას pushMatrix. საკოორდინატო სისტემის ამჟამინდელი სტატუსის შესანახად. ეს, ამავე დროს, არის საწყისი სტატუსი. მას შემდეგ რაც ჩვენ ვხატავთ წრეს, შემდეგ განვახორციელებთ popMatrix, ის დაუბრუნდება ამ სტატუსს. ამ დროს, განახორციელეთ ფუნქცია rect, თქვენ ნახავთ, რომ მას არ განუცდია ფუნქციის თარგმანის გავლენა, პირიქით ის მიაპყროს კვადრატს თავდაპირველი წერტილის მარცხენა ზედა კუთხეში.

გარდა ამისა, ფუნქცია pushMatrix და popMatrix ბუდეების საშუალებას იძლევა.

Მაგალითად

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

იმისათვის, რომ მისი ურთიერთობა ინტუიციურად ვაჩვენოთ, ჩვენ ვირჩევთ კონდენსაციის ფორმატს.

კომბინირებული მოძრაობა თუ მოძრაობა მოძრაობაში?

ახლა იწყება მნიშვნელოვანი ნაწილის მეორე ტალღა. უბრალოდ ეცადე წინ წაწიო. ადრე ჩვენ გამოვიყენეთ მეტაფორა ნავისა და ხალხის შესახებ. ოდესმე გიფიქრიათ იმაზე, თუ რას ვაძალებთ როგორც ხალხს, ასევე ნავს, როგორი გრძნობა ექნებათ სანაპიროზე მყოფ ხალხს?

ჰორიზონტალური მოძრაობის შერწყმა კოორდინატთა სისტემის მოძრავი მოძრაობით. ფაქტია, რომ აქ მხოლოდ მიმართულებით მოძრაობაა.

[cceN_cpp theme = "გამთენიისას"] int x, y; float კუთხე; void setup () {ზომა (300, 300); ფონი (234, 113, 107); noStroke (); x = 0; // როდესაც x- ის საწყისი მნიშვნელობა არის 0, ჩვენ შეგვიძლია უგულებელვყოთ კოდის ეს წინადადება. ცვლადის გამოცხადებისას ნაგულისხმევი მნიშვნელობაა 0. y = 0; // იგივე რაც ზემოთ. კუთხე = 0; // იგივე ზემოთ. } void draw () {angle += 0.25; y--; თარგმნა (სიგანე/2, სიმაღლე/2); pushMatrix (); როტაცია (კუთხე); ელიფსი (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

და არსებობს წრიული მოძრაობა და კოორდინირებული სისტემის მასშტაბირება.

[cceN_cpp თემა = "გამთენიისას"] ცურავს x, y, კუთხე; void setup () {ზომა (300, 300); ფონი (234, 113, 107); noStroke (); } void draw () {angle += 0.01; x = ცოდვა (კუთხე) * 100; y = cos (კუთხე) * 100; თარგმნა (სიგანე / 2, სიმაღლე / 2); pushMatrix (); მასშტაბი (1 + 0.1 * ცოდვა (კუთხე * 10)); ელიფსი (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

ნუ მოატყუებთ მას! წრის წერტილი რეალურად აკეთებს წრიულ მოძრაობას. ძნელი მისახვედრი არ არის, თუ შევადარებთ მას ვიდეოკამერით სკალირებას. ვიდეოკამერა მუდმივად მოძრაობს წინ ან უკან, იღებს წერტილს წრიული მოძრაობით.

გაკვირვებული? ეს არის მარტივი ძირითადი ფუნქციები. მაგრამ განსხვავებული კომბინაციით, ჩვენ შეგვიძლია შევქმნათ ამდენი განსხვავებული ეფექტი. ჯერჯერობით, ჩემი ექსპოზიცია წყდება, რათა ადგილი დაუთმო თქვენს ძიებას.

ნაბიჯი 6: ყოვლისმომცველი გამოყენება

მალე დასრულდება ეს თავი. ბოლო ორი თავი, მე გავეცანი გრაფიკული მოძრაობის ძირითად მეთოდს. მე მჯერა, რომ თქვენ შეიძლება გქონდეთ ამის უფრო ღრმა გაგება, თქვენს საწყის იდეებთან შედარებით. სულ მცირე, აქ არის რამოდენიმე დასრულებული მაგალითი თქვენი მითითებისთვის.

[cceN_cpp თემა = "გამთენიისას"] ცურავს x1, y1, x2, y2, r, R; float angle1, angle2; void setup () {ზომა (300, 300); r = 12; R = 120; კუთხე 1 = 0; კუთხე 2 = PI/4; } void draw () {ფონი (234, 113, 107); noStroke (); თარგმნა (სიგანე / 2, სიმაღლე / 2); კუთხე 1 += 0.02; კუთხე 2 += 0.06; x1 = R *ცოდვა (კუთხე 1); y1 = R* cos (კუთხე 1); x2 = R/2 *ცოდვა (კუთხე 2); y2 = R/2 *cos (კუთხე 2); ელიფსი (x1, y1, r/2, r/2); ელიფსი (x2, y2, r, r); ელიფსი (-x1, -y1, r/2, r/2); ელიფსი (-x2, -y2, r, r); ელიფსი (x1, -y1, r/2, r/2); ელიფსი (x2, -y2, r, r); ელიფსი (-x1, y1, r/2, r/2); ელიფსი (-x2, y2, r, r); ინსულტი (255); ინსულტი წონა (3); ხაზი (x1, y1, x2, y2); ხაზი (-x1, -y1, -x2, -y2); ხაზი (x1, -y1, x2, -y2); ხაზი (-x1, y1, -x2, y2); } [/cceN_cpp]

ეს მაგალითი არ შეიცავს ცოდნას ჩვენი წინა თავის მიღმა.

რომელი ქულებისათვის ემთხვევა? რომელი ხაზები ემთხვევა? მეც ვერ ვხვდები. მაგრამ მახსოვს, ეს გამომდინარეობს კოდის მცირე ნაწილიდან.

ეს არის მისი მოძრაობის ბუნება. დანარჩენი ხაზები მხოლოდ სარკისებური ეფექტია.თუ თქვენ გააგრძელებთ ამ სახელმძღვანელოს დაცვას, შეგიძლიათ შექმნათ განახლებული ვერსია და დაამატოთ კონტროლერი თქვენს გრაფიკას, რათა შეცვალოთ თქვენი გრაფიკული მოძრაობის სტატუსი რეალურ დროში.

პროგრამირების საინტერესო წერტილი მდგომარეობს იმაში, რომ თქვენ შეგიძლიათ შეიმუშაოთ ან დააკავშიროთ რეგულაციები. თუმცა, რა იქნება საბოლოო პროგრამა, ეს ყველაფერი დამოკიდებულია თქვენს შესაძლებლობებზე. ჩვეულებრივ დიზაინერებს აქვთ მძლავრი გრაფიკული წარმოსახვა. თქვენ შეგიძლიათ ესკიზის ესკიზი თქვენს თავში, შემდეგ კი სცადოთ მისი თარგმნა კოდში. ასევე, თქვენ შეგიძლიათ დაიწყოთ კოდიდან და თავად რეგულაციებიდან, სურვილისამებრ შეიმუშაოთ ფუნქციები და ცვლადები. გახსოვდეთ დამუშავება არის თქვენი ესკიზი და კოდი არის თქვენი ჯაგრისები! უბრალოდ გაასუფთავეთ თქვენი იდეები თავისუფლად!

ნაბიჯი 7: დასასრული

ბოლოს ჩვენს თავში, დავუბრუნდეთ კითხვას, რომელიც თავიდანვე დიდი ხანია შევინარჩუნეთ. რაში მდგომარეობს ამდენი ძალისხმევის დახარჯვა პროგრამით სურათის გადასაღებად? მას შემდეგ რაც ისწავლეთ ეს თავი, ნახავთ, რომ თამაშების იმდენი მეთოდი ელოდება თქვენს შესწავლას.

[cceN_cpp theme = "გამთენიისას"] float browX, earD, eyeD, faceD; void setup () {ზომა (500, 500); } void draw () {ფონი (200, 0, 0); browX = 150 + ცოდვა (frameCount / 30.0) *20; earD = 180 + ცოდვა (frameCount / 10.0) *20; eyeD = 60 + ცოდვა (frameCount/30.0) *50; სახე D = 300; ინსულტი წონა (8); ელიფსი (175, 220, earD, earD); ელიფსი (სიგანე - 175, 220, earD, earD); სწორი (100, 100, faceD, faceD); ხაზი (browX, 160, 220, 240); ხაზი (width-browX, 160, width-220, 240); შევსება (შემთხვევითი (255), შემთხვევითი (255), შემთხვევითი (255)); ელიფსი (175, 220, eyeD, eyeD); ელიფსი (სიგანე-175, 220, eyeD, eyeD); შევსება (255); წერტილი (სიგანე/2, სიმაღლე/2); სამკუთხედი (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, სიგანე - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

ჯადოსნური არ არის დინამიური გრაფიკისთვის? აქ მე არ ვაჩვენებ ძალიან ბევრ შემთხვევას. თქვენ ალბათ შეძლებთ ჩემზე ბევრად უკეთესი ეფექტის შექმნას. პროგრამით ხატვის უპირატესობა არსებობს, სადაც შეგიძლიათ ითამაშოთ ყველა პიქსელით. ვინაიდან თქვენი გრაფიკა არ არის bitmap, თქვენი გრაფიკის ყველა საკვანძო წერტილი კონტროლირებადია. მას შეუძლია გააცნობიეროს ისეთი ეფექტები, რომლებსაც სხვა პროგრამული უზრუნველყოფა ვერ ხვდება.

თუ თქვენ გაქვთ გული, რომელსაც სურს ყველაფერი გაანადგუროს და კვლავ დააკავშიროს, სასწავლო პროგრამა დიდად დაგეხმარებათ ამ იდეის განხორციელებაში.

ეს სტატია მოდის დიზაინერი ვენზიდან.

ნაბიჯი 8: შედარებითი საკითხავი:

დიზაინერისთვის საინტერესო პროგრამირების სახელმძღვანელო-დამუშავების საწყისი შეხება

საინტერესო პროგრამირების სახელმძღვანელო დიზაინერისთვის-შექმენით თქვენი პირველი დამუშავების პროგრამა

დიზაინერისთვის საინტერესო პროგრამირების სახელმძღვანელო - გაუშვით თქვენი სურათი (ნაწილი პირველი)

თუ თქვენ გაქვთ რაიმე შეკითხვა, შეგიძლიათ გამოაგზავნოთ ელ.წერილი [email protected].

ეს სტატია არის: