Yay for yet another demo that strives to mix an mash almost everything HTML5 related! ShinyTouch in JS dumps the stuff from a <video> tag with ogg encoded video (well, almost all video from linux is ogg encoded so it’s just whatever format i got first from cheese). It gets dumped into <canvas> and getImageData does it’s magic.

Interestingly, if you don’t use the video and just do data from a raw image, you get upwards of 125fps on V8. Adding the video, it ceases to work on Chromium (maybe a linux thing? this tells me it’s just linux, but you can never be so sure).

//At this point, run away as the algorithm gets messy and hackish

So the thing just searches from right to left up to down within the quad. When it finds a column of something that fits the rgb range of the finger that is larger than a certain threshold, it checks for a reflection from the point. If it detects a reflection then yay! it throws the data at the perspective warper (based on a python one which is based on a C# one and though it would probably be easier to port from C# to JS making long chains of derivative work is fun). If there wasnt a reflection then it logs that and if that number is larger than some othe rthreshold then it kills the scanning and goes on with it’s life. The reflection algorithm just takes the point 5 pixels to the right and assumes that would be a reflection if there was one and a point 15px above and 5px to the left (nasty stuff) and takes the hue value from their RGB values. It takes the absolute value of the difference of the hue values multiplied by 100 (or 200 in the python version) and compares it with a preset configuration variable.

So now that that horrible algorithm which was just whatever came to my little totally untrained mind first. But it works semi-decently, at least for me. But you can hopefully see how nasty it’s inner workings are and it inspires people to clean it up. It’s quite a bit more readable than the Python version and only 200 lines of JS so it won’t be too hard to understand.

But since HTML5 has no Video capture thing for webcams, and my webcam doesn’t work with flash so I can’t use that canvas<-flash webcam bridge i built, uh, almost 2 years ago. So now you just get to gaze at my finger moving for like 20 seconds!

http://antimatter15.com/misc/shiny/shinytouch.html

I sorta expected it due to the new V8, Tracemonkey, Nitro, and SquirrelFish engines. But I’m thinking of making a port of ShinyTouch to JS and I was looking into what differences it might end up as.

I have to say I’m really quite suprised. It’s a simple piece of code:

setTimeout(function(){
    var start = (new Date).getTime();
    var n = 0;
    for(var i = 0; i < 10000000; i++){
        n += i;
    }
    var end = (new Date).getTime();
    alert(end-start);
},5000)

Just doing a loop a huge number of times and adding some numbers. But the unscientific results are quite amazing:

Python: 2640, 2110, 2000, 2190

Firefox 3.0 Spidermonkey: 777, 672, 685, 665

Firefox 3.5 TraceMonkey: 659, 365, 629, 629

Chromium Nightly: 146, 150, 147, 152

While these only test basic arithmetic and recursion, The browser is 15 times faster than Python, it just feels quite incredable.

The first one is shot from recordMyDesktop-gtk and the second one is from Cycorder on my iPhone.

So I tried to get svg-edit to work with svgweb’s flash shim (IE support). Sadly, it’s a total failure!

http://antimatter15.com/misc/svgweb-svgedit/svg-editor.html?svg.render.forceflash=true

I only got far enough to get drawing lines, paths, polygons and rectangles working. Ellipses and text do not work. Selecting a shape shows the tracker, but if you drag it then it just flies over to (0,0) and dies. Partly because I didn’t spend any more than an hour getting the port to work, but the issues I’ve encountered is that svgweb doesn’t implement shape.getBBox() (but it did provide shape._getX(), shape._getY(), shape._getWidth(), and shape._getHeight() so it wasn’t hard to implement that). Then was that since it’s using a flash shim, the events which they hook on the container with jQuery only show the evt.target as the <embed> which the flash resides in. But I got a strange hack where you have 2 copies of the event listeners and kill the selects from the jQuery one, but doing that makes unselecting impossible.

I don’t really care about VectorEditor, If someone finds it useful and wants to take over it, well, I’m not really updating it. Not many people are updating it, and once svgweb is mixed with svg-edit for 95% browser penetration and rotation works, it will be able to do everything VectorEditor does and more.

Sure it makes the project quite fragmented, a Richdraw version, an OnlyPaths version, a VectorEditor version, and now a svg-edit one. But each one will hopefully be mostly compatible with each other (mostlyish)

Shinytouch perspective transforms now work!

One big issue with ShinyTouch is that it didn’t transform points correctly, but now it has been totally resolved by stealing this (MIT licensed) from the linux (python!) port of Wiimote Whiteboard (Johnny lee’s famous work). Now it works totally insanely awesomely, no elitists necessary.

So I was watching Aza Raskin’s TechTalk on Jetpack, and I was thinking on how I would design an extension system. I would have to say to not have one, it’s just too complex, and why restrict the sound recording functionality to a taskbar. Even worse, why fragment the API and require someone to use Flash or <audio> in the page space and have a nice jetpack.future.import(“audio”) for a taskbar?

I think a good idea would to expose the power to web pages. The page could request special capabilities through a magical button dropdown or bouncy annoying notifier on a corner of the page saying permissions, populated by checkboxes of whatever features that the page wants to be able to use.

I think bookmarklets are almost perfect. Adding some more greasemonkey-like features would make it just about perfect. Scripts can run with the same permissions as the page, and the page’s permissions can be granted easily by the user (and the permissions persist through refreshes and browser restarts). Again, if functionality is not supported, things can gracefully degrade with partial functionality.

After that, is the idea of background tabs or alternatively, merging the statusbar type widgets into the tab bar. This is logical with everything merged into the page, and allows things to gracefully degrade if they don’t support the feature. You also get the benefits of being able to reorder remove, get info (which would be the contents of an extension page), etc. I think the interface for a plugin that operates in the background (like a gmail notifier) would be just a small tab that only has an icon, with special flag that makes it run on browser start (I think this could be one of the things for the permissions panel).

So one problem I see in the way Jetpack works, is that it doesn’t easily allow you to make a jetpack that hacks another running jetpack. Sure you can “fork” it, but that defeats the purpose of extensions, rather than having extensions only 1-level deep, make it work all the way down. The easy way I see is just to use the bookmarklet philosophy, and everything can mess around with anything within the page. So if you have a GMail notifier, that came out before the tab persist feature existed, you could just add a simple bookmarklet-type-greasemonkey thing that adds something to the permissions box that says “Persist Page” and then the user could check that in order to make a background GMail Notifier that runs on browser startup.

Malware is easy to fight now. Imagine if every application was forced to have a icon in the taskbar of windows at all times. Finding malware is as easy as looking for things you dont want running and closing it. And if some tab-bar autohide is to be implemented on the system, only people who are quite experienced would use 10+ extension/notifier pages and it would still be easier to recognize than finding some other strange wcultns.exe or whatever when half of the system things look like that.

With these features, Browser as an OS would really make sense. I wouldn’t be suprised if Google Chrome OS implements some stuff that are similar to what I’ve listed here.

With my super awesome PHP->JS compiler that I made for Freemovie/JS, I ported GIFEncoder (the second of 2 parts of the Ajax Animator which requires a server). So with this I’m really going to be “building on the shoulder’s of giants”, since all these individual components were made by other people, I’m just mixing them up in a somewhat creative manner.

Though since Glif only supports monochrome, and I’m not aware of any browser supporting canvas.toDataURL(“image/gif”).

So after this awesome experimentation and my system for merging multiple GIF images into a single animated gif which is yet to be tested for reasons I will detail later.

So I made it and it was cool, and then I added webworkers support, but then I realized the issue isn’t that you need webworkers, but that there was an infinite loop. Fixed it and then it works fine except for the fact that it doesn’t.

So if you want to rip it’s insides apart and try salvaging the disaster, go to http://antimatter15.com/misc/canvasfail/giftest.htm

I’m making a crude python script that translates PHP to JS rather hideously. It probably will not work on any other codebase. It was a script quickly hacked together to one purpose.

Freemovie is

FreeMovie is an SWF generator library written in PHP and ported to Ruby. FreeMovie can be used to develop Web and desktop aplications. Speaking of the Ruby port, I can’t find it. So if anyone finds it, I think it might be useful somewhere. Found it in the CVS, it’s really incomplete compared to the PHP version.

The machine translated code (Not entirely autogenerated, I wrote a line or two of it) is not too hideous, the tabbing is slightly off, but it’s at least mostly readable. It was a lot worse 2 hours ago (half of the lines had indentation, other without any, debugging comments everywhere saying useless and distracting things).

The translator is only 107 lines of (hideous code, though the language is beautiful, I guess if you loved JS enough, you could try running the program though skulpt) python (+ 20 or so in another file to change chr() to String.fromCharCode, etc). After that, it uses 6 PHP compatibility functions and 5 from the PHP.js project to cover the features that I’m too lazy to put in the compiler or are just not features in JS.

http://antimatter15.com/misc/freemovie/js/demo/fm-demo-0.htm

The above demo generates a flash image entirely client-side, though the resulting base64 encoded data is sent to be decoded on the server since you can’t load a SWF from a data-url. If someone finds out how, it would be cool to tell me.

A big issue though, is that for some odd reason half the shapes don’t work. The ones in the demo work, but all filled shapes, and the circles/arcs do not work.

I was working on a new little Wave State API update. It supports lists in the form of subkeys, and something very much like hierarchy and events on specific sub-nodes. This way you don’t have everything update (someone’s edits on frame 36 doesn’t matter if you’re on frame 42).

Everything is namespaced under a singleton global, wave2. It includes functions like

• listen (execute a callback when something beginning with the prefix is changed)
• ignore (un-listen),
• keys (shortcut for wave.getState().getKeys()),
• subkeys (get keys which begin with a certain prefix, important to the pseudo hierarchy),
• set (submitdelta with first arg as name and second as value),
• get (shortcut for wave.getState().get()
• reset_gadget (a simple way to empty all the data in the store) And since it’s quite short, I’m putting it under public domain at http://antimatter15.com/misc/wave/wave2.js

It’s certainly hit a milestone with the current set of modifications, IMO, it’s now, finally, after 3 years of development (Actually, nothing happened the past year), what I had envisioned. The first parts of my April 7th, 2007 post on Liveswiffers.org.

I am working on a project to make an open-source browser based Flash Authoring system.

….. The idea is to make an animation on the site, save to the site’s server, and continue working on it later. Later being able to publish it and be sort of a YouTube for Flash Animations/Applications. Another aim of this project is to be next-gen software, sure there are about 10 open source multiplatform C++ based flash IDEs out there, but none of them truely [sic] represend [sic] the future of software, or true platform independence. Another interesting fact is that I didn’t know what YouTube was until Google bought it. But with the idea for a “YouTube for animations”, is totally possible with the new infrastructure provided by Google Wave. People can mark their waves containing the gadget as with:public, and people could search, comment, and improve animations (Though I was thinking initially on a more opensource software-like fork system, than a wiki type system which Wave is, and I’m not certain how this will work out with in the evils called the “real world” since now, Wave is still just a theory).

What has it done which makes me think it’s reached this milestone? Well, finally, I can make stick figures and animate them as they were meant to be animated. Having multiple layers with visibility now works, and now it supports most of the beloved and mostly efficient workflow of the Flash IDE - or at least to a beginner like I was, and still am.

New feature, only available at this random fork of the codebase as of yet.

Visible/Not Visible

Since Silk doesn’t have an icon for eye_closed.png, everyone has to suffer by seeing my artwork! muah ha ha ha….

The name field will be replaced with buttons, and zoom may or may not be scrapped. Since gadgets only take up a fraction of the page (usually) it’s designed with size in mind, which may help on other space-constrained devices like netbooks.

It may have a cool feature like VectorEditor’s demo where you can draw off the canvas area.

As for why the tabs are now on top and the timeline is on the bottom, there’s no reason, I just think that that layout is more aesthetic.

And I might name it something other than the ajax animator, something just like Animator or something

I’m going to soon upload the first update to the Ajax Animator in over a year. It is basically VectorEditor integration, and is not an actual update, but a fork of the project.

Ideally VectorEditor (as a far simpler and smaller project), is more stable and the Recovery systems which are quite prominent in the v0.20.x. So the recovery mechanisms are not implemented.

Feature wise, the version has very few new features. It has a few new features like fill opacity and line opacity, and showing multiple layers. But apart from that, there is almost nothing.

It is not format compatible with r13 (v0.20.x) of the format, so importing from those will not work.

IM STILL WAITING TO GET MY ACCOUNT BUT I JUST GOT AN INVITE AND IM SOOO HAPPY!!!!!!!!!!! SEE? LOOK I’M USING CAPS LOCK TO EXPRESS MY HAPPYNESS! IT’S REALLY REALLY REALLY AWESOME EVEN THOUGH I HAVENT ACTUALLY TRIED IT OUT YET! BUT ITS SOOOO COOL! AND LETS BE HONEST, AT LEAST THIS POST ISNT IN COMIC SANS MS.

EDIT: i got my wave account. It’s cool, but there’s nobody to talk to.

So I don’t actually have wave yet, but for all 2 of you (likely less) who have used pygowave, an open source third party implementation of the wave protocol. So there was how I developed it, I read through the APIs and tested on pygowave. So what does VectorEditor do that svg-edit and… erm… svg-edit don’t do?

First, VectorEditor for wave is really really real time. Waaay more real time than svg-edit (not really). But VectorEdit (VectorWave might be a nice name.. I’m going to try using that name from now on in this post) transmits the data such as even while the shape is still being drawn, rotated, or moved (rotation needs work). Another nice feature is that the transitions are animated so things are even more seamless.

Another important feature is shape locking. So when someone selects a shape, it gets locked and can’t be edited by anyone else. If anyone tries, an alert box appears saying “Shape shape:5sdfwef98dfe3ssdf is locked by user antimatter15@pygowave.p2k-network.org”. svg-edit (the latter) doesn’t support moving things after they’re created so it doesn’t really matter then, and I’m quite certain the former doesn’t do any type of locking.

And lets not forget the likely most important, yet totally untested feature that seperates VectorEditor from the rest: IE support, which is inherent since it uses Raphael for rendering, but it may not be necessary since google may be making some shim-type system of hacking svg awesomeness onto IE and making the whole VectorEditor project useless.

So if you want to try it out, go to pygowave, sign up, create a wave and add the

Edit: This post is mostly crap. I figured out how to solve my problems while writing this. But I’m posting it anyway because I feel obligated to spam the internet with my outdated thoughts

One of the main features of Google Wave is the ability to do live concurrent realtime editing. Sadly, this functionality isn’t easy or as far as I know even possible on Google Wave. Most of the time it doesn’t matter. The only time it would matter is if you are using live concurrent text editing within the gadget. Of course, that’s what I tried doing and that’s why i’m writing this blog post. So I still haven’t gotten my Google Wave Invite yet (hope soon!) so I’m experimenting with the pygowave project, which is a third party open source implementation of the Wave Protocol. The interface is missing something that is quite important to wave: multi-user text editing. So I decided to try implementing it as a Wave Gadget.

I really did understimate it’s complexity. While implementing isn’t usually too hard, the structure of the Wave Gadget API makes it more difficult than it could/should be. What the wave gadget API does is it has a real time updating key-value table. It’s quite flexible and useable most of the time, but for real time editing, not quite as useful as when something is changed.

For instance, if 2 people are editing the same thing, then whoever submits the data last is the one which wrote the data and the first person’s edits are ignored. Very rarely do 2 people need to edit the exact same thing. But when they do, it’s not easy to merge the things. A more chat-like system could work.

But while implementing that chat-type system on top of Wave is possible, it feels very inefficent, partly due to everything being cached at all states (to support Playback) and worry about something akin to garbage collection to delete things after everyone has patched their running copy.

During the last two days I worked a bit on my cross platform, Raphael based vector graphics editor. It now supports Firefox, Opera, Chrome, probably Safari and magically, something called IE. Yes, it works on that nasty terror. Really, the project started with just the idea of being able to support IE. Sure it has a few neat features (multiple select mainly), but the fundamental idea is to support IE and to do so in a stable manner. It’s actually running quite well in IE, though only the latest version has been tested.

Among the updates is a new delete tool that is far more flexible and powerful. It is now not just a button but an entire tool. So while you can still click on it to delete your current selection, you can also use the tool to click on shapes or drag and delete whole groups (not sure what that thing is called). It even has a nice red tint to signify deleting. There is also event listening, vX support (it only uses events and position), and selecting fill, stroke, stroke opacity, fill opacity, and stroke width.

It also integrates well into the Ajax Animator in an almost drop-in replacement type. Maybe eventually something to choose between VectorEditor and Onlypaths. The really only bug features there are multiple select and drag and line editing.

Lines are now done almost perfectly. Dragging them works perfectly and it shows two little boxes on the ends that fan be dragged to edit. This vastly simplifies the old issues with lines and stick figures. Stick figures that inherently satisfy me a lot because that was the highes level of animation I ever did.

It’s probably a bad thing that the developer od an animation application never did anything more complex than stick figures, and probably makes it seem strange for me to even start it. But anyone with more knowledge of animation would not be so naiive as to attempt this.

http://jsvectoreditor.googlecode.com/svn/trunk/index.html

The idea of a Web Browser as the OS is nothing new, and most people know it. As for current things, they’re basically very restricted normal operating systems. Google wouldn’t do something like that without tons of innovation and killer features.

I’ve been watching some google techtalks in the past few days, and I think it was interesting how the one on Wuala (a distributed filesystem) was started with the google guy saying “this talk is being recorded so please refrain from mentioning any google sensitive information in your questions”. While it may be referring to the Google File System, I don’t think it’s too similar to Wuala. So I think the idea of cloud storage distributed among peers is an attractive idea since what would you actually use the hard disk which most netbooks do have, and keeping all your data locally doesn’t really contribute to the whole idea to cloud computing.

So even though the algorithms that transform the calibration box aren’t working accurately yet, TUIO support has been made, so you can use apps like TUIO Mouse to control your computer and other touch demo things.

This is the app running, notice that it’s not yet been calibrated yet.

Here is the auto-calibration process, it alternates between black and white

This is part of Auto-Calibration.

This is some stuff from the command line:

This is just hovering over the screen, notice it’s not touching, and the algorithm can distinctly recognize the lack of a touch because the reflection is seperated from the finger by a significant gap. (Compare the top red bar).

This is a actual touch, you can see that the red bar is far larger, and it’s very distinctly a touch event.

There’s a draw tool and, here is a primitive drawing of a smiley. The dots come from an issue with PIL/OpenCV or something that makes the image all chopped up and sends the point to an arbitary point on the screen.

This is the magical sensor the whole thing is powered by: An unmodified Playstation 3 Eye on a tissue box with a pink Office Depot eraser on the back (because the camera is made tilted and the script can’t handle those tilts very well)

It’s not too insanely slow either. This is 31 frames per second coming from a pure python app, all from a scripting language. It is nowhere as fast as the normal fast native apps.