Spiral comic engine

Discuss the future, present and past of sequential art.

Moderator: Moderators

ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Spiral comic engine

Post by ShadowCaster »

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
User avatar
Greg Stephens
Forum Founder
Posts: 3862
Joined: Sat Apr 14, 2001 7:00 pm
Location: Los Angeles, California, USA
Contact:

Post by Greg Stephens »

How does one read/navigate it?
Good morning! That's a nice tnetennba.
Eric F Myers
Understands reinventing
Posts: 352
Joined: Fri Oct 03, 2003 1:17 pm
Location: Chicago
Contact:

Post by Eric F Myers »

Fascinating. I would like to see it in action. Can you make a sample page with some generic images to show us?
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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 :oops: 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
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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
Image
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
Frequent Poster
Posts: 74
Joined: Sun Dec 15, 2002 11:52 am
Location: Toronto, Canada
Contact:

Post by BuckBeaver »

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.
Check out my NEW blog - PuppetVision
Retro-style puppet film and video goodness, delivered fresh to your computer each day!
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

Here's a screenshot of the faster but with aliassed images applet.
Plese tell me what you think.
Image
BuckBeaver
Frequent Poster
Posts: 74
Joined: Sun Dec 15, 2002 11:52 am
Location: Toronto, Canada
Contact:

Post by BuckBeaver »

That actually doesn't look too bad. Is the demo you're doing stable/functioning at this point?
Check out my NEW blog - PuppetVision
Retro-style puppet film and video goodness, delivered fresh to your computer each day!
User avatar
Greg Stephens
Forum Founder
Posts: 3862
Joined: Sat Apr 14, 2001 7:00 pm
Location: Los Angeles, California, USA
Contact:

Post by Greg Stephens »

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.
Good morning! That's a nice tnetennba.
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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
Understands reinventing
Posts: 352
Joined: Fri Oct 03, 2003 1:17 pm
Location: Chicago
Contact:

Post by Eric F Myers »

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
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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 :wink: ).

Nice song, I think I'm gonna create a "Groovy java" ID for the dev forums I post on.
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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 ?
User avatar
Greg Stephens
Forum Founder
Posts: 3862
Joined: Sat Apr 14, 2001 7:00 pm
Location: Los Angeles, California, USA
Contact:

Post by Greg Stephens »

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.
Good morning! That's a nice tnetennba.
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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
Reinvents understanding
Posts: 635
Joined: Fri Apr 12, 2002 4:47 pm
Location: The Riptania Sky-Palace in da beauuuuuutiful Bronx.
Contact:

Post by Rip Tanion »

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. :evil:

Anyway, I thought the applet was pretty cool; though I must admit, I got a little dizzy afterwards.
"Park the beers, and grab the smiles. It's flight time." - LtCdr. J. Robert "Bobby" Stone, USN (R.I.P.)
Tim Tylor
Consistant Poster
Posts: 168
Joined: Mon Aug 18, 2003 5:24 pm
Location: Cornwall, Great Britain

Post by Tim Tylor »

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
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

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
Consistant Poster
Posts: 168
Joined: Mon Aug 18, 2003 5:24 pm
Location: Cornwall, Great Britain

Post by Tim Tylor »

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
Reinvents understanding
Posts: 635
Joined: Fri Apr 12, 2002 4:47 pm
Location: The Riptania Sky-Palace in da beauuuuuutiful Bronx.
Contact:

Post by Rip Tanion »

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. :D
"Park the beers, and grab the smiles. It's flight time." - LtCdr. J. Robert "Bobby" Stone, USN (R.I.P.)
ShadowCaster
Frequent Poster
Posts: 93
Joined: Tue Sep 23, 2003 10:07 am
Location: France

Post by ShadowCaster »

OK, Rip, now I get it why you got dizzy :wink:
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
Consistant Poster
Posts: 168
Joined: Mon Aug 18, 2003 5:24 pm
Location: Cornwall, Great Britain

Post by Tim Tylor »

ShadowCaster wrote:OK, Rip, now I get it why you got dizzy :wink:
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.
Locked