# How to feed curve() an array of points

**URL:** <https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310>\
**Category:** Beginners\
**Created:** [December 27, 2021, 4:12am UTC](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310 "2021-12-27T04:12:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nsegal](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@nsegal](https://discourse.processing.org/u/nsegal)\
**Post date:** [December 27, 2021, 4:12am UTC](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310/1 "2021-12-27T04:12:04Z")

</div>

I made a DataPoint object that has an x property and a y property. I generated an array of these and now want to draw a curve that takes the array as its argument. I tried something like the following:

```auto
 let s = ""
 for (let i = 0; i < idealCurve.length; i++){
      let x = idealCurve[i].x;
      let y = idealCurve[i].y;
      s = s + Number(x) + "," + Number(y) +","
    }
    s=s.slice(0, -1)
    }
curve(s);

```

This doesn’t work.  
`p5.js says: curve() was expecting at least 8 arguments, but received only 1.`  
Is there a way to feed curve() the array or cast the sequence of numbers and commas appropriately?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 27, 2021, 7:25am UTC](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310/2 "2021-12-27T07:25:47Z")

</div>

The `curve()` function expects a discrete set of arguments, not a string containing values delimited by commas. For example:

```auto
// This would work
curve(0,0, 10,0, 5,20, 20,20);

// This would not work
curve("0,0,10,0,5,20,20,20");

```

In your case, since you are trying to invoke the `curve()` function with an array of values extracted from objects stored in an array, you can use an array to store the arguments, and then apply the spread operator:

```javascript
// Assuming idealCurve contains 4 points, since the curve function
// requires 4: a start, an end, and two control points in between.
let args = [];
for (let i = 0; i < idealCurve.length; i++){
  args.push(idealCurve[i].x, idealCurve[i].y);
}
curve(...args);

```

---

<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:** [December 27, 2021, 7:28am UTC](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310/3 "2021-12-27T07:28:00Z")

</div>

> [@nsegal](#):
>
> Is there a way to feed curve() the array or cast the sequence of numbers and commas appropriately?

You can collect all properties _x_ & _y_ from array _idealCurve[]_ as 1 array sequence of numbers by calling method Array::**flatMap()** like this:  
`const curveArgs = idealCurve.flatMap(({ x, y }) => [x, y]);`

> **[Array.prototype.flatMap() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap)**
>
> The flatMap() method of Array instances returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1...

Then pass that flattened array to **curve()** using the spread operator `...`:  
`curve(...curveArgs);`

> **[Spread syntax (...) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_function_calls)**
>
> The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the...

---

<div class="post-metadata">

**Author:** ![nsegal](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@nsegal](https://discourse.processing.org/u/nsegal)\
**Post date:** [December 27, 2021, 9:02am UTC](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310/4 "2021-12-27T09:02:04Z")

</div>

Thank you KumuPaul and GoToLoop for your help.  
I ended up doing the following:

```auto
 curve.apply(null,idealCurve.slice(0,8))

```

I did not look closely enough at the documentation for curve(); I though I could feed it more than four points. Once I realized I had to make a long curve from a series of segments, I adopted a different strategy altogether.

---

<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:** [December 27, 2021, 9:49am UTC](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310/5 "2021-12-27T09:49:52Z")

</div>

> [@nsegal](#):
>
> `curve.apply(null, idealCurve.slice(0, 8))`

I don’t get how the statement above can successfully run. 😵

Unless you’ve later changed the datatype of array _idealCurve[]_ from an object of _{ x, y }_ properties (like we can assume from your original posted code) to just number values. 😉

Regardless the spread operator `...` is much simpler than using methods Function::**apply()** + Array::**slice()**: `curve(...idealCurve)` 🕶