Integrating Paper.js


#1

As it stands, Tumult Hype doesn’t have a vector drawing tool. While pondering how to get nice vector graphics and animations in Hype, I thought to look up a library.

I found Paper.js. Seems like it would work nicely with Hype.

Help with how it works can be found here

I would like to have a template up by tomorrow.


(Freelancer) #2

very interesting, the gallery is quite impressive


#3

Started Experimenting with paper.js and three.js in Tumult Hype on Github.

Just using the examples that come with them for now.


(Freelancer) #4

amazing examples!

thank you, this is a great addition


(Lucky) #5

Hey just some notes, try to use the scripts in hype document in a way where you merge the js with the hype document elements otherwise there’s no real point of using hype at all if everything from those libraries is contained in a widget you could just hard code everything without Hype.

And PaperJs and ThreeJs especially perform much faster raw without being in hype on tablets I’ve found. Desktop may be great, but especially with threejs the less layers of end code the easier it was to process.

PaperJS however can be really great when mixed with hype, i created some interactive colouring book tests and they ran fine, if you just stick your main variables in the head html , your paperjs setup code onLoad, you can use the hype divs to trigger actions and make a lot of fun stuff!


#6

Hi. If you have any examples to share, I would love to see how they are set up. I do want to make this as easy to distribute and use as possible, as well as a few other ideas I have.


(Lucky) #7

Hey man,
Sorry it took so long to respond, but I cant release most of the files since they’re for clients and they’re not done yet HOWEVER
Here’s an experiment i did where you have a canvas with tools . The buttons are hype objects, the library is PaperJS
And it worked really well

So it’s essentially a draw app :smile:
controllerv2.zip (79.1 KB)


#8

Good stuff! I am still wondering of a nice way to distribute these things as tools.

Perhaps they can be bundled in a symbol or something, and we just package all of them into a hype scene?

And yeah, it does work really well. Thank you!


(Lucky) #9

No worries! And yeah potentially, but paperjs has so many options and customisations you’d need to have a ton of sliders and buttons in it to control them.

I’m not sure personally if it’s worth it, but If we were to create a basic Hype file with them in use minus any extras with code notes on how to customise them and a tutorial to explain the file I think it could work really well.

This way a user may even be able to make their own file from scratch as they’d know what’s useful to use what’s not :slight_smile: