Spiral comic engine

ShadowCaster · Post by **ShadowCaster** » Mon Jun 14, 2004 11:38 am

Hi all, I'm currently developping a java engine to view a serie of images with the same height (but not necessarily the same width) as a spiral.
The applet will be easy to use : just specify image urls, window size, rotating direction and zoom level. the interface is just a left/right key to go to next/previeus pannel. The current pannel change will be (once I optimize my code) a smooth rotation of the spiral until the pannel is centered and rainbow oriented. I'd like to know if cartoonists are interessed and if there are improvement suggestions.

Here's a screen shot (75 KB) :
http://happylandmaps.free.fr/png/spiral.png

Post by **Greg Stephens** » Mon Jun 14, 2004 11:49 am

How does one read/navigate it?

Eric F Myers · Post by **Eric F Myers** » Mon Jun 14, 2004 12:10 pm

Fascinating. I would like to see it in action. Can you make a sample page with some generic images to show us?

ShadowCaster · Post by **ShadowCaster** » Mon Jun 14, 2004 2:35 pm

How does one read/navigate it?

In the example, we are at the center of the spiral and the story is read clockwise and from inside to ouside (the opposite (clockwise from outside to inside) is also possible).
To go to next pannel, you just press the right arrow key, and the center of the viewed area follows the spiral path and stops on the center of the next pannel. at any given time, up is towards the exterior of the spiral and down towards the center.
If you want to return to previous pannel, you press left key.

I know that makes the reading completely linear, I'd be glad to hear suggestions for changing that. Remember that the original data for the spiral is just a giant strip ( I'm using Scott's 52 pannels carl story as input data for the engine making a 5 pannel radius spiral) , so it's not easy to know what panel will be over what panel. I could implement that when you click on a pannel, you either scroll linerily to that pannel, or you spiral to it, but in both cases, it doesn't make much sense as a reading interface.

efm :
So far I get 2-3 images per minute

as rendering speed (computing integrals for every single pixel for correct anti-aliassing) but I'm working on it. Would a Pannel1-Pannel2-Pannel3-Pannel4 serie be acceptable as sample page ? Do you think Scott will mind that I'm twisting his carl and put it online ? Anyone having a free coloured comic with pannels of small height but a long story for me to test if rendering is OK with colors ? (B&W seems OK)

ShadowCaster · Post by **ShadowCaster** » Wed Jun 16, 2004 6:49 am

