

Show HN: Radi, my HTML5 content creation app (Mac) - pavlov
http://radiapp.com

======
pavlov
Radi is a side project of mine that has kept me occupied for the better part
of 2010. I'm very happy to finally have it in a half-presentable state, just
in time for 2011! What's that they say about the first release -- "if you're
not embarrassed, you waited too long?" Well, this is that one for me :)

It's scary to put this app out there to the whole world in its current
condition, but I feel like I've reached a dead-end.

There are too many directions in which this app could be developed. I need to
cut down on the abstract ambition and start focusing on some real-world use
cases.

For that, I desperately need your help! What's your biggest need in the world
of HTML5 content creation? Do you see a path for this app to be developed into
the tool that would fit your needs?

Thanks for any input, and (slightly prematurely) a great 2011 for everyone on
HN! I appreciate this community enormously.

\--

A few words about the technical details of this app...

Although the app targets HTML publishing, the compositing core doesn't
actually use any kind of browser engine like WebKit. Instead, it's a node-
based GPU-accelerated compositing system of my own devising. Layers and
effects are rendered using OpenGL.

Because there's no browser engine, there's also no browser-style DOM available
in Radi. I've written private implementations of the relevant JavaScript APIs,
primarily Canvas. The JavaScript engine used is WebKit's JavaScriptCore,
a.k.a. Nitro in its current accelerated incarnation.

The app is native Cocoa, but it's written in a way that's fairly portable.
(From my other projects I already have a large part of the core ported to
Windows+Direct3D.)

~~~
charlesdm
Looks awesome. Whats your email?

~~~
raghus
<http://awurl.com/IbOmC46sP>

~~~
charlesdm
Ah, didn't see that. Thanks

------
robterrell
First of all, when they come and offer you a pile of money (and they will),
please insist on a clause that they release it. Someone may try to bury it.

Anyway, I had fun playing with it. The timeline gives me happy/terrifying
Director/Flash flashbacks. I can't figure out how to make an animation cycle
in the timeline (i.e. like a walk animation) without cheating & creating
keyframes by moving stuff to a slightly different (x,y).

I also couldn't figure out how to script top-level elements (does everything
need to be composited inside a cavas?). I added a number of "picture layer"
objects that I wanted to move via keyboard control. I couldn't figure out how
to put a script in the topmost layer to do this (nor could I see how to
reference the sub-layers so that I could move them). I might have been fooling
myself -- it looks so much like Flash or Director, that I expected to be able
to write a top-level script that controls all of the sub-elements. If that's
not possible due to the overall layer architecture, you should make that clear
(by making the other scripting opportunities explicit when available).

A few quick suggestions:

\- The "command line" input in the script editor is a great idea, like the
"message window" of HyperCard or FaceSpan. I think you'd do well to make it
its own window, and have the last result displayed underneath the input area
(ala FaceSpan) so I don't have to wrap everything in sys.trace.

\- Positioning elements via arrow keystrokes doesn't seem to work -- please
implement bindings similar to Interface Builder (or FaceSpan) where modifier
do useful things like snap to grid and stretch.

\- JavaScript API reference menu item doesn't seem to work. I found it
eventually (<http://lacquer.fi/developer/conduit-js/#sys> in case anyone else
has the same problem).

Overall, it looks great. I can't wait to hard to believe you kept it quiet
long enough to do all of this. Congratulations!

~~~
pavlov
Thanks so much for the insightful comments!

I know what you mean by the happy/terrifying timeline :) I thought hard
whether it would be misleading to make the timeline look so similar,
especially when it doesn't have the same functionality at this point, and the
quirkiness of Flash keyframing has been such a source of frustration to users.
But I decided that the big elements need to have a certain familiarity in
order to make the app's purpose more obvious at a glance. (I guess it would be
the same if I was making a photo editor: there are some UI conventions that
are clearly outdated but people expect them from years of Photoshopping.)

There is a document-level scripting environment, but it's not exposed to
layers yet -- the JavaScript hooks to the compositing system don't exist yet,
and the UI to tie it together with the timeline has not been designed. The way
Flash implemented this is clearly pretty nasty, so I'd like to come up with
something a bit cleaner, hopefully.

Re: the script editor command line -- it does print out eval results without
wrapping them in sys.trace (so if you type "2+3" or "Object.keys(sys)", you
get the expected printout -- unless of course I've broken that at some point
without noticing). But clearly that UI leaves a lot to be desired. I'd like to
do something about those floating panels anyway, so maybe I'll get to redesign
the script editor at that point.

------
davidu
Congratulations, you are about to be offered a lot of money from a big
company.

Do you take it? ... Or do you create a new software empire for the creative
web development world to rival Adobe but built on open standards?

~~~
davidu
PS, If I was Apple I'd be buying this tomorrow, or I'd just amp up development
of my own software, probably basing it on the new iAd Developer tools which
were recently released.

------
snprbob86
Very cool! Nice job.

