Color Gradient

This code has been declared by its author to be Public Domain code.

Color Gradient by Krischan

2009

This creates a gradient stored in an array from some given colors (like in photoshop). I use it in my project to apply a gradient to a heightmap to simulate a planet surface (but I think there are many uses for it).

To see it in a working demo take a look at my Realtime Procedural Planet Generator: http://www.blitzbasic.com/codearcs/codearcs.php?code=2416

Screenshot:

; Photoshop Gradient Simulation
; by Krischan webmaster(at)jaas.de
;
; use this to create a color gradient array and use it on a heightmap or whatever
; it calculates the steps between some given colors (like in photoshop)

AppTitle "Photoshop Gradient Simulation"

Graphics 768,512,32,2

Dim GradientR%(0),GradientG%(0),GradientB%(0),Percent#(0),Red%(0),Green%(0),Blue%(0)

; Example: Planet
Restore Planet
CreateGradient(9,255)
For i=0 To 255
	Color GradientR(i),GradientG(i),GradientB(i)
	Line 0,i,384,i
Next

; Example: German National Flag
Restore Germany
CreateGradient(6,255)
For i=0 To 255
	Color GradientR(i),GradientG(i),GradientB(i)
	Line 0,255+i,384,255+i
Next

; Example: simple black to white
Restore Greyscale
CreateGradient(2,255)
For i=0 To 255
	Color GradientR(i),GradientG(i),GradientB(i)
	Line 384,i,768,i
Next

; Example: Full Color Spectrum
Restore Spectrum
CreateGradient(11,255)
For i=0 To 255
	Color GradientR(i),GradientG(i),GradientB(i)
	Line 384,255+i,768,255+i
Next

WaitKey

End

Function CreateGradient(colors%,steps%)
	
	Dim GradientR(steps),GradientG(steps),GradientB(steps),Percent(colors),Red(colors),Green(colors),Blue(colors)
	
	Local i%,pos1%,pos2%,pdiff%
	Local rdiff%,gdiff%,bdiff%
	Local rstep#,gstep#,bstep#
	Local counter%=1
	
    ; read color codes
	For i=1 To colors : Read Percent(i),Red(i),Green(i),Blue(i) : Next
	
    ; calculate gradient
	While counter<colors
		
        ; transform percent value into step position
		pos1%=Percent(counter)*steps/100
		pos2%=Percent(counter+1)*steps/100
		
        ; calculate position difference
		pdiff%=pos2-pos1
		
        ; calculate color difference
		rdiff%=Red(counter)-Red(counter+1)
		gdiff%=Green(counter)-Green(counter+1)
		bdiff%=Blue(counter)-Blue(counter+1)
		
        ; calculate color steps
		rstep#=rdiff*1.0/pdiff
		gstep#=gdiff*1.0/pdiff
		bstep#=bdiff*1.0/pdiff
		
        ; calculate "in-between" color codes
		For i=0 To pdiff
			
			GradientR(pos1+i)=Int(Red(counter)-(rstep*i))
			GradientG(pos1+i)=Int(Green(counter)-(gstep*i))
			GradientB(pos1+i)=Int(Blue(counter)-(bstep*i))
			
		Next
		
        ; increment counter
		counter=counter+1
		
	Wend
	
End Function

.Planet
Data   0.0,255,255,255   ; white: snow
Data   5.0,179,179,179   ; grey: rocks
Data  15.0,153,143, 92   ; brown: tundra
Data  25.0,115,128, 77   ; light green: veld
Data  49.9, 42,102, 41   ; green: grass
Data  50.0, 69,108,118   ; light blue: shore
Data  51.0, 17, 82,112   ; blue: shallow water
Data  75.0,  9, 62, 92   ; dark blue: water
Data 100.0,  2, 43, 68   ; very dark blue: deep water

.Germany
Data   0.0,  0,  0,  0   ; black
Data  33.3,  0,  0,  0   ; black
Data  33.3,255,  0,  0   ; red
Data  66.6,255,  0,  0   ; red
Data  66.6,255,224,  0   ; gold
Data 100.0,255,224,  0   ; gold

.Greyscale
Data   0.0,  0,  0,  0   ; schwarz
Data 100.0,255,255,255   ; weiss

