p5.vector-arguments

npm version

p5.vector-arguments is a p5.js library that enables the use of p5.js Vectors with the p5.js Shape functions.

It enables usage such as this, where the argument to circle() (and other shape functions) can be a Vector:

function setup() {
  createCanvas(windowWidth, windowHeight);
  enableVectorArguments();
}

function draw() {
  let pt = createVector(mouseX, mouseY);
  circle(pt, 100);

  pt.add(100, 200);
  circle(pt, 50);
}

You can find a collection of examples here.

Getting Started

Add the following line to your index.html document:

<script src="https://unpkg.com/p5.vector-arguments@1"></script>

Add the following line to your setup() function:

  enableVectorArguments();

Details

Any p5.js function that accepts a pair of coordinates x and y, can instead accept an instance of p5.Vector.

You can mix and match numbers and vectors. For example, given pt1 = createVector(100, 200) and pt2 = createVector(50, 20), all of the following are equivalent:

rect(100, 200, 50, 20);
rect(pt1, 50, 20);
rect(100, 200, pt2);
rect(pt1, pt2);

Installation Options

Option 1: Using a CDN

The simplest way to use this file is to add the following line to your index.html document:

<script src="https://unpkg.com/p5.vector-arguments@1"></script>

This should go after the line that includes p5.js or p5.min.js.

Option 2: Downloading the library file

Alternatively, download p5.vector-arguments.js from this repository. Include it in your HTML document by adding this line, after the line that includes p5.js or p5.min.js:

<script src="p5.vector-arguments.js"></script>

Option 3: Using the p5-server CLI or VS Code extension

The p5-server command-line tool, and the P5 Server Visual Studio Code Extension, will each infer this library from the presence of a call to enableVectorArguments() in a JavaScript-only sketch (a sketch that is just a JavaScript file, without an HTML file).

Performance Notes

Run tests/perf to see the effect of the performance plugin on performance. Look in JavaScript Developer Console.

There are two questions about performance:

  1. What is the effect of calling enableVectorArguments() on calls that do not use the features that it provide? On my computer, circle(50, 50, 10) is about the same speed. square(10, 10, 50, 50) is about 2-5% (0.03–0.09µ/call) slower.
  2. Once enableVectorArguments() has been called, what is the performance of using a Vector to a function, instead of two (or three) numbers? In my tests, replacing two numbers by a Vector leaves circle() about the same speed (sometimes it is faster, sometimes slower) and rect() about 45% (0.45µ/call) slower.

Keeping in Touch

Report bugs, features requests, and suggestions here, or message me on Twitter.

Follow @osteele on Twitter for updates.

Other Work

p5.js Libraries lists my other p5.js libraries.

https://code.osteele.com lists my other p5.js projects. These include tools, libraries, and examples and educational materials.

License

MIT