Two.js

https://jonobr1.github.io/two.js/

by bikeshack • 11 years ago

613 88 11 years ago

jonobr1.github.io

humbleMouse• 11 years ago

That's pretty sweet.

gprasanth• 11 years ago

How this is different from fabricjs or snapsvg?

Fiahil• 11 years ago

It seems to me, that people in the Javascript world, like to constantly create new alternatives (or very similar) to existing frameworks or projects.

It's not 100% a bad thing though.

acgourley• 11 years ago

Part of the problem is that companies started using github profiles as resumes.

thebouv• 11 years ago

Evolution. Competition. Definitely a good thing.

Though admittedly the pace at which this happens in the JS world can be exhausting.

akilism• 11 years ago

I don't think this is something unique to the Javascript world people make sightly different eyeglasses, plates, houses, frameworks, libraries, programming languages, etc.

jonobr114• 11 years ago

This project started 3 years ago. It's not that fast :)

eyko• 11 years ago

Being able to control the evolution of your library is a big advantage (if you're invested in it).

jonobr114• 11 years ago

Some of my thinking behind rolling my own renderer: https://youtu.be/cOfEMWV_5Rc

amirouche• 11 years ago

snapsvg is svg only

smrtinsert2• 11 years ago

I was about to say it abstracts over canvas and svg with a uniform api, but it looks like fabric might do something similar?

kodablah• 11 years ago

An alternative library that is Canvas only but works well with input is ZRender[0]. Sadly the docs have not been translated to English (lingua franca of open source libs or software in general?) and I think that affects adoption.

0 - https://ecomfe.github.io/zrender/

dexwiz• 11 years ago

I notice that this can render ThreeJS objects. Any reason to construct and object with ThreeJS and render it with Two?

jonobr114• 11 years ago

No no, you can create shapes and render / extrude them in Three.js. The puzzle piece in this example is a 2D path made in Two.js and then extruded in Three.js: https://jonobr1.github.io/two.js/examples/three-extrusion.ht...

Argentum012• 11 years ago

Played around with this awhile back and I really like it. Great for quick art projects and the like: http://westleyargentum.github.io/monsters/

jonobr114• 11 years ago

Awesome monsters!

Argentum012• 11 years ago

Thanks :)

jchomali• 11 years ago

Thats awesome!

gondo2• 11 years ago

what is meant by "modern web browsers"?

m3Lith• 11 years ago

I guess it would be something along the lines of this quote from http://farukat.es/journal/2011/02/528-modern-browser: "A modern browser is any browser that: successfully renders a site that you just built using web standards, testing only in your browser of choice along the way, with all the essentials functioning well; without you having written any browser-specific hacks, forks or workarounds; and shows great performance as you navigate it."

yellowapple2• 11 years ago

In other words, "modern browsers" might as well be mythical creatures :)

jonobr114• 11 years ago

Roughly, self updating html5 compliant browser.

yellowapple2• 11 years ago

Why self-updating? Is my version of Firefox non-"modern" simply because I install and update it through my operating system's package management system?

RobertKerans2• 11 years ago

In general as regards SVG [and canvas in this case], not IE <=8 or Android <= 2.4, and some caveats (eg will need careful testing, as some JS/DOM APIs or rendering optimisations may not be present) with earlier versions of FF/Chrome/Safari & IE9/10

gondo2• 11 years ago

what about in a year? i bet you would list different browsers and versions. my point is, "modern browser" doesn't mean anything and it change as time passes

smrtinsert2• 11 years ago

I don't see anyway of working with textures at this point, am I wrong? Part of what I find interesting of working with Paper.js is the ability to render to a texture, and keep piling on stuff if necessary. I haven't tried the performance that would bring, but from what I understand it could be great.

jonobr114• 11 years ago

Textures are in the works... Wanted to focus on drawing vector stuff first. As you noted there are many libraries that handle textures really well!

vegabook• 11 years ago

Awesome...but. No text? That suddenly wipes out my use case (data viz). I was super encouraged reading this post, multiple renderers including canvas / webgl (so I assume speed - unlike D3), smart, clean, indeed creative looking logo/site...suggests the author has taste...but no text kills this for me. I see no obvious use case for animated 2d that does not do textures (personally happy to do without) but also does not do text.

