Creating a coverflow effect in Squeak

> Andy,
>
> AB> (not a very good description, but if you have seen iTunes, you
> AB> know what I mean).
> never seen but:
>
> AB> I had a look in Squeaksource but found nothing similar.
> AB> Could anyone give me some pointers on how to start this project.
> AB> For example, is there a 'film strip' morph that already handles
> AB> lists of images or something similar?
>
> this looks like classic animation (search the swiki for animation)
> which is one of the built in features of every morph.
>
> In general you would need a path which the Morph will follow and you
> would have to modify the step method of a Morph to follow that path.
>
> And your Morph would have to return something smaller than the default
> 1000ms when sent stepTime.
>
> Something to play (I just did it the first time myself :-)) using
> 3.8.2
>
> Something to play:
>
> World menu, objects, drag out an Ellipse into the centre of your
> screen.
>
> Open the halo, open an Inspector on the ellipse.
>
> In the Inspector type "self definePath" (without "") and doIt.
>
> With a pressed mouse button (left on Windows) move around the screen
> until Squeak croaks and the cursor changes back.
>
> Then bring up the Halo again, the red one has "Extras" there "follow
> existing path". I just noticed that in Extras you also find "draw new
> path"
>
> If you have a Menu open (Extras for example), middle click twice on
> the the interesting entry, bring up an Inspector and look into the
> target (self) and the selector (#definePath) and the arguments (if
> any).
>
> Oh and not to forget, there are tutorials on how to provide different
> pictures while a Morph follows an animation. I remember seeing an
> Etoys project where a worm creeps using this technique.
>
> After you know all this I guess you will just provide your own
> animation methods and paths.

>
> On 14.06.2008, at 09:19, Herbert König wrote:
>
>> Andy,
>>
>> AB> (not a very good description, but if you have seen iTunes, you
>> AB> know what I mean).
>> never seen but:
>>
>> AB> I had a look in Squeaksource but found nothing similar.
>> AB> Could anyone give me some pointers on how to start this project.
>> AB> For example, is there a 'film strip' morph that already handles
>> AB> lists of images or something similar?
>>
>> this looks like classic animation (search the swiki for animation)
>> which is one of the built in features of every morph.
>>
>> In general you would need a path which the Morph will follow and you
>> would have to modify the step method of a Morph to follow that path.
>>
>> And your Morph would have to return something smaller than the default
>> 1000ms when sent stepTime.
>>
>> Something to play (I just did it the first time myself :-)) using
>> 3.8.2
>>
>> Something to play:
>>
>> World menu, objects, drag out an Ellipse into the centre of your
>> screen.
>>
>> Open the halo, open an Inspector on the ellipse.
>>
>> In the Inspector type "self definePath" (without "") and doIt.
>>
>> With a pressed mouse button (left on Windows) move around the screen
>> until Squeak croaks and the cursor changes back.
>>
>> Then bring up the Halo again, the red one has "Extras" there "follow
>> existing path". I just noticed that in Extras you also find "draw new
>> path"
>>
>> If you have a Menu open (Extras for example), middle click twice on
>> the the interesting entry, bring up an Inspector and look into the
>> target (self) and the selector (#definePath) and the arguments (if
>> any).
>>
>> Oh and not to forget, there are tutorials on how to provide different
>> pictures while a Morph follows an animation. I remember seeing an
>> Etoys project where a worm creeps using this technique.
>>
>> After you know all this I guess you will just provide your own
>> animation methods and paths.
>
> Sorry to jump in again, nothing personal, really ;)
>
> The path methods are a beautifully simple and useful, but they are
> also a particularly bad example of Morphic programming.
>
> You may notice how the entire World stops while you define a path
> (have a clock morph running to see this). Also it uses Sensor
> directly, and calls displayWorld. Both big no-nos in proper Morphic
> programs. The followPath method even does the actual animation in a
> background thread. Really Bad Things can happen if you do that.
>
> Tweak did set out to allow this kind of programming (because it is so
> convenient), and it succeeded in that.
>
> For the original question - if you want the actual cover flow effect
> you need a 3D renderer. You could use Croquet and OpenGL for that, but
> it might be overkill. The Balloon3D render should be enough for this
> simple type of animating.
>
> If you can live with a pseudo-3D effect (like the carousel seen on the
> amazon.com frontpage) you can use simple 2D morphic animation of
> course. In that effect, the covers always remain parallel to the
> screen but only move position in a 3D circle so that they become
> smaller in the back and larger in the front, and of course are sorted
> back-to-front ...
>
> In fact, that is so simple I couldn't resist to make an etoy version,
> 4 lines of code :)
>
> Uploaded as
>    
>     http://wiki.squeak.org/squeak/uploads/Carousel.pr
>
> - Bert -

