acamposuribe / p5.brush Goto Github PK

I just tried adding p5.brush to my simple local app and I am getting this error.
I have tried a couple different ways of installing the library, but currently I am
loading both p5 and p5.brush from the CDN as you do in your example.
I'm not actually trying to use it yet, so far I have only added the script tags to my HTML.

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5.brush@latest/dist/p5.brush.js"></script>

Any ideas what I might be doing wrong?

TypeError: Cannot read properties of undefined (reading 'mat4')
    at Object.trans (p5.brush.js:1:2886)
    at w (p5.brush.js:1:13356)
    at Object.blend (p5.brush.js:1:4021)
    at p5.brush.js:1:13503
    at p5.callRegisteredHooksFor (p5.js:63189:30)
    at _setup (p5.js:63354:21)
    at _runIfPreloadsAreDone (p5.js:63265:27)
    at p5._decrementPreload (p5.js:63276:25)
    at img.onload (p5.js:84272:22)
trans @ p5.brush.js:1
w @ p5.brush.js:1
blend @ p5.brush.js:1
(anonymous) @ p5.brush.js:1
p5.callRegisteredHooksFor @ p5.js:63189
_setup @ p5.js:63354
_runIfPreloadsAreDone @ p5.js:63265
_decrementPreload @ p5.js:63276
img.onload @ p5.js:84272
load (async)
(anonymous) @ p5.js:84263
Promise.then (async)
_main.default.loadImage @ p5.js:84238
(anonymous) @ p5.js:63288
preload @ imageTracer.js:37
_start @ p5.js:63245
p5 @ p5.js:63573
_globalInit @ p5.js:62472
Promise.then (async)
295.../core/main @ p5.js:62492
o @ p5.js:40
(anonymous) @ p5.js:42
281../accessibility/color_namer @ p5.js:53693
o @ p5.js:40
r @ p5.js:47
(anonymous) @ p5.js:51
(anonymous) @ p5.js:18
(anonymous) @ p5.js:20

While exploring your excellent library, I tried to draw a flower shape by drawing lines and rotating. However this did not have the expected result. I expected rotate() to transform coordinates so that the same shape got duplicated in a new direction, but instead it seems like the loop below just draws the same shape in the same location each time it runs:

function setup() {
  createCanvas(600, 600, WEBGL);
  angleMode(DEGREES);
  noLoop();  
  brush.scale(2);
}

function draw() {
  push();
  brush.set("pen", "black", 2);
  let angle = 360/6;
  let x = 0;
  let y = 0;
  for (let j = 0; j < 6; j++) {
    brush.spline([[x, y], [x-30, y+50], [x-30, y+100], [x, y+200]], 1);
    brush.spline([[x, y], [x-5, y+50], [x-5, y+100], [x, y+200]], 1.5);
    brush.spline([[x, y], [x+30, y+50], [x+30, y+100], [x, y+200]], 1.5);
    brush.spline([[x, y], [x+50, y+50], [x+50, y+100], [x, y+200]], 1);
    rotate(angle);
  }
  pop();
}

Is there any obvious reason that I'm not realizing for why rotate() does not seem to do what I expect here?

When working with brush strokes, it would be nice to add the alpha value as well when setting the colour.

You can achieve a similar affect by using pressure, but it may also be useful to have the alpha value set in brush.set, or brush.stroke. Currently it looks like the alpha is ignored.

Would it be possible to add capability of passing alpha values to these functions?

Thanks

Hi, And thanks for this amazing library !

I am trying to use a canvas as the background of page, and I want it to resize when the window is resized.
But when I resize the canvas, the canvas is cleared (which is expected), but some brushes start rendering all wrong.
I suspect something break with the color blending, or maybe in the fragment shader.

You can try it on the basic example by just replacing the resize function with this one :

function windowResized () {
  resizeCanvas(window.innerWidth, window.innerHeight);
  C.resize();
}

It should give something like this :

The marker and marker2 brushes are rendering black-ish and they seem to have messed up coordinates too.

Let me know if I am doing something wrong :)

Using a buffer createGraphics setup. Works fine with all brushes, except for Marker / Marker2 which throws WEBGL errors around Shader.

Marker brushes work fine to the main canvas, not throws error on Buffer usage.

Spent hours unwinding my code base, just to realise it was these 2 brush presets, everything else works fine.

Hope this can be resolved, as was the marker effect I was specifically after.

Hi there :-)

in your examples I noticed you used seeds sometimes:

// p5.brush variables
let seeds = [];

// setup
// p5.brush settings
for (let i = 0; i < 150; i++) seeds.push(random());

// draw
randomSeed(33213 * seeds[67]);
brush.circle(155, 140, 50);

Can you explain a little what this is and what it does?

Thank you for this great library!
Nahuel

edit: I am especially curious how you picked the numbers, eg. 150, 33213, 67. Is there some logic behind this?