jonobr114• 11 years ago

Unfortunately, this is a library authored and maintain by one person, me. I'd love to get to text at some point, but until then you'll have to stick with DOM. Also, depending on your renderer you have full access to SVG, Canvas, and WebGL so you can write text with those APIs...

Some projects that use just animated 2D:

+ http://patatap.com/ + http://anitype.com/ + http://tether.plaid.co.uk/ (broken, sorry!) + http://vr.chromeexperiments.com

Interface stuff:

+ http://justareflektor.com/tech + https://dl.dropboxusercontent.com/u/1595444/experiments/anim...

These projects have had multi-million uniques throughout their existence. 3 other large scale projects coming out later this year that use Two.js..! And these are projects just made by me :P

mattdesl• 11 years ago

Text is actually pretty tricky in WebGL. Lots of ways to do it, all very dependent on your application. I think it would be better to keep it out of the library but allow plugins/etc to compose easily with the rest of two.js.

Maybe the author could utilize some npm modules to enable this. https://github.com/mattdesl/text-modules

rjusher• 11 years ago

What I am struggling with, is the use case of a library like this.

Is this oriented towards gaming or substitude something like d3.js or is it has a simplier api, for the developer than other libraries. Or is it a library to showcase the cool stuff that can be done with new technologies.

I think the main difference and the selling point is that it is "renderer agnostic" but I don't understand the benefits of that.

SomeCallMeTim• 11 years ago

Renderer-agnostic is nice, actually, when you need to support lots of different browsers.

Some mobile browsers can't do WebGL as fast as they do Canvas, for instance. Other browsers will have a huge speed advantage with WebGL.

I'm not sure if any are faster with SVG, or the relative performance between SVG and canvas. But being able to do some test renders quickly in all three modes should allow you to select the fastest for a particular browser.

Game developers are better off with a game-oriented library, IMO. Even if you used something like Two.JS to do your rendering, there are a lot of things still useful in a game library to justify using it -- and most games will need more than geometric figures.

zmmmmm2• 11 years ago

I love SVG support because it means you can render something in vector art in the browser which is also downloadable as a file by the user. Drawing stuff in the browser which is then stuck there is cute but lacks an important layer of interoperability with the rest of the computing ecosystem. So here we appear to get the best of all worlds: render to whatever is fastest in the browser but get automatic "export as SVG" for free.

niutech• 11 years ago

Even Dojo Toolkit's dojox.gfx from 2007 supported multiple rendering contexts: SVG, canvas, VML, Silverlight. https://dojotoolkit.org/documentation/tutorials/1.10/gfx/

morenoh149• 11 years ago

it's for motion graphics. https://www.youtube.com/watch?v=2jTwX8jz-44

andrewmcwatters• 11 years ago

It's for motion graphics, with no facilitation for motion graphics! Brilliant!

santoriv2• 11 years ago

It would be good if you wanted to make some content that has smooth animations that renders in all different browsers (i.e animated greeting cards, animated presentations, or animated websites). Basically anything that you could do in Flash 2D, you could also do with this.

Example: makemake.io (although PIXI.js is used in this case)

Uehreka• 11 years ago

I don't know what the real use case is, but I know that it's been awesome as a simple graphics API to teach programming to kids.

