peilingjiang/p5.bezier

Bezier library for canvas-based graphics on the web, built to work with p5.js.

p5.bezier's Issues

p5 is not defined

when I use import {...} from 'bezier' in vite
I have this problem. p5 is not defined.
I found your js file is not import p5.

I am receiving an error when i try to use the p5.bezier library in editor.

🌸 p5.js says:
[sketch.js, line 6] "newBezier" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).

Even though this is my first time downloading a library and im new to p5js, i believe i did everything correct, downloaded the p5.bezier file added them into the editor and added the provided script into the html but still recieve the error above

Incorrect point count check in Update() in bezier Object

Your docs say that the new array of points must be the same length as when created. True, but there seems to be a typo in the if check code. Clearly the point count is the same. My code that prints to the console:

UpdatePoints(amps){

    var p = []

    for(let i = 0; i < this.curve.controlPoints.length; i++){
        p.push([this.curve.controlPoints[i][0], amps[i]*this.max_amp_px])
    }
    console.log('update points length: '+ p.length+' bezier points length: '+ this.curve.controlPoints.length)

    this.curve.update(p)
}

After looking in the p5.bezier.min.js, this is the problematic code:

update(t){if(t.length!==this.controlPoints)throw"The number of points changed. (Keep the point array length the same.)"

It is not actually checking if the lengths are the same. It should be:
update(t){if(t.length!==this.controlPoints.length)throw"The number of points changed. (Keep the point array length the same.)"

That fixes the error.
This error cost me about 1h of frustration, but this is overall a great lib, so i am not complaining.

Troubles in starting it up in chrome

p5.bezier.min.js:1 Uncaught (in promise) TypeError: Found non-callable @@iterator
at Module.a (p5.bezier.min.js:1)

Using Svelte framework, p5.min.js, and the web link download of the p5.bezier.js file because i couldnt use the downloadable file. Everything just like the basic example usage. Because when i just <script> add the local file, then it doesnt find the functions and cant use the import keyword since its not a module and require neither. If i do like in the examples with p5bezier.initBezier() then: Uncaught (in promise) ReferenceError: p5bezier is not defined. Basically couldnt use local file and the downloadable has some error i know nothing about.
Svelte here is just the basic boilerplate with some p5 drawing custom scripts imported as local files. So i dont think its doing anything destructive.

Writing to a p5 off-screen renderer doesn't seem to work

I am trying to use your lib with p5 by using an off-screen renderer, but nothing shows.
Here is an example:

let renderer;

function setup() {
let c = createCanvas(500, 500);
renderer = createGraphics(500, 500); // off-screen renderer

// Init p5.bezier drawer with the off-screen renderer
p5bezier.initBezier(renderer);

// Set styles for the curve
renderer.noFill();
renderer.stroke('black');
renderer.strokeWeight(2);
}

function draw() {
background(235);

// Draw the curve
p5bezier.newBezier([
[10, 10],
[100, 700],
[500, -800],
[800, 1000],
[10, 300]
]);

// normal bezier function
renderer.bezier(10, 10, 20, 30, 50, 50, 100, 60);

image(renderer, 0, 0);
// now the canvas should display the curve made by p5bezier
}

node import/require

I get a ReferenceError: self is not defined
at Object. (.../node_modules/p5bezier/lib/p5.bezier.min.js:2:198)
when using require.

and SyntaxError: Cannot use import statement outside a module
when using import.

I can use all other modules by using require - example:
chroma = require('chroma-js');