Հիմնական նյութ

Դասընթաց․ (Ծրագրավորում) > Բաժին 5

Դաս 3: Վեկտորներ

Վեկտորներ. ներածություն

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

«Վեկտոր» բառը տարբեր նշանակություններ ունի։ Օրինակ՝ Վեկտորը 1980-ականների սկզբին Սակրամենտոյում հիմնված ռոք խմբի անունն է, այն նաև Կանադայի Քելլոգս ընկերության արտադրած նախաճաշի հացահատիկների անունն է։ Համաճարակաբանության ոլորտում մեկ օջախից մյուսը վարակը փոխանցող օրգանիզմը կոչվում է վեկտոր։ C++ ծրագրավորման լեզվում տվյալի կառուցվածքի դինամիկ չափափոխվող զանգվածի կիրառումը կոչվում է վեկտոր (std::vector)։ Իհարկե, այս բոլոր սահմանումները հետաքրքիր են, բայց մեզ սրանք չեն պետք։ Մեր փնտրածը Էվկլիդյան վեկտորն է, որը կոչվել է հույն մաթեմատիկոս Էվկլիդեսի անունով և նաև կոչվում է երկրաչափական վեկտոր։ Հետևաբար, երբ այս դասընթացի շրջանակում «վեկտոր» բառը կարդաս, կարող ես ենթադրել, որ խոսքը Էվկլիդյան վեկտորի մասին է՝ սահմանված որպես երկարություն և ուղղություն ունեցող հասկացություն։

Սովորաբար վեկտորները ներկայացնում են որպես սլաք. ուղղությունը որոշվում է ըստ սլաքի ուղղության, երկարությունը՝ ըստ սլաքի երկարության։

Այս դիագրամում վեկտորը պատկերված է որպես A կետից B գնացող սլաք և ցույց է տալիս՝ ինչպես կարելի է A կետից B կետ ճամփորդել։

Ինչու կիրառել վեկտորներ

Վեկտորների վերաբերյալ մանրամասներ քննարկելուց առաջ դիտարկենք մի պարզ ծրագիր, որը ցույց է տալիս, թե ինչու են վեկտորներն առհասարակ կարևոր։ Եթե «Քան» ակադեմիայում JavaScript-ի ներածական դասընթացն անցել ես, երևի արդեն ինչ-որ պահի սովորել ես ցատկող գնդակ նմանակող ծրագիր գրել։

Այդ օրինակում գնդակի միջավայրը շատ բնական էր՝ սև կտավ, որում շրջանաձև պատկեր՝ գնդակ է շարժվում։ Գնդակն ունի որոշ հատկություններ, որոնք կոդի մեջ ներկայացված են որպես փոփոխականներ։

Դիրք	Արագություն
x և y	xSpeed և ySpeed

Ավելի խորացված ծրագրում փոփոխականները կարող են ավելի շատ լինել.

Արագացում	Թիրախի դիրք	Քամի	Շփում
xacceleration և yacceleration	xtarget և ytarget	xwind և ywind	xfriction և yfriction

Ինչպես տեսնում եք, այս աշխարհի յուրաքանչյուր հասկացության համար՝ քամի, դիրք, արագացում և այլն, երկու փոփոխական է անհրաժեշտ. հիշենք, որ սա երկչափ աշխարհ է։ Եռաչափ աշխարհում անհրաժեշտ կլինի x, y, z, xSpeed, ySpeed, zSpeed և այլն։

Հարմար չէ՞ր լինի, եթե կարողանայինք կոդը պարզեցնել ու ավելի քիչ փոփոխականներ կիրառել։

Սրա փոխարեն՝

var x = 5;
var y = 10;
var xSpeed;
var ySpeed;

կարող ենք պարզապես երկու փոփոխական կիրառել, որոնցից յուրաքանչյուրը վեկտորանման օբյեկտ է, որն ունի տեղեկության երկու «չափ».

var position;
var speed;

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

Որպես ներածություն՝ վեկտորները դիտարկելու ենք երկչափ տարածության մեջ։ Իրականում այս բոլոր օրինակները շատ հեշտ կարելի է դարձնել եռաչափ՝ հաշվի առնելով նաև այն, որ PVector-ը թույլ է տալիս եռաչափություն։ Այնուամենայնիվ, սկզբի համար սկսենք երկչափությամբ։

`PVector`-ով ծրագրավորում

Վեկտորը կարելի է պատկերացնել որպես երկու կետերի տարբերություն։ Օրինակ՝ ինչպե՞ս կփորձես ինչ-որ մեկին բացատրել, թե մեկ կետից մյուս կետ ինչպես գնա։

Ստորև ներկայացված են որոշ վեկտորներ և հնարավոր տեղափոխություններ.

| (-15, 3) | Կատարիր 15 քայլ դեպի արևմուտք, պտտվիր և կատարիր 3 քայլ դեպի հյուսիս։ | | (3, 4) | Կատարիր 3 քայլ դեպի արևելք, պտտվիր և կատարիր 4 քայլ դեպի հյուսիս։ | | (2, -1) | Կատարիր 2 քայլ դեպի արևելք, պտտվիր և կատարիր մեկ քայլ դեպի հարավ։ |

