პარალელური გადატანა

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

მაგალითისთვის, აი, მართკუთხედი, რომელიც დახატულია კოდით rect(20, 20, 40, 40). საკოორდინატო სისტემა (იგივე „უჯრედებიანი ფურცელი") ნაჩვენებია ნაცრისფრად და იმისთვის, რომ მაგალითის სურათები უფრო მცირე ზომის იყოს, ნაჩვენები საკოორდინატო სისტემა 200 პიქსელი 200 პიქსელზე (400x400 ზომის ნაცვლად) ზომისაა. აქ ხედავთ, რომ მართკუთხედი არის x=20, y=20-ზე, სიგანითა და სიმაღლით 40:

თუ გსურთ, გადააადგილოთ მართკუთხედი 60 ერთეულით მარჯვნივ და 80 ერთეულით ქვემოთ, შეგიძლიათ, შეცვალოთ კოორდინატები x და y საწყის წერტილებზე დამატებით: rect(20 + 60, 20 + 80, 40, 40) და მართკუთხედი სხვა ადგილზე გამოჩნდება (ისარი დავამატეთ დრამატული ეფექტისთვის).

მაგრამ არსებობს ამის გაკეთების უფრო საინტერესო გზა: გადააადგილეთ უჯრედებიანი ფურცელი. თუ გადააადგილებთ უჯრედებიან ფურცელს 60 ერთეულით მარჯვნივ და 80 ერთეულით დაბლა, მიიღებთ ზუსტად იმავე ვიზუალურ შედეგს. საკოორდინატო სისტემის გადაადგილებას ჰქვია გადატანა.

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

აი, პროგრამა, რომელიც თავდაპირველ მართკუთხედს ხატავს, შემდეგ წითლად ხატავს მას ახალ ადგილმდებარეობაზე მისი კოორდინატების ცვლილებით, შემდეგ ხატავს მას ლურჯად ახალ ადგილმდებარეობაზე ბადის გადაადგილებით (აკეთებს translate()-ს). შემავსებელი ფერები გამჭვირვალეა, რათა დაინახოთ, რომ წითელი და ლურჯი ერთმანეთს კვეთენ და ქმნიან იისფერ კვადრატს, რომელიც, ფაქტობრივად, იმავე ადგილზეა. მხოლოდ მათი გადაადგილების მეთოდი შეიცვალა. სცადეთ სხვადასხვა რიცხვები ქვემოთ, რათა თქვენით ნახოთ:

შევხედოთ გადატანის კოდს უფრო დეტალურად. pushMatrix() არის ჩაშენებული ფუნქცია, რომელიც საკოორდინატო სისტემის მიმდინარე პოზიციას იმახსოვრებს. translate(60, 80) გადააადგილებს საკოორდინატო სისტემას 60 ერთეულით მარჯვნივ და 80 ერთეულით ქვემოთ. rect(20, 20, 40, 40) ხატავს მართკუთხედს მის თავდაპირველ ადგილას. გახსოვდეთ, რასაც ხატავთ, ის არ მოძრაობს — მოძრაობს ბადე. ბოლოს, popMatrix() აღადგენს საკოორდინატო სისტემას ისეთ მდგომარეობაში, რომელშიც იყო მანამ, სანამ თქვენ გადაიტანდით.

რატომ გამოვიყენოთ pushMatrix() და popMatrix()? შეგეძლოთ, ბადის თავდაპირველ პოზიციაში დასაბრუნებლად გაგეკეთებინათ translate(-60, -80). თუმცა, როდესაც რთულ ოპერაციებს დაიწყებთ საკოორდინატო სისტემით, უფრო გაგიადვილდებათ pushMatrix()-ისა და popMatrix()-ის გამოყენება მდგომარეობის დამახსოვრებისა და აღდგენისათვის, ვიდრე თქვენ მიერ გაკეთებული ყველა ოპერაციის საპირისპირო ოპერაციის გაკეთება. ამ სექციაში მოგვიანებით გაიგებთ, რატომ აქვთ ამ ფუნქციებს ასეთი უცნაური სახელები.

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

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

რა მოხდებოდა, თუ გამოვიყენებდით translate() ფუნქციას ახალი კოორდინატების გამოთვლის ნაცვლად? ამ შემთხვევაში კოდი დახატავდა სახლს ერთსა და იმავე ადგილას ყოველ ჯერზე, მისი ზედა მარცხენა კუთხე იქნებოდა (0, 0)-ზე და მთელ სამუშაოს გადატანას გააკეთებინებდა.

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

ეს სტატია არის დევიდ აიზენბერგის 2-განზომილებიანი გარდაქმნების ადაპტაცია, რომელიც გამოყენებულია Creative Commons Attribution-NonCommercial-ShareAlike ლიცენზიით.