Pts.js: a modular librairy for visualization and creative coding

[sctgrhm]

https://ptsjs.org/

[metaphorical]

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

Thanks for posting. Happy to answer any questions.

[chewzerita → metaphorical]

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.

[metaphorical → chewzerita]

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

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

[sabellito → metaphorical]

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

[metaphorical → sabellito]

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

[sebmellen → metaphorical]

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.

[lxe]

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

[sva_ → lxe]

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.

[peterhil]

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.

[metaphorical → peterhil]

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!

[kowlo]

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

[FractalHQ]

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

[metaphorical → FractalHQ]

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

[jeffrallen]

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

[lc9er → jeffrallen]

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

[lf-non]

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/

[elliotlarson]

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

[metaphorical → elliotlarson]

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. :)

[nikkwong → metaphorical]

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

[alonsonic → elliotlarson]

Was looking for exactly the same.

[qmmmur]

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!

[dkarras]

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

[maxbaines]

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

[alvarlagerlof]

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

[_glsb]

Title has a very airy typo.

Also, my new favorite library.