please take a look at my (poor mans) sony psp xmb menu wave background recreation.

Author

Message

zero32

7

Years of Service

User Offline

Joined: 28th Jul 2016

Location:

Posted: 19th Jun 2017 07:56 Edited at: 19th Jun 2017 08:18

Link

Hey @all

have mad some progress with my other projects and i want to make them available on my website. but first i want to update that ugly thing i call my website. i had the idea to make it look like the xmb menu from the sony psp.
but before i get my hands dirty with javascript i want to see if i can get that wave background look right. as far as i know the waves on the psp are bezier curves.

i want to know if you think that the waves move like the ones from the psp.
and if not, maybe one of you can provide some ideas on how i could improve the movement?

the way i did it is that the anchors move around at random speed, changing speed to another random speed everytime the angle (used with sin and cos) overflows 359 and wraps to 0.
i'm no maths expert so the code itself is a huge pile of... a mess

here is my code:

set the first 3 globals to 1 to see whats going on.

global ZOOM_OUT as integer
global SHOW_ANCHORS as integer
global SHOW_DEBUG as integer

// edit this
    global ZOOM_OUT=0
    global SHOW_ANCHORS=0
    global SHOW_DEBUG=0  // outputs: "angleIndex: angleSpeed, angleValue"
//////////////////////////////////

#constant TRUE 1
#constant FALSE 0

type angleType
	value as float
	speed as float
	randomFlag as boolean
endtype
dim angles() as angleType

type pointType
	x as integer
	y as integer
endtype

type waveType
	p1 as pointType
	a1 as pointType
	p2 as pointType
	a2 as pointType
	dist as integer
	angle1 as integer
	angle2 as integer
endtype
dim waves() as waveType

ink 0xffffffff,0

over=screen width()*0.25
	anchover=over*0.5

x1=0-over
	if ZOOM_OUT=TRUE then x1=x1+over
	y1=screen height()*0.3

x2=screen width()+over
	if ZOOM_OUT=TRUE then x2=x2-over
	y2=y1
	
	bs#=screen width()/(0.0+screen width()+over*2)
	
	bw=(screen width())*bs#
	bh=(screen height())*bs#
	
	bx1=(screen width()-bw)*0.5
	by1=(screen height()-bh)*0.5
	bx2=(screen width()+bw)*0.5-1
	by2=(screen height()+bh)*0.5-1

randomize timer()

wave=addWave(addAngle(rnd(360),1.0,1),addAngle(rnd(360),1.0,1))
setWave(wave,x1,y1,x2,y2,anchover)

y1=screen height()*0.7
y2=y1

wave=addWave(addAngle(rnd(360),1.0,1),addAngle(rnd(360),1.0,1))
setWave(wave,x1,y1,x2,y2,anchover)

//disable escapekey

sync on
sync rate 60

do

calcWaves()
	
	cls
	drawWaves(SHOW_ANCHORS)
	
	if SHOW_DEBUG=TRUE then showAngleData()
	if ZOOM_OUT=TRUE then showBorders(bx1,by1,bx2,by2)
	
	sync
		
	if inkey$()="x" then end
	
loop

wait key

end

function showBorders(x1,y1,x2,y2)
	//lock pixels
	line x1,y1,x2,y1
	line x1,y1,x1,y2
	line x2,y1,x2,y2
	line x1,y2,x2,y2
	//unlock pixels
endfunction

