Two.js(jonobr1.github.io)
jonobr1.github.io
Two.js
https://jonobr1.github.io/two.js/
20 comments
Played around with this awhile back and I really like it. Great for quick art projects and the like: http://westleyargentum.github.io/monsters/
Thats awesome!
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.
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.
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.
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.
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.
You can save out a <canvas> to png quite easily: canvas.toDataURL();
Oh, yes, but it's not a vector format, which means you can't make high quality vector drawings that the user can export with it.
We could make an HTML-Canvas-compliant library that renders SVG.
In fact, I already enabled one: https://github.com/Automattic/node-canvas
In fact, I already enabled one: https://github.com/Automattic/node-canvas
Even Dojo Toolkit's dojox.gfx from 2007 supported multiple rendering contexts: SVG, canvas, VML, Silverlight. https://dojotoolkit.org/documentation/tutorials/1.10/gfx/
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.
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.
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...
it's for motion graphics. https://www.youtube.com/watch?v=2jTwX8jz-44
It's for motion graphics, with no facilitation for motion graphics! Brilliant!
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)
Example: makemake.io (although PIXI.js is used in this case)
[deleted]
Interestingly WebGL is way slower than SVG and Canvas in this case (Chrome, rMBP): https://jonobr1.github.io/two.js/examples/particle-sandbox.h...
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
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
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)
Because the eng team that implements WebGL on Chrome recommended this way. I have an implementation as you're describing as the first tag of Two.js. It actually was a 2D drawing API for Three.js initially..!
Basic question - but when would you use this over d3.js?
I notice that this can render ThreeJS objects. Any reason to construct and object with ThreeJS and render it with Two?
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...
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.
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!
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?)
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.
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.
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
Maybe the autor thinks it is complete.
EDIT: Oh wait, is the author in this thread? He can answer that.
EDIT: Oh wait, is the author in this thread? He can answer that.
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.
Oh and the commit from last Wednesday was three lines long
please stop trolling. I know you think you're on to something but you're really not.
How can someone who voices genuine concerns be a troll ?
I was actually interested in this framework. Right now I'm torn between pixi.js and easel.js , this seemed like a viable alternative.
But before I start to invest time in a technology, I want to know if it's still alive.
This project is definitely not finished (text rendering), far from polished (slow webgl implementation, see this thread) and has not been improved in half a year.
Take a look at this: https://github.com/jonobr1/two.js/graphs/contributors
The whole thing was a one-man stunt and is obviously dead.
Oh, and saying "I work on the dev branch" when the dev branch is just as abandoned as the rest of the code is a blatant lie. https://github.com/jonobr1/two.js/commits/dev
Sorry, but stuff like this just makes me angry. The javascript world is full of throwaway projects that die after a few months/years. At the same time there are true gems with really elegant code. Easel, Pixi, SnapSvg, they are amazing. Advertisement for a project like this is unfair and spreads confusion.
If you need help, if you look for contributors, just say so. But don't pretend that your code is alive when it's actually cold legacy code.
But before I start to invest time in a technology, I want to know if it's still alive.
This project is definitely not finished (text rendering), far from polished (slow webgl implementation, see this thread) and has not been improved in half a year.
Take a look at this: https://github.com/jonobr1/two.js/graphs/contributors
The whole thing was a one-man stunt and is obviously dead.
Oh, and saying "I work on the dev branch" when the dev branch is just as abandoned as the rest of the code is a blatant lie. https://github.com/jonobr1/two.js/commits/dev
Sorry, but stuff like this just makes me angry. The javascript world is full of throwaway projects that die after a few months/years. At the same time there are true gems with really elegant code. Easel, Pixi, SnapSvg, they are amazing. Advertisement for a project like this is unfair and spreads confusion.
If you need help, if you look for contributors, just say so. But don't pretend that your code is alive when it's actually cold legacy code.
Self-entitled much? If the library doesn't suit your needs, just move on. There's no need to throw a tantrum about how a framework isn't tailored to your exact specifications, and how people aren't working hard enough so you can "invest" your oh-so-precious time in their unpaid effort.
Submit a patch or go away if you have a problem. The world doesn't owe you free software.
You seem to have already concluded that a project that isn't seeing rapid, active development, is not suited for use.
There's a difference between "solid" and "moribund".
There's a difference between "solid" and "moribund".
It says in this thread that the library can't even draw text. That's far from complete
It can't play sound either. Nor can it send or receive email. That still doesn't mean it's not complete.
Is it possible to use this for creating videos with motion graphics? Even the possibility of a frame by frame render would be awesome.
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
The project Anitype dynamically creates and stores gifs of Two.js scenes: http://anitype.com/entries
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/
0 - https://ecomfe.github.io/zrender/
Why Vector.isZero() is checking whether a vector length is smaller than 0.0001? Why this arbitrary number and not e.g. 0.00000001?
Dunno about this case, but probably because floating point arithmetic is a bitch. Try the following in Chrome's developer console:
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/
(0.3 - 0.1 - 0.1 - 0.1) === 0.0
> false
0.3 - 0.1 - 0.1 - 0.1
> -2.7755575615628914e-17
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/
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.
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.
You can interact with binary representations of numbers in JavaScript using typed arrays – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Type....
For example, you can get an array of the bytes in a number `n` with this:
For example, you can get an array of the bytes in a number `n` with this:
new Uint8Array((new Float64Array([n])).buffer)I'm looking for a library that can create a calligraphic shape (path) from a stroke path.
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.
Or do you need the precise bezier-curves for the stroke outline? For that you need to do some computation.
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.
It would be interesting to know how to compute the calligraphic stroke outline in terms of bezier curves from a given bezier curve.
I have this bookmarked for some reason, it may help: http://stackoverflow.com/questions/3205819/bezier-path-widen...
Half the links are dead now. This is the openjdk Stroker.java code: http://grepcode.com/file/repository.grepcode.com/java/root/j...
Half the links are dead now. This is the openjdk Stroker.java code: http://grepcode.com/file/repository.grepcode.com/java/root/j...
Thanks!
How would this compare to Famo.us?
Considering turning my text-logo into one of these!
That's pretty sweet.
what is meant by "modern web browsers"?
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."
In other words, "modern browsers" might as well be mythical creatures :)
Roughly, self updating html5 compliant browser.
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?
It is if you updated it recently.
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
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
True, it should specify where support drops off really, it's not as if there aren't tools to automate the JS testing part of it if the time isn't there to thoroughly manually check. I've think maybe spent too much time assessing JS libraries & frontend stuff; after a while when you see 'modern browser' you mentally tick off where it's likely to be functional and accept/discount the guessed tradeoffs (maybe a bad habit)
How this is different from fabricjs or snapsvg?
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.
It's not 100% a bad thing though.
Part of the problem is that companies started using github profiles as resumes.
Where's the problem?
People keep reimplementing the same thing to the same "80%" completion level so they look good to employers, but the software is abandoned quickly once it has served its purpose as a personal branding tool.
Step 1: Someone invests a bunch of time making something new.
Step 2: Someone posts it on Hacker News.
Step 3: Project is immediately derided because other people have also been making new things.
Step 2: Someone posts it on Hacker News.
Step 3: Project is immediately derided because other people have also been making new things.
Just to clarify, I was explaining acgourley's position. This particular project is high quality.
If your trade is building things and you have nothing to show for it, then it's probably a good idea to have at least one thing you can point to.
But trying pin and dismiss the intention behind someone's open source project would be uncalled for, wouldn't it.
But trying pin and dismiss the intention behind someone's open source project would be uncalled for, wouldn't it.
This project started 3 years ago. It's not that fast :)
Some of my thinking behind rolling my own renderer: https://youtu.be/cOfEMWV_5Rc
I really enjoyed this talk. Thanks.
I don't think this is something unique to the Javascript world people make sightly different eyeglasses, plates, houses, frameworks, libraries, programming languages, etc.
Being able to control the evolution of your library is a big advantage (if you're invested in it).
snapsvg is svg only
I was about to say it abstracts over canvas and svg with a uniform api, but it looks like fabric might do something similar?
[deleted]
I'm testing something...thanks
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.
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
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
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
Maybe the author could utilize some npm modules to enable this. https://github.com/mattdesl/text-modules
what are the major differences between this and paper.js?