> Bert Freudenberg wrote:
>>
>> On 14.06.2008, at 09:19, Herbert König wrote:
>>
>>> Andy,
>>>
>>> AB> (not a very good description, but if you have seen iTunes, you
>>> AB> know what I mean).
>>> never seen but:
>>>
>>> AB> I had a look in Squeaksource but found nothing similar.
>>> AB> Could anyone give me some pointers on how to start this project.
>>> AB> For example, is there a 'film strip' morph that already handles
>>> AB> lists of images or something similar?
>>>
>>> this looks like classic animation (search the swiki for animation)
>>> which is one of the built in features of every morph.
>>>
>>> In general you would need a path which the Morph will follow and you
>>> would have to modify the step method of a Morph to follow that path.
>>>
>>> And your Morph would have to return something smaller than the  
>>> default
>>> 1000ms when sent stepTime.
>>>
>>> Something to play (I just did it the first time myself :-)) using
>>> 3.8.2
>>>
>>> Something to play:
>>>
>>> World menu, objects, drag out an Ellipse into the centre of your
>>> screen.
>>>
>>> Open the halo, open an Inspector on the ellipse.
>>>
>>> In the Inspector type "self definePath" (without "") and doIt.
>>>
>>> With a pressed mouse button (left on Windows) move around the screen
>>> until Squeak croaks and the cursor changes back.
>>>
>>> Then bring up the Halo again, the red one has "Extras" there "follow
>>> existing path". I just noticed that in Extras you also find "draw  
>>> new
>>> path"
>>>
>>> If you have a Menu open (Extras for example), middle click twice on
>>> the the interesting entry, bring up an Inspector and look into the
>>> target (self) and the selector (#definePath) and the arguments (if
>>> any).
>>>
>>> Oh and not to forget, there are tutorials on how to provide  
>>> different
>>> pictures while a Morph follows an animation. I remember seeing an
>>> Etoys project where a worm creeps using this technique.
>>>
>>> After you know all this I guess you will just provide your own
>>> animation methods and paths.
>>
>> Sorry to jump in again, nothing personal, really ;)
>>
>> The path methods are a beautifully simple and useful, but they are  
>> also a particularly bad example of Morphic programming.
>>
>> You may notice how the entire World stops while you define a path  
>> (have a clock morph running to see this). Also it uses Sensor  
>> directly, and calls displayWorld. Both big no-nos in proper Morphic  
>> programs. The followPath method even does the actual animation in a  
>> background thread. Really Bad Things can happen if you do that.
>>
>> Tweak did set out to allow this kind of programming (because it is  
>> so convenient), and it succeeded in that.
>>
>> For the original question - if you want the actual cover flow  
>> effect you need a 3D renderer. You could use Croquet and OpenGL for  
>> that, but it might be overkill. The Balloon3D render should be  
>> enough for this simple type of animating.
>>
>> If you can live with a pseudo-3D effect (like the carousel seen on  
>> the amazon.com frontpage) you can use simple 2D morphic animation  
>> of course. In that effect, the covers always remain parallel to the  
>> screen but only move position in a 3D circle so that they become  
>> smaller in the back and larger in the front, and of course are  
>> sorted back-to-front ...
>>
>> In fact, that is so simple I couldn't resist to make an etoy  
>> version, 4 lines of code :)
>>
>> Uploaded as
>>        http://wiki.squeak.org/squeak/uploads/Carousel.pr
>>
>> - Bert -
> Cool, you can even edit the text in the morphs as they move :-)

