We Keep Coding

Random names instead of patterns in particle.js

Before anything, I have no idea what I'm doing but I was wondering if it was possible to use vincentgarreaus' particles with names instead of patterns?
I managed to edit particle.js and add a function that randomly picks a name and it replaces the circles for the names but my problem is that while moving the names change too fast in the same particle. If I set it to static it works as intended but I want them moving.
Is it possible?
What I did is going to VG website > inspect element > ctrl P > particle.js > Line 426 and pasted this "code" > ctrl S to save
function PlayerSelector1() {
var word = ['player1', 'player2', 'player3', 'player4', 'player5', 'player6'];
var random = word[Math.floor(Math.random() * word.length)];
return random;
}
switch(p.shape){
case "circle":
var context = pJS.canvas.ctx.canvas.getContext("2d");
var xtxx = PlayerSelector1();
context.beginPath();
context.fillStyle = "black";
context.fillText(xtxx, p.x, p.y);
context.fill();
break;
I have nothing to offer for your help but you will have my eternal gratitude

You can't create text particles using particles.js natively, but you can use tsParticles instead which support text particles.
This is how you can achieve it:
// keeping your function, it's fine
function PlayerSelector1() {
var word = ["player1", "player2", "player3", "player4", "player5", "player6"];
var random = word[Math.floor(Math.random() * word.length)];
return random;
}
// basic particles configuration, used for example
tsParticles.load("tsparticles", {
background: {
color: "#000"
},
particles: {
number: {
value: 10
},
move: {
enable: true
},
size: {
value: 30
},
shape: {
type: "text",
options: {
text: {
value: PlayerSelector1()
}
}
}
}
});
For using tsParticles you can read the instructions on the GitHub repository
This is your working demo on CodePen, using the config shown above: https://codepen.io/matteobruni/pen/oNymXmy?editors=0010
Every time you call the tsParticles.load function, the player will change.

simplify-js package. Always return 2 points of polygon

i have got array of points (x,y) and i need to reduce points of polygons.
i would like use Simplify.js (It uses a combination of Douglas-Peucker).
But i have got problem:
let test =
[ { x: 33.56257055900005, y: 44.83995926300003 },
.....
..... more than 7k points
{ x: 33.56257055900005, y: 44.83995926300003 } ];
let simplified = simplify(test, 1, true);
always return 2 points (first, and last).
https://www.npmjs.com/package/simplify-js
http://mourner.github.io/simplify-js/
what it is not work?

At first remove last point of test to convert your polygon to polyline, then balance your tolerance. If your points are cordinate on the earth, 1 means at least 50 mi (80 km)!!!
Try 0.001 for tolerance
let simplified = simplify(test, 0.001, true);

What format polygon does D3plus largest rectangle require?

I found an interesting demo of how to find the largest rectangle in an irregular shaped polygon here using D3plus.
I'm trying to recreate this for a polygon I'm working on but currently the code is not working. It seems to runs endlessly. The code I'm using is as follows:
d3.csv("data/polyPoints.csv", function(error, polyPoints) {
if (error) return console.error(error);
// coerce string values to numbers
polyPoints.forEach(function(d) {
d3.keys(d).forEach(function(k) {
d[k] = +d[k]
})
});
// settings for geom.largestRect
var rectOptions = {
angle: 0,
maxAspectRatio: 5,
nTries: 1
};
console.log(rectOptions);
console.log(polyPoints);
var lRect = d3plus.geom.largestRect(polyPoints, rectOptions);
console.log(lRect);
});
I suspect my polygon is not in the correct format.
Update
I'm making progress. My original polygon object was taken from a csv and created an array of arrays of key value pairs (e.g. {"x": 0 "y": 1},{"x": 2, "y": 1}....)
I converted this to an array of arrays (e.g. [[1,0],[2,0]....])
Now the code is running but the output is defining rectangles that cross the boundary of the original polygon.

For anyone working with this. The largestRect docs are https://d3plus.org/docs/#largestRect and can be run with the following code.
const d3p = require('d3plus');
const polygon = [[x,y],[x,y],[x,y]...]
const rectOptions = {
maxAspectRatio: 5,
nTries: 20
};
let lRect = d3p.largestRect(rdp, rectOptions);
The algorithm used is an approximation and random points inside the polygon are chosen to do calculations from. Because of this the edges of the box won't always be touching the edge but should be "close enough".
The options.tolerance value might affect this as well but I haven't played around with it much. This is a pretty old question but hopefully it helps someone.

Hairline/Empty Space when Drawing a Triangulated Rectangle on Canvas

I was exploring some drawing on the HTML canvas, and quickly landed at dissecting my shapes into triangles, as that seem to be the most common and sure way to ensure that one is handling only simple polygons and not self-intersection ones (which get drawn in a somewhat uncontrollable fashion to me).
But when I wanted to draw a simple rectangle as to triangles, I got the following result:
The approach I am taken is the following:
const rect = [{
x: 200,
y: 225
}, {
x: 490,
y: 225
}, {
x: 490,
y: 375
}, {
x: 200,
y: 375
}];
const triangle1 = [rect[0], rect[1], rect[2]];
const triangle2 = [rect[0], rect[2], rect[3]];
fillPolygon(ctx, triangle1, 'blue');
fillPolygon(ctx, triangle2, 'blue');
See the full example here:
https://jsfiddle.net/JLVva/85/
Since triangles seem to be the basis of graphics drawing, I think I am missing a common workaround applied in these scenarios. How is this normally handled?

If you also add a stroke to the shape as well as a fill it removes that gap. I assume the stroke defaults to transparent or something.
Add this to the end of your fillPolygon function.
ctx.strokeStyle = color;
ctx.stroke();

Finding the x value of a certain node?

I'm trying to find the X values of the first and second elements in a node array, such as this one:
nodes = [{
x: xvalue,
y: getY(xvalue)
}, {
x: xvalue2,
y: getY(xvalue2)
}];
I thought it would be something like:
nodes[0].x;
or:
d3.select(".nodes").something
but I'm not really sure and I can't find anything about it online.