Space to points

[WIPocket]

While using the "textToPoints" function, a space in the string returns a TypeError: "pathArray is undefined".

[limzykenneth]

@WIPocket textToPoints doesn't seemed to be a p5.js function, can you provide more details? If it is a library function, please raise the issue with the library maintainer, they can better help with your problem.

[WIPocket]

`TypeError: pathArray is undefined

pathToAbsolute() p5.js:27294 path2curve() p5.js:27380 pointAtLength() p5.js:27257 pathToPoints() p5.js:27113 [72]</p5.Font.prototype.textToPoints() p5.js:26852 getPosData() p5.text-dot.js:44 setup/usePattern() p5.text-dot.js:79 setup/<()`

Also yes, this is a P5.js function (from "p5.js", in "p5.min.js" it says "a" is undefined) I got this copy of the library from Daniel Shiffmans github, but even when I used the cdn on cloudflare I got the same error (still only when a spave was in the string) Also sorry if I said if wrong, but it is the font.textToPoints function (var fomt = LoadFont("fontUrl"); ) Thanks

[limzykenneth]

Right, I see. The textToPoint function is not showing up in the reference but it does exist in the source with some documentation, I'm not sure if it is meant to be an unfinished undocumented function or it simply is a mistake. Someone more familiar with p5.Font implementation will have to take this up for you, I can't be of much help at the moment I'm afraid.

[dhowe]

Yes, there was some discussion about whether this should be a documented or undocumented function. I think in the end we decided that it should be documented (to enable sketches like this). @lmccart, perhaps you can weigh in on this? Meantime, a fix for this issue is here: https://github.com/processing/p5.js/pull/1823

[WIPocket]

I looked at the commit and tried it, but it still doesnt work: No errors show up, but all points after the space are on x 0 (Rendering on the very left of my canvas) Perhaps make the offset bigger and skip it? (using continue; in the for loop after "Making the space" by adding to the offset to be used from than on)

[dhowe]

I don't see this (check below). Can you include a simple test?

[lmccart]

I think it's worth documenting if that doesn't add any complication or issues.. are there any?

[dhowe]

do you mean documenting the function itself? it is documented inline, not sure what it takes to make it show up in the ref:

/**
 * Computes an array of points following the path for specified text
 *
 * @param  {String} txt     a line of text
 * @param  {Number} x        x-position
 * @param  {Number} y        y-position
 * @param  {Number} fontSize font size to use (optional)
 * @param  {Object} options  an (optional) object that can contain:
 *
 * <br>sampleFactor - the ratio of path-length to number of samples
 * (default=.25); higher values yield more points and are therefore
 * more precise
 *
 * <br>simplifyThreshold - if set to a non-zero value, collinear points will be
 * be removed from the polygon; the value represents the threshold angle to use
 * when determining whether two edges are collinear
 *
 * @return {Array}  an array of points, each with x, y, alpha (the path angle)
 */

[lmccart]

oh it just needs

@method textToPoints

at the top. I'll add it next chance I get if nobody else gets there first.

[dhowe]

@WIPocket any further info on the issue you mention above?

all points after the space are on x 0

[WIPocket]

Most of the code is by Daniel Shiffman: https://github.com/CodingTrain/Rainbow-Code/tree/master/challenges/CC_59_Steering_Text_Paths

All I did is added a function to "redraw" it. (and I also changed the p5 function to the new code)

[dhowe]

Problem seems to be in your additions, as the basic code works ok:

Post it if you want feedback...

[WIPocket]

This is the original sketch from Daniel Shiffman (sketch.js and vehicle.js)

[dhowe]

Please include the actual code

[WIPocket]

// Literally just a copy of Dainels scripts // Includes added commented out things var font; var vehicles = [];

function preload() { font = loadFont('AvenirNextLTPro-Demi.otf'); console.log("preload"); }

function setup() { createCanvas(600, 300); background(51); // console.log("setup"); // textFont(font); // textSize(192); // fill(255); // noStroke(); // text('train', 100, 200);

var points = font.textToPoints('tra in', 100, 200, 192, { sampleFactor: 0.25 });

for (var i = 0; i < points.length; i++) { var pt = points[i]; var vehicle = new Vehicle(pt.x, pt.y); vehicles.push(vehicle); // stroke(255); // strokeWeight(8); // point(pt.x, pt.y); } } console.log("hw"); function draw() { //console.log("draw"); background(51); for (var i = 0; i < vehicles.length; i++) { var v = vehicles[i]; v.behaviors(); v.update(); v.show(); } }

function Vehicle(x, y) { this.pos = createVector(random(width), random(height)); this.target = createVector(x, y); this.vel = p5.Vector.random2D(); this.acc = createVector(); this.r = 8; this.maxspeed = 10; this.maxforce = 1; }

Vehicle.prototype.behaviors = function() { var arrive = this.arrive(this.target); var mouse = createVector(mouseX, mouseY); var flee = this.flee(mouse);

arrive.mult(1); flee.mult(5);

this.applyForce(arrive); this.applyForce(flee); }

Vehicle.prototype.applyForce = function(f) { this.acc.add(f); }

Vehicle.prototype.update = function() { this.pos.add(this.vel); this.vel.add(this.acc); this.acc.mult(0); }

Vehicle.prototype.show = function() { stroke(255); strokeWeight(this.r); point(this.pos.x, this.pos.y); }

Vehicle.prototype.arrive = function(target) { var desired = p5.Vector.sub(target, this.pos); var d = desired.mag(); var speed = this.maxspeed; if (d < 100) { speed = map(d, 0, 100, 0, this.maxspeed); } desired.setMag(speed); var steer = p5.Vector.sub(desired, this.vel); steer.limit(this.maxforce); return steer; }

Vehicle.prototype.flee = function(target) { var desired = p5.Vector.sub(target, this.pos); var d = desired.mag(); if (d < 50) { desired.setMag(this.maxspeed); desired.mult(-1); var steer = p5.Vector.sub(desired, this.vel); steer.limit(this.maxforce); return steer; } else { return createVector(0, 0); } }

[shiffman]

I'm happy to help debug this. @WIPocket does the issue happen with this example:

https://github.com/CodingTrain/Rainbow-Code/tree/master/challenges/CC_59_Steering_Text_Paths

If so I can make a simpler version that only looks at the path points. It's quite likely that my example does nothing to account for spaces and maybe it needs to?

[dhowe]

I cannot recreate this issue. Here is a mod of the sketch from @shiffman which allows text entry:

http://rednoise.org/sketches/textpaths/

[WIPocket]

I dont seem to have this issue on your site. Can it have anything to do with the fact I dont have it on a server (all local)? Also I don't enter the option for more dots. I will try to rewrite the code by linking to your version of the full p5.js code.

[GeoffLouw]

This seems to be font specific, some fonts works prefect. I tried the same string with different fonts and only getting this error on some fonts.

[dhowe]

If you are using a character that is not in the font, this could happen. Can you post a (minimal) example of the problem ?

[WIPocket]

I used console.log("space"); in the if statenent when the glyph name is space and it showed in the dev console (it was a space). Also when I used a char thats not in the font (》) it showed a questionmark in a box. So all my code does is it loads a font in preload and than loops in all the vectors. I made it write them to the page and when I used a space everything after it was x == 0. Hope this helped a little, but I will try to run it with different fonts.

[lmccart]

There's not much more we can do for now. Please reopen if you can post a minimal code example and font file that illustrates the problem. Thanks!