Flash v HTML… v QC(wtf is QC?!)

usefuldesign.au's picture

Man the "Potentially-related content" Div is like riding a bucking bronco — dudes it's a tough way to make a post on Kineme these days.

So this guy is comparing the Battery life on his MacBookPro (or MacBook) running a flash version of a web page and a HTML5 version showing same (invasive ad like) stuff. Movie, spinning cube with alpha some moving text.

I thought it would be fun and a good way to promote QC to do a QC version. One a point to point match and another version that really puts QC through it's passes, may with some input sliders like that guy at quartz compositions has done with a few of the demo comps.

Page that needs matching: http://stuff.vandervossen.net/temporary/ad/html5.html

Resources: http://stuff.vandervossen.net/temporary/ad/

Drop a line if you want to help!

usefuldesign.au's picture
Re: Flash v HTML… v QC(wtf is QC?!)

Here's a start.

The text on the cube needs correcting for aspect ratio. I had to import all the text because it's a non-stock-OSX font and will not be on host machines.

@font-face only exists on the web not for QC as far as I know and even if there was a QC plugin, it would be non-stock so not good for web browsers.

The shadow on big text should be done inside QC as it has bumped up the PDF by 440KB.

PreviewAttachmentSize
QC ugly ad.qtz569.66 KB
#F1-6s.pdf521.32 KB
#F1-6s copy.ai_.zip300.48 KB
Screengrab.png
Screengrab.png176.88 KB

smokris's picture
Re: Potentially-related content

usefuldesign.au wrote:
Man the "Potentially-related content" Div is like riding a bucking bronco — dudes it's a tough way to make a post on Kineme these days.

Crap, sorry about that --- not sure how it ended up above the title field, and why it won't go back down below the title field.

I moved it to the sidebar. Is that tolerable and/or useful now?

gtoledo3's picture
Re: Flash v HTML… v QC(wtf is QC?!)

Some thoughts.