Given the code:

brush.pick("rotring");
brush.strokeWeight(random(3, 8));
brush.stroke(random(palette));

brush.point(300, 300);

Get the error 3 times:

🌸 p5.js says: [p5.brush.js, line 1685] circle() was expecting Number for the first parameter, received NaN instead. (http://p5js.org/reference/#/p5/circle)

Using the minified version of the p5.brush.js script.

Nothing visible in the UI.

• Random param for hatches sometimes doesn't work
• When color for markers or fills is black, a strange rainbow effect appears at blending
• We need a function to force blending, in order to be able to keep draw order
• Is the texture param working for direct polygon fills?

Not sure if you're taking any sort of feature requests (and recognizing that this project is open source I should really just be taking it upon myself to work on solving this problem), but it would be amazing to be able to either modify flow lines as they are being drawn (perhaps a callback with the ability to intercept each segment of the line), and/or deterministically get coordinates along a flow line easily.

Apologies if the ability to do either of this things is already present in the library, or if there is math Im unaware of afford the latter idea.

Absolutely loving the library so far, excited for it's future and hopefully contributing at some point!

Also the brush.scaleBrushes() doesn't seem to scale accurately. If that's a known issue then I will sit tight else here is a small demo test that i made https://editor.p5js.org/ujjwalagarwal/sketches/VaBAeB0wO

if you resize the window which changes innerWidth and innerHeight, the render is different.

Also i think the fill scales properly, it's the hatch and probably stroke thats an issue.

I didn't actually expect this to work, and maybe it's just too hard to do, but FYI: I created a clip mask using

beginClip()
drawSomeStuff()
endClip()

brush.push()
brush.noStroke()
brush.fill(fillColor, 100)
brush.bleed(0.3, "out")
brush.rect(0,0,width,height)
brush.noFill()
brush.pop()

I hoped the fill would respect the mask but it did not. Would be a nice to have, but I'll live if it doesn't happen. :) Thanks for the great library!

Using brush.set() to set the brush to an unknown string value like a brush name with a typo in it, raises TypeError: Cannot read properties of undefined (reading 'param')

Expected result: An error message saying this is not a valid brush name.

Tested using the non-minified v1.0.3 in the p5js.org editor.

Hey @acamposuribe! The work you've made available is phenomenal–I can't wait to play with it.

I wanted to ask about your future plans/intentions for publishing to NPM and adding support for Typescript.

There's a frustrating gap between working in modern JS/TS and p5, and p5.brush is by far one of the most promising tools I've seen in the p5 ecosystem–it'd be good for p5 if your work helped bridge the gap between JS 10 years ago and all of the lovely advancements that have been made since.

I'd love to help however I can if you're open to contributions.

I'm trying to draw shapes on key pressed, e.g. whenever I press a key, a shape is drawn. However, I've noticed that the shapes are displayed only after several function calls and they don't display on the screen instantly. I wonder if it could be buffering problems - is there any way to clear the buffer and push all drawn shapes to screen? Or could be something else entirely, I'm not sure...

This is a simplified version of what my code looks like:

function setup() {
  createCanvas(600, 600, WEBGL);
  angleMode(DEGREES);
  background("#fffceb");
  brush.scaleBrushes(1.5);
}

function draw() {
  frameRate(10);
  translate(-width / 2, -height / 2);
}

function drawCircle() {
  var color = random(palette);
  brush.set(random(available_brushes), color, 5);
  brush.fill(color, 75);
  brush.circle(random(width), random(height), random(10, 300), true);
}

function keyPressed() {
  drawCircle();
}

All variables are defined, and it works except for the not displaying instantly part.

I'm looking into porting p5.brush to Java Processing (at least the core bits).

I've tried to get the KM colour blending working first (using MixBox so far), and have a solution based on a double buffer (where the existing graphics/canvas reside in one PGraphics buffer, and the new geometry primitive to blend resides in another, then mixing is ran pixel-wise using a shader on these two).

I have a question about an aspect of the approach you took -- namely, the need to mask the colour-mixing.

I'm failing to see why the whole masking thing is necessary, since the unfilled pixels (e.g. white region in the MaskBuffer below) are transparent and mixing these empty/transparent pixels with the existing canvas fully preserves the canvas' pixel colour values. Am I missing something (other than possible performance improvements)?

Adding support for arcs would be amazing. Not an issue or a need to have but it would be an very nice to have. Either way, this library is incredible. Thank you!

I'm trying to do so animations with the library but the loading time for even a single frame is very slow, are there any plans for improving performance such that animations would be possible? :)

Oddly, the failure is silent when loading the library via CDN locally for me, but a runtime error is caught when using the CDN on the p5js editor online.