Decent speed has been achieved by completely removing anti-aliassing computations (the result is UGLY but it's probably sufficient as rendering method when rotating. I still need to optimize the original pixel color function)
Currently trying different interface ideas like this mini map

that I'm not satisfied with becase it's both too small to be read and too big on the viewing area.
And clicking on to to directly go to that point in the spiral also doesn't make much sense. PLEASE HELP WITH INTERFACE IDEAS.

BuckBeaver · Post by **BuckBeaver** » Wed Jun 16, 2004 11:09 am

What about vector-based images? Would that help?

I'm not that well-versed in java programming so I'm not completely aware of all the advantages/disadvantages of working with it, but I am wondering if something like this could be better achived in flash or shockwave. Just a thought.

ShadowCaster · Post by **ShadowCaster** » Wed Jun 16, 2004 12:14 pm

Vector data seemed nice at first because it can easely and losslessly be zoomed and rotated. The problem is that you can't express the transformation of a rectangle to a spiral as a combination of classic transformation matrix.
So you have to generate a polygon for each pixel and apply rotation an zooming to the gigantic generated polygon set. Both flash and svg failed to deal with the 600288 polygons I asked for the carl spiral. I replaced the polygons in SVG by paths, factorising every pixel of the same color in the same path. The result is a 10 Megabytes SVGz file that I strongly advice against opening. Curiosity killed the cat, the web browser, and possibly the OS. Don't say I didn't warn you : http://happylandmaps.free.fr/svg/

ShadowCaster · Post by **ShadowCaster** » Mon Jun 21, 2004 11:38 am

Here's a screenshot of the faster but with aliassed images applet.
Plese tell me what you think.

BuckBeaver · Post by **BuckBeaver** » Mon Jun 21, 2004 2:51 pm

That actually doesn't look too bad. Is the demo you're doing stable/functioning at this point?

Post by **Greg Stephens** » Mon Jun 21, 2004 4:02 pm

Yes, it looks pretty good. You mentioned back in your first post that a zoom level is supported (or will be). Is this something the author defines or can the reader zoom as well? Ideally, I'd think, the author could define a zoom level for specific panels and the reader could manipulate that on the fly. I'd suggest something like the + and - keys could control that.

ShadowCaster · Post by **ShadowCaster** » Tue Jun 22, 2004 4:03 am

stable/functioning at this point

with the resolution and image quality you see in the screenshot, I get one frame every 2 seconds on my 3 years old computer. I think I still can get 30% speed with mor optimization without reducing image quality any more.
I'm glad you find the current rendering acceptable.
Since it's too slow on my computer, I havent' implemented delays yet, meaning that on fast computers it may rotate too fast and you'll get the feeling that you just jumped to the next pannel. So it's stable but not yet finished. Another important functionnality that I haven't started to implement yet is the possibility to read the comic before every pannel is loaded. Huge spirals won't be possible otherwise, I think it's the main limitation of the otherwise great tarkin engine.

The current method to compute pixel colors is to pick the color of the nerest corresponding pixel in the strip made with the images. The screenshot is at zooming value 2 (fixed as a parameter in the HTML so far but zooming doesn't change the computation time with the aliassed method so I definatly will add it to the interface (Thank you Greg, I had discarded the idea because it was too computationnaly costly with the antialiassed version and forgot to reconsider it after changing the rendering method). Maybe a zoom_max / zoom_min / zoom_step / zoom_default HTML parameters to deal with that would be nice instead of the current zoom_factor.
Going under that zoom level 2 makes the rendering hideous because you lose pixels : some pixels of the original strip are not nearest corresponding and do not show, but in fact where essential to the picture.
This is especially true with black pixels that compose letters and that are surrounded by white pixels. With continuous tone images like jpg, zoom factors around 1 should render OK.

As for zooming levels per pannel, it's also a nice idea, but I need a coherent parameter system to deal with it.

I could do :
Panel001 => image1.gif
Zoom001 => 2.5
Pannel002 => image2.jpg
Zoom002 => 0.3
Pannel003 => another.png
Pannel004 => image4.png
Zoom004 => 3

and the zooming would follow, going From 2.5 to 0.3 as the spiral rotates form first pannel to second
The zoom factor would stay at 0.3 when rotation from pannel 2 to pannel 3.

The problem is it's not coherent wih the zoom_max / zoom_min / zoom_step / zoom_default I suggested before for specifying reader's zooming freedom. Any suggestions for a web-designer friendly set of parameters to specify both aspects of zooming ?

Oh, I was also thinking that maybe I could allow image stretching, image stacking with png, gap specifications and logical reading stop points that would be independant from image files (concatenating images can allow compression algorithms to use redundancy between pannels). While all of these are not too hard to implement, the main problem if implementing them all would be a very complicated parameter syntax. For example, with the carl spiral, instead of just specifying file names for the 52 pannels, you would also have to specify the Z index of pannels and their position and stretching in the strip.
This is mainly an interface issue, please tell me how you would like to be able to specify these. (I'm not going to make a GUI, I'm talking about textual parameters in the HTML source)

Eric F Myers · Post by **Eric F Myers** » Wed Jun 23, 2004 12:53 am

I understand that all of the images will have to be the same height, but will they have to be the same width too? Could you have longer panels in the middle of the string?

On another note, here's a song that I had forgotten about. It fits in nicely with this thread.

[quote="<a href="http://www.tmbg.com" target=blank>They Might Be Giants</a>
<a href="http://lyrics.duble.com/T/theymightbegi ... lyrics.htm" target=blank>The Spiraling Shape</a>
from the the album <a href="http://www.amazon.com/exec/obidos/tg/de ... c&n=507846" target=blank>Factory Showroom</a>
"]Fogging the view, cupping face to the window
In darkness you make out a spiralling shape
Putting all reason aside you exchange
What you got for a thing that's hypnotic and strange

The spiralling shape will make you go insane
(Everyone wants to see that groovy thing)
But everyone wants to see that groovy thing
(Everyone wants to see that thing)

And nobody knows what it's really like
But everyone says it's great
And they heard it from the spiral in their eyes[/quote]

ShadowCaster · Post by **ShadowCaster** » Wed Jun 23, 2004 2:50 am

efm wrote:I understand that all of the images will have to be the same height, but will they have to be the same width too?

No, different width images are supported from the start : so far, each image is considered a pannel and a stop point is added in the spiral at each middle of each image, whatever the pannels width is.
Longer pannels are OK but should not be put too near from the center of the spiral or some part of it will have to be read up side down (I consider making readers turn their screens a bad idea but wont dissallow pannels to be bigger than half a turn; talented crazy artists may use it to great effect

).

Nice song, I think I'm gonna create a "Groovy java" ID for the dev forums I post on.

ShadowCaster · Post by **ShadowCaster** » Thu Jun 24, 2004 10:46 am

I'm thinking about a way to specify everything previously discussed : the program could have as parameter only the adress of an XML file describing the strip in a simplified HTML style. What do you think of it ?

Post by **Greg Stephens** » Thu Jun 24, 2004 12:37 pm

I think that's a good idea.

One thing I noticed, which I hadn't really paid attention to before. The spiral has a definite center because each spiral is exactly the same height as the previous one. This is what makes the images near the center of the spiral work better when they're narrower. Now I realize that this suggestion may be out of the question because it would probably mean an entire redesign, but it's something you may wish to keep in mind for version 2.0:

I'm thinking that you may wish to make it so that the spirals actually become prepotionately narrower, so that the user interface has to zoom in as it goes around the spiral. The viewing area would always be the same size, but the images back up the spiral would be zoomed larger and the pictures down the spiral would be zoomed smaller. This would enable a theoretically infinite spiral and you wouldn't have the problem you mentioned where images closer to the center of the spiral are more curved, since every image would be curved to the same degree.

As I said, maybe too much for this version of the application, but I didn't notice the difference in how I thought it was working and how it really was working until you pointed it out.

ShadowCaster · Post by **ShadowCaster** » Thu Jun 24, 2004 1:17 pm

OK, XML it will be.

As for V2.0 spiral, I'm not even sure a spiral with all the properties of our dreams exists.
Spirals with each turn being a zoom of the previous turn can be made, but they also have a fixed centre.
Fractal spirals also exists, but I'm afraid they will impose too much distortions to the images because of the difference of height between the left and the right of the panel. I'll investigate anyway. Another problem is that if the spiral is really isomorphic, you'll lose the feeling it's turning, instead you'll get the feeling to see a scrolling of logical pixels organized in a spiral form. But if that's really what we want, then the rendering can be speeded up like crazy: first compute the first image and keep the pixel indexes, and then simple pixel index shifting.

Btw, I decided to spend two hours on Monday, Wednesday and Friday developing comic engines. After the spiral (s?) I plan to make an interface to read comics on volumes with each panel a face of the volume. Any idea about reading interface and designer's interface (especially with non rectangular panels)?

ShadowCaster · Post by **ShadowCaster** » Fri Jun 25, 2004 8:03 am

I'd like to know what people think about the applet so here's a demo (every parameter hardcoded except applet's size) :

http://happylandmaps.free.fr/comic_engi ... plet1.html

The applet can stay with a grey screen quite a long time depending on your conncetion since it has to load a 96KB image before starting.
The interface is the last I tried and didn't like : click on the left half of the viewing area to decrease the rotating angle step (it can make the rotation go backward) or on the right hand half to increase the rotating step.

This page is giving me new ideas.
http://mathworld.wolfram.com/Whirl.html

Rip Tanion · Post by **Rip Tanion** » Fri Jun 25, 2004 1:49 pm

Hey, Shadow...

I went to your page using IE6, and the applet never got started past the green box. There was a dot in the center (about 1 pixel in size) but nothing happened. However, I decided to open it up in Netscape 7, next, and it worked fine. So obviously, there an issue here with Explorer. Thanks again, Bill Gates.

Anyway, I thought the applet was pretty cool; though I must admit, I got a little dizzy afterwards.

Tim Tylor · Post by **Tim Tylor** » Sat Jun 26, 2004 6:38 am

I'm finding it working okay in IE6, but I've got the Java 2 platform, which I think might be a separate plug-in.

ShadowCaster · Post by **ShadowCaster** » Mon Jun 28, 2004 2:08 am

This is frustrating : I put an effort in using only the oldest objects to be compatible with the oldest java Virtual Machines.
What I overlooked is that while the Image object exists since the very beginning of Java, it's support for the png format is a recent addition. What I'll have to add in the code is a check of the VM, and if it's too old and the download of a png is needed, a bigger gif replacement will be downloaded instead.
Here's a link to exactly the same applet, but downloading a gif instead of a png (it's been ages since I last optimized a gif,... yuck)
http://happylandmaps.free.fr/comic_engi ... plet1.html

Please tell me if it works OK, and if not please open the java console and tell me what errors are shown there.

To Greg : I think I've found a spiral equation that fullfils your requirement. I'm working on it today's two hours (1 left actually).

To Tim Tylor : I think it's the interface of the demo that is responsible of the dizzyness, with interfaces that respect stops at each pannels it's much more bearable. Maybe it also was because of the rotating speed : I haven't added speed control yet, so it turns as fast as your computer can generate frames.

[EDIT] Time's up, gotta work. Screen shot of second type spiral on Wensday.

Tim Tylor · Post by **Tim Tylor** » Mon Jun 28, 2004 8:31 am

ShadowCaster wrote: Here's a link to exactly the same applet, but downloading a gif instead of a png (it's been ages since I last optimized a gif,... yuck)
http://happylandmaps.free.fr/comic_engi ... plet1.html

That makes a difference.

I forgot to mention I'd also tried out the applet on my old machine, running Internet Explorer 5 on Windows 95. It was getting the green-box-and-dot, but the new gif-version works okay on it. (It was Rip who got dizzy, not me.)

Rip Tanion · Post by **Rip Tanion** » Mon Jun 28, 2004 3:39 pm

OK, this new applet with the GIF works in my IE browser. Everytime I click on the it, it spins faster, and faster, and I get dizzier and dizzier. Weeeeeeeeee!!!. Hey, it's cheaper than an amusment park ride.

ShadowCaster · Post by **ShadowCaster** » Tue Jun 29, 2004 5:33 am

OK, Rip, now I get it why you got dizzy

I'd like to now what functionnality I should work on tomorrow (choose one in the list) and the days after :

1 fractal spiral
2 zooming interface with + - keys
3 make the spiral readable before all images are fully downloaded
4 XML spiral format specifications.

And what others you want.

[EDIT]

I just had an idea : the fractal spiral does not have to end : I could program it so that the images passed as parameters form an infinite rectangle : for example, with a 10 images passed as parameter (0 1 2 3 4 5 6 7 8 9), the infinite rectangle would be ... 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9...
It would be infinite in both direction so you could endlessly zoom to the center of the spiral and reread the same sequence without reaching an end, but also unzoom as far as you want towards the exterior of the spiral without reaching a beginning. If you manage to create a circular coherent story, it could be a great interface to read it.
I'd be honoured it to serve for "I like the neverending comic cheese whatever" improv and could put an effort in finishing this part of the engine quickly if Scott where interessed.

I don't know the local etiquette in adressing him, do you think I should ask in the Morning Improv board, e-mail him or just let things as is and wait for an eventual response ?

Tim Tylor · Post by **Tim Tylor** » Tue Jun 29, 2004 9:10 am

ShadowCaster wrote:OK, Rip, now I get it why you got dizzy
I'd like to now what functionnality I should work on tomorrow (choose one in the list) and the days after :

1 fractal spiral
2 zooming interface with + - keys
3 make the spiral readable before all images are fully downloaded
4 XML spiral format specifications.

And what others you want.

The fractal idea sounds the best single development to me.