[Enhancement] Points object

[joex92]

Is there a way to draw a Two.Path() shape but only the vertices?

[jonobr1]

It currently doesn't, but I started a branch to include it here: https://github.com/jonobr1/two.js/tree/548-points

So far it preliminarily works in SVG and Canvas2D like so:

var two = new Two({
  type: Two.Types.canvas,
  fullscreen: true
}).appendTo(document.body);

var vertices = [];
var i = 0;
while (i < 50) {
  var x = Math.random() * two.width;
  var y = Math.random() * two.height;
  vertices.push(new Two.Vector(x, y));
  i++;
}
var points = new Two.Points(vertices);
points.noStroke();
points.fill = 'blue';
points.size = 2;

two.add(points);
two.update();

Still need to implement this for WebGL and add Unit Tests before it'll hit the dev branch.

[joex92]

It currently doesn't, but I started a branch to include it here: https://github.com/jonobr1/two.js/tree/548-points

So far it preliminarily works in SVG and Canvas2D like so:

var two = new Two({
  type: Two.Types.canvas,
  fullscreen: true
}).appendTo(document.body);

var vertices = [];
var i = 0;
while (i < 50) {
  var x = Math.random() * two.width;
  var y = Math.random() * two.height;
  vertices.push(new Two.Vector(x, y));
  i++;
}
var points = new Two.Points(vertices);
points.noStroke();
points.fill = 'blue';
points.size = 2;

two.add(points);
two.update();

Still need to implement this for WebGL and add Unit Tests before it'll hit the dev branch.

Thanks, I'm going to try that...

I believe for points, its color and "width" should be the same as the stroke color and size...
also for webgl should be like spheres, maybe? I still don't know how webgl works...

[jonobr1]

No, you can change both the points.size as well as the points.linewidth and you can have points that are stroked and/or filled.

Two.js doesn't render 3D so they wont' be spheres, but there are different ways to upload the points information to the GPU so that it's efficient and quite different than how a Two.Path is handled.

[joex92]

No, you can change both the points.size as well as the points.linewidth and you can have points that are stroked and/or filled.

oh ok, that's good too... I'm just used to p5's points... 😅

Two.js doesn't render 3D so they wont' be spheres, but there are different ways to upload the points information to the GPU so that it's efficient and quite different than how a Two.Path is handled.

oooh right, I forgot, Two.js is not 3D... That would be Three.js, right? 😅
ok then, I hope you find an efficient way to draw them on webgl...

[joex92]

sorry, closed it on accident...

[jonobr1]

The points branch now has WebGL implemented as well. Still need to write tests.

[jonobr1]

This is now merged into the dev branch. Here's an example of it running: https://jsfiddle.net/jonobr1/r2zumg0w/

[joex92]

This is now merged into the dev branch. Here's an example of it running: https://jsfiddle.net/jonobr1/r2zumg0w/

cool, thanks... So, to be sure...

the points object here is constructed by giving it the points x and y positions in an array like this (x0,y0,x1,y1,...,xn,yn)?

points = two.makePoints(
	two.width / 2,
	two.height / 2,
	two.width / 2 + 20,
	two.height / 2,
	two.width / 2 + 40,
	two.height / 2
);

but can also be constructed by giving it an array of vectors?

var vertices = [];
for (var i = 0; i < 100; i++) {
	var x = Math.random() * two.width;
	var y = Math.random() * two.height;
	vertices.push(new Two.Vector(x, y));
}

points = two.makePoints(vertices);

[jonobr1]

Exactly. I believe two.makePath and two.makeCurve work the same way.

[joex92]

Exactly. I believe two.makePath and two.makeCurve work the same way.

cool great... then I just need to clone the points branch? or is it now added to the latest release one?
btw are you going to update the doc on the main web page? to add this feature's wiki...
and when is it going to be a new stable release?

[jonobr1]

You can clone the dev branch or npm directly into that branch. The docs on the main page are part of an overall rewrite and redesign of the website (Reference Issue). You can see the designs here.

Unfortunately this is blocked up by trying to get the TypeScript types definitions working properly because it alters how the auto-generated documentation operates. So, the current plan is to rewrite Two.js into ES6 compatible classes with getters, setters, and private variables instead of ES5 functional prototypes and Object.defineProperty.

[joex92]

You can clone the dev branch or npm directly into that branch. The docs on the main page are part of an overall rewrite and redesign of the website (Reference Issue). You can see the designs here.

ok then, I'll clone it... I like the new design btw... I suppose it will be mobile compatible...

Unfortunately this is blocked up by trying to get the TypeScript types definitions working properly because it alters how the auto-generated documentation operates. So, the current plan is to rewrite Two.js into ES6 compatible classes with getters, setters, and private variables instead of ES5 functional prototypes and Object.defineProperty.

oh I see... I haven't used Typescript, I believe... I've seen some examples and are very similar to JS but cleaner and I guess I have used that format, anyways, I wish you luck... thanks for the Points addition... :)

[joex92]

@jonobr1 The points on the object Two.Points are not centered vertically, but only horizontally. the points center are at the top center of the points. This is more visible when the size is big enough...

[jonobr1]

Thanks for sharing and sorry for the delay! This is why I haven't published the package yet. I just updated dev with patches for this.