.Spectrum
Data   0.0,255,  0,  0   ; red
Data  10.0,255,128,  0   ; orange
Data  20.0,255,255,  0   ; yellow
Data  30.0,128,255,  0   ; yellow-green
Data  40.0,  0,255,  0   ; green
Data  50.0,  0,255,128   ; green-cyan
Data  60.0,  0,255,255   ; cyan
Data  70.0,  0,128,255   ; light blue
Data  80.0,  0,  0,255   ; blue
Data  90.0,128,  0,255   ; violet blue
Data 100.0,255,  0,255   ; violet

Comments

ZJP

2010

Thx.

JP

Krischan

2010

Forgot to add an improved version of the above code. Now using different Blitzarrays to keep the data for later use and it is possible to inverse the gradient, here is the code:

; Photoshop Gradient Simulation -improved-
; by Krischan webmaster(at)jaas.de
;
; use this to create a color gradient array and use it on a heightmap or whatever
; it calculates the steps between some given colors (like in photoshop)

AppTitle "Photoshop Gradient Simulation -improved-"

Graphics 768,512,32,2

Const ColorSteps%=256
Const Inverse%=False

Global PlanetR%[ColorSteps],PlanetG%[ColorSteps],PlanetB%[ColorSteps]
Global GermanyR%[ColorSteps],GermanyG%[ColorSteps],GermanyB%[ColorSteps]
Global GreyscaleR%[ColorSteps],GreyscaleG%[ColorSteps],GreyscaleB%[ColorSteps]
Global SpectrumR%[ColorSteps],SpectrumG%[ColorSteps],SpectrumB%[ColorSteps]

Dim GradientPercent#(0),GradientRed%(0),GradientGreen%(0),GradientBlue%(0)

; Example: Planet
Restore Planet
CreateGradient(9,ColorSteps,Inverse,PlanetR,PlanetG,PlanetB)
For i=0 To 255
    Color PlanetR[i],PlanetG[i],PlanetB[i]
    Line 0,i,384,i
Next

; Example: German National Flag
Restore Germany
CreateGradient(6,ColorSteps,Inverse,GermanyR,GermanyG,GermanyB)
For i=0 To 255
    Color GermanyR[i],GermanyG[i],GermanyB[i]
    Line 0,255+i,384,255+i
Next

; Example: simple black to white
Restore Greyscale
CreateGradient(2,ColorSteps,Inverse,GreyscaleR,GreyscaleG,GreyscaleB)
For i=0 To 255
    Color GreyscaleR[i],GreyscaleG[i],GreyscaleB[i]
    Line 384,i,768,i
Next

; Example: Full Color Spectrum
Restore Spectrum
CreateGradient(11,ColorSteps,Inverse,SpectrumR,SpectrumG,SpectrumB)
For i=0 To 255
    Color SpectrumR[i],SpectrumG[i],SpectrumB[i]
    Line 384,255+i,768,255+i
Next

WaitKey

End


Function CreateGradient(colors%,steps%,inverse=False,R%[ColorSteps],G%[ColorSteps],B%[ColorSteps])
    
    Dim GradientPercent(colors)
    Dim GradientRed(colors),GradientGreen(colors),GradientBlue(colors)
    
    Local i%,pos1%,pos2%,pdiff%
    Local rdiff%,gdiff%,bdiff%
    Local rstep#,gstep#,bstep#
    Local counter%=0
    
    ; read data, inverse if set
    If inverse Then
        For i=colors To 1 Step -1
            Read GradientPercent(i),GradientRed(i),GradientGreen(i),GradientBlue(i)
            GradientPercent(i)=100.0-GradientPercent(i)
        Next
    Else
        For i=0 To colors-1
            Read GradientPercent(i),GradientRed(i),GradientGreen(i),GradientBlue(i)
        Next
    EndIf
    
    ; gradient loop
    While counter<colors
        
        ; convert percent to step position
        pos1=GradientPercent(counter)*steps*1.0/100
        pos2=GradientPercent(counter+1)*steps*1.0/100
        
        ; calc delta and steps
        pdiff=pos2-pos1
        rdiff%=GradientRed(counter)-GradientRed(counter+1)
        gdiff%=GradientGreen(counter)-GradientGreen(counter+1)
        bdiff%=GradientBlue(counter)-GradientBlue(counter+1)
        rstep#=rdiff*1.0/pdiff
        gstep#=gdiff*1.0/pdiff
        bstep#=bdiff*1.0/pdiff
        
        ; calc new colors and store to blitzarray
        For i=0 To pdiff
            
            R[pos1+i]=Int(GradientRed(counter)-(rstep*i))
            G[pos1+i]=Int(GradientGreen(counter)-(gstep*i))
            B[pos1+i]=Int(GradientBlue(counter)-(bstep*i))
            
        Next
        
        ; increase counter
        counter=counter+1
        
    Wend
    
