# Extend p5.js function

**URL:** <https://discourse.processing.org/t/extend-p5-js-function/27441>\
**Category:** Development\
**Created:** [January 28, 2021, 5:33pm UTC](https://discourse.processing.org/t/extend-p5-js-function/27441 "2021-01-28T17:33:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeffthompson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeffthompson/32/743_2.png) [@jeffthompson](https://discourse.processing.org/u/jeffthompson)\
**Post date:** [January 28, 2021, 5:33pm UTC](https://discourse.processing.org/t/extend-p5-js-function/27441/1 "2021-01-28T17:33:44Z")

</div>

I’d like to be able to extend the functionality of built-in `p5.js` functions, keeping the same name but adding some additional code. I don’t want to create my own version of `p5.js`, since maintaining that will be a pain. I think this is possible but can’t quite get my head around how to make it happen.

Let’s say I want to add the `<canvas>` dashed line functionality. Normally, I’d call `line()` like this:

```
line(x1,y1, x2,y2);

```

But I’d like to add optional arguments for dashed lines (the dash spacing and offset):

```
line(x1,y1, x2,y2, [10,5], 5);

```

I can make a function called `line2()` that would look like this:

```
function line2(x1,y1, x2,y2, dash, offset) {
  if (dash !== undefined) {
    drawingContext.setLineDash(dash);
    if (offset !== undefined) {
      drawingContext.setDashOffset = offset;
    }
  }
  line(x1,y1, x2,y2);
}

```

But this means I have to call `line2()` instead of `line()`. Not a huge deal but messy. Ideally, I’d like to create my own function called `line()` that just like the one above and calls the original `line()` inside it after changing the canvas settings. I’ve found a couple of SO posts that seem to point to this, but I can’t get them to work or they are meant for methods in classes.

Might not be possible but any pointers would be great! This is meant especially for my students, so switching to global mode or complicated hacks are probably more confusing than just creating a `line2()` function.

---

<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:** [January 28, 2021, 8:44pm UTC](https://discourse.processing.org/t/extend-p5-js-function/27441/2 "2021-01-28T20:44:22Z")

</div>

> [@jeffthompson](#):
>
> Ideally, I’d like to create my own function called **line()**…

Method p5::**line()** is overloaded w/ 4 parameters for 2D & 6 parameters for 3D:

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

So my advice is to choose some other method name, for example **dashedLine()**, instead of overloading **line()** even more.

> [@jeffthompson](#):
>
> I’ve found a couple of SO posts that seem to point to this, but I can’t get them to work or they are meant for methods in classes.

Library p5\*js is itself a huge class named p5.

Therefore we can easily extend it by appending methods to its _prototype{}_ object.

For example, the file [**adjustFrameSize.js**](https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22#file-adjustframesize-js) appends 3 new methods to p5’s _prototype{}_: **adjustFrameSize()**, **getDocWidth()** & **getDocHeight()**.

A 2nd example below appends method **getVersion()** to the library p5\*js:

> <https://gist.github.com/GoToLoop/6125a5806872f7d4d93d11870b607851>
>
> There are more than three files. show original

> [@jeffthompson](#):
>
> Might not be possible but any pointers would be great!

Given p5\*js already got methods which control how **line()** is drawn, such as [**strokeWeight()**](https://p5js.org/reference/#/p5/strokeWeight), [**strokeJoin()**](https://p5js.org/reference/#/p5/strokeJoin) & [**strokeCap()**](https://p5js.org/reference/#/p5/strokeCap); a much better approach would be, instead of changing the original method p5::**line()**, creating a new 1 called p5::**strokeMode()** which would enable/disable dashed lines for all **line()** calls.

---

<div class="post-metadata">

**Author:** ![jeffthompson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeffthompson/32/743_2.png) [@jeffthompson](https://discourse.processing.org/u/jeffthompson)\
**Post date:** [January 29, 2021, 2:05pm UTC](https://discourse.processing.org/t/extend-p5-js-function/27441/3 "2021-01-29T14:05:22Z")

</div>

Thanks! I didn’t think about the 3D options, so you’re right it would probably get hairy trying to add more for 2D. Your suggestion about `strokeMode()` is nice though! In thise case, my only options would be to create a local function, roll my own version of `p5`, or submit a PR, right?

---

<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:** [January 29, 2021, 2:28pm UTC](https://discourse.processing.org/t/extend-p5-js-function/27441/4 "2021-01-29T14:28:04Z")

</div>

> [@jeffthompson](#):
>
> create a local function, roll my own version of p5, or submit a PR, right?

You can place it in some separate file which would be loaded within the “index.html” file after loading “p5.js”, just like I did in both my linked sketches.