adding curved movement

BlitzPlus Forums/BlitzPlus Programming/adding curved movement

Bremer

(Posted 2003) [#1]

Hi, I have made this intro effect that takes a picture and cut it in boxes 16x16 pixels. And then it places these boxes randomly on the screen and moves them back to their original place. But the thing is, that it moves the boxes straight to their place and I would like to add a curved movement or something to make it look a little more interesting. If you have any ideas please feel free to comment. Here is the code:

;// FULL SCREEN PICTURE EFFECT

; SET GRAPHICS MODE
Graphics 640,480

; LOAD STUFF
picture = LoadImage("das3.jpg") ;change filename to any 640x480 picture

;// SETUP VARIABLES

Dim expos(1200),eypos(1200)
Dim cxpos(1200),cypos(1200)

x=0
y=0
For a=0 To 1199
expos(a)=x
eypos(a)=y
x=x+16
If x>624 Then
x=0
y=y+16
End If
cxpos(a)=Rnd(623)
cypos(a)=Rnd(463)
Next

;// SETUP MOUSE CHECK

mx1=0
mx2=MouseX()

; Go double buffering
SetBuffer BackBuffer()

While Not KeyHit(1)

mx1=MouseX() : If mx1<>mx2 Then End ; if mouse is moved then end program

For a=0 To 1199
CopyRect expos(a),eypos(a),16,16,cxpos(a),cypos(a),ImageBuffer(picture),BackBuffer()
If cxpos(a) <> expos(a) Then
If cxpos(a) < expos(a) Then cxpos(a) = cxpos(a) + 1
If cxpos(a) > expos(a) Then cxpos(a) = cxpos(a) - 1
End If
If cypos(a) <> eypos(a) Then
If cypos(a) < eypos(a) Then cypos(a) = cypos(a) + 1
If cypos(a) > eypos(a) Then cypos(a) = cypos(a) - 1
End If
Next

Flip ; show backbuffer
Cls ; Clear screen

Wend

End

;// END OF CODE

MuffinRemnant

(Posted 2003) [#2]

Zawran

You could accomplish this in many ways- it depends on the speed required, the type of path required etc.

You could do some grunt-work and calculate a curved path between two random points but it's probably overkill for a transition effect.

An easier way would be to start with (but not necessarily show) the block in its target position and move it along a curved path some number of times. Then to get the desired effect simply replay the movement.

In this example i've used rectangles instead of images for simplicity. The end position and current position start off the same. The current position is then shifted on a circular path 100 steps. When you press a key the path is 'replayed' giving you the desired effect.

You could modify the example by changing the amount the angle (a) increases/decreases or the transcendental functions used to give some interesting curves!

Hope this gives you some ideas :)

Graphics 800,600,16,1
SetBuffer BackBuffer()

Global cur_x#, cur_y#, end_x#, end_y#

;position object and destination
cur_x=400
cur_y=300

end_x=400
end_y=300

a=0
For loop=0 To 100

cur_x=cur_x+2*Cos(a)
cur_y=cur_y+2*Sin(a)
a=a+1

Next

Rect end_x-4, end_y-4, 8, 8, 0
Rect cur_x-4, cur_y-4, 8, 8, 1

Text 0,0, "Pres a key"
Flip
WaitKey()
Cls

For loop=0 To 100

Cls

Rect end_x-4, end_y-4, 8, 8, 0
Rect cur_x-4, cur_y-4, 8, 8, 1

Flip

cur_x=cur_x-2*Cos(a)
cur_y=cur_y-2*Sin(a)
a=a-1

Next

End

EOF	(Posted 2003) [#3]

Heres another method:

; Chaser

Const sw=640,sh=480

Const sz=25 ; size of square/oval

Graphics sw,sh,0,2
SetBuffer BackBuffer()

x#=Rand(20,sw-20) : y#=Rand(20,sh-20)
destx#=x : desty#=y
speed#=0.05

Repeat
	Cls
	Color 100,100,100
	Text 10,10,"Click LMB to position RED square"
	Text 10,40,"Speed = "+speed
	Text 140,40,"<- Change with Cursor keys LEFT /RIGHT"
	
	If MouseHit(1) Then destx=MouseX() : desty=MouseY()
	speed=speed+Float(KeyDown(205)-KeyDown(203))*0.001
		
	x=x+(destx-x)*speed : y=y+(desty-y)*speed
	
	Color 200,20,20 : Rect destx-sz/2,desty-sz/2,sz,sz
	Color 20,230,20 : Oval x-sz/2,y-sz/2,sz,sz
	
	Flip
Until KeyHit(1)

End

MuffinRemnant

(Posted 2003) [#4]

Syntax

That's pretty good but I don't see any curved paths there :)

EOF	(Posted 2003) [#5]

I would like to add a curved movement or something to make it look a little more interesting

@MuffinRemnant,
No curved paths there. Just another method for Zawran to play with.
The code moves the object at a slower rate the nearer it gets to its destination.

MuffinRemnant

(Posted 2003) [#6]

Ok - try this Zawran - 640x480 into 32x32 tiles moving to their detination in curved paths (sorry it's a bit rough but it's a 15 minute knock up)...

Graphics 640,480,16,1
SetBuffer BackBuffer()

Global cur_x#, cur_y#, end_x#, end_y#

Dim grbimg%(300)

Dim cx#(300)
Dim cy#(300)

Dim q#(300)

bigimg=LoadImage("Image1.jpg")

DrawImage bigimg,0,0

; grab the bits

count=0
For y=0 To 448 Step 32
For x=0 To 608 Step 32

grbimg(count)=CreateImage(32,32)

GrabImage grbimg(count), x, y
count=count+1
Next
Next

; position at start
count=0
For y=0 To 448 Step 32
For x=0 To 608 Step 32

cx(count)=x
cy(count)=y

count=count+1
Next
Next

; do 1000 steps for each grabbed image

For loop=0 To 299

a=0

q(loop)= Rnd(-4,4)

For steps = 0 To 99

cx(loop)=cx(loop)+q(loop)*Cos(a)
cy(loop)=cy(loop)+q(loop)*Sin(a)
a=a+2

Next

Next

a=a-2

; playback time
; repeat 100 steps
For steps=0 To 100

Cls

; draw all grabbed images

For loop=0 To 299

DrawImage grbimg(loop), cx(loop), cy(loop)

; update
cx(loop)=cx(loop)-q(loop)*Cos(a)
cy(loop)=cy(loop)-q(loop)*Sin(a)

Next

;show
Flip

a=a-2
Next

; wait for key
WaitKey()
End

Oldefoxx

(Posted 2003) [#7]

I might suggest that you search the forums for some code related to bezier curves. These are a class of cubic spline curves that were adopted because they are simple to implement and lead to some very smooth curves that are easy to deflect and control. You now find them in most drawing packages. They were initially developed to aid in finding the most visually satisfying curve functions for shaping automobile parts. I already found two programs out there, and once you understand the principles of the code, I believe you can come with some excellent results that will fit your needs.