I noticed this: "Radi makes creating vector graphics easier with its unique
autosmoothed shapes. When you apply smoothing to a corner point, all your
control points lie precisely on the shape's outline. There are no separate
"handles" or "tangent points" to be tweaked outside of the actual shape."

Just wanted to point out that, to me, that sounds like an anti-feature. Maybe
it's a nice alternative tool for quick, smooth shapes, but I've watched many
an illustrator tweak the hell out of those things to get exactly the right
curves and sharp angels. I also remember reading a story about how Microsoft
spent _weeks_ observing video of expert Adobe suite users with various Pen-
tools to get the feel of the handles juuust right for an easy transition to
Expression suite products.

This is a cool side project and letting HN hammer on it is a great start, but
you're going to need some artists to hammer on it before you've got something
really special.

~~~
pavlov
_Just wanted to point out that, to me, that sounds like an anti-feature. Maybe
it's a nice alternative tool for quick, smooth shapes, but I've watched many
an illustrator tweak the hell out of those things to get exactly the right
curves and sharp angles._

Right. I know that illustrators love their Bézier handles, but I'm not 100%
convinced that everybody else loves them all that much. I used to do graphics
for a living, and I never felt very comfortable with Béziers (although that
was also because my style was pretty much opposite to sharp vector designs).

The Radi curve engine does support Béziers, but implementing the UI for
managing the control points seemed like a complete drag (what a terrible pun).

So I figured that maybe I should try doing what Apple does so well: market the
"anti-feature" as something new and unique. No handles -> less UI complexity
-> ??? -> profit!

I was also inspired by 3D modelling applications, where a lot of work is done
with subdivision surfaces which are controlled by automatic control points,
essentially similar to the curves in Radi. I know there was an older
generation of modelling apps with free-floating handles, and I get the
impression that modellers are happy to be rid of those (but maybe I'm wrong
about this one).

------
barredo
I guess we have here the Adobe Flash Studio for HTML5. Nice job!

------
Samuel_Michon
This is the best Festivus present ever!

~~~
Groxx
It's a Festivus miracle!

------
warrenwilkinson
I hadn't seen this before, but on your main site, because you start talking
about HTML5 so early (and the first headline says HTML5), I thought the site
was a tutorial about the benefits of HTML5.

In my opinion I think you should reorder your site so that the first headline
and blurb explain that Radi is a Mac Application for producting HTML5
compatible vector animations. The stuff about HTML5 can probably be below the
fold.

------
Corrado
Can it consume external data sources easily? At my company we have an XML RSS
feed that I would like to transform into some sort of infographic display
(dynamic bar charts, moving pie charts, tables, etc.)

Currently, we are solving this problem with a mish-mash of Ruby/Sinatra and
jQuery/Raphaël but its not clean or easy. Would this be something that Radi
could help us build and maintain?

~~~
pavlov
That sounds like a very reasonable avenue to explore.

I've done a fair amount of work with dataflow UIs in the past, and it sounds
like this could be an opportunity to leverage that work. To illustrate, here's
a sample screenshot from my other product, Conduit Live (a video compositing
app):

    
    
      http://lacquer.fi/images/cl2_screenshot_drowned_3.jpg
    

This kind of "connect-the-blocks" interface could work for describing the data
loads and transformations in your use case. What do you think?

~~~
tluyben2
That looks like something that could work. Inspiration for that of course also
from Yahoo Pipes which is made for services processing ; you can probably
integrate a similar idea to create graphical representations of (processed)
services. However, that would make it quite a different app and out-of-scope
from what you are doing at the moment.

------
Pewpewarrows
Very nice work! I've been wondering when someone would decide to go head-to-
head with Adobe in the new world of HTML5 while they're still dragging their
feet.

I'd especially love to see this ported to Linux. Also, is there a place where
we can donate? I don't exactly have $200 to throw down on your other piece of
software, and I don't own any iOS devices for your $1 app.

------
elvirs
I wish all browsers become CSS3 and HTML5 compliant overnight. That would make
the web a way better place.

~~~
WiseWeasel
Until then, all we can do to move that process along is to code spiffy sites
that take advantage of CSS3 and HTML5 goodness, but degrade to a plain-but-
usable version on inferior browsers, with a notification that they're missing
out on an optimal experience by using that lousy browser.

------
chewymetal
I've been trying to asses the look of the sites I go to lately (mostly clean
and simple ones). I like what you've done. Clean with just a touch of depth. I
haven't consumed the content yet, but it looks tasty. I'm looking forward to
trying the beta.

------
pavlov
Just a quick note that I made an update to version 0.5.1:

<http://radiapp.com/news>

Thank you all so much for the encouraging comments!

------
xpaulbettsx
Someone's finalizing the huge potential in tooling for HTML5, good work.

------
euccastro
Great, now make the app itself in HTML5. ;)

~~~
splatcollision
That's what i'm working on...

------
tomdeal
thats really amazing!

