Newbie needs help with Sine Scrollers

[vandal]

Hi, more of a general programming question than a PB question.

How do you use SINE to make things like text wobble? You must've all seen the demos in the 80s where the text would scroll across the screen but wavey as it went. I can do the scroll bit, no problem but I've never been able to figure out how to do the wave. I think it uses the SINE function but apart from that, I'm lost.

Can anyone explain it or point me to somewhere that could help?

Thanks in advance.

Vandal.

[vandal]

Can I just say that I don't need help with the SINE side of things. I understand Trigonometry (to an extent) I've just never been able to impliment it into my programs.

[kevin]

Yeah, it's a classic 'old skool' effect.  There's number variations of this effect though.  X sine, Y sine the combined X + Y variations.  


X sine

  The X version was the most efficient.  As most  8/16 bit systems had horizontal scroll registers.  So to make the screen (or a section of it)  wave horizontally, you'd set the scroll register on each scan line to the corresponding value from your sine wave.   Which was fairly elegant solution.  These days, we have to brute force is it.  

  Depending upon how much 'wave' we want, we have to draw our scroll to a temp image.  Then copy that image with distortion.  So If the max wave radius is 32 pixels, your scroll buffer will need to oversized by at least 32*2, which will allow it to wave in a negative and positive direction.  So when the rows are displaced, the user doesn't see empty pixels on either side.

  So all were doing is copying the scroll image to the screen one row at a time.  Each copied row is displaced by the sine wave amount.   Hey presto, the scroller waves.


Y Sine

 Y sine is the same principal.  But this time, were rendering the scroll image as a series of vertical strips.  These strips are each being displaced by a wave amount.



XY Combination   Y Sine + post X sine


  The standard X+Y sine distortion effect you've probably seen in Amiga demos/intros.   Was purely a combination of the two effects.  So it's a two pass operation.   First you render the scroll text with Y sine distortion to the output buffer.  Then you'd set the horizontal scan line displacements in order to apply the secondary X wave.  Which gives you the lovely appearance of it warping it either direction.     However, on the Amiga the horizontal displacement was purely hardware.  Not an option on the PC

  So to replicate the method  we draw the original scroll image to a screen size (or however big your destination area is) with Y sine applied .  Then draw that  image with X sine applied to the screen.  Which unfortunately places a lot of strain upon the image blitter.   Which is far less optimal drawing small blits than bigger ones.   So what i'm saying is that it's doable, but wouldn't be very quick.



XY Combination   Pre Sine X + Y Sine  

 With this  variant we change the order that we apply the waves in.  This creates a different effect, but is far less strenuous than the other combination, but generally doesn't look as good :(.  

 This time we create a second temporary scroll buffer.  Then we copy the original scroll image to the second scroll buffer with X sine distortion applied.   Then we draw the second (already X sine distorted buffer) to the Screen while Appling Y distortion.

This method is also used in the scaling sine scrollers.  Where the original buffer is scaled to the temp scroller,  then distortation is applied and the buffer is then drawn.  So you can make a real mess of it :)

  I'll post a basic example to the PB code tank later.  I'll leave it up to your creative imagination to speed it up.

[kevin]

Posted a Sine Scrolled Demo on the PlayBasic CodeTank

[vandal]

Wow, cheers for that. :)

BTW > I'm buying PB in the next couple of days. Do we get all future updates for free once bought?

Thanks again.

[kevin]

Patches/Updates are Free, extensions on the other hand are not.

[vandal]

Sweet, that's me sold. :D

[kevin]

I've update the example, since it didn't include all the variations I mentioned above (now it does plus an extra one).  You can get the update from the same place.

[Big C.]

I've update the example, since it didn't include all the variations I mentioned above (now it does plus an extra one). You can get the update from the same place.

How can you make update from an submitted entry or delete an existing entry in PCT?  <_<

BTW... great example  :)

[vandal]

Really appreciate your work but I wonder if you could explain it in Pseudo code? What I mean is, knowing the basic language is one thing but actually knowing HOW to use it is another. Your example works a treat, but I don't know HOW.

Could you roughly explain what goes on to create the SINE wave effect? I don't need things like setting the screen up explaining just things like ...

Copy the screen > paste the text > add SINE wave to the screen > paste screen to monitor ...

I'm guessing here coz I ain't got a clue but I hope you understand what I'm asking.

Cheers.

[kevin]

Above already describes the method.

To make an image wave on the X axis (be it a text scroller, or just any old image)   you copy the image row by row.   As you copy each row you displace along the X axis  by the wave amount.   That's is.    It's the same vertically.

 Making the warping/morphing ones is merely applying various combinations of X + Y waves.