5 ms·
Two.js
- humbleMouse 11y agoThat's pretty sweet.
- gprasanth 11y agoHow this is different from fabricjs or snapsvg?
- Fiahil 11y agoIt 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 11y agoPart of the problem is that companies started using github profiles as resumes.
- pavel_lishin 11y agoWhere's the problem?
- stevejohnson 11y agoPeople 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.
- danneu 11y agoIf 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.
- santoriv 11y agoStep 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.
- stevejohnson 11y agoJust to clarify, I was explaining acgourley's position. This particular project is high quality.
- thebouv 11y agoEvolution. Competition. Definitely a good thing. Though admittedly the pace at which this happens in the JS world can be exhausting.
- deleted 11y ago[deleted]
- agumonkey 11y agobrownian.js
- akilism 11y agoI don't think this is something unique to the Javascript world people make sightly different eyeglasses, plates, houses, frameworks, libraries, programming languages, etc.
- jonobr1 11y agoThis project started 3 years ago. It's not that fast :)
- eyko 11y agoBeing able to control the evolution of your library is a big advantage (if you're invested in it).
- jonobr1 11y agoSome of my thinking behind rolling my own renderer: https://youtu.be/cOfEMWV_5Rc https://youtu.be/cOfEMWV_5Rc
- crazypyro 11y agoI really enjoyed this talk. Thanks.
- amirouche 11y agosnapsvg is svg only
- deleted 11y ago[deleted]
- smrtinsert 11y agoI was about to say it abstracts over canvas and svg with a uniform api, but it looks like fabric might do something similar?
- kodablah 11y agoAn 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/ https://ecomfe.github.io/zrender/
- dexwiz 11y agoI notice that this can render ThreeJS objects. Any reason to construct and object with ThreeJS and render it with Two?
- jonobr1 11y agoNo 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.html https://jonobr1.github.io/two.js/examples/three-extrusion.ht...
- Argentum01 11y agoPlayed around with this awhile back and I really like it. Great for quick art projects and the like: http://westleyargentum.github.io/monsters/ http://westleyargentum.github.io/monsters/
- jonobr1 11y agoAwesome monsters!
- Argentum01 11y agoThanks :)
- jchomali 11y agoThats awesome!
- gondo 11y agowhat is meant by "modern web browsers"?
- m3Lith 11y agoI guess it would be something along the lines of this quote from http://farukat.es/journal/2011/02/528-modern-browser 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."
- yellowapple 11y agoIn other words, "modern browsers" might as well be mythical creatures :)
- jonobr1 11y agoRoughly, self updating html5 compliant browser.
- yellowapple 11y agoWhy self-updating? Is my version of Firefox non-"modern" simply because I install and update it through my operating system's package management system?
- yoklov 11y agoIt is if you updated it recently.
- RobertKerans 11y agoIn 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
- smrtinsert 11y agoI 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.
- jonobr1 11y agoTextures 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 11y agoAwesome...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.
- jonobr1 11y agoUnfortunately, 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://patatap.com/ + http://anitype.com/ http://anitype.com/ + http://tether.plaid.co.uk/ http://tether.plaid.co.uk/ (broken, sorry!) + http://vr.chromeexperiments.com http://vr.chromeexperiments.com Interface stuff: + http://justareflektor.com/tech http://justareflektor.com/tech + https://dl.dropboxusercontent.com/u/1595444/experiments/animography/moshun/index.html 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 11y agoText 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 https://github.com/mattdesl/text-modules
- rjusher 11y agoWhat 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.
- morenoh149 11y agoit's for motion graphics. https://www.youtube.com/watch?v=2jTwX8jz-44 https://www.youtube.com/watch?v=2jTwX8jz-44
- andrewmcwatters 11y agoIt's for motion graphics, with no facilitation for motion graphics! Brilliant!
- deleted 11y ago[deleted]
- SomeCallMeTim 11y agoRenderer-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.
- zmmmmm 11y agoI 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.
- mintwurm 11y agoIs 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 11y agoMaybe the autor thinks it is complete. EDIT: Oh wait, is the author in this thread? He can answer that.
- jonobr1 11y agoIt 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.
- mintwurm 11y agoSounds good, but I just looked at the dev branch. One small commit from 15 july 2015. then nothing till december '14 . This project is absolutely dead
- jonobr1 11y agoPerhaps you're confusing dead and stable?
- mintwurm 11y agoOh and the commit from last Wednesday was three lines long
- ramblerman 11y agoplease stop trolling. I know you think you're on to something but you're really not.
- mintwurm 11y ago
- tlrobinson 11y agoInterestingly WebGL is way slower than SVG and Canvas in this case (Chrome, rMBP): https://jonobr1.github.io/two.js/examples/particle-sandbox.html?type=webgl&shapes=triangle,square,circle,pentagon,star&operations=translation,rotation,scale&count=200 https://jonobr1.github.io/two.js/examples/particle-sandbox.h...
- jonobr1 11y agoYes! 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 11y agoWhy 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)
- jonobr1 11y agoBecause 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..!
- victorhooi 11y agoBasic question - but when would you use this over d3.js?
- jarek-foksa 11y agoWhy Vector.isZero() is checking whether a vector length is smaller than 0.0001? Why this arbitrary number and not e.g. 0.00000001?
- matchu 11y agoDunno 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/ http://floating-point-gui.de/errors/comparison/
- jonobr1 11y agoYou're not the only one! The dev Branch has this fixed so you can pass your own epsilon.
- matchu 11y agoHooray! Thanks for pointing it out :)
- skwosh 11y agoWhile 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.
- roryokane 11y agoYou can interact with binary representations of numbers in JavaScript using typed arrays – https://developer.mozilla.org/en-US/docs/Web/JavaScript/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: new Uint8Array((new Float64Array([n])).buffer)
- amelius 11y agoI'm looking for a library that can create a calligraphic shape (path) from a stroke path.
- jacobolus 11y agoYou 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.
- amelius 11y agoYes, 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.
- bburky 11y agoI have this bookmarked for some reason, it may help: http://stackoverflow.com/questions/3205819/bezier-path-widening/3220819 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/jdk/openjdk/7-b147/sun/java2d/pisces/Stroker.java http://grepcode.com/file/repository.grepcode.com/java/root/j...
- amelius 11y agoThanks!
- billkozby083 11y agoI'm testing something...thanks
- dreamfactory2 11y agowhat are the major differences between this and paper.js?
- drumttocs8 11y agoHow would this compare to Famo.us?
- arocks 11y agoIs it possible to use this for creating videos with motion graphics? Even the possibility of a frame by frame render would be awesome.
- jonobr1 11y agoYes, 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&offset=1?list=users 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 http://anitype.com/entries
- stared 11y agoAs 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?)
- jonobr1 11y agoYou 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 http://patatap.com runs svg on iOS and canvas on Android. Two.js makes it simple to run either on the fly.
- chejazi 11y agoConsidering turning my text-logo into one of these!