# How to gradient this color preview

**URL:** <https://discourse.processing.org/t/how-to-gradient-this-color-preview/19526>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 8, 2020, 5:37am UTC](https://discourse.processing.org/t/how-to-gradient-this-color-preview/19526 "2020-04-08T05:37:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![newbietot](https://avatars.discourse-cdn.com/v4/letter/n/a9a28c/32.png) [@newbietot](https://discourse.processing.org/u/newbietot)\
**Post date:** [April 8, 2020, 5:37am UTC](https://discourse.processing.org/t/how-to-gradient-this-color-preview/19526/1 "2020-04-08T05:37:04Z")

</div>

i want to make my color previewer will display the gradient black at bottom the gradient white at the top right corner, once i click the color slider into red .. the top left corner will display the color that i picked

> float \_barWidth=500.0;  
> float \_hueVal=\_barWidth;  
> boolean gradient = false;  
> float gradient\_colors = new float[4];

> void setup() {  
> size(500, 500);  
> colorMode(HSB);  
> }  
> void draw() {  
> \_hueVal= drawSlider(0, 0.0, \_barWidth, 50.0, \>\_hueVal);  
> stroke(\_hueVal,255,255);  
> rect(0,50, 500, 500);  
> }  
> float drawSlider(float xPos, float yPos, float \>sWidth, float sHeight, float hueVal) {  
> fill(255);  
> noStroke();  
> rect(xPos-5, yPos-10, sWidth+30, sHeight+50);
> 
> float sliderPos=map(hueVal, 0.0, 255.0, 0.0, \>sWidth);  
> for (int i=0; i\<sWidth; i++) {  
> float hueValue= map(i, 0.0, sWidth, 0.0, 255.0);  
> stroke(hueValue, 255, 255);  
> line(xPos+i, yPos, xPos+i, yPos+sHeight);  
> }

> if (mousePressed && mouseX\>xPos && \>mouseX\<(xPos+sWidth) && mouseY\>yPos && \>mouseY \<yPos+sHeight)  
> {  
> sliderPos=mouseX-xPos;  
> hueVal = map(sliderPos, 0.0, sWidth, 0.0, 255.0);  
> }

> stroke(255);  
> for(int x=50; x\<width; x++)  
> {  
> for(int y=50; y\<height; y++){  
> float distanceFromTopLeft = dist(x, y, height, 90);  
> fill(hueVal,x,y);  
> }  
> }
> 
> rect(sliderPos+xPos-3, yPos-5, 6, sHeight+7);
> 
> return hueVal;  
> }
> 
> ![Screenshot_2020_0408_133121](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6d4b8b3eb5fabcb0f63c5d5c8bf238763e9aa1b.png)  
> ![images (6)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fe78581db226b89360800f7bad9659a04f5716cc.jpeg)

---

<div class="post-metadata">

**Author:** ![newbietot](https://avatars.discourse-cdn.com/v4/letter/n/a9a28c/32.png) [@newbietot](https://discourse.processing.org/u/newbietot)\
**Post date:** [April 8, 2020, 1:14pm UTC](https://discourse.processing.org/t/how-to-gradient-this-color-preview/19526/2 "2020-04-08T13:14:14Z")

</div>

please help me to fix this.... i want to make my color previewer will display the gradient black at bottom the gradient white at the top right corner, once i click the color slider into red .. the top left corner will display the color that i picked

 ![Screenshot_2020_0408_133121](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6d4b8b3eb5fabcb0f63c5d5c8bf238763e9aa1b.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 8, 2020, 1:16pm UTC](https://discourse.processing.org/t/how-to-gradient-this-color-preview/19526/3 "2020-04-08T13:16:37Z")

</div>

[Processing.org/reference/get\_.html](http://Processing.org/reference/get_.html)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 8, 2020, 1:41pm UTC](https://discourse.processing.org/t/how-to-gradient-this-color-preview/19526/4 "2020-04-08T13:41:54Z")

</div>

the color previewer belongs to the other thread…

😉