A while back I used Choc (http://www.fullstack.io/choc/) to teach JavaScript to a high school class. A lot of Two's competitors have APIs that take into account things like performance and extensibility, but are harder to explain because of it. It was great to have a simple API that got out of the way and allowed me to teach things like if statements, for loops and functions.

odbol• 11 years ago

The author of two.js uses it for interactive art, like Patatap. It's great for creating fun motion design easily. I worked with him on a project where a live drummer plays drums and triggers sounds and shapes projected behind him: http://thecreatorsproject.vice.com/blog/introducing-drumpant...

mintwurm5• 11 years ago

Is that project still alive ? Last two commits are from march this year and then there's nothing all the way back to july '14

edgarvaldes• 11 years ago

Maybe the autor thinks it is complete.

EDIT: Oh wait, is the author in this thread? He can answer that.

jonobr114• 11 years ago

It is! I work on the dev branch and other branches when I'm making new changes. EDIT: I mostly use the library though (I use it everyday) rather than constantly develop new features.

mintwurm5• 11 years ago

It says in this thread that the library can't even draw text. That's far from complete

tlrobinson• 11 years ago

Interestingly WebGL is way slower than SVG and Canvas in this case (Chrome, rMBP): https://jonobr1.github.io/two.js/examples/particle-sandbox.h...

jonobr114• 11 years ago

Yes! This is because when a shape is first created the WebGL Renderer draws the shape as a texture in Canvas2d and then uploads that texture to GL. The operations "Vertices" and "Scale" force each shape to be redrawn so there are a lot of textures being uploaded and deleted every frame this scenario. If you keep things to translation / rotation you can make the WebGL renderer push wayyyy more shapes than the other 2 renderers.

I'm currently developing a way to "cache" textures that don't change much so if you had a Two.Group that doesn't change much you can turn that into 1 texture. This will greatly increase performance as well. Thanks for checking it out!

#themoreyouknow

zlnimda• 11 years ago

Why don't you draw directly your vertices in gl instead of create a tex ? And you could use optimisation of culling to be faster. (drawing object : front to back)

victorhooi• 11 years ago

Basic question - but when would you use this over d3.js?

jarek-foksa• 11 years ago

Why Vector.isZero() is checking whether a vector length is smaller than 0.0001? Why this arbitrary number and not e.g. 0.00000001?

matchu2• 11 years ago

Dunno about this case, but probably because floating point arithmetic is a bitch. Try the following in Chrome's developer console:

    (0.3 - 0.1 - 0.1 - 0.1) === 0.0
    > false
    0.3 - 0.1 - 0.1 - 0.1
    > -2.7755575615628914e-17

In order to get helpful results, we're gonna have to pick some semi-arbitrary epsilon. Still, my problem domain might require a different epsilon than they expect; even if they have a default, the API should allow me to specify my own choice of epsilon.

They might also want to consider being more nuanced for the equals method than just taking the difference and comparing to zero. See http://floating-point-gui.de/errors/comparison/

jonobr114• 11 years ago

You're not the only one! The dev Branch has this fixed so you can pass your own epsilon.

skwosh• 11 years ago

While we're here, the article you linked recommends equality comparison w.r.t. "the maximum number of possible floating-point values between the two values".

Any idea on how to go about this in JavaScript? The binary representation of the float isn't as easy to come by (compared to C, for example), but I wonder if you couldn't get a decent approximation with Math.log2.

amelius3• 11 years ago

I'm looking for a library that can create a calligraphic shape (path) from a stroke path.

jacobolus• 11 years ago

You can do this pretty easily with SVG, assuming your browser supports SVG, and your “caligraphic stroke” means you want the envelope of an ellipse translated along the path.

Or do you need the precise bezier-curves for the stroke outline? For that you need to do some computation.

amelius3• 11 years ago

Yes, I want the second, because I want to use the outline in further computations.

It would be interesting to know how to compute the calligraphic stroke outline in terms of bezier curves from a given bezier curve.

billkozby083• 11 years ago

I'm testing something...thanks

dreamfactory2• 11 years ago

what are the major differences between this and paper.js?

drumttocs8• 11 years ago

How would this compare to Famo.us?

arocks• 11 years ago

Is it possible to use this for creating videos with motion graphics? Even the possibility of a frame by frame render would be awesome.

jonobr114• 11 years ago

Yes, I often screen capture my work or use a Chrome Extension called Render Target to save my frames out for static use. My dribble account is mostly Two.js output: https://dribbble.com/shots/2058034-9-Squares-r6?list=users&o...

The project Anitype dynamically creates and stores gifs of Two.js scenes: http://anitype.com/entries

stared• 11 years ago

As someone using D3.js a lot (even for a puzzle game) - what is the benefit of using Two.js? Jumping between SVG and Canvas? (But then, is it worth the price of reducing possibilities to circles and squares?)

jonobr114• 11 years ago

You can do quite a bit with "circles and squares". Two.js focuses on Path drawing and has robust SVG interpretation for complex vector shapes.

I've found the portability to be fantastic. For instance http://patatap.com runs svg on iOS and canvas on Android. Two.js makes it simple to run either on the fly.

chejazi• 11 years ago

Considering turning my text-logo into one of these!

Two.js

Related Stories