The reason behind organizing and ultimately self-publishing the collection of graphic experiments Expresiones Recurrentes was to curate a little more than a year of iterations on visual sketches in Processing.
Of course a lot of material was left out of the final release, so I thought that sharing some of the results bundled up in different posts could be a way of breathing life into some of the pictures that were produced.
The quad series came about when researching pixel per pixel drawing, organized in a point to Line class, arranged in an array, and using sine functions as drivers for the color parameters. The resulting structures range from color degrades to tightly packed interference patterns, some reminiscent of Carlos Cruz-Diez Chromointerférence works.
The next step was to use this technique as a filter or image processing algorithm. So, by using a high contrast black & white image as a guide, some sort of funky colorization is applied to normally monochromatic images like QR Codes.
Final caveat: This point by point technique is fine for static images but for performant results in real time apps or rendering video in non-frustrating amounts of time, shaders is a much better option.
Line[] quad;
void setup() {
size(500, 500);
colorMode(HSB);
quad = new Line[width - 100];
int offset = 50;
for (int i = 0; i < quad.length; i++) {
quad[i] = new Line(i + offset, 50, i + offset,
height - 50, color(#FA3A61), color(#0AB6CB));
}
}
void draw() {
background(0);
for (int i = 0; i < quad.length; i++) {
quad[i].drawLine(i);
}
noLoop();
//Uncomment this to save as PNG
//save("quad_" + int(random(9999))+".png");
}
class Line {
float x, y, x2, y2, phase;
color c1, c2;
int d;
Line(float x, float y, float x2,
float y2, color c1, color c2) {
this.x = x;
this.y = y;
this.x2 = x2;
this.y2 = y2;
this.c1 = c1;
this.c2 = c2;
d = int(dist(x, y, x2, y2));
}
void drawLine(float phase) {
for (int i = 0; i < d; i++) {
float r = map(sin(
radians(map(i, 0, d * 0.005, 100, 150) + phase)),
-1, 1, red(c1), red(c2));
float g = map(sin(
radians(map(i, 0, d * 0.05, 50, 0) + phase)),
-1, 1, green(c1), green(c2));
float b = map(sin(
radians(map(i, 0, d * 0.005, 0, 100) + phase)),
-1, 1, blue(c1), blue(c2));
float xPos = map(i, 0, d, this.x, this.x2);
float yPos = map(i, 0, d, this.y, this.y2);
stroke(r, g, b);
point(xPos, yPos);
}
}
}