What is Reddit's opinion of Paper.js?

From 3.5 billion Reddit comments

I'm super thrilled with the amazing response I've been getting on the last two I posted. Thanks for all the support.

Artwork generated on a 600x600 canvas using paper.js

The artwork contains variable sized circled placed like by line in a circular pattern. Some cool results crafted by changing the equation that determines the size of each circle. Will post a link to the GitHub repo soon.

Poster created using Figma.

Music from freemusicarchive.com

I'm @createwith.code on Instagram.

Glad you like it! A goal? hmm.. I was mainly trying to stress test the Paper javascript library. And I've always wanted to see how symplectic integrators compare to the more standard ODE solvers when applied to the n-body problem. I'm not researching these symmetric systems in any way and I have no theoretical analysis for their dynamics.

As far as the instability goes, yes you are right. Over time the numerical error builds up until the symmetry is lost (happens in both videos). The n-body problem is particularly stiff when massive bodies are close together; the gravitational field changes so rapidly that the solver has a hard time integrating over a (seemingly large) fixed timestep. Fortunately, the stiffness is hardly felt by the symmetry, which is why the simulation lasts so long before descending into chaos (~60 realtime seconds for a 2nd order fixed time-step method is pretty impressive imo).

I understand that it's tough when you start out to know where to look. So here is my approach:

Find the loaded sources in your dev tools. In the link I posted earlier you will find a reference to a method being used from Paper.js. That's an animation library they use to accomplish this effect. Here is an example with source code on their page (source code via top right button).

http://paperjs.org/examples/future-splash/

Go and explore, it's written right there how to do it :)

Here is a Javascript version you can play with and edit. Use the right/left arrow keys to transition the parameters as in the gif. I'm using the Paper javascript library which is horribly inefficient at rendering pixels (not what it's meant for) -- so it can only do ~2000 iterations z -> F(z) in real time. GLSL would run a lot faster.

Edit: I changed the code so that I'm altering canvas pixel data rather than changing the position of Paper circles. This resulted in a speedup in Safari but a massive slowdown in Chrome for me, so by default it is now only running 100 iterations per frame. The nice thing is that we are no longer using extra memory per iteration and that when the parameters aren't changing, the fractal space will unendingly fill with pixels.

You basically already figured it out! Greensock looks like a web animation library, which both sites seem to be loading. I did a little digging and it doesn't look like it's free. PaperJS looks like a good free alternative.

Like anything in programming, you're going to want to build it incrementally. Here's one example of how you might go about it:

1. Look through some examples on PaperJS to get a handle on how you use the library

2. Try to write a small function that randomly puts dots on the screen

3. When you get that, write a function that connects the dots to its neighbors. You're building a graph, so it might be useful to look up how to represent a graph structure in code but this is not necessary (it will probably make your life much easier though!)

4. Try doing some basic animation in a loop, like moving all the dots to the left or right. Check the examples to see how they do it

5. When you've got a decent grasp on all that, try to make it look like the original animation:

• the dots seem to bounce around randomly, but they don't like to get too far away from their graph neighbors. Maybe have the random direction correlated with how far away they are from their neighbors so they bounce towards eachother
• When a dot gets close to the cursor, its connections light up. Maybe every second check the n closest dots and reduce the transparency on their edges

Grab a library and start messing around, then slowly chip away at your problem! It's all about small, incremental steps towards the goal

I've found that tackling stuff like that (along with JS stuff like http://julian.com/research/velocity/ or http://paperjs.org/) by components vs an overall "how to make a banner animation" gave me more knowledge that translated into other areas as well as helped me understand how it was all working together.

So I went back through my bookmarks and documents and it looks like I found a few items that should be of value to you as well:

http://blog.ivank.net/fortunes-algorithm-and-implementation.html

http://paperjs.org/examples/voronoi/

https://github.com/gorhill/Javascript-Voronoi/

Iirc none of those fit my needs for the project in a way that was helpful. But they were marginally helpful in deriving my own solution.

The animation/transition between each slide is very cool, and the hover effects for each one is also pretty good. These are the sorts of things that I would struggle to create. I know this specific example makes use of paper.js but these sort of JS libraries are difficult to get your head around, so I'm wondering if theres anywhere that has some advanced tutorials for things like this. The paper.js website has some awesome showcases, but I wouldn't know where to start recreating them.

I found a good one through a link someone else posted here which is pretty useful.

I know lots of web stuff (html/css/javascript I can put some php stuff together with a lot of reading). I did some freelance work over the summer and decided I fucking hate having someone who doesn't understand any of this trying to boss me around.

I don't know what I'll do with it yet, but I've been playing with this library a lot lately. http://paperjs.org/

Not really feeling it I'm afraid, the examples load horribly, are low res and the animation quality doesn't stand up against frameworks like paper.js. I might be missing something, but I don't think I am.

You most likely will be happier using using something that has a scenegraph as natively Canvas doesn't know about anything but pixels.

Check out Paper.js http://paperjs.org/

