Մաթեմատիկա և JavaScript

Ողջույն։

Այսօր պատմելու եմ այն մասին, թե որքան անհրաժեշտ է մաթեմատիկական գիտելիքները ծրագրավորման մեջ և ցույց եմ տալու JavaScript-ով օրինակներ, որոնց լուծումը տրված է մաթեմատիկայի միջոցով։ Այսօր JavaScript-ով բրաուզերի համար պատրաստում են բավականին բարդ ծրագրեր` գրաֆիկական խմբագրիչներ, վիդեո կամ անիմացիա պատրաստելու գործիքներ, խաղեր և այլն։ Ահա դրանցից մի քանիսը․

գրաֆիկական խմբագրիչներ՝

վիդեո և անիմացիա պատրաստելու գործիքներ՝

խաղեր, սիմուլացիաներ և այլն՝

Այսպիսի գրաֆիկական խնդիրներ լուծելու համար սկսում ենք հասկանալ մաթեմատիկական գիտելիքների՝ մասնավորապես անալիտիկ երկրաչափության կարևորությունը։ Անալիտիկ երկրաչափությունը երկրաչափության այն բաժինն է, որում երկրաչափական պատկերները և իրենց հատկությունները ուսումնասիրվում են հանրահաշվի կանոններով։ Սրա հիմքում ընկած է կոորդինատների մեթոդը։ Տվյալ դեպքում էկրանն է հանդիսանում մեր կոորդինատային առանցքը։ Այս խնդիրների շրջանակում կաշխատենք կետերի, ուղիղների, անկյունների, կորերի հետ, կօգտագործենք եռանկյունաչափություն և անալիտիկ երկրաչափություն։ Սրանք կիրառելի են ինչպես 2D-ում, այնպես էլ 3D-ում։
Այսօր կանդրադառնանք հետևյալ կետերին՝

• հաշվել երկու կետերի հեռավորությունը,
• ուղղանկյուն պրոյեկցիա,
• պտույտներ,
• interpolation,
• 3D rendering:

Սրանք են այն հիմնարար գիտելիքները, որոնք անհրաժեշտ են նման գրաֆիկական խնդիրների հետ առնչվելիս։
Բոլոր օրինակների կոդերը JavaScript-ով տեղադրել եմ նաև իմ github-ում։
https://github.com/AlenAbrahamyan/analytic-geometry-javascript

Սկսենք ամենապարզից։

Հաշվել երկու կետերի հեռավորությունը

Տրված էլեմենտների միջև եղած հեռավորությունը հաշվել կարող ենք դրանց կոորդինատներով և ներքևի գծագրում եղած բանաձևով, որն էլ նման է Պյութագորասի թոերեմին։

Ուղղանկյուն պրոյեկցիա

Պրոյեկցիան որևէ պատկերի կամ առարկայի արտապատկերումն (պրոյեկտումն) է հարթության կամ այլ մակերևույթների վրա։
Ենթադրենք ունենք A կետ և պետք է այն պրոյեկտենք y=mx+b ուղղի վրա։
Գտնում ենք այն ուղղի բանաձևը, որը անցնում է A կետով և ուղղահայց է y=mx+b ուղղին, դա y=-1/m*x+b2 է։
Գտնում ենք ուղիղների հատման կետը, որը կհանդիսանա A կետի պրոյեկցիայի կոորդինատը y=mx+b ուղղի վրա։ Սրանով հնարավոր է լուծել բազաթիվ հետաքրքիր խնդիրներ․ ամենապարզ օրինակը՝ հաշվել տվյալ կետի և ուղղի միջև եղած հեռավորթյունը, կամ մինչև անգամ կառուցել 3D պատկերներ։

Ուղղանկյուն պրոյեկտման միջոցով էկրանին կառուցվում են 3D պատկերներ։
Կետերը պրոյեկտվում են հարթության վրա և դրանցով կառուցվում է պատկերը։ Տվյալ դեպքում այդ հարթությունը կարող ենք համարել մեր էկրանը։

Պտույտներ

Հասկանալ, թե ինչպես են կատարվում տարբեր էլեմենտների պտույտները տարբեր առանցքների շուրջ, շատ կարևոր է։ Սա հանդիսանում է երկարչափական ալգորիթմների հիմնարար սկզբունքներից մեկը։
Պտույտները կապված են անկյունների և շրջանագծերի հետ, և եռանկյունաչափությունը պարզապես կենսական նշանակաություն ունի այս դեպքում։

Այս անիմացիաի մեջ շատ լավ պատկերված է, թե ինչպիսի կախվածության մեջ են իրարից անկյունները և եռանկյունաչափության տարրերը։

Այստեղ ունենք ընդամենը մեկ էլեմենտ, որը կատարում է պտույտը իր առանցքի շուրջ։ Սա իրականացնելու համար պետք է վերցնել մկնիկի կուրսորի և առանցքի կոորդինատները։ Այս կոորդինատների շնորհիվ կարող ենք կառուցել ուղղանկյուն եռանկյուն։ Դրա համար վերցնում ենք եռանկյան այն անկյունը, որը ստացվել է առանցքի կոորդինատով, և հաշվում ենք այդ անկյան arctan-ը։ Մեզ արդեն հայտնի է, թե քանի աստիճանով է պետք պտտել տվյալ էլեմենտը իր առանցքի շուրջ։ Սեփական առանցքի շուրջ պտույտը պատկերելու համար կօգտագործենք CSS: Եվ վուալա պատրաստ է։

Get Alen Abrahamyan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Այս օրինակի կոդը ես տեղադրել եմ իմ github-ում
https://github.com/AlenAbrahamyan/analytic-geometry-javascript/tree/main/rotation-own-axis

Հիմա դիտարկենք ավելի բարդ տարբերակը։ Հաճախ ձեզ պետք կգա դիտարկել մեկ կամ մի քանի էլեմենտների կամ կետերի պտույտ որևէ առանցքի շուրջ։ Նախորդ օրինակում բերված ձևով կհաշվենք, թե քանի աստիճանի պտույտ է կատարվել նշանակված առանցքի շուրջ, և կսկսենք հաշվել էլեմենտի նոր դիրքի կորդինատը։ Այո՛, ի տարբերություն նախորդ օրինակի այստեղ ոչ միայն փոխվում է էլեմենտի պտույտը իր առանցքի շուրջ, այլև ձեռք է բերում նոր կորդինատ և մեզ պետք է հաշվել դրանք։ Հենց նման դեպքերի մասին էի խոսում, երբ ասում էի, որ անալիտիկ երկրաչափությունում կարևորվում է մարմնի դիրքը կոորդինատական առանցքում։ Եթե մեզ բաժին հասած խնդիրը գծագրենք ավելի պարզ եղանակով կստանանք հետևյալ գծագիրը։

Ունենք սկբնական կոորդինատը (initial coord), առանցքը(axis), պտտման անկյունը և մեզ հարկավոր է գտնել պտտման արդյունքում առաջացած էլեմենտի նոր կոորդինատները(rotated coord)։

Այս բանձևերը դիտարկվում են այն դեպքում, երբ մեր առանցքը գտնվում է (0;0) կետում։ Դրա համար սկզբնական կետի կոորդինատից կհանենք մեր առանցքի կոորդինատները, կկատարենք մեզ անհրաժեշտ հաշվարկները և ստացված արդյունքին կգումարենք հետ մեր առանցքի կոորդինտները։ Եվ կստանանք մեր վերջնական արդյունքը։
1)Սկզբնական կոորդինատից հանել առանցքի կորդինատը
2)3-րդ բանաձևով կարող ենք հաշվել r-ը (շառավիղը)
3)cosA=x/r բանաձևով հասկանալ, թե ինչ անկյուն է կազմում սկզբնական կոորդինատը առանցքի նկատմամբ
4)սկզբնական կորդինատի կազմած անկյանը գումարում են մեր անկյունը
5)1-ին և 2-րդ բանաձևերով համապատասխանորեն (x;y) հաշվում ենք մեր նոր կոորդինատները
6)Չենք մոռանում ստացվածին գումարել առանցքի կոորդինատը, որը սկզբում հանել էինք։
Հետևյալ գործողությունը կատարում ենք մեզ հետաքրքրող բոլոր կետերի հետ։

Այս օրինակի կոդը ես տեղադրել եմ իմ github-ում
https://github.com/AlenAbrahamyan/analytic-geometry-javascript/tree/main/rotation-group-elements

Interpolation

Այս կոնցեպտը օգտագործում ենք, երբ ունենք 2 վիճակ և պետք է սահուն կերպով մեկից անցնենք մյուսին։ Այն շատ պարզ է, բայց կարելի է հետաքրքիր և օգտակար լուծումներ ստանալ այս կոնցեպտով։
Օրինակ՝

Interpolation-ի միջոցով կարող ենք դիտարկել միջանցիկ վիճակներ և դրանց շնորհիվ կառուցել որևէ անիմացիա կամ լուծել այլ խնդիրներ։ Դիտարկենք մի պարզ օրինակ․ ունենք երկու կոորդինատ և պետք է մեկից մյուսը քայլող մարդուկի անիմացիա ստեղծել։

Ունենք 2 կոորդինատ և սրանց միջանկյալ կորդինատները ստանալու համար կօգտագործենք Interpolation-ի բանաձևը։

Ալֆա գործակցին տալիս ենք 0-ից 1 հատվածում ընկած արժեքներ, և այն որոշում է, թե որ հատվածում կլինի մեր միջանկյալ կետը։
Օրինակ ալֆաի 0 արժեքի դեպքում կվերադրձնի 1-ին կորդինատը,
1-ի դեպքում 2 կոորդինատը, 0,5 դեպքում կտա այդ երկուսի մեջտեղի կորդինատը։
Այսինքն՝ ալֆային կտանք մի քանի արժեք 0-1 հատվածում և կստանանք կորդինատներ, որոնցով կկառուցենք մեր անիմացիան, որքան փոքր հաճախություններով փոխենք ալֆա գործակցի արժեքը, այնքան սահուն կլինի մեր անիմացիան։
Այս մեթոդով ես պատրաստել եմ ներքևի տեսանյութում պատկերված օրինակը։

Օրինակի ֆայլերը տեղադրել եմ իմ github-ում
https://github.com/AlenAbrahamyan/analytic-geometry-javascript/tree/main/interpolation

3D Rendering

Ինչպես նշեցի պրոյեկտման մեթոդով նաև կառուցում են 3D պատկերներ։

Մենք ունենք պատկերի կետերի կոորդինատները 3D (x, y, z) և դրանցից պետք է ստանանք 2D(x, y) կոորդինատներ, որպեսզի կարողանանք պատկերը կառուցել էկրանի վրա։ Այս ամենը լավ պատկերացնելու համար ես պատրաստել եմ ներքևում պատկերված օրինակը, որտեղ շատ լավ երևում է, թե ինչպես է կետերից կառուցվում պատկերը։

Օրինակի ֆայլերը տեղադրել եմ իմ github-ում։
https://github.com/AlenAbrahamyan/analytic-geometry-javascript/tree/main/3d-vanilla-js

Այսպիսով քննարկեցինք գրաֆիկական խնդիրները և պահանջվող լուծումների մոտեցումները։
Եթե հետաքրքրեց կարող եք անցնել ներքևի հղումով, որտեղ կան բազմաթիվ ալգորիթմներ, որոնք օգնում են լուծել նման երկարաչափական խնդիրները։
https://www.geeksforgeeks.org/geometric-algorithms/

Շնորհակալություն ❤