End Function

.Planet
Data   0.0,255,255,255   ; white: snow
Data   5.0,179,179,179   ; grey: rocks
Data  15.0,153,143, 92   ; brown: tundra
Data  25.0,115,128, 77   ; light green: veld
Data  49.9, 42,102, 41   ; green: grass
Data  50.0, 69,108,118   ; light blue: shore
Data  51.0, 17, 82,112   ; blue: shallow water
Data  75.0,  9, 62, 92   ; dark blue: water
Data 100.0,  2, 43, 68   ; very dark blue: deep water

.Germany
Data   0.0,  0,  0,  0   ; black
Data  33.3,  0,  0,  0   ; black
Data  33.3,255,  0,  0   ; red
Data  66.6,255,  0,  0   ; red
Data  66.6,255,224,  0   ; gold
Data 100.0,255,224,  0   ; gold

.Greyscale
Data   0.0,  0,  0,  0   ; schwarz
Data 100.0,255,255,255   ; weiss

.Spectrum
Data   0.0,255,  0,  0   ; red
Data  10.0,255,128,  0   ; orange
Data  20.0,255,255,  0   ; yellow
Data  30.0,128,255,  0   ; yellow-green
Data  40.0,  0,255,  0   ; green
Data  50.0,  0,255,128   ; green-cyan
Data  60.0,  0,255,255   ; cyan
Data  70.0,  0,128,255   ; light blue
Data  80.0,  0,  0,255   ; blue
Data  90.0,128,  0,255   ; violet blue
Data 100.0,255,  0,255   ; violet

Krischan

2011

Here the BlitzMax version of the improved version:

' Photoshop Gradient Simulation - improved -
' by Krischan webmaster(at)jaas.de
'
' use this to create a color gradient array and use it on a heightmap or whatever
' it calculates the steps between some given colors (like in photoshop)

SuperStrict

AppTitle = "Photoshop Gradient Simulation -improved-"

Graphics 768, 512

Const ColorSteps:Int = 256
Const Inverse:Int = False

Global PlanetR:Int[ColorSteps+1], PlanetG:Int[ColorSteps+1], PlanetB:Int[ColorSteps+1]
Global GermanyR:Int[ColorSteps+1], GermanyG:Int[ColorSteps+1], GermanyB:Int[ColorSteps+1]
Global GreyscaleR:Int[ColorSteps+1], GreyscaleG:Int[ColorSteps+1], GreyscaleB:Int[ColorSteps+1]
Global SpectrumR:Int[ColorSteps+1], SpectrumG:Int[ColorSteps+1], SpectrumB:Int[ColorSteps+1]

Global GradientPercent:Float[ColorSteps+1], GradientRed:Int[ColorSteps+1], GradientGreen:Int[ColorSteps+1], GradientBlue:Int[ColorSteps+1]

Local i:Int

' Example: Planet
RestoreData Planet
CreateGradient(9, ColorSteps, Inverse, PlanetR, PlanetG, PlanetB)
For i = 0 To 255
	SetColor PlanetR[i], PlanetG[i], PlanetB[i]
	DrawLine 0, i, 384, i
Next

' Example: German National Flag
RestoreData Germany
CreateGradient(6, ColorSteps, Inverse, GermanyR, GermanyG, GermanyB)
For i = 0 To 255
	SetColor GermanyR[i], GermanyG[i], GermanyB[i]
	DrawLine 0, 255 + i, 384, 255 + i
Next

