genArt : Ripple !

Description

Create a generative artwork using Object-Oriented Programming paying attention to the structure, clarity, and organization of your program.

Process

Saying goodbye to hardcoding was hard. How do I create a pleasing and satisfying to-watch art with little code?  After hours of thinking, it finally clicked. Why not recreate the natural phenomena of the ripple effect. Throw a little stone into water and it creates a mighty ripple. Yeah that’s the inspiration

I started off by exploring how I can play with ellipses to form the shapes of the ripple effect. As I was working on this piece deep in the night, I kept on repeating the ” final countdown ” tune so I decided to create my whole art in a form of a play or an exhibition.

The Intro!

The introduction of my exhibition starts with a count down. The countdown is actually a count up 🙂  which is centered in the middle of the screen. I then added the ripple effect. I added some colors to appeal to the eye

The Interlude!

Now we can kill some time by watching balls bouncing off walls and changing colors. Used some opacity to achieve a lightsaber effect.

 

The Playback!

In the playback, I created two spheres that clash with each other and disappear off the screen. Then, I removed the stroke and played with random colors. The outcome was unexpected 🙂 Yeah, it was fun.

The Exhibition!

I combined the intro to the interlude and the playback with a few tweaks. Yeah, and a little suspense, :).

Final Work

Challenges

The first challenge I faced was bouncing the ball off the walls.  For some reason, my method was not working after putting my function into a class. I tried multiple times to let a function inside a class run continuously but couldn’t get it to work. I spent hours learning how to make functions within classes run more than one time. Oh no! All this while, I’ve been thinking too hard, I just needed to add an if statement to my method.

Also, I was having trouble tweaking the randomness. Striking a balance between control over the elements and randomness was hard.  I did a lot of trial and error in the beginning to find the optimal, the just-right level of randomness

Finally, Ripple! one big thing I learned from this assignment is to let go, I stopped controlling the background colors, and boom! there goes this mesmerizing art.

Code

–  Main

Ripple genArt;

void setup() {
  size(640, 640);
  genArt = new Ripple( width/2, height/2);
}

void draw() {
  genArt.exhibit();
}

– Ripple Class

class Ripple {
  // data
  int x, x2, x3, y, y1, y2;
  int Width = width;
  int centerX, centerY;
  float circleWidth;
  int countUp;
  int counter;
  int speed;



  // constructor
  Ripple(int _x, int _y) {
    centerX = _x;
    centerY = _y;
    circleWidth = 500;
    countUp = 0;

    // bouncing balls coordinates and speed
    x = _x;
    y = _y;
    y1 = 80;
    y2 = 400;
    speed = 3;


    // clashing balls coordinates
    x2 = 640;
    x3 = 0;

    // exhibition counter
    counter = 0;
  }


  void intro() {

    // countdown

    fill(random(255), random(255), random(255), 10);
    textAlign(CENTER, CENTER);
    textSize(32);
    text( countUp +=1, centerX, centerY-5);


    // ellipses as rainbow ripple effect
    noFill();
    stroke(random(255), random(255), random(255), 90);
    ellipse(x, y, circleWidth, circleWidth);
    circleWidth += 20;

    // repeat ellipses with random colours
    if (circleWidth > 1000) {
      // clear background and start over
      background(255);
      circleWidth = frameCount*1.5;
    }
  }

  void interlude() {
    // background(60);

    ellipse(x, y, circleWidth, circleWidth);
    ellipse(x, y1, circleWidth, circleWidth);
    ellipse(x, y2, circleWidth, circleWidth);

    x += speed;
    y1 += speed;
    y2 += speed;

    // ball bounces off wall
    if (x + circleWidth/2> Width || x - circleWidth/2<0) {
      speed *= -1;
      //fill(random(255), 50);
      stroke(random(230), random(230), random( 250));
    }
  }

  void playback() {
    noStroke();
    //background(0);
    ellipse(x2, y, circleWidth, circleWidth);
    ellipse(x3, y, circleWidth, circleWidth);

    // expand the clashing balls as they approach each other
    if (x2<=640) {
      x2 = x2 -10;
      x3 = x3 + 10;
      circleWidth += 5;
    }


    // reset the cordinates of the clashing balls
    if (circleWidth > 1000) {
      circleWidth = 10;
      x2 = 640;
      x3 = 0;
      fill(random(250), random(250), random( 250), 50);
    }
  }





  // control exhibition
  void exhibit() {
    counter +=1;

    // play intro
    if ( counter < 1000) {
      intro();

      // go blank when timer is out
      if (counter > 650) {
        background(0);
      }
    }

    // play interlude and playback together
    else if ( counter < 2000) {

      interlude();
      playback();
    } else {
      background(255);
      counter = 600;
    }
  }


  void reset() {
    circleWidth = 100;
    y = centerY;
  }
}

 

References

1.  https://commons.wikimedia.org/wiki/File:Ripple_effect_on_water.jpg