draw dots in a straight line from PointX to PointY

BlitzMax Forums/BlitzMax Programming/draw dots in a straight line from PointX to PointY

WERDNA

(Posted 2011) [#1]

Hey folks!

I have a series of dot images that I need to draw in a straight line from PointX,
to PointY, with spaces in between the dots.

These are the dots in question. Basically I want to use each planet as a 'node',
taking the location of two planets, and drawing a line of dots in between those
two planets.(Ignore the curving dots between the last two planets ;)

Thanks in advance,

slenkar

(Posted 2011) [#2]

look up bresenham in the code archives to get x and y coords in a line

_JIM	(Posted 2011) [#3]

That's rather simple actually. Linear interpolation is your frind on this one:


Function DrawDots(x1#, y1#, x2#, y2#, dotcount%)

for local i% = 0 until dotcount

'here comes the math
local factor# = i / float(dotcount)

'the factor is actually a proportion, or a percentage if you want
'it indicates the position on the imaginary line between the 2 points

'now compute the position using linear interpolation (aka LERP in some languages)
local newx# = (x2 - x1) * factor + x1
local newy# = (y2 - y1) * factor + y1

'draw the pretty shiny fabulous dot at the computed position
DrawDot(newx, newy)

next

EndFunction

I wrote that in the codebox so there's a 0.000001% chance it won't work. But I hope you get the idea :)

Also, after you understand how it works, you could optimize it by removing the extra locals and just writing a single line with "DrawDot...".

Have fun!

slenkar

(Posted 2011) [#4]

dotcount depends on distance, if you want to draw dots at regular intervals?

GW	(Posted 2011) [#5]

Use bresenham. Alternatively you can use 2d vectors and just step from source to dest.

WERDNA

(Posted 2011) [#6]

Thanks everyone!

I think I'll give _JIM's code a try, since I much prefer it's simplicity compared to bresenham.
If that doesn't work however, guess I'll give bresenham a shot :)

Cheers!

Warpy

(Posted 2011) [#7]

Bresenham isn't the right algorithm for this - the dots are a lot bigger than single pixels, so 'stupid' linear interpolation should do the job satisfactorily.

However, if you want to make sure you definitely draw the start and end points of a line with all the dots spaced evenly, or if you want to draw a line made up of several segments, it gets a bit more complicated.

Here's some code, with a couple of slightly different methods:

Strict

'this method will draw each line segment individually
'it will change the gap slightly so that the dots are spread evenly along each segment
'it always draws a dot on each corner and endpoint
Function drawdots1(points#[], gap#)
	If Len(points)<4 Return	'need at least two pairs of co-ordinates
	
	Local sx#,sy#,ex#,ey#
	Local dx#,dy#,d#,steps,tgap#
	Local x#,y#
	
	DrawDot points[0],points[1]	'draw a dot at the start of the line
	
	For Local i=0 To Len(points)-3 Step 2		'draw each line segment
	
		sx=points[i]			'get start and end of this segment
		sy=points[i+1]
		ex=points[i+2]
		ey=points[i+3]
				
		dx# = ex-sx			'calculate a vector in the direction of the line, so we can get the distance
		dy# = ey-sy
		d# = Sqr(dx*dx+dy*dy)
		
		steps = round(d/gap)	'work out how many dots to draw (distance between the points, divide by the desired gap size). Round to nearest whole number
		tgap# = d/steps		'work out what the gap needs to be to space the calculated number of needed dots evenly
		
		dx:*tgap/d			'work out the vector between each dot
		dy:*tgap/d
		
		For Local j=1 To steps
			x# = sx+j*dx	'calculate the dot's position by adding the gap vector to the position of the start of the line
			y# = sy+j*dy
			DrawDot x,y	'draw a dot
		Next
	Next
End Function

'this method will draw dots evenly spaced along the whole set of lines
'it might not draw dots on the corners.
Function drawdots2(points#[],gap#)
	If Len(points)<4 Return	'need at least two pairs of co-ordinates

	Local sx#,sy#,ex#,ey#
	Local dx#,dy#,d#,tstep#
	Local x#,y#
	
	Local t#=0	't will keep track of how far along each line segment we are - 0 for at the start, 1 for at the end
	
	For Local i=0 To Len(points)-3 Step 2	'go through the line segments
	
		sx=points[i]			'get start and end of this segment
		sy=points[i+1]
		ex=points[i+2]
		ey=points[i+3]
	
		dx = ex-sx			'work out a vector in the direction of the line
		dy = ey-sy
		d = Sqr(dx*dx+dy*dy)	'work out the length of the line
		
		tstep# = gap/d		'work out what fraction of the line each gap represents
		
		While t<1		'draw dots until we reach the end of the line
		
			x = sx+dx*t	'work out the position of the dot by multiplying the vector by t
			y = sy+dy*t
			DrawDot x,y	'draw the dot
			t:+tstep		'increase t by the amount corresponding to a gap
		Wend
		
		t:-1				'when we reach the end of the line, t might be more than 1, meaning we didn't manage to get a whole gap in at the end
						'subtract 1 from t, and carry over the remainder to the next line segment
	Next
	
	DrawDot ex,ey			'draw the end point of the line. 
End Function

Function DrawDot(x#,y#)
	DrawOval x-2,y-2,4,4
End Function

Function Round(f#)	'round a floating point number to the nearest whole number
	Local i = Floor(f)
	If f-i>=.5
		Return i+1
	Else
		Return i
	EndIf
End Function


Graphics 800,600,0
Local points#[]
Local mode=0
Local gapsize#=20

While Not (KeyHit(KEY_ESCAPE) Or AppTerminate())
	DrawText "Click the mouse!",0,0
	DrawText "Right-click to change methods",0,15
	DrawText "Press up/down to change gap size",0,30

	If MouseHit(1)
		points :+ [Float(MouseX()),Float(MouseY())]
		If Len(points)>16
			points=points[2..]
		EndIf
	EndIf
	
	If MouseHit(2)
		mode=1-mode
	EndIf
	
	gapsize :+ (KeyDown(KEY_UP)-KeyDown(KEY_DOWN))*.25
	If gapsize<1 gapsize=1
	DrawText "Gap Size: "+gapsize,400,15
	
	If mode=0
		drawdots1(points,gapsize)
		DrawText "Using Method 1",400,0
	Else
		drawdots2(points,gapsize)
		DrawText "Using Method 2",400,0
	EndIf
	Flip
	Cls
Wend

edit: code archive entry here and maths code blog post here.

Last edited 2011

WERDNA

(Posted 2011) [#8]

Thanks for the code and links Warpy :)

I've found _JIM's to be more than satisfactory. Just added an extra parameter to the
function that determines whether the dots are yellow or red, and everything works
great.

Thanks everyone!