' Example: simple black To white
RestoreData Greyscale
CreateGradient(2, ColorSteps, Inverse, GreyscaleR, GreyscaleG, GreyscaleB)
For i = 0 To 255
	SetColor GreyscaleR[i], GreyscaleG[i], GreyscaleB[i]
	DrawLine 384, i, 768, i
Next

' Example: Full Color Spectrum
RestoreData Spectrum
CreateGradient(11, ColorSteps, Inverse, SpectrumR, SpectrumG, SpectrumB)
For i = 0 To 255
	SetColor SpectrumR[i], SpectrumG[i], SpectrumB[i]
	DrawLine 384, 255 + i, 768, 255 + i
Next

Flip

WaitKey

End


Function CreateGradient(colors:Int, steps:Int, inverse:Int = False, R:Int[], G:Int[], b:Int[])
    
    Local i:Int, pos1:Int, pos2:Int, pdiff:Int
    Local rdiff:Int, gdiff:Int, bdiff:Int
    Local rstep:Float, gstep:Float, bstep:Float
    Local counter:Int = 0
        
    ' read data, inverse if set
    If inverse Then
    
        For i = colors To 1 Step - 1
	
            ReadData GradientPercent[i], GradientRed[i], GradientGreen[i], GradientBlue[i]
	    GradientPercent[i] = 100.0 - GradientPercent[i]
	    
	Next
	
    Else
    
       For i = 0 To colors - 1
	
            ReadData GradientPercent[i], GradientRed[i], GradientGreen[i], GradientBlue[i]
	    
        Next
	
    EndIf
    
    ' gradient loop
    While counter < colors
            
	' convert percent to step position
	pos1 = GradientPercent[counter] * steps * 1.0 / 100
	pos2 = GradientPercent[counter + 1] * steps * 1.0 / 100
	        
	' calc delta and steps
      pdiff = pos2 - pos1
	rdiff = GradientRed[counter] - GradientRed[counter + 1]
	gdiff = GradientGreen[counter] - GradientGreen[counter + 1]
	bdiff = GradientBlue[counter] - GradientBlue[counter + 1]
	rstep = rdiff * 1.0 / pdiff
      gstep = gdiff * 1.0 / pdiff
	bstep = bdiff * 1.0 / pdiff
	        
        ' calc new colors and store to blitzarray
        For i = 0 To pdiff
	            
          R[pos1 + i] = GradientRed[counter] - (rstep * i)
	    G[pos1 + i] = GradientGreen[counter] - (gstep * i)
	    B[pos1 + i] = GradientBlue[counter] - (bstep * i)
	               
        Next
        
        ' increase counter
        counter = counter + 1
        
    Wend
    
End Function

#Planet
DefData   0.0,255,255,255   ' white: snow
DefData   5.0,179,179,179   ' grey: rocks
DefData  15.0,153,143, 92   ' brown: tundra
DefData  25.0,115,128, 77   ' light green: veld
DefData  49.9, 42,102, 41   ' green: grass
DefData  50.0, 69,108,118   ' light blue: shore
DefData  51.0, 17, 82,112   ' blue: shallow water
DefData  75.0,  9, 62, 92   ' dark blue: water
DefData 100.0,  2, 43, 68   ' very dark blue: deep water

#Germany
DefData   0.0,  0,  0,  0   ' black
DefData  33.3,  0,  0,  0   ' black
DefData  33.3,255,  0,  0   ' red
DefData  66.6,255,  0,  0   ' red
DefData  66.6,255,224,  0   ' gold
DefData 100.0,255,224,  0   ' gold

#Greyscale
DefData   0.0,  0,  0,  0   ' schwarz
DefData 100.0,255,255,255   ' weiss

#Spectrum
DefData   0.0,255,  0,  0   ' red
DefData  10.0,255,128,  0   ' orange
DefData  20.0,255,255,  0   ' yellow
DefData  30.0,128,255,  0   ' yellow-green
DefData  40.0,  0,255,  0   ' green
DefData  50.0,  0,255,128   ' green-cyan
DefData  60.0,  0,255,255   ' cyan
DefData  70.0,  0,128,255   ' light blue
DefData  80.0,  0,  0,255   ' blue
DefData  90.0,128,  0,255   ' violet blue
DefData 100.0, 255, 0, 255  ' violet

Code Archives Forum