Ocean Currents (Generative Art) – Jade – Introduction to Interactive Media

Description

This work was inspired by an artwork I saw on Youtube. I love the flowing lines, the dynamic movements, and the way it interacts with people.

In this work, I used the concepts of Object-Oriented Programming and the particle system. My favorite part of this project is the interaction with the cursor, that changes both the transparency of the background and the starting point of the particles. Also I added the two perpendicular lines to locate the cursor and to show how the particles change with the move of my mouse.

Code

This part is my class of the particles.

 class Particle {               
  float posX, posY, val=0, angle, speed=2;   
  color c;    
  float r, g, b;
    
  Particle() { 
    posX = random(width);
    posY = random(height);
  }
 
  // the main function of the class
  void run() { 
    update();
    add_color();
    check();
    generate();
  }
 
  // update the position of particles
  void update() {     
    float noise_val = noise(posX * 0.005, posY * 0.004, val);    
    val += 0.01;  
    angle = noise_val * TWO_PI;
    
    posX += speed * cos(angle);  
    posY += speed * sin(angle);
    
  }
  
  // when particles in the canvas, draw the particles
  void generate() {
    if (posX > 0 && posX < width && posY > 0  && posY < height) {
        lines();
        ellipse(posX, posY, 2, 2);
    }
  }
  
  // check if the particles are out of edges, so to place them back to the canvas
  void check() {   
    if (posX< 0 || posX > width) 
      posX = mouseX;
    if (posY < 0 || posY > height)
      posY = mouseY;
  }
  

  // generate slightly different blue colors
  void add_color() {
      float col = map(posY, 0, height, 255, 0); 
      c = color(30, col, 255); 
      fill(c);
  }
  
  // the lines intersecting at mouse coordinates
  void lines() {
     stroke(150, 150, 150);
     line(mouseX, 0, mouseX, height);
     line(0, mouseY, width, mouseY);
  }

}

The part below is my main function.

Particle[] particles;     
float trans;     
int nums = 500;
 
void setup() {
  size(300, 600);
  background(#070B46);
  noStroke();
  setParticles();         
}
 
void draw() {
  trans = map(mouseY, 0, width, 0, 50);  // transparency changes with mouseY
  fill(#070B46, trans);  // background    
  rect(0, 0, width, height);
  for (int i = 0; i < nums; i++) {
      particles[i].run();
  }
}
 
// make the particles
void setParticles() {        
  particles = new Particle[nums];  
  for (int i = 0; i < nums; i++) {        
    particles[i]= new Particle();   
  }
 
}-
 
// if pressed, regenerate all the particles
void mousePressed() {
  setParticles();
}

Process

I set the canvas to be size(300, 600) because I think this size fits the patterns best, and I think I want to create a bottle-like scene. When running this project, it first randomly generates 500 particles across the canvas. When you move the cursor up and down, it changes the transparency of the background, which results in the change of the density of the particles visually. As the particles strike the edges, new particles will generate at either (x, mouseY) or (mouseX, y). To be visually clearer, I added the two lines to better display where the particles appear, which turns out to be pretty cool. Since quite a few parameters are related to mouseX and mouseY, as you move the cursor around, it may create some artistic patterns and effects. Pressing mouse would regenerate the particles randomly, in other words, refresh the work.

One of the difficulties I encounter was to adjust the parameters of the particles, like their color, speed and angles. It takes time to experiment to achieve my expectation. I initially wanted to make the color change every time the particles are regenerated. So I included the code for color in the void generate() function, but it didn’t work out and only filled in the same color. After a few attempts, the approach I eventually take is to use the map function to make the color change with my mouseY.

The most challenging part is about the class/ struct. After writing different functions, I found it sometimes confusing when putting them together, especially when I wanted to use functions inside another function. As result, I also found it challenging to decide whether this function should be put in draw function or the setup function.

Conclusion

I think this project really improves my understanding of class and noise/map functions. And it is always interesting and surprising to see what will come out as I change the parameters. I feel that randomness is really an important part of Processing artworks. Randomness inspires me and leads me during the whole time.

Leave a Reply Cancel reply