# Vector2 Extension

**URL:** https://forum.makecode.com/t/vector2-extension/28676
**Category:** Arcade
**Tags:** extension
**Created:** [May 9, 2024, 10:03pm UTC](https://forum.makecode.com/t/vector2-extension/28676 "2024-05-09T22:03:03Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![ARandomGuyOnMakeCode](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/arandomguyonmakecode/32/22983_2.png) [@ARandomGuyOnMakeCode](https://forum.makecode.com/u/ARandomGuyOnMakeCode)
#### Post date: [May 9, 2024, 10:03pm UTC](https://forum.makecode.com/t/vector2-extension/28676/1 "2024-05-09T22:03:03Z")

</div>

Recently made an extension for creating and manipulating 2d vectors. I was originally going to just keep it to myself but decided to release it to the MakeCode community because why not. Also, this is my first extension (yay)!

* * *

**GitHub repo:**

> **[GitHub - ARandomJuyOnGitHub/pxt-Vector2: A MakeCode extension for a vector library](https://github.com/arandomjuyongithub/pxt-vector2/)**
>
> A MakeCode extension for a vector library

If you want to use the extension, simply copy the text below and paste it into the extensions search bar:

> **arandomjuyongithub/pxt-vector2**

For the people who care, here’s a rundown of all the blocks in the extension currently. I may add more in the future, and if I do, I’ll update this accordingly (if I remember to). Most of the blocks are pretty self-explanatory so there won’t be much.

## Blocks:

> **Create**
>
> ### Summery:
> 
> Functions used to create new vectors.
> 
> * * *
> 
> _There’s only one block so no subcategories_
> 
> Block example:
> 
> ![create-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/8cbc40b0bfb9088fdd049bc85fef09206acf3142.png)
> 
> JavaScript example:
> 
> ```auto
> vectors.create(:number,:number)
> 
> ```
> 
> Description:  
> Creates a new vector2. That’s about it. By default, the numbers for the x and y parameters are both 0.

> **Properties**
>
> ### Summery:
> 
> Functions used to access, calculate, or manipulate properties of your average vector. Primarily used to calculate many of the concepts in mathematics and physics (probably).
> 
> * * *
> 
> > **Magnitude**
> >
> > Block example:  
> > ![magnitude-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/d/d9422723f53935f520acfc7dab5acf11bfb3451f.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.magnitude(:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the magnitude (the length) of the inputted vector
> 
> * * *
> 
> > **Normal**
> >
> > Block example:  
> > ![Capture_normal-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/5b5ee109f5655bd99159a046a89606a91a262df1.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.normal(:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the normal of the inputted vector. In other words, returns a vector whose magnitude (length) is a quantity of 1 while retaining the original vector’s direction.
> 
> * * *
> 
> > **Value**
> >
> > Block example:  
> > ![Capture_value-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/2/2bb29a6381a05f2ec574ca1d422cde4c6669d824.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.getValue(:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the value of the inputted vector. Simply printing the vector will not show its value (for some reason) so use this instead.
> 
> * * *
> 
> > **Component Manipulation**
> >
> > Block example:
> > 
> > ![Capture_vecotr_conponents-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/82e4b919376beed2a8b77066d80e2b58e02a90f1.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > let vector2 = vectors.create();
> > 
> > vector2.x = 5;
> > vector2.y = 5;
> > ------
> > vector2.x += 5;
> > vector2.x -= 5;
> > vector2.y += 5
> > vector2.y -= 5;
> > ------
> > vector2.x
> > vector2.y
> > 
> > ```
> > 
> > Description:  
> > Used to manipulate the components of the selected vector. To do this in JavaScript (as you can clearly see), you can just change the x or y components of the vector directly.

> **Math**
>
> ### Summery:
> 
> Functions used to preform basic, as well as complex arithmetic on vectors rather than numbers.
> 
> * * *
> 
> > **Addition**
> >
> > Block example:  
> > ![Capture_add-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/2/250d3c1d90abcfeced0c042bcd2d5e096bde3c92.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.add(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the sum of the two vectors.
> 
> * * *
> 
> > **Subtraction**
> >
> > Block example:  
> > ![Capture_subtract-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/e/e7ad0fc81414d763147c07bbebf44aba3c898c2f.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.subtract(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the difference of the two vectors.
> 
> * * *
> 
> > **Multiplication**
> >
> > Block example:  
> > ![Capture_multiply-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/e/ee00fb73028db20be85037428a2cf3593e81fb8e.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.multiply(:Vector2,:Vector2 || :number)
> > 
> > ```
> > 
> > Description:  
> > Returns the product/multiple of the two values. I say values because the second parameter can be a vector or a number. Similarly to dividing, multiplying a vector by a number will increase/decrease its magnitude (length) while retaining the vector’s direction.
> 
> * * *
> 
> > **Division**
> >
> > Block example:  
> > ![Capture_divide-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/2/2584ed7a7926c8dccfcfe4e523547144730319ad.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.divide(:Vector2,:Vector2 || :number)
> > 
> > ```
> > 
> > Description:  
> > Returns the quotient of the two values. I say values because the second parameter can be a vector or a number. Similarly to multiplying, dividing a vector by a number will increase/decrease its magnitude (length) while retaining the vector’s direction.

> **Methods**
>
> ### Summery:
> 
> The meat of the extension. Functions used to manipulate vectors, as well as compare and relate them to each other (I think).
> 
> * * *
> 
> > **Dot Product**
> >
> > Block example:  
> > ![Capture_dot_product-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/8af33e4ea98afa01172db928eadb87fdc90c8e91.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.dot(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the [dot product](https://en.wikipedia.org/wiki/Dot_product) of the inputted vectors. Also known as the scalar product of two vectors. Basically, takes two vectors and converts them into a scalar (a number). It can be used to compare the directions the 2 vectors are facing to each other (sorry for the weird wording).
> 
> * * *
> 
> > **Normalized Dot Product**
> >
> > Block example:  
> > ![Capture_normal_dot_product-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/optimized/2X/a/aa33cfb3216882c03fbad85a515bd2de35f105e6_2_690x54.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.normalizedDot(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the [normalized dot product](https://en.wikipedia.org/wiki/Cosine_similarity) of the inputted vectors. This is basically the same as getting the dot product of two vectors, except that the vectors are normalized beforehand. This returns a number between -1 and 1, which represents the cosine of the angle between the two vectors. Another name for this is the _ **cosine similarity** _ of the two vectors (sounds very cool). This can also be used to compare the directions the 2 vectors are facing to each other (again, sorry for the weird wording).
> 
> * * *
> 
> > **Rotation**
> >
> > Block example:  
> > ![Capture_rotate-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/d/d098f74da440203105acadf786fb834271a8ea16.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.rotate(:Vector2,:number)
> > 
> > ```
> > 
> > Description:  
> > Rotates the inputted vector the chosen number of degrees. Rotates the vector clockwise (to the right) if the number is positive, otherwise, rotates the vector counterclockwise (to the left).
> 
> * * *
> 
> > **Angles**
> >
> > Block example:  
> > ![Capture_angle-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/3/36b712b94b3cdd0d542da90fbd68cdc926238917.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.angle(:Vector2,:Vector2,:AngleTypes)
> > 
> > ```
> > 
> > Description:  
> > Returns the angle between the two vectors. The Enum/dropdown is used to indicate whether the returned angle is acute or obtuse. In JavaScript use `AngleTypes.acute ` or `AngleTypes.obtuse` for the Enum, or you can just use numbers.
> 
> * * *
> 
> > **Projection**
> >
> > Block example:  
> > ![Capture_project-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/d/de0e4bd5743627e93bfec345d2a4a0b987f55a58.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.project(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the [projection](https://en.wikipedia.org/wiki/Vector_projection) of the vector in the first parameter onto the vector in the second parameter. Think of it like the first vector casting a shadow onto the second vector (I’m sure that helped absolutely no one).
> 
> * * *
> 
> > **Reflection**
> >
> > Block example:  
> > ![Capture_reflect-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/5d8099c1bdfc8cecfbe8e10e5ab727af8c03066c.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.reflect(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Reflects the vector in the first parameter across the vector in the second parameter. Think in the sense of a ray of light reflecting of a surface, rather than a point or a line undergoing a transformation by reflection. The unit vector represents the [normal](https://en.wikipedia.org/wiki/Normal_(geometry)) of the surface (the direction the surface is facing) the hypothetical ray of light is bouncing off of. The inputted vector is normalized within the function, so it doesn’t have to be normalized beforehand.

> **Sprite Related Methods**
>
> ### Summery:
> 
> Basically, the same thing as normal methods but specifically related to sprites. In other words, functions used to manipulate and _ **extract** _ the properties of sprites, but as vectors.
> 
> * * *
> 
> > **Vector to Sprite**
> >
> > Block example:  
> > ![Capture_sprite_to_vector-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/b/bf119b8f5b1eee6b64807adab72e27b8ee5adf42.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.vectorToSpriteProperty(:Sprite,:SpriteProperties,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Sets the chosen property of the inputted sprite to the inputted vector. The Enum/dropdown is used to indicate which property you want to change. In JavaScript use the `SpriteProperties` Enum, or you can just use numbers.
> 
> * * *
> 
> > **Sprite to Vector**
> >
> > Block example:  
> > ![Capture_vector_to_sprite-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/b/bd90db7670b5d70d4ea4ac74ff3b14aca58742f1.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.spritePropertyToVector(:Sprite,:SpriteProperties)
> > 
> > ```
> > 
> > Description:  
> > Returns the chosen property of the inputted sprite as a vector. The Enum/dropdown is used to indicate which property you want to return. In JavaScript use the `SpriteProperties` Enum, or you can just use numbers.

> **Miscellaneous**
>
> ### Summery:
> 
> Random functions that don’t fit into any of the categories above
> 
> * * *
> 
> > **Set Equal To**
> >
> > Block example:  
> > ![Capture_set_equal_to-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/4/4849672e159570e4abd59ff46892c20c15dc0d80.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.equateTo(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Sets the vector in the first parameter equal to the vector in the second parameter. Using the assignment operator (=) doesn’t work so use this instead.
> 
> * * *
> 
> > **Check If Equal To**
> >
> > Block example:  
> > ![Capture_is_equal_to-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/6/6c65656cbfc3e5ad788423455e604a827ea44ad4.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.isEqualTo(:Vector,:Vector)
> > 
> > ```
> > 
> > Description:  
> > Checks if the two inputted vectors are equal to each other. If they are, the function will return true, otherwise, the function will return false. Using the equality operator (==) doesn’t work so use this instead.
> 
> * * *
> 
> > **Distance**
> >
> > Block example:  
> > ![Capture_distance-removebg-preview](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/1/1d4c3c071b69fc878cfd80603357cd65071db58c.png)
> > 
> > JavaScript example:
> > 
> > ```auto
> > vectors.distance(:Vector2,:Vector2)
> > 
> > ```
> > 
> > Description:  
> > Returns the distance between the two inputted vectors (in pixels).

Feel free to let me know about any problems you experience with the extension and if you have any suggestions on things to add to the extension.

---

<div class="post-metadata">

### Author: ![SouperMediocre1](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/soupermediocre1/32/22579_2.png) [@SouperMediocre1](https://forum.makecode.com/u/SouperMediocre1)
#### Post date: [July 9, 2025, 12:00am UTC](https://forum.makecode.com/t/vector2-extension/28676/2 "2025-07-09T00:00:08Z")

</div>

i dont understand much about vectors, but i know they are very important and i am trying to make a soft body engine, ive looked the the blocks in this and i dont understand how the vector is stored as data, so i am unsure if it is possible to store it into a sprite with the sprite data extension. can you confirm if this is possible or not?
