p5.patgrad
p5.patgrad copied to clipboard
fillPattern() also applied to text() ?
Was curious to test patterns on text()
, only to discover it doesn't affect them... tried first setting the fill(255)
incase it had to be explicitly set first, which killed the text all together.. applying after the pattern acts as expected. Quickly looked up your src + canvas drawing ref of style + text, which seemed like it should work.. and in the p5 src for text edit found more relevant src.. and perhaps this lib isn't triggering the this._doFill
or this._fillSet
and thus getting replaced with default? Any ideas? + SO of technique which it seems this lib does...
Sample testing code for text after loading patterns like this:
background(0)
translate(width/2, height/2)
noStroke()
// fill(255) // makes text go *poof*
fillPattern(pats[1])
circle(0, 0, height)
rotate(radians(frameCount*3))
textSize(200)
textAlign(CENTER, CENTER)
// fill(255) // fills text
text('hello', 0, 0)
Aha, got some code working, but no idea if/how it would tie into your src...
At very top, global space:
let pattImg = new Image()
pattImg.src = patsPaths[1] // path to an image
then modified code above, with that pattern, which does require creating a p5 fill()
once first, confirms need to trick p5 into knowing a fill has been set...
// background(0)
translate(width/2, height/2)
noStroke()
// fill(255) // makes text go *poof*
fillPattern(pats[1])
circle(0, 0, height)
rotate(radians(frameCount*3))
textSize(200)
textAlign(CENTER, CENTER)
fill(255) // without initial fill, below doesn't work?!
let patt = drawingContext.createPattern(pattImg, 'repeat')
drawingContext.fillStyle = patt //"orange"
text('hello', 0, 0)
update: thought it might be a quick fix within the lib, only to discover that _doFill
and _fillSet
are already true.. very strange:
p5.prototype.fillPattern = function (pattern) {
// console.log(this._renderer._doFill) // is already true
// this._renderer._setProperty('_fillSet', true);
// this._renderer._setProperty('_doFill', true);
this.drawingContext.fillStyle = pattern;
};
Thanks for raising this - I foolishly never tested with text... It's a bit silly but maybe the best way to fix it is to just call a fill(255)
inside of p5.prototype.fillPattern
...