# Transitioning from scalar to vector

**URL:** <https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680>\
**Category:** Coding Questions\
**Created:** [November 23, 2021, 12:27am UTC](https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680 "2021-11-23T00:27:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ADG](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@ADG](https://discourse.processing.org/u/ADG)\
**Post date:** [November 23, 2021, 12:27am UTC](https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680/1 "2021-11-23T00:27:51Z")

</div>

Hello,

I’m trying to rewrite my programs & classes to use vectors.  
vectors themselves are easy, but going about the operations in p5.js has me getting lost in the syntax.

As a simple example I make 2 vectors to create a line :

```auto
v1 = createVector(x,y)
v2 = createVector(u,v)

line(x,y,u,v);

```

how would I rewrite this math?

```auto
u = y+x*2;
v = x-y*4;

```

I feel this isn’t the most efficient way to do this, but I’m only interested in the math operations without using mag or cross.

Thanks.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 23, 2021, 1:25am UTC](https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680/2 "2021-11-23T01:25:14Z")

</div>

> [@ADG](#):
>
> ```auto
> u = y + x*2;
> v = x - y*4;
> 
> ```

Given you wanna assign to the 2nd p5.Vector _v2_ the values of the 1st p5.Vector _v1_ you could simply use the method p5.Vector::**set()** for it:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Vector/set)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

```auto
const
  { x, y } = v1,
  u = y + x*2,
  v = x - y*4;

v2.set(u, v);

```

---

<div class="post-metadata">

**Author:** ![ADG](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@ADG](https://discourse.processing.org/u/ADG)\
**Post date:** [November 23, 2021, 3:49am UTC](https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680/3 "2021-11-23T03:49:19Z")

</div>

Thanks @GoToLoop .

Okay, I see the relationship here, And this helps, but I’m trying to understand working with vectors using

`add()`, `sub()`, `mult()` , when compared to simple scalar formulas.

I can see that using these methods would be inefficient, and maybe overly complex, so I’m wondering if it is possible.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 23, 2021, 4:25am UTC](https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680/4 "2021-11-23T04:25:44Z")

</div>

Hello,

Some references for you to peruse:

> <https://github.com/processing/processing-android/blob/main/core/src/processing/core/PVector.java>

[https://natureofcode.com/book/chapter-1-vectors/](https://natureofcode.com/book/chapter-1-vectors/)

> **[PVector](https://processing.org/tutorials/pvector/)**
>
> An introduction to useing the PVector class in Processing.

> **[3D Rotations in Processing (Vectors, Matrices, Quaternions)](https://behreajj.medium.com/3d-rotations-in-processing-vectors-matrices-quaternions-10e2fed5f0a3)**
>
> This tutorial introduces how to rotate objects in 3D beyond Euler angles; to do this, it looks at the basics of matrices and quaternions…

[![](https://img.youtube.com/vi/bKEaK7WNLzM/maxresdefault.jpg "1.1 What is a Vector? - The Nature of Code") ](https://www.youtube.com/watch?v=bKEaK7WNLzM)

> **[PVector / Reference](https://processing.org/reference/pvector)**
>
> A class to describe a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. The datatype, however, st…

> **[Vector fields in Processing](https://medium.com/@vladisluka/vector-fields-in-processing-779516b15141)**
>
> In this article I want to program vector fields in Processing. If you are not familiar with vector fields, I suggest you watch this video…

> **[reference | p5.js](https://p5js.org/reference/#/p5.Vector)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> <https://github.com/processing/p5.js/blob/main/src/math/p5.Vector.js>

> <https://github.com/processing/p5.js/issues/2318>
>
> I can make PR, but first I would like to discuss the list below.
> 
> 1. Whenever… Vector instance is created with \`new p5.Vector(...)\`, the default value
> for x, y and z is 0.
> 
> Then in every Vector method that accepts Vector as argument value, default 0 is applied again and again, for example:
> \`\`\`javascript
> p5.Vector.prototype.set = function (x, y, z) {
> if (x instanceof p5.Vector) {
> this.x = x.x || 0;
> this.y = x.y || 0;
> this.z = x.z || 0;
> return this;
> }
> ...
> };
> \`\`\`
> I think it is not necessary, because the default value is already there.
> 
> 2. The default value of \`n\` in \`p5.Vector.prototype.mult\` is 0.
> When I call \`mult\` with no argument, my vector will be mutated.
> I think the default value of \`n\` should be 1.
> 
> 3. We don't check if we divide by 0 in \`p5.Vector.prototype.div\`.
> There is a lot of validation in other methods, but not in \`div\`.
> Is it done by design?
> 
> Checking divide by 0 case in \`div\` method would make \`p5.Vector.prototype.normalize\` a bit simpler.
> 
> 4. Performance optimisations:
> 
> - this.p5.random() =\> Math.random()
> - Math.PI\*2 =\> constants.TWO\_PI
> 
> BTW. I can't get the fundamental difference between \`if\` and \`else\` parts,
> as the results seems to be the same, except the \`if\` part will be slower.
> 
> \`\`\`javascript
> p5.Vector.random3D = function random3D() {
> ...
> if (this.p5) {
> angle = this.p5.random(0,constants.TWO\_PI);
> vz = this.p5.random(-1,1);
> } else {
> angle = Math.random()\*Math.PI\*2;
> vz = Math.random()\*2-1;
> }
> ...
> }
> \`\`\`
> 
> 5. Constructor could be much simpler if there were named arguments and different order of them.
> \`function() =\> function(x, y, z, context)\`
> 
> \`\`\`javascript
> p5.Vector = function(x, y, z, context) {
> // This is how it comes in with createVector()
> if (context instanceof p5) {
> this.p5 = context;
> }
> this.x = x || 0;
> this.y = y || 0;
> this.z = z || 0;
> this.name = 'p5.Vector';
> };
> \`\`\`
> This of course should be propagated in other places, but there is only a few such a cases. 
> 
> 6. Functions should be named. This will help during debugging.
> 
> \`\`\`javascript
> // Bad example
> p5.Vector.prototype.set = function (x, y, z) {...}
> 
> // Good example
> p5.Vector.prototype.set = function set(x, y, z) {...}
> 
> // Still good, but over engineered example
> p5.Vector.prototype.set = function p5VectorSet(x, y, z) {...}
> \`\`\`

`:)`