March 01, 2021, 10:03:17 PM

Author Topic: [bb] Color Gradient by Krischan [ 1+ years ago ]  (Read 498 times)

Offline BlitzBot

  • Jr. Member
  • **
  • Posts: 1
[bb] Color Gradient by Krischan [ 1+ years ago ]
« on: June 29, 2017, 12:28:39 AM »
Title : Color Gradient
Author : Krischan
Posted : 1+ years ago

Description : 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: <a href="codearcs7a10.html?code=2416" target="_blank">http://www.blitzbasic.com/codearcs/codearcs.php?code=2416[/url]

Screenshot:


Code :
Code: BlitzBasic
  1. ; Photoshop Gradient Simulation
  2. ; by Krischan webmaster(at)jaas.de
  3. ;
  4. ; use this to create a color gradient array and use it on a heightmap or whatever
  5. ; it calculates the steps between some given colors (like in photoshop)
  6.  
  7. AppTitle "Photoshop Gradient Simulation"
  8.  
  9. Graphics 768,512,32,2
  10.  
  11. Dim GradientR%(0),GradientG%(0),GradientB%(0),Percent#(0),Red%(0),Green%(0),Blue%(0)
  12.  
  13. ; Example: Planet
  14. Restore Planet
  15. CreateGradient(9,255)
  16. For i=0 To 255
  17.         Color GradientR(i),GradientG(i),GradientB(i)
  18.         Line 0,i,384,i
  19. Next
  20.  
  21. ; Example: German National Flag
  22. Restore Germany
  23. CreateGradient(6,255)
  24. For i=0 To 255
  25.         Color GradientR(i),GradientG(i),GradientB(i)
  26.         Line 0,255+i,384,255+i
  27. Next
  28.  
  29. ; Example: simple black to white
  30. Restore Greyscale
  31. CreateGradient(2,255)
  32. For i=0 To 255
  33.         Color GradientR(i),GradientG(i),GradientB(i)
  34.         Line 384,i,768,i
  35. Next
  36.  
  37. ; Example: Full Color Spectrum
  38. Restore Spectrum
  39. CreateGradient(11,255)
  40. For i=0 To 255
  41.         Color GradientR(i),GradientG(i),GradientB(i)
  42.         Line 384,255+i,768,255+i
  43. Next
  44.  
  45. WaitKey
  46.  
  47. End
  48.  
  49. Function CreateGradient(colors%,steps%)
  50.        
  51.         Dim GradientR(steps),GradientG(steps),GradientB(steps),Percent(colors),Red(colors),Green(colors),Blue(colors)
  52.        
  53.         Local i%,pos1%,pos2%,pdiff%
  54.         Local rdiff%,gdiff%,bdiff%
  55.         Local rstep#,gstep#,bstep#
  56.         Local counter%=1
  57.        
  58.     ; read color codes
  59.         For i=1 To colors : Read Percent(i),Red(i),Green(i),Blue(i) : Next
  60.        
  61.     ; calculate gradient
  62.         While counter<colors
  63.                
  64.         ; transform percent value into step position
  65.                 pos1%=Percent(counter)*steps/100
  66.                 pos2%=Percent(counter+1)*steps/100
  67.                
  68.         ; calculate position difference
  69.                 pdiff%=pos2-pos1
  70.                
  71.         ; calculate color difference
  72.                 rdiff%=Red(counter)-Red(counter+1)
  73.                 gdiff%=Green(counter)-Green(counter+1)
  74.                 bdiff%=Blue(counter)-Blue(counter+1)
  75.                
  76.         ; calculate color steps
  77.                 rstep#=rdiff*1.0/pdiff
  78.                 gstep#=gdiff*1.0/pdiff
  79.                 bstep#=bdiff*1.0/pdiff
  80.                
  81.         ; calculate "in-between" color codes
  82.                 For i=0 To pdiff
  83.                        
  84.                         GradientR(pos1+i)=Int(Red(counter)-(rstep*i))
  85.                         GradientG(pos1+i)=Int(Green(counter)-(gstep*i))
  86.                         GradientB(pos1+i)=Int(Blue(counter)-(bstep*i))
  87.                        
  88.                 Next
  89.                
  90.         ; increment counter
  91.                 counter=counter+1
  92.                
  93.         Wend
  94.        
  95. End Function
  96.  
  97. .Planet
  98. Data   0.0,255,255,255   ; white: snow
  99. Data   5.0,179,179,179   ; grey: rocks
  100. Data  15.0,153,143, 92   ; brown: tundra
  101. Data  25.0,115,128, 77   ; light green: veld
  102. Data  49.9, 42,102, 41   ; green: grass
  103. Data  50.0, 69,108,118   ; light blue: shore
  104. Data  51.0, 17, 82,112   ; blue: shallow water
  105. Data  75.0,  9, 62, 92   ; dark blue: water
  106. Data 100.0,  2, 43, 68   ; very dark blue: deep water
  107.  
  108. .Germany
  109. Data   0.0,  0,  0,  0   ; black
  110. Data  33.3,  0,  0,  0   ; black
  111. Data  33.3,255,  0,  0   ; red
  112. Data  66.6,255,  0,  0   ; red
  113. Data  66.6,255,224,  0   ; gold
  114. Data 100.0,255,224,  0   ; gold
  115.  
  116. .Greyscale
  117. Data   0.0,  0,  0,  0   ; schwarz
  118. Data 100.0,255,255,255   ; weiss
  119.  
  120. .Spectrum
  121. Data   0.0,255,  0,  0   ; red
  122. Data  10.0,255,128,  0   ; orange
  123. Data  20.0,255,255,  0   ; yellow
  124. Data  30.0,128,255,  0   ; yellow-green
  125. Data  40.0,  0,255,  0   ; green
  126. Data  50.0,  0,255,128   ; green-cyan
  127. Data  60.0,  0,255,255   ; cyan
  128. Data  70.0,  0,128,255   ; light blue
  129. Data  80.0,  0,  0,255   ; blue
  130. Data  90.0,128,  0,255   ; violet blue
  131. Data 100.0,255,  0,255   ; violet


Comments :


ZJP(Posted 1+ years ago)

 Thx.JP


Krischan(Posted 1+ years ago)

 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:
Code: [Select]
; 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(Posted 1+ years ago)

 Here the BlitzMax version of the improved version:
Code: [Select]
' 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


 

SimplePortal 2.3.6 © 2008-2014, SimplePortal