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).
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) }
|
Share your questions and comments below | 
Find other OPENRNDR & Processing posts
You can use 