Տրանսլյացիա

Երբ այստեղ ծրագիր ես ստեղծում՝ օգտագործելով 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 միավորով ներքև, ապա կստանաս միանգամայն նույն պատկերավոր արդյունքը։Կոորդինատային համակարգը տեղափոխելը կոչվում է translation(տեղափոխություն)։

Նախորդ դիագրամում կարևոր է նկատել, որ, ուղղանկյան տեսանկյունից նայելով, այն ընդհանրապես չի տեղաշարժվել։ Նրա վերևի ձախ անկյունը դեռ (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 Transformations-ի սեղմագրված տարբերակն է, որն օգտագործվում է Creative Commons Attribution-NonCommercial-ShareAlike-ի թույլտվության ներքո: