Draw line thickness question

Monkey Forums/Monkey Programming/Draw line thickness question

Raul	(Posted 2014) [#1]

Is there a way to draw a line with a bigger thickness?

therevills

(Posted 2014) [#2]

A handy function from Diddy:

Function DrawLineThick(x1:Int, y1:Int, x2:Int, y2:Int, thinkness:Int = 2)
	Local steep:Bool = Abs(y2 - y1) > Abs(x2 - x1)
	Local swapped:Bool = False
	
	If steep
		Local tmp:Int = x1
		x1 = y1
		y1 = tmp
	
		tmp = x2
		x2 = y2
		y2 = tmp
	End
	
	If x1 > x2
		Local t:Float = x1
		x1 = x2
		x2 = t
		t = y1
		y1 = y2
		y2 = t
		swapped = True
	End
	
	Local deltax:Float = x2 - x1
	Local deltay:Float = Abs(y2 - y1)
	Local error:Float = deltax / 2
	Local ystep:Float
	Local y:Float = y1
	
	If y1 < y2 Then
		ystep = 1
	Else
		ystep = -1
	End
	Local offset:Int = thinkness / 2
	For Local x:Int = x1 Until x2
		If steep
			DrawRect(y - offset, x - offset, thinkness, thinkness)
		Else
			DrawRect(x - offset, y - offset, thinkness, thinkness)
		End
	
		error -= deltay
		If error < 0
			y += ystep
			error += deltax
		End
	Next
End

Usage:

DrawLineThick(100, 100, 200, 200) ' defaults to 2 pixels thick
DrawLineThick(300, 300, 400, 400, 5) ' 5 pixels thick

Danilo

(Posted 2014) [#3]

@therevills:
Unfortunately this does not work with alpha blending, because it overwrites pixels more than once.
Alpha blend more than one time, and the color gets almost solid, the thicker the lines is.
With alpha blending every pixel should be only written once, and AntiAliasing could make it even harder.

See example:

Strict

Import mojo


Function DrawLineThick:Void(x1:Int, y1:Int, x2:Int, y2:Int, thinkness:Int = 2)
    Local steep:Bool = Abs(y2 - y1) > Abs(x2 - x1)
    Local swapped:Bool = False
    
    If steep
        Local tmp:Int = x1
        x1 = y1
        y1 = tmp
    
        tmp = x2
        x2 = y2
        y2 = tmp
    End
    
    If x1 > x2
        Local t:Float = x1
        x1 = x2
        x2 = t
        t = y1
        y1 = y2
        y2 = t
        swapped = True
    End
    
    Local deltax:Float = x2 - x1
    Local deltay:Float = Abs(y2 - y1)
    Local error:Float = deltax / 2
    Local ystep:Float
    Local y:Float = y1
    
    If y1 < y2 Then
        ystep = 1
    Else
        ystep = -1
    End
    Local offset:Int = thinkness / 2
    For Local x:Int = x1 Until x2
        If steep
            DrawRect(y - offset, x - offset, thinkness, thinkness)
        Else
            DrawRect(x - offset, y - offset, thinkness, thinkness)
        End
    
        error -= deltay
        If error < 0
            y += ystep
            error += deltax
        End
    Next
End


Class MojoApp Extends App
    
    Method OnCreate:Int()
        SetUpdateRate(60)
        Return 0
    End
    
    Method OnUpdate:Int()
        Return 0
    End
    
    Method OnRender:Int()
        Cls(128,128,255)
        SetColor(0,0,0)
        DrawRect(320,0,320,500)
        SetColor(255,255,0)
        
        SetBlend(AlphaBlend)
        SetAlpha(0.1)

        Local thickness:Int = 2
        For Local i := 0 To 520 Step 40
            DrawLineThick(50+i, 10, 70+i, 210, thickness)
            thickness += 2
        Next i

        SetAlpha(1.0)

        thickness = 2
        For Local i := 0 To 520 Step 40
            DrawLineThick(50+i, 220, 70+i, 450, thickness)
            thickness += 2
        Next i
        
        Return 0
    End
End


Function Main:Int()
    New MojoApp
    Return 0
End

Supertino

(Posted 2014) [#4]

you could probably use poly's to draw the line.

ziggy

(Posted 2014) [#5]

Yes, or us transforms to draw a rotated rect, but polys could allow you to draw rounded or square ended lines if required.

Raul	(Posted 2014) [#6]

Thank you guys!

Best team :P