I've confirmed that older versions don't seem to have this issue, as old sketches I have in the editor which directly import an older minified version of the library don't have this issue. See this sketch to reproduce the issue. It works when importing the local copy of the library, but uncommenting the CDN script tag to use v1.1 of p5.brush instead triggers the failure when running the sketch.

I'm using the version at 1b7fedd08cf9fd92faf56d97e2496a07e63b99b8. When I try to use instance mode following the README I get this error

p5.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at y (p5.brush.js:1:14460)
    at Object.blend (p5.brush.js:1:5053)
    at g.<anonymous> (p5.brush.js:1:14647)
    at g.callRegisteredHooksFor (p5.min.js:2:460507)
    at g._setup (p5.min.js:2:463068)
    at g._start (p5.min.js:2:461250)

I also get this error when using v1.1.1 from the cdn.

For reference, this is what my script looks like.

let sketch = function (p) {
    let x = 100;
    let y = 100;

    // Register instance method here, sending your function arg p
    brush.instance(p);

    p.setup = function () {
        p.createCanvas(700, 410);
    };

    p.draw = function () {
        p.background(0);
        brush.fill("red", 75);
        brush.rect(x, y, 50, 50);
    };
};

let myp5 = new p5(sketch);

Thanks for taking a look

Hey,
Thank you for putting p5.brush out there. It's great !

I'm trying to record multiple frames generated with p5.brush.js, using CCapture.js.
Problem is, I'm getting blank frames as a result. Everything generated by p5.brush is not saved, but vanilla p5js stuff is saved (i.e. background color).

Here's an example:

const fps = 5;

let palette = spectral.palette('#F0F0F0', '#00357B', 9);

var capturer = new CCapture({ format: 'jpg', framerate: fps });
var startMillis;
let record = true;

function setup() {
    createCanvas(500, 500, WEBGL);
    background("#fffceb");
    frameRate(fps);
}

function draw() {
    // CCapture stuff
    if (startMillis == null) {
        startMillis = millis();
    }

    if (frameCount === 1 & record) {
        console.log("Start capture");
        capturer.start();
    }

    var duration = 5000;
    var elapsed = millis() - startMillis;
    var t = map(elapsed, 0, duration, 0, 1);

    // Sketch
    background("#fffceb");

    // Set brush fill
    brush.fill(random(palette), 100);
    brush.bleed(0.2);
    brush.noStroke();
    
    // Draw shape with brush
    brush.circle(0, 0, random(width/10, width/5));
    
    // circle(0, 0, 50);
    
    //capture current frame
    console.log("Saving frame", frameCount);
    capturer.capture(canvas);
    
    // Stop recording
    if (t > 1 & record) {
        noLoop();
        console.log('finished recording.');
        capturer.stop();
        capturer.save();
        return;
    }
}

I'm not sure whether this issue comes from p5.brush, CCapture.js or my code.

Thank you !

Amazing resource, thanks for all your hard work.
Any plans to port to Processing desktop version?

Please excuse me if I'm off base here. I'm a p5.js noob and, pretty much, a javascript noob too.

I'm trying to use NPM and ESM modules to manage things. Also using esbuild to bundle and do development watch/dev. I've got p5 working along with p5.sound. It required a bit of hacking.

My current state is https://github.com/jbeda/p5-stuff/tree/ef086ffd3196f377a5868cc50d7e8b0cfa0ed8c0.

I'm looking to play with p5.brush but, at the moment, it looks like I need to use instance mode (https://p5js.org/reference/#/p5/p5) when using modern ESM modules. I'm getting errors as it looks like p5.brush doesn't work when you are in instance mode. For example, the first error I hit is that createGraphics isn't defined. This is something that is on the instance.

Is this something you are looking at fixing? I may be able to take a run at it if you are amenable.

In the 'Usage' section of the brush.add() details, I think there are two mistakes in one of the examples.

1. I think the value for pressure.type should be "standard". The "custom" type requires the pressure.curve value to be a function.
2. There should be a comma after the "tip" value

// You create a custom tip brush like this:
brush.add("watercolor", {
    type: "custom",
    weight: 5,
    vibration: 0.08,
    opacity: 23,
    spacing: 0.6,
    blend: true,
    pressure: {
        type: "custom",
        min_max: [1.35,1],
        curve: [0.35,0.25] // Values for the bell curve
    },
    tip: (_m) => {
       // in this example, the tip is composed of two squares, rotated 45 degrees
       // Always execute drawing functions within the _m buffer!
       _m.rotate(45), _m.rect(-1.5,-1.5,3,3), _m.rect(1,1,1,1);
    }
    rotate: "natural",
})

Thanks for this amazing library!

Hey so i get this error 'sometimes' :
TypeError: Cannot read properties of undefined (reading 'CENTER')

Error at line 1 in t.rect() in p5.brush.min

am simply using
brush.rect(x,y,currWidth,currHeight, CENTER)