Parallel Sinusoids With Linearly Increasing Period using Processing 3

This week, we studied the repeated art patterns and chose one from those patterns to recreate in Processing. In the class, we decided to rebuild “Ninety Parallel Sinusoids With Linearly Increasing Period” by A.Michael Noll 1967.

Ninety Parallel Sinusoids With Linearly Increasing Period
early 1960s A.Michael Noll 1967

In the workshop, we learned to use loops and draw() function to create repeated patterns. In this case, we used a sin() function to create waves, then we config the color to display as we click on the screen. The draw() function will automatically update the canvas. To add more user interaction, we learned to create mouse event as we move the cursor up and down to increase a speed of the waves generation.

For the improvement, I imagine that waves can be used in the real image to create motion. To do so, I loaded the photograph of a model with hair flowing. Then I put the waves on model’s hair to make it looks naturally flow. For the interaction, I used the same technique that created in the class workshop. I only changed the color to blend with model’s hairs.

Here is the result:

Here is my code:

color[] palette = new color[4];
int currColor = 0; // default color is black
PImage img;
void setup()
{
 size(800, 480);
 img = loadImage(“model.jpg”); // load model image
 strokeWeight(1);
 stroke(0);
 noFill();
 palette[0] = color(206, 93, 0); //set hair color
 palette[1] = color(160, 72, 0);
 palette[2] = color(131, 59, 0);
 palette[3] = color(90, 42, 3);
}
void draw()
{
 background(255);
 image(img, 0, 0);
 float speed = map(mouseY, 0, height, 3, 60);
 frameRate(speed);
if (mousePressed == true) {
 currColor++;
 if (!(currColor < 4)) {
 currColor =0;
 }
 stroke(palette[currColor]);
 }
for (int j=160; j<height-100; j+=5)
 {
 for (int i=0; i<width-300; i++)
 {
 float waveLength = map(i, 0, width, 25, 75);
 float x = i;
 float waveFactor = frameCount;//mouseX;
 float y = 30*sin(x/waveLength+waveFactor)+j; 
 rect(x, y, 1, 1);
 }
 }
}
// press ‘s’ to save frame
void keyPressed() {
 if (keyPressed) {
 if ( key==’s’ || key == ‘S’)
 {
 saveFrame(“hairFlow-####.jpg”);
 }
 }
}