Do you think that the fact that the text shadow bumped up the PDF by however much deserves for it to be done in QC? That might (I don't know) result in worse battery life/performance. Maybe the image could just be compressed? No criticism, I just find it interesting, because I try to keep QC from generating stuff as much as possible when I'm trying to make things run smoothly.

If you have to render a shadow, you're probably getting the image, doing something with the color, blurring, cropping, rendering to another destination, or compositing.... stuff like the Circle patch in SL does it, and it works ok, but if you don't ever need to change parameters on the fly, I tend to think it's better done with prepared art. Maybe there's some really clever edge filter that can make it happen cheaply though(?).

I've done a number of stabs at converting routines from other things into QC. Sort of disappointingly, people pretty much never care! Maybe it's hard for people to get very excited about more academic principles, or displays of fundamental concepts.

In my observation (and own life I guess), it seems like what triggers the most interest in QC, and any tech (I was thinking about this when Vade was lamenting a bunch of possible "me too" kinect stuff"), is that it comes down to experiencing something and the sheer entertainment value you derive from it; art value. The tech aspects are always cool, but people have seen rotating cubes up the yin yang. I have a gut feeling that seeing very substantial things done with QC and visual programming, is what will open up the design community to the possibilities of it. The thought of that is what opened me up to it, so I'm going by my own frame of reference.

Granted, demos, and the illustration that you can solve a problem with a given tech are valid and necessary, but it usually draws way more interest if someone just sees something really cool and complete, as art in and of itself, without there being tech-nerd factor as associated with it. Then they inevitably go "what was this done with" if they like it. At that point, they're hooked... maybe.

I haven't thought of this in forever, but I think the first time I saw QC, I was thinking of it in terms of Cycling 74, and then - maybe oddly - Reason. The unfortunate thing is that we only have the "back of the rack" to look at :)

I'm interested in this... maybe I'll make a stab at it. I feel so burnt on this type of thing after putting together the button stuff, some slider stuff I didn't publish, etc.

What started getting to me is the totally crappy way that SL handles window focus. At first, it was mildly annoying, now I realize that it totally screwed QC for doing GUI, in many ways.

If you've touched something, and it's waiting on another click in the viewer area, you go and touch another window, and come back without touching the title bar of the QC app and thing most likely won't work correctly. Totally irritating. So, something that does a switch on/off function needs for a person to actually bring "focus" back to the app if they've done something to break it, before they do the second part of the switch event.

I think multitouch might be able to overcome that, but I'm not 100% sure, and it certainly sucks to have to result to a patch to get mouse events to keep forwarding.

PreviewAttachmentSize
interface-04.jpg
interface-04.jpg13.62 KB

psonice's picture
Re: Flash v HTML… v QC(wtf is QC?!)

Yep, pre-calculate as much as possible. The only stuff that should run in realtime, is the stuff that absolutely must.

That said, if you make a drop shadow in QC under the text, unless you're animating it somehow QC does a good job of detecting that it's not animated and therefore not animating it. So after the first frame when it renders the shadow, it would cost no more than loading an image.

Considering that you'd have to load the image from disk or over the network, the battery life hit might be zero if you draw the shadows in QC. Compared to loading from disk / over the network, it would be much faster too. Thinking about it, I'd say rendering in QC would be the best option :)

Re. the general concept of comparing html5/flash/qc - does qc actually fit into that at all? Html5 + flash are used for rendering stuff in a web browser. QC is supported by only one browser on one OS for this, and only in a fairly crippled (hello safe mode) way at that. Regardless of battery life benefits, it's not going to compete.

(And on the subject of these "html5" demos, is it actually using html5 or just css3 like 90% of the other html5 demos? :D)

vade's picture
Re: Flash v HTML… v QC(wtf is QC?!)

This is totally correct. QC is smart enough to know to do oneshot rendering when the provider has no new content. This is because QC renderers (consumers) when asked to render, run up the processing chain and ask everyone in between to do work, if their values have been updated, etc. If the text has not changed, it will not output a new image, thus the shadow mechanism will not need to re-render, and thus output the same image it has cached, and so on and so forth.

Go into debug mode and watch the patch execution.

usefuldesign.au's picture
Re: Flash v HTML… v QC(wtf is QC?!)

As cybero and vade have said, the shadow only has to get made once. If you look at the HTML5 page there is pause between the movie loading and the animation beginning while the code executes for the first time.

I'm uncomfortable that I had to use another application (Illustrator) to get this done. I converted font based text to outlines (gambling it would reduce PDF size but it remains to be tested). Better option would be to use a regular text editor, output to PDF and then post-process in QC.

I couldn't see any objects when I opened up the font SVG fill on that link. SVG and illustrator aren't to good yet but I'm on CS4 so maybe it's improved.

Yes a grayscale jpeg compression would be pretty small (PDF has jpeg compression already) but I'm looking for a clean workflow as much as small download size. If QC could embed a font that would be the best bet.

In fact QC's text handling is pretty friging woeful for a tool that people like cwright maintain is not just a programmers tool (ie. those people who can use Quartz framework for drawing and text). I noticed that NI plugins for text make it passable but they're not stock and should be a bare minimum. Part of this exercises is about showing where QC falls over as a content delivery/graphic design tool.

The problem with the depth map stuff, gt was not that it was me-too as that it was me-thinks-it's-me-too-when-it-really-isn't-at-all-the-same. I thought your sarcastic tweets about Kinect were way out of character and off the mark too. Maybe you've be hating M$ too long ;-)

I left it for others more informed than me to explain it, but it was obvious right off you didn't have even ball-park-concept-close to what Kinect is doing. I still think it's cool you tried though, that's what it's all about, man!

usefuldesign.au's picture
Re: Flash v HTML… v QC(wtf is QC?!)

gtoledo3 wrote:
Granted, demos, and the illustration that you can solve a problem with a given tech are valid and necessary, but it usually draws way more interest if someone just sees something really cool and complete, as art in and of itself, without there being tech-nerd factor as associated with it. Then they inevitably go "what was this done with" if they like it. At that point, they're hooked... maybe.

The point is we can't ask for QC or QClite to be implemented on iOS without pushing a little with what can be done now already. We can't say oh Apple build a QC to HTML5 framework cross-compiler or Apple put QC binary support into web-kit without pushing the limits of what is already possible. That way we demonstrate the advantages and limitations (the obvious one being platform lock-down)

I think the step following optimisation of this comp is to show how QC loaded into a web page can trounce anything HTML5 or Flash can do in the animation department with an advanced version of this file.

I understand your pessimism but I don't want to be catching it!

gtoledo3's picture
Re: Flash v HTML… v QC(wtf is QC?!)

I'm certainly not arguing against cybero or vade's point; there isn't going to be constant evaluation if input ports don't change.

At the same time, image-> renderer is less nodes than image to processing to renderer or multiple renderers, and takes less time to initially evaluate, though it may be slight. If I want to port the routine to something else later, great, because I already have my art prepared. I certainly use the filters all the time though (obviously).

I feel like the file size is a red herring since QC is loading stuff from frameworks when you do it with the built in patches - so yeah, the qtz file size is smaller, but it doesn't mean that stuff is less intensive.

Also, sometimes ports that shouldn't evaluate do inside of iterators. I remember something here where someone used the Circle macro from SL inside of an iterator and it was just crawling, and I'm pretty sure all that was being iterated was the x/y stuff. I may be remembering that wrong... I just remember swapping out a circular image quickly that looked basically like what the user had done, and seeing it speed along. Circle with drop shadow, without the drop shadow being ever changed; not so great.

I guess it's a philosophy thing... to me, less patches, less CI - which can look different from machine to machine - seems better. I respect the alternate take, and indeed, stuff is optimized to not evaluate really well in some cases. I have some drawing and slider setups that amazingly never even seem to generate fps, or must for such little time that they never register.

My initial tweet about the microsoft stuff was kind of jaded because I've seen stuff like this for years now, and saw the primesense ref design about two years ago. At first, I was nonplussed because I thought this was a hokey variant. Yeah, I did have a complete ballpark of what it was doing, I thought it was just taking a cop-out, less than stellar approach. Now I see that it can deliver some nice results, so I stand corrected. I whipped myself two times on that thread already, in case you didn't notice!

Also... I've setup interactive 3D gaming where you walk up to a wall and fight with a character years ago via polarized technique. I don't know... I guess I'm jaded, and at first it was like "big deal", because I thought the hardware didn't look like it was giving high quality results.

If anyone thinks I don't understand the concepts going on with 3D, a big "whatever" to them. BTW, depth channel can be derived from color channels if the resolution is high and the cameras are well calibrated. The computation can be done quickly. If someone had IR, this could theoretically be done on the gpu quickly and add resolution, and one could have a custom setup that was more versatile.

It's somewhat "in character" for me to be ambivalent about a near-ir and one sensor boxed up. I guess I'm the kind of person that makes kit gear and whatnot, so I'm like... cool, this shows me that I can probably make a custom thing that's really slick. Then I think, maybe I can send out different IR patterns and start layering stuff.

I have a long standing knee-jerk reaction against gear lust. A flaw? Probably so, but it's led me down the path of innovation quite a few times.

I guess I'm also semi-ambivalent as well because this is more of a democratization of tech that has been around forever and a day. I'm happy that it's a low cost entry point, but I'm not convinced about it enabling tons of inherently new ideas, just allowing there to be much more of it.

gtoledo3's picture
Re: Flash v HTML… v QC(wtf is QC?!)

Oh no, I'm not pessimistic. Like I said above, demos and illustration that you can solve a problem with a given tech are valid and necessary. on the rest of your points, maybe so. I'd like to see how the battery life works out for sure.

usefuldesign.au's picture
Re: Potentially-related content

Yeah good, neat idea Steve. The word "Video" still sends it apoplectic but that's probably a good indicator one needs to be more specific.

"Video" & "HTML5" actually had zero suggestions which means it's doing it's job as far as cross filtering goes.

usefuldesign.au's picture
Re: Flash v HTML… v QC(wtf is QC?!)

gtoledo3 wrote:
At the same time, image-> renderer is less nodes than image to processing to renderer or multiple renderers, and takes less time to initially evaluate, though it may be slight. If I want to port the routine to something else later, great, because I already have my art prepared. I certainly use the filters all the time though (obviously).

It's more futzing if you just want to edit the text. Like I said earlier I prefer the text-editor.app —> Print to PDF —Import Image (KinemePDF style PDF importer maintaining an active link an definable resolution would be better as a Stock Patch).

gtoledo3 wrote:
I feel like the file size is a red herring since QC is loading stuff from frameworks when you do it with the built in patches - so yeah, the qtz file size is smaller, but it doesn't mean that stuff is less intensive.

This is an internet solution, therefore file size matters. Frameworks load from HD, file loads for the interweb and for most people that's slower. Also unnecessary bandwidth bloat is just bad for the internet.[/quote]

gtoledo3 wrote:
I have a long standing knee-jerk reaction against gear lust. A flaw? Probably so, but it's led me down the path of innovation quite a few times.
You own more gear than most, gt! I agree though, use what you have it's the punk DIY way.

gtoledo3 wrote:
I guess I'm also semi-ambivalent as well because this is more of a democratization of tech that has been around forever and a day. I'm happy that it's a low cost entry point, but I'm not convinced about it enabling tons of inherently new ideas, just allowing there to be much more of it.

Yeah it is democratisation, but is that bad in this case? I never picked you for an uptown snob (joking!!)

psonice's picture
Re: Flash v HTML… v QC(wtf is QC?!)

gtoledo3 wrote:
If anyone thinks I don't understand the concepts going on with 3D, a big "whatever" to them. BTW, depth channel can be derived from color channels if the resolution is high and the cameras are well calibrated. The computation can be done quickly. If someone had IR, this could theoretically be done on the gpu quickly and add resolution, and one could have a custom setup that was more versatile.

Yeah, but the camera based solution is really crappy in practice. Either crappy, or very slow and still inaccurate. Using IR wouldn't help much too - you'll get the same resolution, but lose the colours (which help separate objects, which helps with accuracy).

The problem with it is you need contrast for it to have something to match and determine depth from, so if you have a smooth area with little contrast you get no depth map for this area. That means either having big holes in your depth map, or using some method of hole filling - which on a GPU is generally quite slow and complex!

Some examples of where it fails:

  • Hold a flat piece of paper in front of the camera, and try to find out how far away it is. Both cameras are going to see white over a large area, and get zero depth information.

  • Wear clothes with a thin stripe or other close repeating pattern. You'll get false pattern matches all over the place and the depth map will be an utter mess.

  • Where a grey shirt, infront of a dimly lit white background some distance behind you. The colours end up blending together, and you become part of the wall.

Now consider that the kinnect method will work in all of these cases, and it'll work with at least 10x the accuracy your dual-cam setup can manage, and with minimal performance impact. It'll do that for the cost of two decent cameras. It has no significant setup time. It's even motorised (try getting your two separate cameras motorised but still accurately aligned ;)

You can now get all excited about the kinnect like the rest of us ;)

