Topic: Curves with JavaScript

I was looking at this tutorial ( http://couchfort.net/article/59/css-curves ) and thought that it might make things a little bit cleaner on the HTML dev if the actual effect was performed with javascript.

I have put together this little example http://www.codetown.org/examples/curvetest/

Let me know what you think.

Dan @ Code Town

I updated the code to work with a generic circle object.

Dan @ Code Town

that's pretty darn nice Dan!
Works perfect in Safari on OSX as well
/D

{cell 260} {Blog}
-{" Computer:
?As a Quantum Supercomputer I take advantage of Zeno?s paradox?
C: ?Imagine a photon that must travel from A to B. The photon travels half the distance to B. From its new location it travels half the new distance. And again, it travels half that new distance.?
C: ?It continually works to get to B but it never arrives.?
Human: ?So you keep getting closer to finishing your task but never actually do??
C: ?Hey, coders make a living doing that??
?}-

That is awesome. I am glad it is working on the mac.

I need to come up with a better function name and maybe a couple of wrappers to make some standard operations easier.

Dan @ Code Town

but it's really cool altogether, I agree with Dan. Smooth and good looking on my hi res monitor, Opera 9.

Sweet!
I wonder if complete circles could be done the same way. Floating positioning might get tricky if it's not 'docked' to a side...

/TwoD

You can only float an object right or left, so doing a full circle would not be possible with this method.

Dan @ Code Town

Honestly I can't think of many designs that require text wrapping. But I guess my vision is biased.

You could have a multi column layout with some "hole" between the columns around which the text will wrap. With a well thought design it would look really nice.

I have yet to come up with anywhere that I would want to use this, but it was a fun little test. I am sure that someone has some crazy idea in their head that would make use of something like this.

Dan @ Code Town

Actually, funny you mention this - I have been working on a music-themed site which uses a record as part of the interface (it's intentionally "metaphorical" and not very effective, but I wanted something a bit different.)

Anyway, I'm doing effectively the same thing, creating a number of float:left; clear:left; DIV elements which recreate a circular shape that text will flow around. The actual record image is absolutely-positioned, and the floated elements sit underneath.

It's for the site http://www.freshly-ground.com/ - but I haven't finished it yet.

(edit) Oh, what the hell - here's a preview URL. (From my crap cable connection at home, just FYI. ) - best viewed likely with Firefox.
ihatespam.dyndns.org/freshly-ground/

Resize the window (width-wise) to see how the text will wrap on the left.

(Edited by Scott on 06-20-2006 17:12)