What's this effect called?

BlitzMax Forums/BlitzMax Programming/What's this effect called?

RetroRusty

(Posted 2010) [#1]

Hi,

Does anyone know what the effect is called in the picture below? It basically builds the screen up one line at a time from the bottom until all the picture is shown.

If anyone has a piece of code that does this, could I take a look at it?

Leon Drake

(Posted 2010) [#2]

looks like they just take one line of pixels from and image and stretch it down to some point then move tot he next line.

Warpy

(Posted 2010) [#3]

not quite - it looks like there are at least two rows of pixels being stretched there. BMax isn't too good at these pixel-manipulation type effects

Czar Flavius

(Posted 2010) [#4]

You could make the background an image and use drawimagerect trikery of some kind?

Oddball

(Posted 2010) [#5]

Load the image as an AnimImage with each full horizontal line as a frame. Then to draw you simply add lines/frames from the bottom to the top each flip. To get the stretch effect draw the current top frame to fill the rest of the screen.

And because I'm feeling generous here's the code.

SuperStrict

Const IMAGE_FILE:String="REPLACE WITH IMAGE FILENAME"

Global pixmap:TPixmap=LoadPixmap(IMAGE_FILE)
Global width:Int=pixmap.width
Global height:Int=pixmap.height

Graphics width,height,0,60

Global image:TImage=LoadAnimImage(pixmap,width,1,0,height,0)

Global frame:Int=height-1

Repeat
	Cls
	For Local count:Int=height-1 To frame Step -1
		DrawImage image,0,count,count
	Next
	For Local count:Int=frame To 0 Step -1
		DrawImage image,0,count,frame
	Next
	Flip
	frame:-1
	frame=Max(frame,0)
Until KeyHit(KEY_ESCAPE) Or AppTerminate()

ImaginaryHuman

(Posted 2010) [#6]

This effect was done easily on the Amiga using the copperlist, whereby you could point each row of the video scan beam to read a specific row of pixels from memory, creating basically a vertical zoom. Usually there was only one row stretched the entire height between the top of the progressed image and the top of the screen, but as in Total Recall, some folks started to show more than one row stretched out because then it had more of a vertical movement to it.

There's another easyish way to do this.

Just load the whole image once. Then SetScale to some high number in Y. Draw the stretched image at an appropriate scroll offset vertically. Then draw a rectangle from the original image on top of it at the bottom of the screen. I forget that new command, DrawImageRect or something?

Czar Flavius

(Posted 2010) [#7]

Oddball, each 1-line frame would use a ton of video memory as frames are stored as squares internally!

Oddball

(Posted 2010) [#8]

Really? I tried it with a 2448x1308 image and it used less vram than loading the image as one. What's your basis for that statement?

xlsior

(Posted 2010) [#9]

IIRC they aren't stored as squares, but as nearest-power-of-2.

So a single pixel tall slice of an 2448x1308 image should be stored as a 4096 x 2 image in video memory, with bytes per pixel = 4096 x 2 x 4 = 32 KB

loading the entire image as one would take up 4096 x 2048 x 4 = 32 MB

Czar Flavius

(Posted 2010) [#10]

Oh I apologise, I thought it was nearest-(highest!)-power-two in a square not rectangle, thanks for this information.

Oddball, how do you measure video memory usage?

SLotman

(Posted 2010) [#11]

Wouldn't it be easier to just manipulate the UV coords of the quad? I remember on OpenGL you can use GL_CLAMP to achieve something similar to this...

Yeah, look here to see a sample! (scroll down until you see the clamped images sample)

Direct-X should have a similar thing, but I don't remember the actual process to do it. The really good thing about this, is that it has 0 cost on processor speed, neither do you have to store several images or draw the image several times with drawimagerect.

jkrankie

(Posted 2010) [#12]

I'd be looking at using GL for this effect.

Cheers
Charlie

SLotman

(Posted 2010) [#13]

Here, I just hacked Nehe sample 6 to simulate the effect:

Framework brl.GLGraphics 'Framework brl.blitzgl
Import brl.bmploader
Import brl.max2d

Global ScreenWidth:Int=800
Global ScreenHeight:Int=600
Global ScreenDepth:Int=32

Global xrot:Float=0
Global yrot:Float=0
Global zrot:Float=0

Global Checkimage:Byte[256,256,4]
Global Texname:Int

Global fx:Float=2.0, timer:Long = MilliSecs()

GLGraphics(screenwidth,screenheight,screendepth,0,gl_backbuffer | gl_depthbuffer) 
InitGl()
While Not KeyHit( KEY_ESCAPE )
	nehe6()
	glColor3f(1.0,1.0,1.0)
	'Framecounter--------------------------------------------
	Framecounter_counter=Framecounter_counter+1
	If Framecounter_time=0 Then Framecounter_time=MilliSecs()
	If Framecounter_time+1001 <MilliSecs() Then
		Framecounter_framerate=Framecounter_counter
		Framecounter_counter=0
		Framecounter_time=MilliSecs()
	EndIf
	GLDrawText("fps : "+framecounter_framerate,screenwidth-(8*12),screenheight-16-8) 
	'--------------------------------------------------------
	Flip 
Wend
End

Function InitGl()
	LoadGlTextures()
	glClearColor(0.0, 0.0, 0.0, 0.0)
	glClearDepth 1.0
	glDepthFunc(GL_LESS)
	glEnable(GL_DEPTH_TEST)
	glShadeModel(GL_SMOOTH)
	glViewport(0,0,ScreenWidth,ScreenHeight)
	glMatrixMode(GL_PROJECTION)
	glLoadIdentity()
	gluPerspective(45.0,Float(ScreenWidth)/Float(ScreenHeight),1.0,100.0)
	glMatrixMode(GL_MODELVIEW)
	glLoadIdentity()
End Function

Function LoadGlTextures()
	Local PointeurImg:Byte Ptr
	Local TexWidth
	Local TexHeight
	tex01:TPixmap=LoadPixmap("data\NeHe.bmp")
	TexWidth=tex01.Width
	TexHeight=tex01.Height
	PointeurImg=PixmapPixelPtr(tex01,0,0)
	pp=0
	For y=TexHeight-1 To 0 Step -1
		For x=0 To TexWidth-1
			Checkimage[y,x,0]=PointeurImg[pp]
			Checkimage[y,x,1]=PointeurImg[pp+1]
			Checkimage[y,x,2]=PointeurImg[pp+2]
			Checkimage[y,x,3]=100
			pp=pp+3
		Next
	Next
	tex01=Null
	glPixelStorei(GL_UNPACK_ALIGNMENT,1)
	glGenTextures(1, Varptr Texname)
	glBindTexture(GL_TEXTURE_2D, Texname)
	
	'glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT)
	'glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT)

	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP)
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP)

	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST)
	glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST)
	glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, TexWidth, TexHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, Checkimage)
End Function

Function nehe6()
	glClear GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT
   	glEnable(GL_TEXTURE_2D)
	glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE)
	glBindTexture GL_TEXTURE_2D,Texname
	
	glLoadIdentity
	glTranslatef 0.0,0.0,-5.0

	glBegin GL_QUADS
		' Front Face
		glTexCoord2f 0.0, 0; glVertex3f -1.0, -1.0, 1.0       ' Bottom Left Of The Texture And Quad
		glTexCoord2f 1.0, 0; glVertex3f  1.0, -1.0, 1.0       ' Bottom Right Of The Texture And Quad
		glTexCoord2f 1.0, 2-fx; glVertex3f  1.0,  1.0, 1.0       ' Top Right Of The Texture And Quad
		glTexCoord2f 0.0, 2-fx; glVertex3f -1.0,  1.0, 1.0       ' Top Left Of The Texture And Quad
	glEnd


	' haaaaack
	Local spd:Float = 0.000125 * (MilliSecs() - timer)
	If fx-spd>=1.001 Then
		glBegin GL_QUADS
			' Front Face
			glTexCoord2f 0.0, 2-fx; glVertex3f -1.0, 2, 1.0001       ' Bottom Left Of The Texture And Quad
			glTexCoord2f 1.0, 2-fx; glVertex3f  1.0, 2, 1.0001      ' Bottom Right Of The Texture And Quad
			glTexCoord2f 1.0, 2-fx; glVertex3f  1.0, 1, 1.0001       ' Top Right Of The Texture And Quad
			glTexCoord2f 0.0, 2-fx; glVertex3f -1.0, 1, 1.0001      ' Top Left Of The Texture And Quad
		glEnd
	End If

	fx = fx - spd
	If fx<1 Then 
	   Flip 
	   Delay 3000
	   glClear GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT
	   glLoadIdentity
	   glTranslatef 0.0,0.0,500.0
	   Flip
	   fx=2
	End If
	glDisable(GL_TEXTURE_2D)
	timer = MilliSecs()
End Function

I had to do with 2 quads instead of one... but still, much better than drawing several times the same thing :)

Oddball

(Posted 2010) [#14]

Erm... You do know you can do that using Max2D? There's no need for any hacky OpenGL nonsense.

SuperStrict

Const IMAGE_FILE:String="REPLACE WITH IMAGE FILENAME"

Global pixmap:TPixmap=LoadPixmap(IMAGE_FILE)
Global width:Int=pixmap.width
Global height:Int=pixmap.height

Graphics width*3,height*3,0,60
SetVirtualResolution width,height

Global image:TImage=LoadImage(pixmap,0)

Global count:Int=height-1

Repeat
	Cls
	DrawSubImageRect image,0,count,width,height-count,0,count,width,height-count
	DrawSubImageRect image,0,0,width,count,0,count,width,1
	Flip
	count:-1
	count=Max(count,0)
Until KeyHit(KEY_ESCAPE) Or AppTerminate()

Oddball

(Posted 2010) [#15]

And just to make it feature complete here it is with the multi-line stretch effect shown in the original post.

SuperStrict

Const IMAGE_FILE:String="REPLACE WITH IMAGE FILENAME"
Const STRETCH_SIZE:Int=2	'Alter for multi-scanline effect. Try 10 or 20.

Global pixmap:TPixmap=LoadPixmap(IMAGE_FILE)
Global width:Int=pixmap.width
Global height:Int=pixmap.height

Graphics width,height,0,60

Global image:TImage=LoadImage(pixmap,0)

Global count:Int=height-1

Repeat
	Cls
	DrawSubImageRect image,0,count,width,height-count,0,count,width,height-count
	DrawSubImageRect image,0,0,width,count,0,count-STRETCH_SIZE,width,STRETCH_SIZE
	Flip
	count:-1
	count=Max(count,STRETCH_SIZE)
Until KeyHit(KEY_ESCAPE) Or AppTerminate()

smilertoo

(Posted 2010) [#16]

years ago i'd have called it a copper stretch.

Czar Flavius

(Posted 2010) [#17]

Oddball, how do you calculate vram???

Oddball

(Posted 2010) [#18]

@Czar: I use the Instruments app that comes with Mac OS X, but I'm sure if you google though there'll be plenty of other monitoring apps around.

Gabriel

(Posted 2010) [#19]

You're quite correct, but it's important to point out that a lot of older hardware has problems with texture width/height ratios of greater than 8:1 or 1:8. So you could well run into compatibility issues with something like this. No idea whether Linux/Mac drivers would be an additional problem. I've found the videocard drivers on MacOS to be pretty dire.