>
> You may notice how the entire World stops while you define a path  
> (have a clock morph running to see this). Also it uses Sensor  
> directly, and calls displayWorld. Both big no-nos in proper Morphic  
> programs. The followPath method even does the actual animation in a  
> background thread. Really Bad Things can happen if you do that.
>
> Tweak did set out to allow this kind of programming (because it is so  
> convenient), and it succeeded in that.
>
> For the original question - if you want the actual cover flow effect  
> you need a 3D renderer. You could use Croquet and OpenGL for that, but  
> it might be overkill. The Balloon3D render should be enough for this  
> simple type of animating.
>
> If you can live with a pseudo-3D effect (like the carousel seen on the  
> amazon.com frontpage) you can use simple 2D morphic animation of  
> course. In that effect, the covers always remain parallel to the  
> screen but only move position in a 3D circle so that they become  
> smaller in the back and larger in the front, and of course are sorted  
> back-to-front ...
>
> In fact, that is so simple I couldn't resist to make an etoy version,  
> 4 lines of code :)
>
> Uploaded as
>
> http://wiki.squeak.org/squeak/uploads/Carousel.pr
>
> - Bert -
>
> _______________________________________________
> Beginners mailing list
> [hidden email]
> http://lists.squeakfoundation.org/mailman/listinfo/beginners

> On Sat, 2008-06-14 at 13:43 +0200, Bert Freudenberg wrote:
> ....
>>
>> The path methods are a beautifully simple and useful, but they are
>> also a particularly bad example of Morphic programming.
> Does this mean that they could be done properly in Morphic?  In other
> words, is the problem here with Morphic, or with this particular
> approach?
>
> Or maybe it's just very difficult to do properly in Morphic?

> I was intrigued by some statements that Tweak has a clearer
> separation of model and the graphical/interactive part (View/
> Controller
> in MVC).  I definitely have separate model classes, and have found
> Morphic a bit awkward for that reason.  It does have pluggable Morphs,
> though.
>
> Ross
>> You may notice how the entire World stops while you define a path
>> (have a clock morph running to see this). Also it uses Sensor
>> directly, and calls displayWorld. Both big no-nos in proper Morphic
>> programs. The followPath method even does the actual animation in a
>> background thread. Really Bad Things can happen if you do that.
>>
>> Tweak did set out to allow this kind of programming (because it is so
>> convenient), and it succeeded in that.
>>
>> For the original question - if you want the actual cover flow effect
>> you need a 3D renderer. You could use Croquet and OpenGL for that,  
>> but
>> it might be overkill. The Balloon3D render should be enough for this
>> simple type of animating.
>>
>> If you can live with a pseudo-3D effect (like the carousel seen on  
>> the
>> amazon.com frontpage) you can use simple 2D morphic animation of
>> course. In that effect, the covers always remain parallel to the
>> screen but only move position in a 3D circle so that they become
>> smaller in the back and larger in the front, and of course are sorted
>> back-to-front ...
>>
>> In fact, that is so simple I couldn't resist to make an etoy version,
>> 4 lines of code :)
>>
>> Uploaded as
>>
>> http://wiki.squeak.org/squeak/uploads/Carousel.pr
>>
>> - Bert -

> On 14.06.2008, at 19:03, Ross Boylan wrote:
>
> > On Sat, 2008-06-14 at 13:43 +0200, Bert Freudenberg wrote:
> > ....
> >>
> >> The path methods are a beautifully simple and useful, but they are
> >> also a particularly bad example of Morphic programming.
> > Does this mean that they could be done properly in Morphic?  In other
> > words, is the problem here with Morphic, or with this particular
> > approach?
> >
> > Or maybe it's just very difficult to do properly in Morphic?
>
> It's more complicated - e.g., both definePath and followPath are  
> single methods now, done properly it would require at least a few  
> methods - setup, event handlers, stepping, cleanup ... the control  
> flow would be sprinkled across a few methods. This is typical of  
> almost any event-based UI, you typically would have a mouse-down  
> handler that sets up a few things, a mouse-move handler to collect the  
> path, and a mouse-up handler to gather the result. And these handlers  
> have to be enabled only while the path is recorded.
>
> > I also have a more general question: if I'm not doing fancy animations
> > or 3D effects, are there any particular benefits or drawbacks of using
> > Tweak?
>
> Tweak has nothing to do with 3D, it is purely 2D. But for example, the  
> definePath or followPath methods could be implemented in a single  
> method with local control flow which is really nice to program.
>
> - Bert -

