Create nice images for background...

Just starting out? Need help? Post your questions and find answers here.
Post Reply
User avatar
Michael Vogel
Addict
Addict
Posts: 2818
Joined: Thu Feb 09, 2006 11:27 pm
Contact:
Contact Michael Vogel

Create nice images for background...

Post by Michael Vogel »

I'd like to create random images for banners etc. which may look like one of the following examples:
Image

My first attempt generates thousands of lines, but the parameters of the waves are totally uncontroled, so the chaotic results are far away from the target...
So I am interested if someone will be able to create nicer results?

Code: Select all

#X=1600
#Y=400
#count=360

Procedure xRandom(n)

	Protected x

	Repeat
		x=Random(n)-n>>1
	Until x<-n>>3 Or x>n>>3

	ProcedureReturn x

EndProcedure
Procedure showwave(col,start.f,frequenz.f,amplitude.f,shiftx.f,shifty.f,screenx.f,screeny.f,stepper.f)

	Protected i
	Protected s.f
	Protected x0,y0
	Protected x.f,y.f

	s.f=start
	i=0
	Repeat
		y.f=Sin(s*frequenz)*amplitude*screeny+shifty
		x.f=i*screenx+shiftx
		If i
			LineXY(x0,y0,x,y,col)
		EndIf
		x0=x
		y0=y
		s+stepper
		i+5+Random(5)
	Until i>#count


EndProcedure


