Основно съдържание
Програмиране
Курс: Програмиране > Раздел 4
Урок 6: ТрансформацииТранслация
Когато създаваш програма тук с помощта на 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 .
Искаш ли да се присъединиш към разговора?
Все още няма публикации.