>
> > I was intrigued by some statements that Tweak has a clearer
> > separation of model and the graphical/interactive part (View/
> > Controller
> > in MVC).  I definitely have separate model classes, and have found
> > Morphic a bit awkward for that reason.  It does have pluggable Morphs,
> > though.
> >
> > Ross
> >> You may notice how the entire World stops while you define a path
> >> (have a clock morph running to see this). Also it uses Sensor
> >> directly, and calls displayWorld. Both big no-nos in proper Morphic
> >> programs. The followPath method even does the actual animation in a
> >> background thread. Really Bad Things can happen if you do that.
> >>
> >> Tweak did set out to allow this kind of programming (because it is so
> >> convenient), and it succeeded in that.
> >>
> >> For the original question - if you want the actual cover flow effect
> >> you need a 3D renderer. You could use Croquet and OpenGL for that,  
> >> but
> >> it might be overkill. The Balloon3D render should be enough for this
> >> simple type of animating.
> >>
> >> If you can live with a pseudo-3D effect (like the carousel seen on  
> >> the
> >> amazon.com frontpage) you can use simple 2D morphic animation of
> >> course. In that effect, the covers always remain parallel to the
> >> screen but only move position in a 3D circle so that they become
> >> smaller in the back and larger in the front, and of course are sorted
> >> back-to-front ...
> >>
> >> In fact, that is so simple I couldn't resist to make an etoy version,
> >> 4 lines of code :)
> >>
> >> Uploaded as
> >>
> >> http://wiki.squeak.org/squeak/uploads/Carousel.pr
> >>
> >> - Bert -
>
>
> _______________________________________________
> Beginners mailing list
> [hidden email]
> http://lists.squeakfoundation.org/mailman/listinfo/beginners

> A complication is that what I've rendered as "waitForUserSelection" is
> covering up several distinct events: a click on a list, a couple  
> button
> presses, or an entry in a text field.  In the "Morphic" approach I can
> set each of these to a different callback.  In the Tweak approach,  
> do I
> need to decode the event I get from waitForUserSelection?  The  
> original
> tweak memo has "button waitUntil: #click", but I have several possible
> events.

> Hi all,
>
> I thought I'd also give you my thoughts on this. While in theory a
> replication of Apple's (actually SteelSkies') Cover Flow effect is
> possible to achieve in almost any development environment, with Squeak
> there are a couple of things to consider.
>
> 2-Dimensional movement is possible and it would also be processed
> faster, as there is no hardware-accelerated computation and rendering
> is involved.

> Although not the real Cover Flow, a .Mac-like caroussel (I hope I
> spelled that right) effect is achievable, and depending on the items
> that should be in the effect it would run more or less fast. As Squeak
> provides mechanisms for animating Morphs, this could be a possibility.
>
> However, when it comes to 3-dimensional movement, it is a bit tricky
> on this one. The original Cover Flow by SteelSkies used OpenGL
> obviously for the effect. When Apple took it over, they ported the
> code into Quartz, and later Core Animation, which are obviously not
> available to other platforms itself the Mac OS X itself. So that said,
> OpenGL would be required for this effect. There is one implementation
> of OpenGL available for Squeak, which regrettably only runs under the
> Windows platform as it accesses DirectX if I remember that correctly.

> On Mon, 2008-06-16 at 12:48 +0100, Marcus Strehlow wrote:
>> Hi all,
>>
>> I thought I'd also give you my thoughts on this. While in theory a
>> replication of Apple's (actually SteelSkies') Cover Flow effect is
>> possible to achieve in almost any development environment, with  
>> Squeak
>> there are a couple of things to consider.
>>
>> 2-Dimensional movement is possible and it would also be processed
>> faster, as there is no hardware-accelerated computation and rendering
>> is involved.
> Wouldn't lack of hardware acceleration make it slower?
>> Although not the real Cover Flow, a .Mac-like caroussel (I hope I
>> spelled that right) effect is achievable, and depending on the items
>> that should be in the effect it would run more or less fast. As  
>> Squeak
>> provides mechanisms for animating Morphs, this could be a  
>> possibility.
>>
>> However, when it comes to 3-dimensional movement, it is a bit tricky
>> on this one. The original Cover Flow by SteelSkies used OpenGL
>> obviously for the effect. When Apple took it over, they ported the
>> code into Quartz, and later Core Animation, which are obviously not
>> available to other platforms itself the Mac OS X itself. So that  
>> said,
>> OpenGL would be required for this effect. There is one implementation
>> of OpenGL available for Squeak, which regrettably only runs under the
>> Windows platform as it accesses DirectX if I remember that correctly.