There's not an exact tutorial on what you want to do, Paper.js works with objects so moving one around via dragging is pretty straight forward.

I started on hack a while back you could check out, it might help a little bit (or confuse you more) Check out: http://cykod.github.com/Webiva-cardify/public/

Note: It's only been tested in Chrome and you need to drag an image from your desktop on to the big gray area first, but then you can drag images onto the canvas and then move them around afterwards. It uses Paper.js in JavaScript mode combined with jQuery for the DOM objects.

I would go for Vector JS library. I was trying to do something similar, but never found enough time.

Libraries that I was considering were

• VectorJS
• PaperJS (my favorite)
• VictorJS

I am not sure if any of these has a Angular integration, but it should not be hard to use it nonetheless.

This is done mostly with Javascript. In particular, it looks like the project uses libraries like Paper and Tween.

You would need to use a Javascript graphics engine, or write your own.

Plus I still don't know how to do this in any automatic way, I can open them in Photoshop, but that is one page at a time

To automate the reduction of vector nodes, you can extract the vectors (see my other response) and convert them to SVG. There are libraries from the web universe that can do it. Most prominently:

• https://github.com/mourner/simplify-js
• http://paperjs.org/tutorials/paths/smoothing-simplifying-flattening/

Both should be good for your task, but you need to write a wrapper script to use them. paper.js readily provides SVG import/export and should be easy to use. OTOH, someone has posted an example wrapper to integrate simplify.js into SVGO here: https://github.com/svg/svgo/issues/411

If your PDFs are just braindead rather than very detailed, you can also try the commandline tool SVGO directly on the SVG representation. It will not remove details, but it will optimize the encoding of the shapes (e.g. merge 1000 adjacent line segments into one single continous line).

Once the SVGs are simplified, convert them back to PDF and overlay the separated text/rasterimages to finish the PDF.

This will take longer than doing 30 pages by hand, but not as long as doing 3000 pages.

I beleive it uses the paper.js functions that is defined above that call in the documentation site. http://paperjs.org/tutorials/getting-started/working-with-paper-js/

It's not so easy to generate a Voronoi diagram (although if you're up for a challenge here is the most direct algorithm.

But if you can handle basic JavaScript, there are various graphics libraries that can do it. I recommend Paper.js.

Astute Graphics makes a tool called widthscribe that does something similar: https://www.youtube.com/watch?v=Pw5IospeQbY&list=PLVuiTl_w4-zCtDfwWcqLT2q0dt4SUAd-K&index=5

Scriptographer had a similar script that worked in Illustrator, but it looks like the project is dead now. The successor project is called paper.js: http://paperjs.org/examples/spiral-raster/

The first app, with the exception of "drag the event to extend the time" sounds pretty straightforward. You could leverage Vue Draggable for the drag and drop functionality. Resizing events would not be handled by Vue Draggable, and would therefore be a little more challenging.

Likewise, the diagramming tool sounds pretty tricky unless you seriously limited functionality, and not necessarily something that Vue would help with a whole lot. This is outside my wheelhouse, but it seems like something that would involve canvas elements? Perhaps something paper.js could help with? Oh, and wouldn't you know it, someone has created a 'bridge' between paper and Vue. Got to love the interweb.

That said, probably not the ideal intro to Vue, as it involves so much complexity that is not really related to Vue itself.

Removed for Violation of Rule 1: Posts should be about Graphics Programming

It's cool, it has a rendering, but neither this post nor the source code talk about the implementation of the rendering. Looks like this just utilizes [Paper.js](http://paperjs.org/).

There's a website I recently stumbled over recently for collaboratively doodling: The Paintshop

It's implemented using a JavaScript library for vector drawing: paperjs.

A quick search for 'javascript create geometrical shapes' yielded this result. I think? this is what u/SauronsUnderpants means. Basically js will create the shapes in the frontend.

Cool, thank you.

The colors used really do impact it. White and gray can be seen flicking in forward vision, but heavily in peripheral. Blue or green don't have this same effect in either unless they're very light shades.

Doubt it is possible with OLED, but would be very useful to utilize color averaging in the future for the "off state".

I wouldn't say it's the best, but I made this one. Although it's more geared towards animation than just drawing. May still give you some ideas.

If you're interested in frameworks, for that site I used paper.js, which is really helpful for drawing vector stuff onto a canvas.

One option is to use a canvas element, and this way you can the feedback for drawing (lines, points, highlighting) easily. You'll probably want to use a library to save time. PaperJS is one option, but there are many these days, and I'm out of touch with the latest&greatest.

Some of the libraries help handle mouse events, with others you'd have to program this yourself.

I completely understand. I was thinking it might be easy to implement as a "toolbox panel" or something where people could just drag and drop the animation presets onto a section of the path. It would probably be similar to how you're planning on implementing Ceasar easing. Either way, it's not a big deal.

First and foremost, I'd definitely flesh out a bezier tool and support for multiple points.

Maybe you should think about implementing http://paperjs.org/ for points and beziers.

I haven't had a chance to look at it, but http://kineticjs.com/ looks like it might help.