Հավանական է, որ շարժում ծրագրավորելիս այսպիսի գործողություններ իրականացրել ես։ Անիմացիայի յուրաքանչյուր կադրի՝ ProcessingJS-ի draw() հրամանի յուրաքանչյուր ցիկլի համար էկրանի օբյեկտներից յուրաքանչյուրին հրահանգել ես ինչ-որ քանակի պիքսելներով հորիզոնական ուղղությամբ տեղաշարժվել, ինչ-որ քանակի պիքսելներով՝ ուղղաձիգ ուղղությամբ։

Յուրաքանչյուր կադրի համար.

Նոր դիրք = Ընթացիկ դիրքի վրա կիրառված արագություն

Եթե արագությունը վեկտոր է՝ երկու կետերի տարբերությունը, ի՞նչ է դիրքը։ Այն է՞լ է վեկտոր։ Տեսականորեն հնարավոր է ասել, որ դիրքը վեկտոր չէ, քանի որ այն մի կետից մյուս կետ շարժում չի նկարագրում, այլ պարզապես տարածության մեջ եզակի կետ է նկարագրում։

Այնուամենայնիվ, դիրքը հնարավոր է այլ կերպ նկարագրել. սկզբնակետից այդ կետ հասնելու համար անցած ճանապարհը։ Այդ դեպքում դիրքը հնարավոր է սկզբնակետի և դիրքի տարբերությունը նկարագրող վեկտորը։

Այժմ կարող ենք դիտարկել դիրքի և արագության հիմքում ընկած տվյալները։ Ցատկող գնդակի օրինակում դրանք հետևյալն էին.

Դիրք	Արագություն
x և y	xSpeed և ySpeed

Ուշադրություն դարձրու, որ երկուսի համար նույն տեսակի տվյալ ենք պահում՝ երկու լողացող կետով թվեր՝ մեկը x-ի համար, մյուսը՝ y-ի։ Եթե փորձեինք ինքներս վեկտորի դաս գրել, կսկսեինք այս պարզ բաներից.

var Vector = function(x, y) {
    this.x = x;
    this.y = y;
};

Կարելի է ասել, որ PVector-ի հիմքում ընկած է երկու, իսկ եռաչափ օրինակներում՝ երեք տվյալ հարմար ձևով պահելու գաղափարը։

Հետևաբար, սա…

var x = 100;
var y = 100;
var xSpeed = 1;
var ySpeed = 3,3;

դառնում է…

var position = new PVector(100{,}100);
var velocity = new PVector(1,3,3);

Քանի որ արդեն ունենք երկու վեկտոր օբյեկտ՝ դիրք և արագություն, պատրաստ ենք շարժման ալգորիթմը կիրառելու՝ Դիրք = Դիրք + Արագություն։ Օրինակ 1,1-ում առանց վեկտորների պատկերը հետևյալն էր.

x = x + xSpeed;
y = y + ySpeed;

Լավագույն դեպքում ցանկալի կլիներ, որ նույն կոդը կարողանայինք այսպես գրել՝

position = position + velocity;

Այնուամենայնիվ, JavaScript-ում գումարման օպերատորը՝ +-ը, հնարավոր է միայն պարզ արժեքների վրա կիրառել՝ թվեր ու տողայիններ։ Կան ծրագրավորման լեզուներ, որտեղ օպերատորները «գերծանրաբեռնված» են, բայց ոչ JavaScript-ում։ Բարեբախտաբար, PVector օբյեկտը տարածված մաթեմատիկական գործողությունների համար մեթոդներ է պարունակում, օրինակ՝ add()։

Վեկտորների գումարում

PVector օբյեկտն ու դրա add() մեթոդն ավելի մանրամասն դիտարկելուց առաջ քննարկենք վեկտորների գումարումը՝ կիրառելով մաթեմատիկական ու ֆիզիկական դասագրքերում առկա նշագրումը։

Վեկտորները կամ հաստ են գրում, կամ տառի վրա սլաքով։ Այս դասընթացի շրջանակում վեկտորները սկալյարներից տարբերելու համար սլաքով նշագրումն ենք կիրառելու. նշենք, որ սկալյար ասելով նկատի ունենք եզակի արժեք, օրինակ՝ ամբողջ կամ լողացող կետով թիվ։

Վեկտոր՝ $\vec{u}$ ‍
Սկալյար՝ $x$ ‍ ‍

Ունենք հետևյալ երկու վեկտորները.

Յուրաքանչյուր վեկտոր ունի երկու բաղադրիչ՝ x և y։ Երկու վեկտորները գումարելու համար անհրաժեշտ է պարզապես երկուսի x-երն ու y-ները գումարել։

Այլ կերպ ասած՝

\vec{w} = \vec{u} + \vec{v}

Կարելի է գրել այսպես՝