CreateImage(0,#X*2,#Y*2,32,#White)
StartDrawing(ImageOutput(0))

For wave=0 To 2

	frequenz.f=0.6+Random(10)/50+wave*0.01
	amplitude.f=18+Random(10)/200+wave*2
	start.f=Random(30)
	len.f=80+Random(20)
	shiftx.f=400+wave*40+xRandom(80)
	shifty.f=300+wave*50+xRandom(100)

	stepper.f=(len-start)/#count
	screenx.f=#x*6/5/#count
	screeny.f=#y/100

	DrawingMode(#PB_2DDrawing_AlphaBlend)

	Select wave
	Case 0
		col=$1E67DF
	Case 1
		col=$DF621E
	Case 2
		col=$1EDF76
	EndSelect

	d1.f=(xRandom(100))/10000
	d2.f=(xRandom(100))/10000
	d3.f=(xRandom(100))/400000
	d4.f=xRandom(10)/10;
	d5.f=xRandom(10)/50;
	For i=0 To 1000 
		start+d1;+(Random(50))/50-1
		amplitude+d2;+(Random(50))/500-0.1
		frequenz+d3;+(Random(50))/50000-0.001
		shiftx+d4+Random(40)/10-2
		shifty+d5+Random(10)/10-0.5
		z=500-Abs(500-i)
		Select z
		Case 490 To 500
			z>>3
		Case 480 To 490
			z>>4
		Case 400 To 480
			z/28
		Default
			z>>5
		EndSelect
		showwave(z<<24|col,start,frequenz,amplitude,shiftx,shifty,screenx,screeny,stepper)
	Next i

Next wave

ResizeImage(0,#X,#Y)

StopDrawing()
OpenWindow(0,0,0,#X,#Y,"")
ImageGadget(0,0,0,#X,#Y,ImageID(0))
Repeat
Until WaitWindowEvent()=#PB_Event_CloseWindow
Top
User avatar
Michael Vogel
Addict
Addict
Posts: 2818
Joined: Thu Feb 09, 2006 11:27 pm
Contact:
Contact Michael Vogel

Re: Create nice images for background...

Post by Michael Vogel »

Second attempt, a way better, but needs a lot of tuning still...

Code: Select all

#X=800
#Y=200

Structure PointType
	x.f
	y.f
EndStructure

Global Dim z.PointType(17)

#OffsetStart=6
#OffsetEnd=12

Macro StartPoint(index,x_value,y_value)

	z(index+#OffsetStart)\x=x_value
	z(index+#OffsetStart)\y=y_value

EndMacro
Macro EndPoint(index,x_value,y_value)

	z(index+#OffsetEnd)\x=z(index+#OffsetStart)\x+x_value
	z(index+#OffsetEnd)\y=z(index+#OffsetStart)\y+y_value

EndMacro
Procedure SetPoints(position,steps)

	Protected i
	Protected factor.f

	factor=position/steps
	For i=0 To 5
		z(i)\x=z(i+#OffsetStart)\x+(z(i+#OffsetEnd)\x-z(i+#OffsetStart)\x)*factor
		z(i)\y=z(i+#OffsetStart)\y+(z(i+#OffsetEnd)\y-z(i+#OffsetStart)\y)*factor
	Next i

EndProcedure
Procedure DrawWave(color)

	MovePathCursor(z(0)\x,z(0)\y)
	AddPathCurve(z(1)\x,z(1)\y,z(2)\x,z(2)\y,z(3)\x,z(3)\y)
	VectorSourceColor(color)
	StrokePath(1)

EndProcedure

OpenWindow(0,0,0,#X,#Y,"Waves",#PB_Window_SystemMenu)
CanvasGadget(0,0,0,#X,#Y)

StartVectorDrawing(CanvasVectorOutput(0))

StartPoint(0,100,100)
StartPoint(1,300,-100)
StartPoint(2,500,300)
StartPoint(3,700,100)
StartPoint(4,900,30)
StartPoint(5,1100,100)

EndPoint(0,20,50)
EndPoint(1,50,0)
EndPoint(2,0,-15)
EndPoint(3,50,-50)
EndPoint(4,0,0)
EndPoint(5,0,0)

For i=0 To 100
	SetPoints(i,100)
	DrawWave($10F9AA48)
Next i

EndPoint(0,-20,10)
EndPoint(1,10,-30)
EndPoint(2,20,-35)
EndPoint(3,-50,50)
EndPoint(4,0,0)
EndPoint(5,0,0)

For i=0 To 50
	SetPoints(i,50)
	DrawWave($20F69924)
Next i

StopVectorDrawing()

Repeat
	Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow

...and how to add another smooth curve segment to AddPathCurve? Or, for my case, I need to calculate seven points for a single wave which could be used for two AddPathCurve commands.

Code: Select all

#X=1000
#Y=200

Structure PointType
	x.f
	y.f
EndStructure

Global Dim z.PointType(20)

#OffsetStart=7
#OffsetEnd=14

Macro StartPoint(index,x_value,y_value)

	z(index+#OffsetStart)\x=x_value
	z(index+#OffsetStart)\y=y_value

EndMacro
Macro EndPoint(index,x_value,y_value)

	z(index+#OffsetEnd)\x=z(index+#OffsetStart)\x+x_value
	z(index+#OffsetEnd)\y=z(index+#OffsetStart)\y+y_value

EndMacro
Procedure SetPoints(position,steps)

	Protected i
	Protected factor.f

	factor=position/steps
	For i=0 To 6
		z(i)\x=z(i+#OffsetStart)\x+(z(i+#OffsetEnd)\x-z(i+#OffsetStart)\x)*factor
		z(i)\y=z(i+#OffsetStart)\y+(z(i+#OffsetEnd)\y-z(i+#OffsetStart)\y)*factor
	Next i

EndProcedure
Procedure DrawWave(color)

	MovePathCursor(z(0)\x,z(0)\y)
	AddPathCurve(z(1)\x,z(1)\y,z(2)\x,z(2)\y,z(3)\x,z(3)\y)
	AddPathCurve(z(4)\x,z(4)\y,z(5)\x,z(5)\y,z(6)\x,z(6)\y)
	VectorSourceColor(color)
	StrokePath(1)

EndProcedure

OpenWindow(0,0,0,#X,#Y,"Waves",#PB_Window_SystemMenu)
CanvasGadget(0,0,0,#X,#Y)

StartVectorDrawing(CanvasVectorOutput(0))

StartPoint(0,100,100)
StartPoint(1,300,-100)
StartPoint(2,350,200)
StartPoint(3,500,150)
StartPoint(4,650,100)
StartPoint(5,700,-100)
StartPoint(6,900,100)

EndPoint(0,20,50)
EndPoint(1,50,0)
EndPoint(2,0,-15)
EndPoint(3,50,-50)
EndPoint(4,-40,10)
EndPoint(5,-30,70)
EndPoint(6,50,-20)

For i=0 To 100
	SetPoints(i,100)
	DrawWave($10F9AA48)
Next i

EndPoint(0,-20,10)
EndPoint(1,10,-30)
EndPoint(2,20,-35)
EndPoint(3,-10,10)
EndPoint(4,0,0)
EndPoint(5,0,0)
EndPoint(6,0,0)

For i=0 To 50
	SetPoints(i,50)
	DrawWave($20F69924)
Next i

StopVectorDrawing()

Repeat
	Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow
Top
User avatar
RSBasic
Moderator
Moderator
Posts: 1228
Joined: Thu Dec 31, 2009 11:05 pm
Location: Gernsbach (Germany)
Contact:
Contact RSBasic

Re: Create nice images for background...

Post by RSBasic »

Looks very good, awesome. Image
Image
Image
Top
walbus
Addict
Addict
Posts: 929
Joined: Sat Mar 02, 2013 9:17 am

Re: Create nice images for background...

Post by walbus »

Looks very nice...
Top
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Create nice images for background...

Post by davido »

@Michael Vogel,

Some rather subtle effects. 8)
Very nice, indeed.

Tested on MacBook Pro.
DE AA EB
Top
User avatar
Michael Vogel
Addict
Addict
Posts: 2818
Joined: Thu Feb 09, 2006 11:27 pm
Contact:
Contact Michael Vogel

Re: Create nice images for background...

Post by Michael Vogel »

Still don't get it close enough to a smooth curve (connecting two bezier segements is not that simple)...
...so a lot of things have to be done to get closer to the original examples.

Code: Select all

#X=1200
#Y=250

Structure PointType
	x.f
	y.f
EndStructure

Global Dim z.PointType(20)

#OffsetStart=7
#OffsetEnd=14

Macro StartPoint(index,x_value,y_value)

	z(index+#OffsetStart)\x=x_value
	z(index+#OffsetStart)\y=y_value

EndMacro
Macro EndPoint(index,x_value,y_value)

	z(index+#OffsetEnd)\x=z(index+#OffsetStart)\x+x_value
	z(index+#OffsetEnd)\y=z(index+#OffsetStart)\y+y_value

EndMacro
Procedure SetPoints(position,steps)

	Protected i
	Protected factor.f

	factor=position/steps
	For i=0 To 6
		z(i)\x=z(i+#OffsetStart)\x+(z(i+#OffsetEnd)\x-z(i+#OffsetStart)\x)*factor
		z(i)\y=z(i+#OffsetStart)\y+(z(i+#OffsetEnd)\y-z(i+#OffsetStart)\y)*factor
	Next i

EndProcedure
Procedure DrawWave(color)

	MovePathCursor(z(0)\x,z(0)\y)
	AddPathCurve(z(1)\x,z(1)\y,z(2)\x,z(2)\y,z(3)\x,z(3)\y)
	AddPathCurve(z(4)\x,z(4)\y,z(5)\x,z(5)\y,z(6)\x,z(6)\y)
	VectorSourceColor(color)
	StrokePath(1)

EndProcedure

Macro R(n)
	Random(n)
EndMacro
Macro S(n)

	j*(n)+200*Bool(j=-1)

EndMacro

Procedure Do(clear)

	Protected i,j

	If clear
		StartDrawing(CanvasOutput(0))
		DrawingMode(#PB_2DDrawing_AlphaBlend)
		Box(0,0,OutputWidth(),OutputHeight(),$80FFFFFF)
		Box(0,0,OutputWidth(),OutputHeight(),$FFFFFFFF)
		StopDrawing()
	EndIf

	StartVectorDrawing(CanvasVectorOutput(0))

	For j=-1 To 1 Step 2

		If Random(1)
			color=$1DD999
		Else
			color=$F9AA48
		EndIf

		x=500+R(100) : y=120+R(60)
		dx=70+R(50) : dy=25+R(25)
		ox=25+R(50) : oy=25+R(50)
		px=R(50) : py=R(25)

		StartPoint(0,	50+R(100),	S(120+R(60))	)
		StartPoint(1,	250+R(100),	S(-70+R(60))	)
		StartPoint(2,	x-dx,		S(y-dy)			)
		StartPoint(3,	x,			S(y)			)
		StartPoint(4,	x+dx,		S(y+dy)			)
		StartPoint(5,	850+R(100),	S(-70+R(60))	)
		StartPoint(6,	950+R(100),	S(120+R(60))	)

		EndPoint(0,R(120)-40,R(60)-30)
		EndPoint(1,R(120)-40,R(60)-30)
		EndPoint(2,ox+px,oy+py)
		EndPoint(3,ox,oy)
		EndPoint(4,ox-px,oy-py)
		EndPoint(5,R(120)-40,R(60)-30)
		EndPoint(6,R(120)-40,R(60)-30)

		For i=0 To 100
			SetPoints(i,100)
			z=Pow((Abs(50-i)+10),3)/5000
			DrawWave((16+z)<<24|color)
		Next i

		x=500+R(100) : y=120+R(60)
		dx=70+R(50) : dy=25+R(25)
		ox=25+R(50) : oy=25+R(50)
		px=R(50) : py=R(25)

		EndPoint(0,-R(120),-R(80))
		EndPoint(1,-R(120),-R(80))
		EndPoint(2,ox+px,oy+py)
		EndPoint(3,ox,oy)
		EndPoint(4,ox-px,oy-py)
		EndPoint(5,-R(120),-R(80))
		EndPoint(6,-R(120),-R(80))

		For i=0 To 50
			SetPoints(i,50)
			z=Pow((Abs(25-i)+30),3)/5000
			DrawWave((16+z)<<24|color)
		Next i

	Next j

	StopVectorDrawing()

EndProcedure



OpenWindow(0,0,0,#X,#Y,"Waves",#PB_Window_SystemMenu)
CanvasGadget(0,0,0,#X,#Y)
Do(0)

Repeat
	Select WaitWindowEvent()
	Case #PB_Event_CloseWindow
		End
	Case #WM_CHAR
		Select EventwParam()
		Case ' '
			Do(1)
		Case #ESC
			End
		EndSelect
	EndSelect
ForEver
Top
User avatar
Kukulkan
Addict
Addict
Posts: 1396
Joined: Mon Jun 06, 2005 2:35 pm
Location: germany
Contact:
Contact Kukulkan

Re: Create nice images for background...

Post by Kukulkan »

Nice :D
Top
Post Reply

Return to “Coding Questions”