Glowing line FX

BlitzMax Forums/BlitzMax Programming/Glowing line FX

Rick_72

(Posted 2010) [#1]

Hi all,
what modules can be used to create some glowing line FX (e.g. as shown on a Vectrex screen)? I have already found indiepath's module that creates some fantastic looking glowing lines but are there any other modules (or codes) out there? indiepath seems to be absent and the module is not documented nor do I have an example. It's a pity since his stuff (there's some screenshot out here of a Thrust remake) looks amazing.
Can anyone help?

Thank you guys!

slenkar

(Posted 2010) [#2]

what is the theory behind it?

i know people use a glowing dot image ,vertices and uv coords but in what way?

Rick_72

(Posted 2010) [#3]

Good question! indiepath uses a glowing dot image to draw a line. The line's divided and the dot is repeatedly painted along this (line) path. This looks somewhat pretty cool.
But actually I am looking for a more dynamic way to handle the glow FX. The issue with the dot image is that you cannot change its characteristics during runtime (expect for loading different images).

slenkar

(Posted 2010) [#4]

what characteristics would you change?

If I understood the theory behind it I could do it.

Nate the Great

(Posted 2010) [#5]

you can use open gl, which I dont know how to use, anyway just make the uv coords like this for a glowing dot image texture

ImaginaryHuman

(Posted 2010) [#6]

You have the basic idea. I'm not sure what you want to modify about it dynamically?

Rick_72

(Posted 2010) [#7]

@Nate: just doing the coord. won't make any FX. It's more like combining several stuff to achieve the desired glowing. indiepath uses stuff like AlphaBlending which at this point of time I have absolutely no clue about. Think I will try to understand what indiepath is doing. If I suceed I will post the basics here.

@Imaginary: if one uses a static image like a glowing dot the effect will always loook the same (except for changing blending etc.). You can not change the 'fadeout' of the glowing since it's fixed in the image (let's call this density; the dot has max. density in its middle fading out to the border). I think about an effect that's basically like a fog surrounding the line (or whatever). This 'fog' is rendered dynamically and you can change things like density and fading since it does use a fixed image as blueprint.

TWH	(Posted 2010) [#8]

Thanks to Nate the Great I've been playing about with point sprites again :D

SuperStrict
'Framework BRL.GlMax2D
'Import BRL.Random
'Import pub.glew
'Import BRL.standardio
SetGraphicsDriver GLMax2DDriver()
'GLGraphics 1024,768,0,60 'need to setup projection!
Graphics 1024,768',0,60 'dont need to setup projection

SetMaskColor(255,255,255)
Global pixmap:TPixmap = CreatePixmap(16,16,PF_RGBA8888)
DrawCircleGradient(pixmap)
Global particleImg:TGLImageFrame = TGLImageFrame.CreateFromPixmap(pixmap,FILTEREDIMAGE)
Global texture_name:Int = particleImg.name
Global fpsCounter:TFPSCounter = New TFPSCounter
Global timebase# = MilliSecs() / 1000.0
Global dt# = 0.0
Global time# = 0.0
Global oldtime# = timebase
Global xres# = Float(GraphicsWidth())
Global yres# = Float(GraphicsHeight())
Global pointplots:Int = 0

'main
	Repeat
	Until glGetError()=GL_NO_ERROR 'wipe errors 
	
	initPointSprite()
	While Not AppTerminate()
		render()
		
		
		?debug
		Local checkedAllErrors:Int = False
		Local glerrorList$ = ""
		Local numErrors:Int = 0
		While checkedAllErrors=False
			Local errorCode:Int = glGetError()
			If errorCode = GL_NO_ERROR
				checkedAllErrors = True
			Else
				numErrors = numErrors + 1
				If errorCode = GL_INVALID_ENUM glerrorList:+" invalid enum "
				If errorCode = GL_INVALID_VALUE glerrorList:+" invalid value "
				If errorCode = GL_INVALID_OPERATION glerrorList:+" invalid operation "
				If errorCode = GL_STACK_OVERFLOW glerrorList:+" stack overflow "
				If errorCode = GL_STACK_UNDERFLOW glerrorList:+" stack underflow "
				If errorCode = GL_OUT_OF_MEMORY glerrorList:+" GL_OUT_OF_MEMORY "
				If errorCode = GL_TABLE_TOO_LARGE glerrorList:+" GL_TABLE_TOO_LARGE "
			EndIf
		Wend
		If glerrorList <> ""
			Print "#"+numErrors +" glGetErrors this frame: "+glerrorList
		EndIf
		?
		
		SetAlpha(1.0)
		SetBlend(MASKBLEND)
		glColor3ub(255,255,255)
		SetColor 255,255,255
		DrawText "fps "+fpsCounter.fps,0,0
		DrawText "points plotted with line algo:"+pointplots ,0,30
		pointplots = 0'reset
		
		Flip
		fpsCounter.update()
	Wend
End

Function initPointSprite()
'Glew, opengl extension wrangler is used To se If an extension is supported.
	glewInit()	
	If(GL_POINT_SPRITE)
		Print "GL_POINT_SPRITE is supported"
		glEnable(GL_POINT_SPRITE)
	Else 
		Print "GL_POINT_SPRITE is Not supported"
		End
	EndIf
	'glEnable( GL_BLEND )
	'glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA ) 'additive without overblending
	'glPointSize( 30.0 )
	
	glActiveTexture(GL_TEXTURE0);
	glEnable( GL_TEXTURE_2D );
	glTexEnvi(GL_POINT_SPRITE, GL_COORD_REPLACE, GL_TRUE); 'Generates tex coords for Point Sprite
	'modes: <a href="http://www.khronos.org/opengles/documentation/opengles1_0/html/glTexEnv.html" target="_blank">http://www.khronos.org/opengles/documentation/opengles1_0/html/glTexEnv.html</a>
	glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);  'GL_MODULATE, GL_DECAL, GL_BLEND, Or GL_REPLACE.
	
	'Local color:Float[] = [1.0, 0.0, 0.0]
	'glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_COLOR, color[0] )
	'glBindTexture(GL_TEXTURE_2D, texture_name);
End Function

Function render()
	timebase= MilliSecs() / 1000.0
	dt = timebase-oldtime
	time :+ dt
	oldtime = timebase

	SetBlend(LIGHTBLEND)
	'SetBlend(MASKBLEND)
	'SetBlend(SOLIDBLEND)
	'SetBlend(ALPHABLEND)
	'SetBlend(SHADEBLEND)
	
	glBindTexture(GL_TEXTURE_2D, texture_name);

	'glClearColor(1.0,1.0,1.0,1.0)
	glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT )

	glPointSize 15.0
	
	glBegin GL_POINTS	
		Local blocksiz# = 2
		glColor4f(.7,.3,0,1)
		blockscan 0,0,MouseX(), MouseY(),blocksiz
		
		glColor4f(1,0,0,1)
		spinner(xres/2, yres/2,time*10)

		glColor4f(0,1,0,1)
		spinner(xres/2-100, yres/2,time*20)
	
		glColor4f(0,0,1,1)
		spinner(xres/2+50, yres/2+100,time*30)
	glEnd
	
	glPointSize( 20.0 )
	glColor4f(1,0,0,1)
	
	glBegin GL_POINTS	
	For Local i:Int = 0 To 32
	glVertex2f(MouseX() + (RndFloat()-0.5)*20, MouseY() + (RndFloat()-0.5)*20)
	Next
	glEnd
	
End Function

Function spinner(x#,y#,ang#)
	Local blocksiz# = 2
	For Local lines:Int = 0 Until 10	
		Local a2# = lines*360/10.0
		blockscan x, y, x+Cos(ang+a2)*200, y+Sin(ang+a2)*200,blocksiz
	Next
End Function

'Called once at setup to Create the particle image
Function createParticleImg:TPixmap()
	Cls()
	SetBlend ALPHABLEND 
	Local sz:Int = 16
	
	'Local particle_image:TImage = CreateImage(sz,sz) 
	Local alpha:Float = 1.0 
	Local i:Int
		For i = 1 To sz/2 
				DrawOval (sz/2)-i,(sz/2)-i,i*2,i*2 
				'DrawRect (sz/2)-i,(sz/2)-i,i*2,i*2 
				'Plot (sz/2)-i,(sz/2)-i
				'DrawText "HEI",(sz/2)-i,(sz/2)-i				
				alpha:* 0.65		
				SetColor Rnd(100,200),Rnd(100,200),Rnd(100,200) 
				SetAlpha alpha 	
		Next
	Return GrabPixmap(0,0,sz,sz) 	
End Function

Type TFPSCounter
	Field frames:Int=0
	Field fps:Int=0
	Field sec:Long = MilliSecs()
	
	Method update()
		Local timenow:Int = MilliSecs()
		If(sec < timenow )
			sec = timenow + 1000
			fps = frames
			frames = 0
		EndIf
		frames :+1
	End Method
End Type

'im guessing its bresenham. prolly overkill.
'taken from the evaldraw example blockscan.kc
'converted to BMax.
Function blockscan(x0#,y0#,x1#,y1#,blocksiz#)
   'Scale down to blocky pixels
   x0 :/ blocksiz
   y0 :/ blocksiz
   x1 :/ blocksiz
   y1 :/ blocksiz
   Local prec# = 65536.0 '// 2^16
   Local ix:Int = Floor(x0);
   Local ix1:Int = Floor(x1)-ix;
   Local ixi:Int = (ix1>0)*2-1;
   Local iy:Int = Floor(y0);
   Local iy1:Int = Floor(y1)-iy;
   Local iyi:Int = (iy1>0)*2-1;
   Local fx# = x0-ix;
   If (ixi > 0) fx = 1-fx;
   Local  fy# = y0-iy;
   If (iyi > 0) fy = 1-fy;
   Local gx# = Abs(x1-x0)*prec;
   Local idx:Int = Int(gx);
   Local gy# = Abs(y1-y0)*prec;
   Local idy:Int = Int(gy);

   Local id:Int;
   If (ix1 = 0) Then 
	id = -1; idx = 0;
   Else If (iy1 = 0)
	id =  0; idy = 0;
   Else
	id = Int(fy*gx - fx*gy);
   EndIf
   For Local c:Int=Abs(ix1)+Abs(iy1) Until 0 Step -1
	pointplots :+1
	glVertex2f( ix*blocksiz , iy*blocksiz ) 'scale up to screen pixels

      If (id >= 0)
		ix :+ ixi; id :- idy;
      Else 
		iy :+ iyi; id :+ idx; 
	EndIf
   Next
End Function

Function drawCircleGradient(px:TPixmap)
	Local siz:Float = px.width
	Local center:Float = (siz-1) / 2.0
   	For Local y:Int=0 Until siz
   	For Local x:Int=0 Until siz
     	 	Local t:Float = Sqr( (center-x)*(center-x) + (center-y)*(center-y) ) / center
		Local c:Int = 255-255*t
		If( c < 0 ) c = 0
		If( c > 255 ) c = 255
		
		Local a:Int = c 'alpha is same as color gradient
		Local argb:Int = (a Shl 24) + c Shl 16 + c Shl 8 + c
		WritePixel px,x,y,argb      	
   	Next
	Next 
End Function

Here's the result, bresenhams line algorithm + pintsprites + lightblend

it doesnt take into account how many points are needed for it to look ok. You have to tweak blocksiz. A blocksiz of 1.0 would be 1 pixel on the screen.

Wiebo

(Posted 2010) [#9]

I really like this. The only thing that bothers me is the lines that are almost straight. They appear jaggy.

[edit] nm, I found out about the block size parameter. Looks cool. Would look even better with some custom line images!!
I don't understand one bit of the block scan algorithm though =] What's it for?

!warning: I am working on a new line object engine atm, so your code might be used in that if you're OK with it. I currently use indiepath's module again, but more options=cool. I'm also wondering how this will scale to 1000s of lines.

Rick_72

(Posted 2010) [#10]

@TWH: this is cool! It's almost what I was looking for! Thank you very much for sharing!

@Wiebo: it's the line algorithm. Change this if you don't feel happy with Bresenham's look (to me it's too 'steppy') e.g Wu's Algor. (http://freespace.virgin.net/hugo.elias/graphics/x_wuline.htm).

deps	(Posted 2010) [#11]

Function glLine( x1:Int,y1:Int, x2:Int,y2:Int, gl_image:Int, size:Int = 5 )

	Local angle:Int = ATan2( y2-y1,x2-x1 )

	glEnable GL_TEXTURE_2D
	glBindTexture GL_TEXTURE_2D, image

	glBegin GL_QUADS
		glTexCoord2d( 0,0 )
		glVertex2i x1+Cos(angle+225)*size, y1+Sin(angle+225)*size
		glTexCoord2d( 1,0 )
		glVertex2i x1+Cos(angle+135)*size, y1+Sin(angle+135)*size
		glTexCoord2d( 1,0.5 )
		glVertex2i x1+Cos(angle+45)*size, y1+Sin(angle+45)*size
		glTexCoord2d( 0,0.5 )
		glVertex2i x1+Cos(angle+315)*size, y1+Sin(angle+315)*size
		
		glTexCoord2d( 1,0.5 )
		glVertex2i x1+Cos(angle+45)*size, y1+Sin(angle+45)*size
		glTexCoord2d( 0,0.5 )
		glVertex2i x1+Cos(angle+315)*size, y1+Sin(angle+315)*size
		glTexCoord2d( 0,0.5 )
		glVertex2i x2+Cos(angle+225)*size, y2+Sin(angle+225)*size
		glTexCoord2d( 1,0.5 )
		glVertex2i x2+Cos(angle+135)*size, y2+Sin(angle+135)*size
		
		glTexCoord2d( 0.5,0 )
		glVertex2i x2+Cos(angle+225)*size, y2+Sin(angle+225)*size
		glTexCoord2d( 0.5,1 )
		glVertex2i x2+Cos(angle+135)*size, y2+Sin(angle+135)*size
		glTexCoord2d( 1,1 )
		glVertex2i x2+Cos(angle+45)*size,  y2+Sin(angle+45)*size
		glTexCoord2d( 1,0 )
		glVertex2i x2+Cos(angle+315)*size, y2+Sin(angle+315)*size
		
	glEnd
	
EndFunction

It's not optimized at all, but here's a quick implementation of Nate the Greats solution.

Dreamora

(Posted 2010) [#12]

I wouldn't use cos / sin in this case.
90 deg angles are trivial with vectors, especially in 2D. Just exchange X and Y component and negate one of the two. If the original "axis vector" was uniform, thats all you need to calc for one side of the axis (all vertices right of middle line for example, achieved through point + 90deg rotated vector).

the opposite side is just - 90deg rotated vector