function randomSpeed(old#)
	o#=old#+(0.0+rnd(50)-25.0)/100
	if o#<0.0 then o#=0.1
	if o#>1.0 then o#=1.0
endfunction o#

function addAngle(value#,speed#,randomFlag)
	array insert at bottom angles()
	index=array count(angles())
	angles(index).value=value#
	if randomFlag=TRUE then angles(index).speed=randomSpeed(speed#) else angles(index).speed=speed#
	angles(index).randomFlag=randomFlag
endfunction index

function setAngleSpeed(index,speed#)
	angles(index).speed=speed#
endfunction

function setAngleRandom(index,randomFlag)
	angles(index).randomFlag=randomFlag
endfunction

function calcAngle(index)
	angles(index).value=angles(index).value+angles(index).speed
	if angles(index).value>359
		angles(index).value=0.0
		if angles(index).randomFlag=TRUE then setAngleSpeed(index,randomSpeed(angles(index).speed))		
	endif
	o=angles(index).value
endfunction o

function showAngleData()
	for index=0 to array count(angles())
		text 0,index*10,"angle "+str$(index)+": "+str$(angles(index).speed)+", "+str$(angles(index).value)
	next index
endfunction

function addWave(angleIndex1,angleIndex2)
	array insert at bottom waves()
	index=array count(waves())
	waves(index).angle1=angleIndex1
	waves(index).angle2=angleIndex2
endfunction index

function setWave(index,x1,y1,x2,y2,dist)
	waves(index).p1.x=x1
	waves(index).p1.y=y1
	
	waves(index).p2.x=x2
	waves(index).p2.y=y2
	
	waves(index).dist=dist
endfunction

function calcWave(index)
	a1#=calcAngle(waves(index).angle1)
	a2#=calcAngle(waves(index).angle2)
	waves(index).a1.x=abs(sin(a1#))*waves(index).dist
	waves(index).a1.y=cos(a1#)*waves(index).dist
	
	waves(index).a2.x=abs(sin(a2#))*-1*waves(index).dist
	waves(index).a2.y=cos(a2#)*waves(index).dist
endfunction

function calcWaves()
	for index=0 to array count(waves())
		calcWave(index)
	next index
endfunction

function drawWave(index,anchorFlag)
	if anchorFlag=TRUE then drawAnchors(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y)
	drawBezierCurve(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y)
endfunction

function drawWaves(anchorFlag)
	for index=0 to array count(waves())
		drawWave(index,anchorFlag)
	next index
endfunction

function drawAnchors(x1,y1,ax1,ay1,x2,y2,ax2,ay2)
	lock pixels
	circle x1,y1,2
	line x1,y1,x1+ax1,y1+ay1
	circle x1+ax1,y1+ay1,2
	
	circle x2,y2,2
	line x2,y2,x2+ax2,y2+ay2
	circle x2+ax2,y1+ay2,2
	unlock pixels
endfunction

function drawBezierCurve(x1,y1,ax1,ay1,x2,y2,ax2,ay2)
	cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,0.0)
	cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,0.0)
	
	
	for i#=0.1 to 1.1 step 0.1
		
		cx2=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy2=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
		lock pixels
		line cx1,cy1,cx2,cy2
		unlock pixels
		
		cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
	next i#
	
	
	
endfunction

function getBezierPointX(x1,x2,x3,x4,t#)
	
	output#=(1-t#)^3*x1
	output#=output#+3*(1-t#)^2*t#*x2
	output#=output#+3*(1-t#)*t#^2*x3
	output#=output#+t#^3*x4
	
endfunction output#

function getBezierPointY(y1,y2,y3,y4,t#)
	
	output#=(1-t#)^3*y1
	output#=output#+3*(1-t#)^2*t#*y2
	output#=output#+3*(1-t#)*t#^2*y3
	output#=output#+t#^3*y4
	
endfunction output#

+ Code Snippet

global ZOOM_OUT as integer
global SHOW_ANCHORS as integer
global SHOW_DEBUG as integer

// edit this
    global ZOOM_OUT=0
    global SHOW_ANCHORS=0
    global SHOW_DEBUG=0  // outputs: "angleIndex: angleSpeed, angleValue"
//////////////////////////////////





#constant TRUE 1
#constant FALSE 0




type angleType
	value as float
	speed as float
	randomFlag as boolean
endtype
dim angles() as angleType


type pointType
	x as integer
	y as integer
endtype

type waveType
	p1 as pointType
	a1 as pointType
	p2 as pointType
	a2 as pointType
	dist as integer
	angle1 as integer
	angle2 as integer
endtype
dim waves() as waveType


ink 0xffffffff,0

	over=screen width()*0.25
	anchover=over*0.5

	x1=0-over
	if ZOOM_OUT=TRUE then x1=x1+over
	y1=screen height()*0.3

	x2=screen width()+over
	if ZOOM_OUT=TRUE then x2=x2-over
	y2=y1
	
	bs#=screen width()/(0.0+screen width()+over*2)
	
	bw=(screen width())*bs#
	bh=(screen height())*bs#
	
	bx1=(screen width()-bw)*0.5
	by1=(screen height()-bh)*0.5
	bx2=(screen width()+bw)*0.5-1
	by2=(screen height()+bh)*0.5-1

	

randomize timer()

wave=addWave(addAngle(rnd(360),1.0,1),addAngle(rnd(360),1.0,1))
setWave(wave,x1,y1,x2,y2,anchover)

wave=addWave(addAngle(rnd(360),1.0,1),addAngle(rnd(360),1.0,1))
setWave(wave,x1,y1,x2,y2,anchover)


y1=screen height()*0.7
y2=y1


wave=addWave(addAngle(rnd(360),1.0,1),addAngle(rnd(360),1.0,1))
setWave(wave,x1,y1,x2,y2,anchover)

wave=addWave(addAngle(rnd(360),1.0,1),addAngle(rnd(360),1.0,1))
setWave(wave,x1,y1,x2,y2,anchover)




//disable escapekey

sync on
sync rate 60




do

	calcWaves()
	
	cls
	drawWaves(SHOW_ANCHORS)
	
	if SHOW_DEBUG=TRUE then showAngleData()
	if ZOOM_OUT=TRUE then showBorders(bx1,by1,bx2,by2)
	
	sync
		
	if inkey$()="x" then end
	
loop

wait key

end

function showBorders(x1,y1,x2,y2)
	//lock pixels
	line x1,y1,x2,y1
	line x1,y1,x1,y2
	line x2,y1,x2,y2
	line x1,y2,x2,y2
	//unlock pixels
endfunction

function randomSpeed(old#)
	o#=old#+(0.0+rnd(50)-25.0)/100
	if o#<0.0 then o#=0.1
	if o#>1.0 then o#=1.0
endfunction o#

function addAngle(value#,speed#,randomFlag)
	array insert at bottom angles()
	index=array count(angles())
	angles(index).value=value#
	if randomFlag=TRUE then angles(index).speed=randomSpeed(speed#) else angles(index).speed=speed#
	angles(index).randomFlag=randomFlag
endfunction index

function setAngleSpeed(index,speed#)
	angles(index).speed=speed#
endfunction

function setAngleRandom(index,randomFlag)
	angles(index).randomFlag=randomFlag
endfunction

function calcAngle(index)
	angles(index).value=angles(index).value+angles(index).speed
	if angles(index).value>359
		angles(index).value=0.0
		if angles(index).randomFlag=TRUE then setAngleSpeed(index,randomSpeed(angles(index).speed))		
	endif
	o=angles(index).value
endfunction o

function showAngleData()
	for index=0 to array count(angles())
		text 0,index*10,"angle "+str$(index)+": "+str$(angles(index).speed)+", "+str$(angles(index).value)
	next index
endfunction

function addWave(angleIndex1,angleIndex2)
	array insert at bottom waves()
	index=array count(waves())
	waves(index).angle1=angleIndex1
	waves(index).angle2=angleIndex2
endfunction index

function setWave(index,x1,y1,x2,y2,dist)
	waves(index).p1.x=x1
	waves(index).p1.y=y1
	
	waves(index).p2.x=x2
	waves(index).p2.y=y2
	
	waves(index).dist=dist
endfunction


function calcWave(index)
	a1#=calcAngle(waves(index).angle1)
	a2#=calcAngle(waves(index).angle2)
	waves(index).a1.x=abs(sin(a1#))*waves(index).dist
	waves(index).a1.y=cos(a1#)*waves(index).dist
	
	waves(index).a2.x=abs(sin(a2#))*-1*waves(index).dist
	waves(index).a2.y=cos(a2#)*waves(index).dist
endfunction

function calcWaves()
	for index=0 to array count(waves())
		calcWave(index)
	next index
endfunction


function drawWave(index,anchorFlag)
	if anchorFlag=TRUE then drawAnchors(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y)
	drawBezierCurve(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y)
endfunction

function drawWaves(anchorFlag)
	for index=0 to array count(waves())
		drawWave(index,anchorFlag)
	next index
endfunction





function drawAnchors(x1,y1,ax1,ay1,x2,y2,ax2,ay2)
	lock pixels
	circle x1,y1,2
	line x1,y1,x1+ax1,y1+ay1
	circle x1+ax1,y1+ay1,2
	
	circle x2,y2,2
	line x2,y2,x2+ax2,y2+ay2
	circle x2+ax2,y1+ay2,2
	unlock pixels
endfunction

function drawBezierCurve(x1,y1,ax1,ay1,x2,y2,ax2,ay2)
	cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,0.0)
	cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,0.0)
	
	
	for i#=0.1 to 1.1 step 0.1
		
		cx2=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy2=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
		lock pixels
		line cx1,cy1,cx2,cy2
		unlock pixels
		
		cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
	next i#
	
	
	
endfunction

function getBezierPointX(x1,x2,x3,x4,t#)
	
	output#=(1-t#)^3*x1
	output#=output#+3*(1-t#)^2*t#*x2
	output#=output#+3*(1-t#)*t#^2*x3
	output#=output#+t#^3*x4
	
endfunction output#

function getBezierPointY(y1,y2,y3,y4,t#)
	
	output#=(1-t#)^3*y1
	output#=output#+3*(1-t#)^2*t#*y2
	output#=output#+3*(1-t#)*t#^2*y3
	output#=output#+t#^3*y4
	
endfunction output#

Back to top

Profile PM

Chris Tate

DBPro Master

15

Years of Service

User Offline

Joined: 29th Aug 2008

Location: London, England

Posted: 19th Jun 2017 09:02

Link

I am not the one to answer because I've never used a Sony PSP. just wanted to say that the waves look pretty cool. Would love to see the end result.

Back to top

Profile PM Email Website

zero32

7

Years of Service

User Offline

Joined: 28th Jul 2016

Location:

Posted: 20th Jun 2017 16:39

Link

thank you for your kind words.

i'm sure that i can improve the wave motion in some ways, but i guess i must wait until my repair kit arrives so i can get my psp to work again.
until then, i updated my code so it looks more like what i want to do. code is still a mess

i had to write my own line function, the standard line function has issues with lock pixels/unlock pixels in for loops.
for the width, i just made a for loop that draws additional pixels below any pixel the line function draws. i think i need a better way to calc and draw the width.
for every pixel, before it get's drawn to the screen, it interpolates color with the pixel that's already on the screen, resulting in transparency.

remstart
set display mode desktop width(),desktop height(),32
set window position 0,0
set window layout 0,0,0
remend

global ZOOM_OUT as integer
global SHOW_ANCHORS as integer
global SHOW_DEBUG as integer
 
// edit this
    global ZOOM_OUT=0	// not a real zoom, it is just there to give you an idea of what's going on
    global SHOW_ANCHORS=0
    global SHOW_DEBUG=0  // outputs: "angleIndex: angleSpeed, angleValue"
//////////////////////////////////

#constant C_DIRECTION_UP 0
#constant C_DIRECTION_DOWN 1

#constant TRUE 1
#constant FALSE 0

type angleType
	value as float
	speed as float
	randomFlag as boolean
endtype
dim angles() as angleType

type pointType
	x as integer
	y as integer
endtype

type strokeType
	width as integer
	gradientDirection as boolean
endtype

type waveType
	p1 as pointType
	a1 as pointType
	p2 as pointType
	a2 as pointType
	dist as integer
	angle1 as integer
	angle2 as integer
	stroke as strokeType
endtype
dim waves() as waveType

ink 0xffffffff,0

over=screen width()*0.25
	anchover=over*0.5

x1=0-over
	if ZOOM_OUT=TRUE then x1=x1+over
	y1=screen height()*0.3

x2=screen width()+over
	if ZOOM_OUT=TRUE then x2=x2-over
	y2=y1
	
	bs#=screen width()/(0.0+screen width()+over*2)
	
	bw=(screen width())*bs#
	bh=(screen height())*bs#
	
	bx1=(screen width()-bw)*0.5
	by1=(screen height()-bh)*0.5
	bx2=(screen width()+bw)*0.5-1
	by2=(screen height()+bh)*0.5-1

startSpeed#=0.4

randomize timer()

wave=addWave(addAngle(rnd(360),startSpeed#,1),addAngle(rnd(360),startSpeed#,1))
setWave(wave,x1,y1,x2,y2,anchover,screen height()*0.03,C_DIRECTION_DOWN)

y1=screen height()*0.7
y2=y1

wave=addWave(addAngle(rnd(360),startSpeed#,1),addAngle(rnd(360),startSpeed#,1))
setWave(wave,x1,y1,x2,y2,anchover,screen height()*0.03,C_DIRECTION_UP)

//disable escapekey

sync on
sync rate 60
sync

do

calcWaves()
	
	cls
	
	box 0,0,screen width(),screen height(),0xff5988B8,0xff73B7F9,0xff5988B8,0xff73B7F9
	
	drawWaves(SHOW_ANCHORS)
	
	if SHOW_DEBUG=TRUE then showAngleData()
	if ZOOM_OUT=TRUE then showBorders(bx1,by1,bx2,by2)
	
	//blur bitmap 0,4
		text 0,0,"fps: "+str$(screen fps())
	sync
		
	if inkey$()="x" then end
	
loop

wait key

end

function showBorders(x1,y1,x2,y2)
	//lock pixels
	line x1,y1,x2,y1
	line x1,y1,x1,y2
	line x2,y1,x2,y2
	line x1,y2,x2,y2
	//unlock pixels
endfunction

function randomSpeed(old#)
	o#=old#+(0.0+rnd(50)-25.0)/500
	if o#<0.01 then o#=0.01
	if o#>0.4 then o#=0.4
endfunction o#

function addAngle(value#,speed#,randomFlag)
	array insert at bottom angles()
	index=array count(angles())
	angles(index).value=value#
	if randomFlag=TRUE then angles(index).speed=randomSpeed(speed#) else angles(index).speed=speed#
	angles(index).randomFlag=randomFlag
endfunction index

function setAngleSpeed(index,speed#)
	angles(index).speed=speed#
endfunction

function setAngleRandom(index,randomFlag)
	angles(index).randomFlag=randomFlag
endfunction

function calcAngle(index)
	angles(index).value=angles(index).value+angles(index).speed
	if angles(index).value>359
		angles(index).value=0.0
		if angles(index).randomFlag=TRUE then setAngleSpeed(index,randomSpeed(angles(index).speed))		
	endif
	o=angles(index).value
endfunction o

function showAngleData()
	for index=0 to array count(angles())
		text 0,index*10,"angle "+str$(index)+": "+str$(angles(index).speed)+", "+str$(angles(index).value)
	next index
endfunction

function addWave(angleIndex1,angleIndex2)
	array insert at bottom waves()
	index=array count(waves())
	waves(index).angle1=angleIndex1
	waves(index).angle2=angleIndex2
endfunction index

function setWave(index,x1,y1,x2,y2,dist,strokeWidth,strokeDirection)
	waves(index).p1.x=x1
	waves(index).p1.y=y1
	
	waves(index).p2.x=x2
	waves(index).p2.y=y2
	
	waves(index).dist=dist
	
	waves(index).stroke.width=strokeWidth
	waves(index).stroke.gradientDirection=strokeDirection
endfunction

function calcWave(index)
	a1#=calcAngle(waves(index).angle1)
	a2#=calcAngle(waves(index).angle2)
	waves(index).a1.x=abs(sin(a1#))*waves(index).dist
	waves(index).a1.y=cos(a1#)*waves(index).dist
	
	waves(index).a2.x=abs(sin(a2#))*-1*waves(index).dist
	waves(index).a2.y=cos(a2#)*waves(index).dist
endfunction

function calcWaves()
	for index=0 to array count(waves())
		calcWave(index)
	next index
endfunction

function drawWave(index,anchorFlag)
	if anchorFlag=TRUE then drawAnchors(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y)
		drawBezierCurve(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y,waves(index).stroke.width,waves(index).stroke.gradientDirection)
endfunction

function drawWaves(anchorFlag)
	for index=0 to array count(waves())
		drawWave(index,anchorFlag)
	next index
endfunction

function drawLine(x1,y1,x2,y2,color,transparency#)
    if y1=y2 and x1=x2 then x2=x1+1
    
    deltax#=x2-x1
    deltay#=y2-y1
    
    
    if abs(deltax#)>abs(deltay#) then iSteps#=abs(deltax#) else iSteps#=abs(deltay#)
    
    xInc#=deltax#/iSteps#
    yInc#=deltay#/iSteps#
    
    x#=x1
    y#=y1
    
    steps=int(iSteps#)
    
    
    
    for i=1 to steps
        dot x#,y#,interpolateColor(color,point(x#,y#),transparency#)
        x#=x#+xInc#
        y#=y#+yInc#
    next i

endfunction

function drawAnchors(x1,y1,ax1,ay1,x2,y2,ax2,ay2)
	lock pixels
	circle x1,y1,2
	line x1,y1,x1+ax1,y1+ay1
	circle x1+ax1,y1+ay1,2
	
	circle x2,y2,2
	line x2,y2,x2+ax2,y2+ay2
	circle x2+ax2,y1+ay2,2
	unlock pixels
endfunction

function drawBezierCurve(x1,y1,ax1,ay1,x2,y2,ax2,ay2,width,gradientDirection)
	
	cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,0.0)
	cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,0.0)
	
	lock pixels
	for i#=0.1 to 1.1 step 0.005
		
		cx2=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy2=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
		//lock pixels
		//line cx1,cy1,cx2,cy2
		
		for w=1 to width
			if gradientDirection=C_DIRECTION_DOWN then t#=1.0/width*w else t#=1.0-1.0/width*w
			t#=t#+0.3
			if t#>1.0 then t#=1.0	
			
			drawLine(cx1,cy1+w,cx2,cy2+w,0xffffffff,t#)
		next w
		//unlock pixels
		
		cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
	next i#
	unlock pixels
	
endfunction

function getBezierPointX(x1,x2,x3,x4,t#)
	
	output#=(1-t#)^3*x1
	output#=output#+3*(1-t#)^2*t#*x2
	output#=output#+3*(1-t#)*t#^2*x3
	output#=output#+t#^3*x4
	
endfunction output#

function getBezierPointY(y1,y2,y3,y4,t#)
	
	output#=(1-t#)^3*y1
	output#=output#+3*(1-t#)^2*t#*y2
	output#=output#+3*(1-t#)*t#^2*y3
	output#=output#+t#^3*y4
	
endfunction output#

function interpolateColor(a,b,t#)
    ra=rgbr(a) : ga=rgbg(a) : ba=rgbb(a)
    rb=rgbr(b) : gb=rgbg(b) : bb=rgbb(b)
    r=ra+(rb-ra)*t# : g=ga+(gb-ga)*t# : b=ba+(bb-ba)*t#
    o=rgb(r,g,b)
ENDFUNCTION o

+ Code Snippet


remstart
set display mode desktop width(),desktop height(),32
set window position 0,0
set window layout 0,0,0
remend

global ZOOM_OUT as integer
global SHOW_ANCHORS as integer
global SHOW_DEBUG as integer
 
// edit this
    global ZOOM_OUT=0	// not a real zoom, it is just there to give you an idea of what's going on
    global SHOW_ANCHORS=0
    global SHOW_DEBUG=0  // outputs: "angleIndex: angleSpeed, angleValue"
//////////////////////////////////


#constant C_DIRECTION_UP 0
#constant C_DIRECTION_DOWN 1


#constant TRUE 1
#constant FALSE 0




type angleType
	value as float
	speed as float
	randomFlag as boolean
endtype
dim angles() as angleType


type pointType
	x as integer
	y as integer
endtype

type strokeType
	width as integer
	gradientDirection as boolean
endtype

type waveType
	p1 as pointType
	a1 as pointType
	p2 as pointType
	a2 as pointType
	dist as integer
	angle1 as integer
	angle2 as integer
	stroke as strokeType
endtype
dim waves() as waveType


ink 0xffffffff,0

	over=screen width()*0.25
	anchover=over*0.5

	x1=0-over
	if ZOOM_OUT=TRUE then x1=x1+over
	y1=screen height()*0.3

	x2=screen width()+over
	if ZOOM_OUT=TRUE then x2=x2-over
	y2=y1
	
	bs#=screen width()/(0.0+screen width()+over*2)
	
	bw=(screen width())*bs#
	bh=(screen height())*bs#
	
	bx1=(screen width()-bw)*0.5
	by1=(screen height()-bh)*0.5
	bx2=(screen width()+bw)*0.5-1
	by2=(screen height()+bh)*0.5-1

	startSpeed#=0.4

randomize timer()

wave=addWave(addAngle(rnd(360),startSpeed#,1),addAngle(rnd(360),startSpeed#,1))
setWave(wave,x1,y1,x2,y2,anchover,screen height()*0.03,C_DIRECTION_DOWN)

wave=addWave(addAngle(rnd(360),startSpeed#,1),addAngle(rnd(360),startSpeed#,1))
setWave(wave,x1,y1,x2,y2,anchover,screen height()*0.03,C_DIRECTION_DOWN)


y1=screen height()*0.7
y2=y1


wave=addWave(addAngle(rnd(360),startSpeed#,1),addAngle(rnd(360),startSpeed#,1))
setWave(wave,x1,y1,x2,y2,anchover,screen height()*0.03,C_DIRECTION_UP)

wave=addWave(addAngle(rnd(360),startSpeed#,1),addAngle(rnd(360),startSpeed#,1))
setWave(wave,x1,y1,x2,y2,anchover,screen height()*0.03,C_DIRECTION_UP)




//disable escapekey

sync on
sync rate 60
sync

do

	calcWaves()
	
	cls
	
	box 0,0,screen width(),screen height(),0xff5988B8,0xff73B7F9,0xff5988B8,0xff73B7F9
	
	drawWaves(SHOW_ANCHORS)
	
	if SHOW_DEBUG=TRUE then showAngleData()
	if ZOOM_OUT=TRUE then showBorders(bx1,by1,bx2,by2)
	
	//blur bitmap 0,4
		text 0,0,"fps: "+str$(screen fps())
	sync
		
	if inkey$()="x" then end
	
loop

wait key

end

function showBorders(x1,y1,x2,y2)
	//lock pixels
	line x1,y1,x2,y1
	line x1,y1,x1,y2
	line x2,y1,x2,y2
	line x1,y2,x2,y2
	//unlock pixels
endfunction

function randomSpeed(old#)
	o#=old#+(0.0+rnd(50)-25.0)/500
	if o#<0.01 then o#=0.01
	if o#>0.4 then o#=0.4
endfunction o#

function addAngle(value#,speed#,randomFlag)
	array insert at bottom angles()
	index=array count(angles())
	angles(index).value=value#
	if randomFlag=TRUE then angles(index).speed=randomSpeed(speed#) else angles(index).speed=speed#
	angles(index).randomFlag=randomFlag
endfunction index

function setAngleSpeed(index,speed#)
	angles(index).speed=speed#
endfunction

function setAngleRandom(index,randomFlag)
	angles(index).randomFlag=randomFlag
endfunction

function calcAngle(index)
	angles(index).value=angles(index).value+angles(index).speed
	if angles(index).value>359
		angles(index).value=0.0
		if angles(index).randomFlag=TRUE then setAngleSpeed(index,randomSpeed(angles(index).speed))		
	endif
	o=angles(index).value
endfunction o

function showAngleData()
	for index=0 to array count(angles())
		text 0,index*10,"angle "+str$(index)+": "+str$(angles(index).speed)+", "+str$(angles(index).value)
	next index
endfunction

function addWave(angleIndex1,angleIndex2)
	array insert at bottom waves()
	index=array count(waves())
	waves(index).angle1=angleIndex1
	waves(index).angle2=angleIndex2
endfunction index

function setWave(index,x1,y1,x2,y2,dist,strokeWidth,strokeDirection)
	waves(index).p1.x=x1
	waves(index).p1.y=y1
	
	waves(index).p2.x=x2
	waves(index).p2.y=y2
	
	waves(index).dist=dist
	
	waves(index).stroke.width=strokeWidth
	waves(index).stroke.gradientDirection=strokeDirection
endfunction


function calcWave(index)
	a1#=calcAngle(waves(index).angle1)
	a2#=calcAngle(waves(index).angle2)
	waves(index).a1.x=abs(sin(a1#))*waves(index).dist
	waves(index).a1.y=cos(a1#)*waves(index).dist
	
	waves(index).a2.x=abs(sin(a2#))*-1*waves(index).dist
	waves(index).a2.y=cos(a2#)*waves(index).dist
endfunction

function calcWaves()
	for index=0 to array count(waves())
		calcWave(index)
	next index
endfunction


function drawWave(index,anchorFlag)
	if anchorFlag=TRUE then drawAnchors(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y)
		drawBezierCurve(waves(index).p1.x,waves(index).p1.y,waves(index).a1.x,waves(index).a1.y,waves(index).p2.x,waves(index).p2.y,waves(index).a2.x,waves(index).a2.y,waves(index).stroke.width,waves(index).stroke.gradientDirection)
endfunction

function drawWaves(anchorFlag)
	for index=0 to array count(waves())
		drawWave(index,anchorFlag)
	next index
endfunction


function drawLine(x1,y1,x2,y2,color,transparency#)
    if y1=y2 and x1=x2 then x2=x1+1
    
    deltax#=x2-x1
    deltay#=y2-y1
    
    
    if abs(deltax#)>abs(deltay#) then iSteps#=abs(deltax#) else iSteps#=abs(deltay#)
    
    xInc#=deltax#/iSteps#
    yInc#=deltay#/iSteps#
    
    x#=x1
    y#=y1
    
    steps=int(iSteps#)
    
    
    
    for i=1 to steps
        dot x#,y#,interpolateColor(color,point(x#,y#),transparency#)
        x#=x#+xInc#
        y#=y#+yInc#
    next i

endfunction


function drawAnchors(x1,y1,ax1,ay1,x2,y2,ax2,ay2)
	lock pixels
	circle x1,y1,2
	line x1,y1,x1+ax1,y1+ay1
	circle x1+ax1,y1+ay1,2
	
	circle x2,y2,2
	line x2,y2,x2+ax2,y2+ay2
	circle x2+ax2,y1+ay2,2
	unlock pixels
endfunction

function drawBezierCurve(x1,y1,ax1,ay1,x2,y2,ax2,ay2,width,gradientDirection)
	
	cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,0.0)
	cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,0.0)
	
	lock pixels
	for i#=0.1 to 1.1 step 0.005
		
		cx2=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy2=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
		//lock pixels
		//line cx1,cy1,cx2,cy2
		
		for w=1 to width
			if gradientDirection=C_DIRECTION_DOWN then t#=1.0/width*w else t#=1.0-1.0/width*w
			t#=t#+0.3
			if t#>1.0 then t#=1.0	
			
			drawLine(cx1,cy1+w,cx2,cy2+w,0xffffffff,t#)
		next w
		//unlock pixels
		
		cx1=getBezierPointX(x1,x1+ax1,x2+ax2,x2,i#)
		cy1=getBezierPointY(y1,y1+ay1,y2+ay2,y2,i#)
		
	next i#
	unlock pixels
	
endfunction

function getBezierPointX(x1,x2,x3,x4,t#)
	
	output#=(1-t#)^3*x1
	output#=output#+3*(1-t#)^2*t#*x2
	output#=output#+3*(1-t#)*t#^2*x3
	output#=output#+t#^3*x4
	
endfunction output#

function getBezierPointY(y1,y2,y3,y4,t#)
	
	output#=(1-t#)^3*y1
	output#=output#+3*(1-t#)^2*t#*y2
	output#=output#+3*(1-t#)*t#^2*y3
	output#=output#+t#^3*y4
	
endfunction output#


function interpolateColor(a,b,t#)
    ra=rgbr(a) : ga=rgbg(a) : ba=rgbb(a)
    rb=rgbr(b) : gb=rgbg(b) : bb=rgbb(b)
    r=ra+(rb-ra)*t# : g=ga+(gb-ga)*t# : b=ba+(bb-ba)*t#
    o=rgb(r,g,b)
ENDFUNCTION o

Attachments

Login to view attachments

Back to top

Profile PM

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 14th Jul 2017 06:32

Link

Tried using sprites instead of drawing all those pixels? I tried running it and it only ran at 14fps for me and the curves didn't appear to change, only move up and down.

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Back to top

Profile PM Email Website

Sorry your browser is not supported!

DarkBASIC Professional Discussion / please take a look at my (poor mans) sony psp xmb menu wave background recreation.

Attachments