OPENRNDR & Processing - Drawing gradients

OPENRNDR Tutorials
1

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

Processing / Java

/**
 * 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.

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 you can use
press ESC to end the program by default extend {...}
keyboard.keyDown.listen { if (it.key == KEY_ESCAPE) exitProcess(0) }

:point_down: Share your questions and comments below | :mag_right: Find other OPENRNDR & Processing posts

2 Likes