Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How do you define your points [x,y],{x,y}, x, y?
Slobi
Slobi

Posted on • Edited on

     

How do you define your points [x,y],{x,y}, x, y?

1. The Mix of Point Formats: [] or {x, y} or x, y

Over the years, I've found myself dealing with geometric functions that expect points as arrays, objects with structures like {x, y}, or even as separate x and y parameters. This mix of formats can make working with code a bit clunky, often requiring manual conversions.
The need for a standardized solution became apparent, prompting the creation of the Vector object.

2. Alternative solution

In the search for a solution to handle various point formats, an alternative approach is creating multiple versions of functions tailored to different formats. For instance, we have functions likedistance12 anddistanceXY designed to bridge the gap between different representations.

functiondistance12(a,b){returndistance(a[0],a[1],b[0],b[1]);}functiondistanceXY(a,b){returndistance(a.x,a.y,b.x,b.y);}functiondistance(aX,aY,bX,bY){// Calculation logic for distance// between points (aX, aY) and (bX, bY)// ...}
Enter fullscreen modeExit fullscreen mode

While this method allows for specific handling of different formats, it can lead to code duplication and increased complexity. This is where the Vector object approach simplifies the process and enhances code readability and maintainability.

3. The Quest for a Unified Solution

After overcoming numerous challenges and iterations, the Vector object emerged as the definitive solution. Its flexibility allows for instantiation through various formats:new Vector(0, 1),new Vector([0, 1]), ornew Vector({x: 0, y: 1}).

4. A Singular Interface, Many Possibilities:

The Vector object simplifies access to coordinates. Want x and y values? Access them directly withmyVector.x andmyVector.y.
Need a specific index? Retrieve it using array-like notation:myVector[3].
The Vector object seamlessly integrates with existing functions, enabling effortless transformations with spread syntax:myFunction(...myVector).

Now we can call any function like:

constpointA=newVector(2,3);constpointB=newVector(5,7);constdistance12Result=distance12(pointA,pointB);constdistanceXYResult=distanceXY(pointA,pointB);constdistanceResult=distance(...pointA,...pointB);
Enter fullscreen modeExit fullscreen mode

and I think it is beautiful, especially proud of spread syntax

5. One format to rule them all

Vector represents a unified approach to points and vectors in JavaScript. It eliminates the need for manual format conversions, making code more readable, maintainable, and efficient. With standard operations like addition, subtraction, negation, normalization, and magnitude, Vector stands as the universal solution for vector-related tasks.

Embrace Vector and unlock a new level of elegance and efficiency in your projects.

You can find my library at:https://github.com/slobacartoonac/js_lib/blob/main/shapes/vector.js
With test cases:https://github.com/slobacartoonac/js_lib/blob/main/test/vec_test.js

What standard did you settled on or you use all of them like me?

Thank for reading!

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
slobodan4nista profile image
Slobi
I am Slobodan, a developer with a passion for combining old and new technologies. I like to explore unique approach to building modern applications with a touch of the past.
  • Location
    Niš, Srbija
  • Education
    BCS
  • Work
    It Mrav
  • Joined

Thank you 😊
Arrays support for N dimensional spaces so they are more versatile.
Having plane x, y cords on function is more performant, unfortunately not by a little.
I aggre that {x, y} is usually the rght answer.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I am Slobodan, a developer with a passion for combining old and new technologies. I like to explore unique approach to building modern applications with a touch of the past.
  • Location
    Niš, Srbija
  • Education
    BCS
  • Work
    It Mrav
  • Joined

More fromSlobi

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp