Show HN: Pts.js – A library for visualization and creative coding | Hacker News Reader

Show HN: Pts.js – A library for visualization and creative coding

ptsjs.org

611 pointswmnn71 comments

I love how philosophy-driven this library is. Most graphics libraries work upwards from whatever primitives the platform provides—Pts pushes its concept of geometry downwards onto the platform instead. The result is artistically coherent, not just visually, but all the way through to the code itself. Really great work!

Very cool. Kudos for providing a good old-fashioned javascript library and not forcing people to use flavour of the month MVC/MVVM framework / babel-ES6-TS-god-knows-what transpiler

I checked the demos and I was like "neat!" ... then I was like "ok how many megatons of frameworks I don't care about is this buried in?"

The fact that it wasn't. That's what's gonna make me actually check this out.

Well done!

If a library was written in typescript, theb the users of the library wouldn’t be forced to use Typescript also, right? Does it really matter if the library is written in typescript or not?

It only matters in a positive sense. Being written in TypeScript signals that it uses modern features that makes the code easier to read, that it doesn't use too many strange dynamic features, and of course that there are type definitions available for other TypeScript users. Other users can use it like they would use any JavaScript library.

Well it does mean in order to understand the library and/or contribute you have to use <flavour of the month>. Also it makes the library prone to rewrites if something else comes up. I don’t mind TS (though es6 suits me fine) but I have seen many js paradigms come and go. Who knows maybe TS will stick around for the long haul.

Considering Typescript is a superset of javascript & the future of javascript - ie. they always plan to be implementing future javascript 'now', that is their whole reason for existence, and that their team sits on the javascript committee, then yes, I think it is around for the long haul. https://www.techtalko.com/2018/03/17/typescript-the-future-o...

This is a tired argument. SCSS was supposed to take over CSS... still waiting. For a hot minute, CoffeeScript was supposed to take over javascript. In the end, CoffeeScript didn't have a chance, but at the time many thought it did.

Typescript may be different and may be better, but there is a lot of rightly justified hesitation to adopting it.

Well SCSS took over CSS.

By what definition? Can I execute SCSS in modern browsers without needing to compile it?

As far as i know this was really never aim of the project. But everybody uses it. I would even say it oppened doors for JS compilation.. because everybody already has build process for css so why not js.

Considering TS has been around since 2012 and has the full backing and support of MS since then I'd say calling it the flavor of the month is not necessary. Might they drop it some day? Maybe, but seeing as they have several large profile products using it that is unlikely any time soon.

If TS does not stick around, it's very trivial to remove the types and put it back in plain JS, that's why even in the worst case scenario TS will not be a technical debt.

No, because TypeScript can be compiled to JavaScript, so you can use the resulting library in plain JS. If you want to check the source of the library, then yes, you need to know TS.

"Knowing TypeScript" is...functionally trivial, though. If one can read JavaScript and can't get enough from context to read TypeScript, I question their knowledge of JavaScript!

Perhaps writing it is a bigger ask--a twenty minute session of reading and poking at the language in VSCode did it for me, but maybe I'm secretly some kind of TypeScript savant--but this just plain should not be a problem for anybody who's up on modern JS.

It does matter for the authors, with TS they would have probably needed another year or two to complete it.

They wrote it in TS. Don't know why you think it would take longer with TS. Personally, I prefer using TS as I'm faster with TS when the code is going beyond 1 file or O(10^2) LOC.

Agreed, and TypeScript's ease of writing code correctly and quickly is what finally got me away from Ruby and to Node almost all of the time. ES6 was legitimately nice and could have been good enough for about the 50%-75% case, but the ease of building expressive TypeScript typings that let the compiler tell me what I was screwing up without having to write insipid typechecking tests or repeatedly running scratch code sold me. And when I have to do something that TypeScript can't prove, it's very easy to just bail out, do my filthy misdeeds, and patch back into the type system after.

For awhile, React/Redux was really kind of gross with TypeScript, but even that's mostly hammered out. (React's new context API did a lot to reduce my use of Redux in general, and works pretty comfortably with TypeScript too.)

It looks like this library does use es6 features and requires babel to build from source.

Not required. You can just include the pts.js or pts.min.js in script tag. https://unpkg.com/pts@0.5.0/dist/pts.js

He said building from source, not using an already built version. For that you need babel.

You're right. Sorry I misunderstood.

Typescript is compiled with tsc, not Babel. The npm package includes built Js and original ts

Thank you! Yes, I want to make sure the lib is lightweight and easy to use for beginners -- just include a script and ready to go. There's of course a babel-ES6-TS-something for experts too :)

For the past 10 months I have been drinking beer on Friday nights and making a `lab` section of the portfolio I have wanted to make for more than 15 years. A lot of old Flash experiments which looked cool and were interactive (but pointless really).

I didn't want to use P5 though. Not sure why, I wasn't a big fan of Processing for some lost reason. Also I didn't really need a big canvas library such as Pixi.

When I took a look at this project, half the methods were familiar to me as I have searched for these and cobbled together some lame collection of random functions into a weak "library". In a few weeks, when I am finished and need to review all this, I will definitely be trying to integrate this.

If you are the Author, thanks very much for your time and for sharing.

Thank you! I hope this may nudge you a bit to bring your lab experiments back :)

p5 is great too so I would recommend giving it a try also.

While I cannot see myself needing this sort of animation in my day to day work, I was super impressed by the documentation and thought the demos were fun.

I really like how the API is structured similarly to how someone designing a visualization would think about what they actually want to do (i.e. "Connect one end of the line to the box, and the other end to wherever the pointer is").

Super excited to delve into this! I've read over the documents and examples and it's obviously very well thought out and well-abstracted.

In particular I really like a lot of the decisions made in regards the point object: using Float32Array, making it the primary abstraction, and keeping the number of dimensions unspecified.

I've been working through some ideas on ways to implement a Vectorpark style psuedo-3d projection engine and pts.js seems to have almost all the basic tools I needed to build and then some.

Cool! How does it compare (in vision and features) to p5.js and pixi.js?

At first glance, it seems to support geometrical operations that neither of those have built in. Things like "draw the incircle of this triangle" and "draw a perpendicular from a line to this point" and "find the intersection of these circles." So if you can construct your figure using compass-and-straightedge, you can probably cobble it together using the existing API without touching trigonometry or vector manipulations at all.

p5 and pixi seem to be more on the "just tell me where to put it, and I'll draw it for you" line. Pts has a whole bunch of higher-level abstractions where you can define mathematical and geometric operations to apply to your points:

https://ptsjs.org/guide/op-0400

Great observations. That always felt like part of what was missing in other libraries. Sometimes just drawing a triangle was a long process that felt kind of hacky.

How does it compare to ganja.js?

https://github.com/enkimute/ganja.js

That is cool, cooool.

> Ganja.js is a Geometric Algebra code generator for javascript. It generates Clifford algebras and sub-algebras of any signature and implements operator overloading and algebraic constants.

> (Mathematically, an algebra generated by ganja.js is a graded exterior (Grassmann) algebra (or one of its subalgebras) with a non-metric outer product, extended (Clifford) with geometric and contraction inner products, a Poincare duality operator and the main involutions and morphisms.)

> (Technically, ganja.js is a code generator producing classes that reificate algebraic literals and expressions by using reflection, a built-in tokenizer and a simple AST translator to rewrite functions containing algebraic constructs to their procedural counterparts.)

> (Practically, ganja.js enables real math syntax inside javascript, with element, vector and matrix operations over reals, complex numbers, dual numbers, quaternions, or any other Clifford Algebra.)

BTW, enkimute's blog is full of small, interesting bits of JS code:

https://enkimute.github.io/

Just want to say, I really loved that you used the monaco editor. Such a nice user experience when you can use a world class editor that supports code completion, indents and error squigglies.

I felt right at home being an avid VScode user.

It has Pts specific autocomplete too :)

It reminds me my own library IvanK.js , for which I created several interesting graphics demos :) http://lib.ivank.net/?p=demos

I was literally just experimenting with ivank. Thanks for a great library!

This looks very cool, and stuffed with all sorts of goodies and power!

Hope it doesn't fade away like http://mojs.io or other web animation/graphics libraries.

This is very cool.

I like the simplicity. The choice of key operations to implement results in rather concise working example code.

At first glance, this library abstracts away a lot of the boring geometric / interaction boilerplate. Impressive!

This is really nice.

So much so that I yoinked one of your demos and used it on my landing page: https://lanes.io.

Thanks.

Beautiful website btw - clearly took a lot of effort.

FYI - tried viewing your landing page on iOS and it came up a blank white page

Thanks, I'll get on that.

Scrolling is a little wonky on iOS too

"Superpower your productivity."

And here I am, playing with the interactive background instead of doing anything productive!

Haha, I'll have to A/B test this one :)

Your website is nice as well. How can you use custom fonts and don't get the "blink" when the font is loaded?

this seems really cool. anyone using it for any projects right now? i wonder how it compares to p5 in performance.

development-wise, the structure of a pts space looks very similar to that of a p5 sketch based on the starter example. setup looks more involved than p5, but imo a worthy trade-off because the result is real modules and a better bundling experience. but for those less in tune with the bundling zeitgeist of javascript in 2018, this could be a real barrier to entry. either way, i can't wait break it

Would like to see how this compares to d3. D3 is incredibly powerful but also very difficult to learn and teach. Whenever I write code in it, I feel like I'm the last person to ever understand that code.

If they can position themselves as a common-person d3, they would have themselves a huge win. The fact that they say typescript right in the title (yet, another technology you have to learn to get started), is not terribly inspiring.

There's no need to learn typescript. You can use it like a good old js library by including it in script tag. But you're right that perhaps the messaging should be clearer.

Wow.. i knew this library for mb ~3 years.. thanks for bringing it back! I am not sure about version, but that time it has quite nice performance too

Yes! It first started as Pt (in coffeescript) a few years ago, and it's an experimental project to explore "a single point". Last year I started rewriting everything from scratch, and focus more on sets of points and how functions can transform them.

The performance should be a bit better (with Float32Array) though I haven't compared them.

p5.js is also a decent library for this kinda stuff. I'm wondering if they knew about p5.js, and if they did -- what are the main benefits of this library over p5.js?

Very cool, I’m wondering whether I could use this for something. What applications do you have in mind? Charting/graph visualisations? What about games?

I just love how the graphs look. We need some better open source graph tools

Very nice job on this. Will use for a noise points visualizer. Well done.

I cannot get the most basic Get started example working. I used pts-starter-kit. The canvas shows up and I can set the bgcolor no problem, but the point does not render.

pts-starter-kit comes with an example demo (in index.html). Does that work for you? Please file an issue and we will figure out from there. Thanks for trying it out!

Yes, the demo works. But replacing the code in app.js with the code from the intro doesn't.

I'll file an issue tomorrow with exact details.

Well definitely check this out a bit more! Thanks for sharing!

I wonder how people get the time to work on things like this.

Like anything - they make the time.

remember the average american watches 5 hours of TV a day...

AVERAGE!

1 hour here, 2 hours there, over a long period of time :)

It's brilliant.

As a noob I love the documentation and although I don't know what I'd do with this, it feels crazy accessible on the surface.

Very artistic oriented, love this

Really, really cool. Bravo!

wuuhhh...that visualisation on the firstpage made me sea-sick. and boats don't do that to me!

it does seem to be a pretty cool lib though

Reply on news.ycombinator.com