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

Pts.js: a modular librairy for visualization and creative coding(ptsjs.org)

243 points by sctgrhm 5 years ago | 25 comments

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

Thanks for posting. Happy to answer any questions.

chewzerita 5 years 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.

metaphorical 5 years 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.

sabellito 5 years 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

metaphorical 5 years 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

sebmellen 5 years 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.

lxe 5 years ago |

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

sva_ 5 years 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.

peterhil 5 years 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.

metaphorical 5 years 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!

kowlo 5 years 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

FractalHQ 5 years ago |

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

metaphorical 5 years 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

jeffrallen 5 years ago |

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

lc9er 5 years ago | |

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

lf-non 5 years 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/

elliotlarson 5 years ago |

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

metaphorical 5 years 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. :)

nikkwong 5 years ago | | |

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

alonsonic 5 years ago | |

Was looking for exactly the same.

qmmmur 5 years 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!

dkarras 5 years ago |

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

maxbaines 5 years ago |

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

alvarlagerlof 5 years ago |

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

jevgeni 5 years ago |

Title has a very airy typo.

Also, my new favorite library.