# OPENRNDR & Processing - Drawing gradients

**URL:** <https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75>\
**Category:** Tutorials\
**Created:** [April 4, 2020, 9:08am UTC](https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75 "2020-04-04T09:08:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [April 4, 2020, 9:08am UTC](https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75/1 "2020-04-04T09:08:17Z")

</div>

# Gradients

This example is taken directly from the Processing examples. It doesn’t show many syntax differences between Kotlin and Java. Instead the main takeaway is that OPENRNDR has high level features that simplify some tasks, in this case, drawing gradients.

I think that shows that their goals are somewhat different. Processing being more focused on education often expects you to build features on top of its good core (and learn while doing that), while OPENRNDR may provide higher level methods for drawing, compositing, animating and post-processing (to help you complete the project faster).

 ![P04_gradient-2020-04-06-15.33.32](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/c32a3cdca8dcc867319809c054982d7d403e223c.png)

### Processing / Java

```auto
/**
 * Simple Linear Gradient 
 * 
 * The lerpColor() function is useful for interpolating
 * between two colors.
 */

// Constants
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2, c1, c2;

void setup() {
  size(640, 360);

  // Define colors
  b1 = color(255);
  b2 = color(0);
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);

  noLoop();
}

void draw() {
  // Background
  setGradient(0, 0, width/2, height, b1, b2, X_AXIS);
  setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS);
  // Foreground
  setGradient(50, 90, 540, 80, c1, c2, Y_AXIS);
  setGradient(50, 190, 540, 80, c2, c1, X_AXIS);
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {

  noFill();

  if (axis == Y_AXIS) { // Top to bottom gradient
    for (int i = y; i <= y+h; i++) {
      float inter = map(i, y, y+h, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
  else if (axis == X_AXIS) { // Left to right gradient
    for (int i = x; i <= x+w; i++) {
      float inter = map(i, x, x+w, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
  }
}

```

### OPENRNDR / Kotlin

_Note: this example requires un-commenting `orx-shade-styles` in the file `build.gradle.kts`._

```auto
fun main() = application {
    configure {
        width = 640
        height = 360
    }
    program {
        // Define colors
        val b1 = ColorRGBa.WHITE
        val b2 = ColorRGBa.BLACK
        val c1 = rgb(0.8, 0.4, 0.0)
        val c2 = rgb(0.0, 0.4, 0.6)

        window.presentationMode = PresentationMode.MANUAL
        window.requestDraw()

        extend {
            drawer.stroke = null
            // Background
            drawer.shadeStyle = linearGradient(b1, b2, rotation = -90.0)
            drawer.rectangle(0.0, 0.0, width / 2.0, height.toDouble());
            drawer.shadeStyle = linearGradient(b1, b2, rotation = 90.0)
            drawer.rectangle(width / 2.0, 0.0, width / 2.0, height.toDouble());
            // Foreground
            drawer.shadeStyle = linearGradient(c1, c2, rotation = 0.0)
            drawer.rectangle(50.0, 90.0, 540.0, 80.0);
            drawer.shadeStyle = linearGradient(c1, c2, rotation = 90.0)
            drawer.rectangle(50.0, 190.0, 540.0, 80.0);
        }
    }
}

```

| Concept | Processing | OPENRNDR |
| --- | --- | --- |
| stop animation | `noLoop()` | `window.presentationMode = PresentationMode.MANUAL` |
| request a redraw | `redraw()`, not needed if you only draw one frame | `window.requestDraw()` |
| drawing a gradient | write your own | use `drawer.shadeStyle = linearGradient(color1, color2, rotation = degrees)`  
there’s currently [4 types of gradients](https://guide.openrndr.org/OPENRNDRExtras/shadeStylePresets.html) you can use |
| press ESC to end the program | by default | `extend {...}`  
`keyboard.keyDown.listen { if (it.key == KEY_ESCAPE) exitProcess(0) }` |

👇 Share your questions and comments below | 🔎 [Find other OPENRNDR & Processing posts](https://openrndr.discourse.group/search?q=Processing%20%23openrndr%3Atutorials)

---

<div class="post-metadata">

**Author:** ![anoniim](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/anoniim/32/383_2.png) [@anoniim](https://openrndr.discourse.group/u/anoniim)\
**Post date:** [October 19, 2024, 11:52am UTC](https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75/2 "2024-10-19T11:52:11Z")

</div>

@abe Do you know of any easy way to make a linear gradient of 3 colors, please?  
I can’t find anything in the guide or in the source code. I guess I could do that with shaders but wonder whether there is any built-in function.

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [October 19, 2024, 2:24pm UTC](https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75/3 "2024-10-19T14:24:25Z")

</div>

You can do that with shaders, and you don’t need to write the shaders yourself 🙂 You can use `orx-shade-styles` instead. Maybe the [`DemoNPointGradient01`](https://github.com/openrndr/orx/tree/master/orx-shade-styles#demonpointgradient01) helps you?

 ![](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/ccd915590eae5be2defb78db2a41bbb86219ab3a.png)

---

<div class="post-metadata">

**Author:** ![anoniim](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/anoniim/32/383_2.png) [@anoniim](https://openrndr.discourse.group/u/anoniim)\
**Post date:** [October 19, 2024, 9:03pm UTC](https://openrndr.discourse.group/t/openrndr-processing-drawing-gradients/75/4 "2024-10-19T21:03:47Z")

</div>

It does! I hoped there would be something in ORX 🙂 Thank you!