psonice's picture
Re: Flash v HTML… v QC(wtf is QC?!)

There's a ton more limitations. Try adding a text box in the QC version where you can enter your name. Then try sending that info to a webserver. Or storing it locally so it's available next time the page opens. These are trivial with html or flash.

Apart from that, do we REALLY want another proprietary plugin on the web? The wonderful thing about html5/css3 for me is mostly the fact that I can now live without any plugins. That means no endless security updates, no endless worrying about 0day vulnerabilities, and no endless crashing when trying to just watch a video. In all honesty I'd rather have html5 with worse performance and battery life than lots of sites using QC (especially as I know I can easily trash the GPU driver with a bit of QC magic, leaving the computer thoroughly broken until it's rebooted - and I suspect the security issues would be equally nasty!)

That said, I'm still interested to see the battery life comparison :)

usefuldesign.au's picture
Re: Flash v HTML… v QC(wtf is QC?!)

My interest is primarily to push QC for the sake of extending QCs stock abilities and possibly extending its scope in terms of a Visual Programming environment. One that can make either stand alone interactive apps — a GPU savy Hypercard for the 21st century or a mini-app visual programming layer (think VB, no don't) that can sit between existing apps (eg. inserted into Keynote slides or over chapters) and the user.

Keynote and QC are so close to making a compelling presentation/prototyping environment its not funny. As I said to Troy on the list, they wanna stop just dating and move in together. I could release a bunch of really cool effects and transitions for keynote as .qtz files if only KN enabled proper QC magic and QC in turn could do with some better UI and text handling elements. We may see some KN news soon, who knows?

As for your comments regarding QC and www I'm in general agreement, being Mac only affair it's not going anywhere soon in that regard anyhoe.

Advanced HTML5/css3 (ie. animation) is a fair bit more learning curve than simple QC which can achieve same I'd suggest. Perhaps QC5 has a HTML5 exporter, yeah dreaming I know…

psonice's picture
Re: Flash v HTML… v QC(wtf is QC?!)

Yeah, decent html5/css3 authoring tools are definitely needed. I read somewhere adobe is working on this already, I'm sure others are doing the same. I mean hey, we could do all this stuff we do with QC using just openGL and xcode, but would you want to?

gtoledo3's picture
Re: Flash v HTML… v QC(wtf is QC?!)

"especially as I know I can easily trash the GPU driver with a bit of QC magic, leaving the computer thoroughly broken until it's rebooted "

Ah, you noted that too! Yep. It's 100% true.

gtoledo3's picture
Re: Flash v HTML… v QC(wtf is QC?!)

This will probably look familiar, re: flash and node based...

http://sourcebinder.org/

It's an alpha thing, and you can only play with the compositions if you don't have an account. I asked for an account a few months ago, didn't hear anything.

usefuldesign.au's picture
Re: Flash v HTML… v QC(wtf is QC?!)

Adobe has a already given an alpha product demo online, I think they're calling it Max it's been a few weeks since it watched it. I think I recall an Adobe fan boy said it's confusing because the Adobe use the name Max for the developer mag/rss and Roadshow events.

I wish there were more major players in the Graphic Design content creation than just Adobe. Macromedia buy out wasn't so great for the market place, despite the synergistic benefits.

I think the main reason Adobe did buy Macromedia was to own Flash and thereby have (monopolise) a media/creation space all to them selves, oh the irony… bless your timing, sjobs. Also I think they formally announced Flash is getting an HTML5 export.

Mike Swanston wrote an Illustrator plugin that produces HTML5 animation code too.

cybero's picture
Re: Flash v HTML… v QC(wtf is QC?!)

Well and truly droll •~

Nice catch on the AI to HTML 5 plugin.

What of the rumours regarding Microsoft buying up Adobe?

That seems especially ironic as MS ditches Silverlight for all but Windows Phone 7.

usefuldesign.au's picture
Re: Flash v HTML… v QC(wtf is QC?!)

cybero wrote:
Well and truly droll •~
Thanks, I think?!
cybero wrote:
What of the rumours regarding Microsoft buying up Adobe?

Glad you asked. I don't have a blog but have been itching to express my opinions on this!

Stage managed Sabre rattling. If M$ was genuinely considering a buyout the last thing they'd do is alert the markets to that fact, not least because Apple could counter offer shareholders, win the day and then scotch Premier, role AE into Motion etc etc.

End result: Adobes share price went up a bit, not sure if it stayed there. However next time Adobe makes a soft-power-announcement-to-make the-CP-of-China-proud, those who were dumb enough to be scared might think twice.

Easier still they'd have a good case for blocking the buy-out suing with anti-competitive laws (but I know nothing about that stuff just guessing the case would be there in black and white)

Adobe seems to be having something of an identity crisis at the exec management level. They swing from testing running lets abuse Apple via an employee's 'unsanctioned' blog and vailed threats of formalising the MS partnership while at same time running an "We ♥ Apple" campaign of passive aggressive responses to Apple's "business decision", as they call it. Like which one adobe, take the R out of ♥ and you get hate. The problem for Adobe is their staff for the most part (educated guessing here) thought the iPhone was the future — big time — when it was released and wanted to be a Player, then their Apple-neglect and bloatware chickens came home to roost. It's all good and the Flash developers will all go quietly when they get an export to HTML5 and possibly an iPhone app cross-compiler.

Mean time, all the press this stoush is generating is making a lots of orgs with big web presences side step Flash, they might not understand any of the issues but they do get that Flash content is not displayed on iOS and so are voting with their feet. I read a recruitment ad for a large developer of Hotel web-sites for some big name and lots of smaller hotel chains that basically said Flash is a no go for them now and are porting all content to entirely HTML/CSS/JS, commonly (and mistakenly) referred to as HTML5. Plus this via John Gruber.

So Adobe is a) enamoured of the iOS devices;

b) sees Flash as a middle-ware replacement for iOS as a developers environment allowing Adobe a piece of the action (even though Flash costs a lot more than a years iOS dev licence but there's lots of Action scripters out there). But Apple doesn't so… :/

c) is having one of it flagship monopolising ("open") technologies white-anted not just because Apple wont support Flash on iOS devices (what phones do support flash?), but by fighting with Apple in public everybody in "I just want a cool website" land is taking note and many are giving Flash the old heave-ho. That's a bit jiu-jitsu isn't it, you have to hand it to Apple so far they're taking it on points.

If Adobe's recent Apple related PR was a person we'd be recommending he take some time off and get some counselling from a trained professional, preferably a good one witha background in communications and relationship therapy!