Gradients - Socoder

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|610\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Snippet Home -> Graphical Effects

JL235	Created : 26 July 2009 Edited : 26 July 2009 System : Windows Language : Blitz Gradients Generic gradients ready to use
About Here is a library I just wrote over the last hour that draws gradients with variable colour at variable sizes. It means you can simply do: gradientFillX RED, GREEN, START_X, START_Y, END_X, END_Y, to have a red to green gradient that spans from (startX, startY) to (endX, endY). This is meant as friendly advice, but I wrote this in response to problems I saw with HotShots Gradient code snippet. Rather then bitching in the comments section I thought instead I would lead by example. Built as a library (ready to use) Fully documented. Uses common conventions for style. Feel free to pull it apart, port to any language or build on it. Enjoy! Gradients library ; Gradients ; ; @author Joseph Lenton - JosephLenton@StudioFortress.com ; @license No license, this is available free of use for the public domain. However I do ask that if ; used then you do credit me. ; @version 26/07/2009 ; ; This is a library for drawing some simple gradient fills to the screen. It works through one do all ; gradient function and several helper functions that provide simpler alternatives. ; ; It also includes some functions for working with colours. Namely for getting the indevidual ; components out from an ARGB int, and for mixing components together for creating a new one. ; ; Functions include: ; getAlpha (colorARGB) ; getRed (colorARGB) ; getGreen (colorARGB) ; getBlue (colorARGB) ; ; newRGB (red, green, blue) ; newARGB (alpha, red, green, blue) ; ; gradientFillX (leftColor, rightColor, startX, startY, endX, endY) ; gradientFillY (topColor, bottomColor, startX, startY, endX, endY) ; gradientFillGraphics (leftColor, rightColor, topColor, bottomColor) ; gradientFill (leftColor, rightColor, topColor, bottomColor, startX, startY, endX, endY) ; ; getAlpha ; ; @param colorARGB A color in the standard int ARGB format. ; @return The alpha component from the given color. Function getAlpha(colorARGB) Return (colorARGB And $ff000000) Shr 24 End Function ; getRed ; ; @param colorARGB A color in the standard int ARGB format. ; @return The red component from the given color. Function getRed(colorARGB) Return (colorARGB And $00ff0000) Shr 16 End Function ; getGreen ; ; @param colorARGB A color in the standard int ARGB format. ; @return The green component from the given color. Function getGreen(colorARGB) Return (colorARGB And $0000ff00) Shr 8 End Function ; getBlue ; ; @param colorARGB A color in the standard int ARGB format. ; @return The blue component from the given color. Function getBlue(colorARGB) Return (colorARGB And $000000ff) End Function ; newRGB ; ; Given three colour components, this will return a new colour in the ARGB format. The alpha component ; will be set to 255. ; ; @param red The red value for the color to be produced. ; @param green It's green component. ; @param blue The blue component. ; @return The given components all combined into one ARGB integer. Function newRGB(red, green, blue) Return newARGB(255, red, green, blue) End Function ; newARGB ; ; Given four colour components, this will mix them together into the ARGB format. It's expected that ; each component is a value from 0 to 255 (inclusive). ; ; @param alpha The alpha value for the color to produce. ; @param red The red value for the color to be produced. ; @param green It's green component. ; @param blue The blue component. ; @return The given components all combined into one ARGB integer. Function newARGB(alpha, red, green, blue) Return ((alpha And $ff) Shl 24) Or ((red And $ff) Shl 16) Or ((green And $ff) Shl 8) Or (blue And $FF) End Function ; gradientFillGraphics ; ; This is the same as gradientFill, only it fills the entire graphics area using the current graphics ; width and height as a guide. ; ; The graphics buffer (front or back buffer) must be set before using this command. ; ; @param leftColor The color for the left side of the gradient. ; @param rightColor The color for the right side, which the gradient will change to across the screen. ; @param topColor The color for the start of the gradient on the vertical axis. ; @param bottomColor The color for the end of the gradient at the bottom. Function gradientFillGraphics(leftColor, rightColor, topColor, bottomColor) gradientFill leftColor, rightColor, topColor, bottomColor, 0, 0, GraphicsWidth(), GraphicsHeight() End Function ; gradientFill ; ; Fills the given area with a gradient color. It spans from startX, startY to endX, endY (exclusive). ; The gradient colours used horizontally are leftColor and rightColor, and vertically it uses topColor ; and bottomColor. These are mixed to determine the exact colour in the gradient. ; ; All colours are expected to be provided as an int in the ARGB format, although the alpha component ; is not used. ; ; It will draw directly to the current buffer. ; ; @param leftColor The color for the left side of the gradient. ; @param rightColor The color for the right side, which the gradient will change to across the screen. ; @param topColor The color for the start of the gradient on the vertical axis. ; @param bottomColor The color for the end of the gradient at the bottom. ; @param startX The X value of the top left corner of the gradient. ; @param startY The Y value of the start of the gradient in it's top left corner. ; @param endX The X value for the bottom right corner of the gradient. ; @param endY The Y value for the bottom right corner of the gradient. Function gradientFill(leftColor, rightColor, topColor, bottomColor, startX, startY, endX, endY) Local x, y Local leftR, leftG, leftB Local rightR, rightG, rightB Local topR, topG, topB Local bottomR, bottomG, bottomB Local width, height leftR = getRed(leftColor) leftG = getGreen(leftColor) leftB = getBlue(leftColor) rightR = getRed(rightColor) rightG = getGreen(rightColor) rightB = getBlue(rightColor) topR = getRed(topColor) topG = getGreen(topColor) topB = getBlue(topColor) bottomR = getRed(bottomColor) bottomG = getGreen(bottomColor) bottomB = getBlue(bottomColor) width = endX - startX height = endY - startY endX = endX-1 endY = endY-1 LockBuffer() For x=startX To endX Local xRed, xGreen, xBlue ; this is what percentage we are across the width of the gradient Local xPercent#, xPercentInverse# xPercent# = Float(x-startX) / Float(width) xPercentInverse# = 1.0 - xPercent# xRed = Int( (leftRxPercentInverse#) + (rightRxPercent#) ) xGreen = Int( (leftGxPercentInverse#) + (rightGxPercent#) ) xBlue = Int( (leftBxPercentInverse#) + (rightBxPercent#) ) For y=startY To endY Local yRed, yGreen, yBlue Local pixelColor Local yPercent#, yPercentInverse# yPercent# = Float(y-startY) / Float(height) yPercentInverse# = 1.0 - yPercent# yRed = Int( (topRyPercentInverse#) + (bottomRyPercent#) ) yGreen = Int( (topGyPercentInverse#) + (bottomGyPercent#) ) yBlue = Int( (topByPercentInverse#) + (bottomByPercent#) ) pixelColor = newRGB(xRed/2 + yRed/2, xGreen/2 + yGreen/2, xBlue/2 + yBlue/2) WritePixelFast x, y, pixelColor Next Next UnlockBuffer() End Function ; gradientFillX ; ; Creates a horizontal gradient on the current buffer. ; ; @param leftColor The colour for the left side of the gradient. ; @param rightColor The colour for the right side of the gradient. ; @startX X value of the top left corner of the gradient. ; @startY The Y co-ordinate of the top left corner of the gradient. ; @param endX The X value for the bottom right corner of the gradient. ; @param endY The Y value for the bottom right corner of the gradient. Function gradientFillX(leftColor, rightColor, startX, startY, endX, endY) Local x Local leftR, leftG, leftB Local rightR, rightG, rightB Local width leftR = getRed(leftColor) leftG = getGreen(leftColor) leftB = getBlue(leftColor) rightR = getRed(rightColor) rightG = getGreen(rightColor) rightB = getBlue(rightColor) width = endX - startX endX = endX-1 For x=startX To endX Local xRed, xGreen, xBlue ; this is what percentage we are across the width of the gradient Local xPercent#, xPercentInverse# xPercent# = Float(x-startX) / Float(width) xPercentInverse# = 1.0 - xPercent# xRed = Int( (leftRxPercentInverse#) + (rightRxPercent#) ) xGreen = Int( (leftGxPercentInverse#) + (rightGxPercent#) ) xBlue = Int( (leftBxPercentInverse#) + (rightBxPercent#) ) Color xRed, xGreen, xBlue Line x, startY, x, endY Next End Function ; gradientFillY ; ; Creates a vertical gradient on the current buffer. ; ; @param topColor The colour for the top of the gradient. ; @param bottomColor The colour for the bottom of the gradient. ; @startX X value of the top left corner of the gradient. ; @startY The Y co-ordinate of the top left corner of the gradient. ; @param endX The X value for the bottom right corner of the gradient. ; @param endY The Y value for the bottom right corner of the gradient. Function gradientFillY(topColor, bottomColor, startX, startY, endX, endY) Local y Local topR, topG, topB Local bottomR, bottomG, bottomB Local height topR = getRed(topColor) topG = getGreen(topColor) topB = getBlue(topColor) bottomR = getRed(bottomColor) bottomG = getGreen(bottomColor) bottomB = getBlue(bottomColor) height = endY - startY endY = endY-1 For y=startY To endY Local yRed, yGreen, yBlue ; this is what percentage we are across the width of the gradient Local yPercent#, yPercentInverse# yPercent# = Float(y-startY) / Float(height) yPercentInverse# = 1.0 - yPercent# yRed = Int( (topRyPercentInverse#) + (bottomRyPercent#) ) yGreen = Int( (topGyPercentInverse#) + (bottomGyPercent#) ) yBlue = Int( (topByPercentInverse#) + (bottomByPercent#) ) Color yRed, yGreen, yBlue Line startX, y, endX, y Next End Function --v Example Usage ; Gradients Example ; ; @author Joseph Lenton - JosephLenton@StudioFortress.com ; @license No license, this is available free of use for the public domain. However I do ask that if ; used then you do credit me. ; @version 26/07/2009 ; ; This is some example usage of the accompanying Gradients library. ; include "gradients.bb" Const SCREEN_WIDTH = 800 Const SCREEN_HEIGHT = 600 Const SCREEN_COLOR_DEPTH = 0 Const SCREEN_WINDOW_MODE = 2 Graphics(SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_COLOR_DEPTH, SCREEN_WINDOW_MODE) ; ### Create images Dim imgs(4) Local img Local imgWidth = GraphicsWidth()/2 Local imgHeight = GraphicsHeight()/2 For i = 0 To 3 imgs(i) = CreateImage(imgWidth, imgHeight) Next ; ### Draw Gradients to Images img = imgs(0) SetBuffer ImageBuffer(img) ; horizontally: green to blue, vertically, white to black. gradientFill $00ff00, $0000ff, $ffffff, $000000, 0, 0, ImageWidth(img), ImageHeight(img) img = imgs(1) SetBuffer ImageBuffer(img) ; horizontally: black to white gradientFillX $000000, $ffffff, 0, 0, ImageWidth(img), ImageHeight(img) img = imgs(2) SetBuffer ImageBuffer(img) ; vertically: blue&green to blue&red gradientFillY $00FF99, $FF0099, 0, 0, ImageWidth(img), ImageHeight(img) img = imgs(3) SetBuffer ImageBuffer(img) ; horizontally: blue to red, vertically: blue to red gradientFill $0000ff, $ff0000, $0000ff, $ff0000, 0, 0, ImageWidth(img), ImageHeight(img) ; ### Draw Images to Screen SetBuffer BackBuffer() DrawImage imgs(0), 0, 0 DrawImage imgs(1), imgWidth, 0 DrawImage imgs(2), 0, imgHeight DrawImage imgs(3), imgWidth, imgHeight Flip WaitKey --v

Comments
Sunday, 26 July 2009, 13:16
Phoenix	Looks like some very clean and solid code there -- good work! I would like to see more snippets be more meaty ones, like this one.

Copyright Jayenkai - 2017+ | Thanks to Shroom_Monk for CSS/Dev Tips | Uses a Jay-Tweaked version of CBParser.
Page Took : 0.098

Gradients - Socoder