Pts.js: a modular librairy for visualization and creative coding (opens in new tab)

(ptsjs.org)

243 pointssctgrhm4y ago25 comments

25 comments

Hi HN, Pts is one of my late-night personal projects :)

Thanks for posting. Happy to answer any questions.

Thanks for creating such a great tool!

I used Pts around a year ago to make a music visualizer for an art class, it was really great for that use-case and I was really happy about my final result.

I'm excited for the future of your work and the future of the greater creative coding community.

Also while I can still edit: iirc the documentation is high quality. I was able to get a basic prototype working really fast, and the docs were extremely helpful.

metaphorical4y ago

Thank you so much. I would love to see the visualizer you made!

Really glad to hear the docs are working as intended too.

sabellito4y ago

Nothing to ask, just would like to congratulate ya for building this library, really high quality stuff.

People often compare it to P5, but somehow the first thing that came to mind when looking at it the first time (probably over a year ago) was D3, and that's some pretty high praise in my book haha

metaphorical4y ago

Thank you! It started as a somewhat speculative personal project so I'm really grateful to hear that it resonates with you and others.

I'm building another library on top of this -- it's moving at a very slow pace so hopefully I can release it one day :D

sebmellen4y ago

Super, super cool project. Are you available for a small side gig building a custom animation with Pts or something like that? At a glance I love the framework but I'm not sure I can figure out how to use it to build what I want.

lxe4y ago

Wow. High quality stuff. Great API. Lots of demos! (https://ptsjs.org/demo/?name=sound.freqDomain is the best).

sva_4y ago

I especially liked https://ptsjs.org/demo/edit/?name=circle.intersectLine2D for some reason. There's something beautiful about the simplicity of the code, that lets the objects interact with one another.

peterhil4y ago

The API seems much more intuitive than that of D3.js!

I used D3.js originally to draw line charts to visualise USGS mineral statistics, but currently only use it for svgLine (from d3-shape) and scaleLinear and scaleLog (form d3-scale) functions.

Is drawing on canvas much faster than on SVG?

Could matrix or other transforms be used to map screen coordinates to chart coordinates as the d3 scales do?

Generic projections in complex plane (viewed as cartesian or polar coordinates) might be fun for generative art or visualisations of various signals.

metaphorical4y ago

Yes, canvas is faster and I think d3 now supports canvas too, right?

d3 will give you a lot more support for data manipulations, but (if I may say so) creating highly customized visualizations can be easier in Pts.

I think it should be possible to use both d3 and Pts together. If you experiment with this approach, please let me know how it goes!

kowlo4y ago

The demos are very fun to play with, and I was surprised how brief the code was for each one... would be great to see a comparison to similar librairies

FractalHQ4y ago

Really cool stuff! The touch detection on mobile seems to be a bit wonky when I scroll through.

metaphorical4y ago

Thanks!

The scrolling seems like a bug that was related to recent changes. I opened an issue here: https://github.com/williamngan/pts/issues/140

jeffrallen4y ago

Upvote for the typo in the title. That's how my mom says it.

lc9er4y ago

My mother-in-law always says, “lie-berry”, like she’s getting books from a deceitful fruit.

lf-non4y ago

For people interested in creative coding and data driven visualizations there is also the thi.ng umbrella [1] which provides a large collection of modular micro utilities.

Many of them are clojure inspired and are written in functional-style typescript.

A lot of these utilities (eg. transducers, multi-methods, stream utilities etc.) are very useful outside the data-visualization space as well.

[1] https://github.com/thi-ng/umbrella/

elliotlarson4y ago

It would be cool to see a comparison between this and existing libraries like p5.js.

metaphorical4y ago

It's difficult to compare.

I love processing/p5 and it's very easy to learn and has a vibrant community and lots of add-ons. It's also a great education tool.

Pts is a more opinionated library because one of my personal motivations was to create something that can help me think and approach creative coding in conceptual ways. It's more composable, and it provides the building blocks for a complementary library that I'm building now. :)

nikkwong4y ago

What are you doing in the complimentary library? This is awesome work BTW.

alonsonic4y ago

Was looking for exactly the same.

qmmmur4y ago