\begin{aligned} w_{x} = u_{x} + v_{x} \\ w_{y} = u_{y} + v_{y} \end{aligned}

Եթե Պատկեր 1,6-ից u-ի և v-ի արժեքները տեղադրենք, կստանանք հետևյալը.

\begin{aligned} w_{x} = 5 + 3 \\ w_{y} = 2 + 4 \end{aligned}

Այսինքն՝

\begin{aligned} w_{x} = 8 \\ w_{y} = 6 \end{aligned}

Վերջապես՝ կարող ենք արդյունքը որպես վեկտոր գրել.

\vec{w} = (8, 6)

Քանի որ արդեն գիտենք՝ ինչպես գումարել երկու վեկտոր, կարող ենք PVector օբյեկտի ներսում կիրառված գումարումը դիտարկել։ Արի գրենք add() մեթոդ, որը որպես արգումենտ ընդունում է մեկ այլ PVector օբյեկտ և օբյեկտների x ու y բաղադրիչները գումարում իրար։

var Vector = function(x, y) {
    this.x = x;
    this.y = y;
};

Vector.prototype.add = function(v) {
  this.y = this.y + v.y;
  this.x = this.x + v.x;
};

Քանի որ արդեն գիտենք՝ ինչպես է PVector-ում add()-ը գրված, կարող ենք վերադառնալ ցատկող գնդակի օրինակին և կիրառել վեկտորների գումարումը հետևյալ ալգորիթմի համար՝ Դիրք + Արագություն։

position.add(velocity);

Արդեն պատրաստ ենք ցատկող գնդակի օրինակը PVector օբյեկտով գրելու։ Ուսումնասիրիր կոդը և նկատիր նախկին կոդից տարբերությունները։

Նկատենք վեկտորներով ծրագրավորման անցման կարևոր կետերից մեկը։ Չնայած նրան, որ PVector օբյեկտի միջոցով երկու արժեք ենք նկարագրում՝ դիրքի x և y բաղադրիչներն ու արագության x և y բաղադրիչները, հաճախ անհրաժեշտ է լինում որևէ PVector-ի x և y բաղադրիչներին առանձին հղում տալ։ Օրինակ՝ ProcessingJS-ում որևէ օբյեկտ պատկերելիս չենք կարող այսպիսի կոդ գրել.

ellipse(position, 16, 16);

ellipse() ֆունկցիային PVector տեսակի փոփոխական՝ որպես արգումենտ, փոխանցել հնարավոր չէ։ Էլիպս հնարավոր է նկարել միայն երկու սկալյար արժեքով՝ x և y կոորդինատներ։ Հետևաբար, դրա փոխարեն պետք է օբյեկտային կողմնորոշվածության կետային նշագրմամբ PVector-ից հանել x ու y բաղադրիչները.

ellipse(position.x, position.y, 16, 16);

Նույն կերպ պետք է position և velocity վեկտորների անհատական բաղադրիչները կիրառենք, երբ ուզում ենք ստուգել՝ գնդակը պատուհանի եզրերին հասել է, թե ոչ։

if ((position.x > width) || (position.x < 0)) {
  velocity.x = velocity.x * -1;
}

Հնարավոր է, որ հիասթափվեցիր։ Ի՞նչ իմաստ ուներ վեկտորներ կիրառել, եթե կոդը պարզապես բարդանալու էր։ Իհարկե, դժգոհությունը հասկանալի է, սակայն կարևոր է հասկանալ, որ դեռևս վեկտորներով ծրագրավորումը լիարժեք չենք կիրառել։ Ցատկող գնդակի օրինակը դիտարկելն ու վեկտորների գումարումը կիրառելն ընդամենը առաջին քայլն էր։

PVector-ի օգուտներն ավելի պարզ կդառնան, երբ առաջ անցնենք ու քննարկենք ավելի բարդ աշխարհ, որն ունի բազմաթիվ օբյեկտներ ու բազմաթիվ ուժեր, որոնց մասին շուտով կխոսենք։ Շարունակիր առաջ գնալ։

«Բնական նմանակիչներ» դասընթացը ստեղծվել է Դանիել Շիֆմանի «Կոդի բնույթը» գրքի հիման վրա և կիրառվում է ըստ Creative Commons Attribution-NonCommercial 3,0 Unported License-ի։

Ուզո՞ւմ ես միանալ խոսակցությանը։

Մուտք գործել

Դասակարգել ըստ

Առայժմ հրապարակումներ չկան։

Անգլերեն հասկանո՞ւմ ես: Սեղմիր այստեղ և ավելի շատ քննարկումներ կգտնես «Քան» ակադեմիայի անգլերեն կայքում:

Ծրագրավորում

Դասընթաց․ (Ծրագրավորում) > Բաժին 5

Ինչու կիրառել վեկտորներ

PVector-ով ծրագրավորում

Վեկտորների գումարում

Ուզո՞ւմ ես միանալ խոսակցությանը։

`PVector`-ով ծրագրավորում