|
1 | 1 | /** |
2 | 2 | * Simple Linear Gradient |
3 | | - * by Ira Greenberg. |
4 | 3 | * |
5 | | - * Using the convenient red(), green() |
6 | | - * and blue() component functions, |
7 | | - * generate some linear gradients. |
| 4 | + * The lerpColor() function is useful for interpolating |
| 5 | + * between two colors. |
8 | 6 | */ |
9 | 7 |
|
10 | | -// constants |
| 8 | +// Constants |
11 | 9 | int Y_AXIS = 1; |
12 | 10 | int X_AXIS = 2; |
13 | | -color b1, b2, c1, c2, c3, c4, c5, c6; |
| 11 | +color b1, b2, c1, c2; |
14 | 12 |
|
15 | | -void setup(){ |
| 13 | +void setup() { |
16 | 14 | size(640, 360); |
17 | 15 |
|
18 | | - // create some gradients |
| 16 | + // Define colors |
| 17 | + b1 = color(255); |
| 18 | + b2 = color(0); |
| 19 | + c1 = color(204, 102, 0); |
| 20 | + c2 = color(0, 102, 153); |
19 | 21 |
|
20 | | - b1 = color(190, 190, 190); |
21 | | - b2 = color(20, 20, 20); |
22 | | - |
23 | | - |
24 | | - c1 = color(255, 120, 0); |
25 | | - c2 = color(10, 45, 255); |
26 | | - c3 = color(10, 255, 15); |
27 | | - c4 = color(125, 2, 140); |
28 | | - c5 = color(255, 255, 0); |
29 | | - c6 = color(25, 255, 200); |
30 | 22 | noLoop(); |
31 | 23 | } |
32 | 24 |
|
33 | 25 | void draw() { |
34 | | - // background |
35 | | - setGradient(0, 0, width, height, b1, b2, Y_AXIS); |
36 | | - //center squares |
37 | | - setGradient(25, 25, 75, 75, c1, c2, Y_AXIS); |
38 | | - setGradient(100, 25, 75, 75, c3, c4, X_AXIS); |
39 | | - setGradient(25, 100, 75, 75, c2, c5, X_AXIS); |
40 | | - setGradient(100, 100, 75, 75, c4, c6, Y_AXIS); |
| 26 | + // Background |
| 27 | + setGradient(0, 0, width/2, height, b1, b2, X_AXIS); |
| 28 | + setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS); |
| 29 | + // Foreground |
| 30 | + setGradient(50, 90, 540, 80, c1, c2, Y_AXIS); |
| 31 | + setGradient(50, 190, 540, 80, c2, c1, X_AXIS); |
41 | 32 | } |
42 | 33 |
|
43 | | -void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){ |
44 | | - // calculate differences between color components |
45 | | - float deltaR = red(c2)-red(c1); |
46 | | - float deltaG = green(c2)-green(c1); |
47 | | - float deltaB = blue(c2)-blue(c1); |
| 34 | +void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) { |
| 35 | + |
| 36 | + noFill(); |
48 | 37 |
|
49 | | - // choose axis |
50 | | - if(axis == Y_AXIS){ |
51 | | - /*nested for loops set pixels |
52 | | - in a basic table structure */ |
53 | | - // column |
54 | | - for (int i=x; i<=(x+w); i++){ |
55 | | - // row |
56 | | - for (int j = y; j<=(y+h); j++){ |
57 | | - color c = color( |
58 | | - (red(c1)+(j-y)*(deltaR/h)), |
59 | | - (green(c1)+(j-y)*(deltaG/h)), |
60 | | - (blue(c1)+(j-y)*(deltaB/h)) |
61 | | - ); |
62 | | - set(i, j, c); |
63 | | - } |
64 | | - } |
| 38 | + if (axis == Y_AXIS) { // Top to bottom gradient |
| 39 | + for (int i = y; i <= y+h; i++) { |
| 40 | + float inter = map(i, y, y+h, 0, 1); |
| 41 | + color c = lerpColor(c1, c2, inter); |
| 42 | + stroke(c); |
| 43 | + line(x, i, x+w, i); |
| 44 | + } |
65 | 45 | } |
66 | | - else if(axis == X_AXIS){ |
67 | | - // column |
68 | | - for (int i=y; i<=(y+h); i++){ |
69 | | - // row |
70 | | - for (int j = x; j<=(x+w); j++){ |
71 | | - color c = color( |
72 | | - (red(c1)+(j-x)*(deltaR/h)), |
73 | | - (green(c1)+(j-x)*(deltaG/h)), |
74 | | - (blue(c1)+(j-x)*(deltaB/h)) |
75 | | - ); |
76 | | - set(j, i, c); |
77 | | - } |
78 | | - } |
| 46 | + else if (axis == X_AXIS) { // Left to right gradient |
| 47 | + for (int i = x; i <= x+w; i++) { |
| 48 | + float inter = map(i, x, x+w, 0, 1); |
| 49 | + color c = lerpColor(c1, c2, inter); |
| 50 | + stroke(c); |
| 51 | + line(i, y, i, y+h); |
| 52 | + } |
79 | 53 | } |
80 | 54 | } |
81 | 55 |
|
0 commit comments