This is actually such great work. Great examples (they look good don't just read good ;)) and an attractive API. You're a talented developer!

dkarras4y ago

feels like paper.js and processing had a child. cool stuff!

maxbaines4y ago

Insanely cool, thanks. I have been looking for something to use on my profile, blog etc, this is perfect.

alvarlagerlof4y ago

Can't stop thinking about out post and telecommunication board.

jevgeni4y ago

Title has a very airy typo.

Also, my new favorite library.

j / k navigate · click thread line to collapse

25 comments

metaphorical4y ago

Hi HN, Pts is one of my late-night personal projects :)

Thanks for posting. Happy to answer any questions.

chewzerita4y ago

Thanks for creating such a great tool!

I used Pts around a year ago to make a music visualizer for an art class, it was really great for that use-case and I was really happy about my final result.

I'm excited for the future of your work and the future of the greater creative coding community.

Also while I can still edit: iirc the documentation is high quality. I was able to get a basic prototype working really fast, and the docs were extremely helpful.

metaphorical4y ago

Thank you so much. I would love to see the visualizer you made!

Really glad to hear the docs are working as intended too.

sabellito4y ago

Nothing to ask, just would like to congratulate ya for building this library, really high quality stuff.

People often compare it to P5, but somehow the first thing that came to mind when looking at it the first time (probably over a year ago) was D3, and that's some pretty high praise in my book haha

metaphorical4y ago

Thank you! It started as a somewhat speculative personal project so I'm really grateful to hear that it resonates with you and others.

I'm building another library on top of this -- it's moving at a very slow pace so hopefully I can release it one day :D

sebmellen4y ago

lxe4y ago

Wow. High quality stuff. Great API. Lots of demos! (https://ptsjs.org/demo/?name=sound.freqDomain is the best).

sva_4y ago

peterhil4y ago

The API seems much more intuitive than that of D3.js!

I used D3.js originally to draw line charts to visualise USGS mineral statistics, but currently only use it for svgLine (from d3-shape) and scaleLinear and scaleLog (form d3-scale) functions.

Is drawing on canvas much faster than on SVG?

Could matrix or other transforms be used to map screen coordinates to chart coordinates as the d3 scales do?

Generic projections in complex plane (viewed as cartesian or polar coordinates) might be fun for generative art or visualisations of various signals.

metaphorical4y ago

Yes, canvas is faster and I think d3 now supports canvas too, right?

d3 will give you a lot more support for data manipulations, but (if I may say so) creating highly customized visualizations can be easier in Pts.

I think it should be possible to use both d3 and Pts together. If you experiment with this approach, please let me know how it goes!

kowlo4y ago

The demos are very fun to play with, and I was surprised how brief the code was for each one... would be great to see a comparison to similar librairies

FractalHQ4y ago

Really cool stuff! The touch detection on mobile seems to be a bit wonky when I scroll through.

metaphorical4y ago

Thanks!

The scrolling seems like a bug that was related to recent changes. I opened an issue here: https://github.com/williamngan/pts/issues/140

jeffrallen4y ago

Upvote for the typo in the title. That's how my mom says it.

lc9er4y ago

My mother-in-law always says, “lie-berry”, like she’s getting books from a deceitful fruit.

lf-non4y ago

For people interested in creative coding and data driven visualizations there is also the thi.ng umbrella [1] which provides a large collection of modular micro utilities.

Many of them are clojure inspired and are written in functional-style typescript.

A lot of these utilities (eg. transducers, multi-methods, stream utilities etc.) are very useful outside the data-visualization space as well.

[1] https://github.com/thi-ng/umbrella/

elliotlarson4y ago

It would be cool to see a comparison between this and existing libraries like p5.js.

metaphorical4y ago

It's difficult to compare.

I love processing/p5 and it's very easy to learn and has a vibrant community and lots of add-ons. It's also a great education tool.

nikkwong4y ago

What are you doing in the complimentary library? This is awesome work BTW.

alonsonic4y ago

Was looking for exactly the same.

qmmmur4y ago

This is actually such great work. Great examples (they look good don't just read good ;)) and an attractive API. You're a talented developer!

dkarras4y ago

feels like paper.js and processing had a child. cool stuff!

maxbaines4y ago

Insanely cool, thanks. I have been looking for something to use on my profile, blog etc, this is perfect.

alvarlagerlof4y ago

Can't stop thinking about out post and telecommunication board.

jevgeni4y ago

Title has a very airy typo.

Also, my new favorite library.

j / k navigate · click thread line to collapse