Транслация

Когато създаваш програма тук с помощта на ProcessingJS, резултатът се рисува вътху платно, което играе ролята на графична хартия. За да нарисуваш форма, задаваш координатите ѝ върху тази хартия.

Като пример, ето един прост правоъгълник, нарисуван с код rect(20, 20, 40, 40). Координатната система (интересна дума за описанието на графична хартия) е показана в сиво, а за да запазим изображенията си по-малки, показаната координатна система е 200 по 200 пиксела (вместо размера по подразбиране 400 х 400). Можеш да забележиш, че правоъгълникът започва от 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().

Тази статия е адаптация на 2D трансформации от J David Eisenberg, използвана под лиценз Creative Commons Attribution-NonCommercial-ShareAlike .