Livvy’s ProjectA

Glowing In The Sea:

 Luminous Sea Snake

Link on p5.js: https://editor.p5js.org/wl3223/sketches/MKHuD4wXb

Link on GitHub Pages: https://wl3223.github.io/cclab/projectA/

Part1

PROJECT DESCRIPTION

Elevator Pitch:

Glowing In The Sea brings to life a sea snake in the ocean. Control its graceful motions, witness captivating color changing, and immerse yourself in a relaxing underwater world where the sea snake lives at ease.

Abstract:

Inspired by the fascinating marine life of shallow seas, Glowing In The Sea is an interactive p5.js sketch that showcases the movements and behaviors of a luminous sea snake. Through interactive controls, users guide the snake’s graceful motions, witness its attractive color changing, and engage with its playful behavior—spitting bubbles and hunting small fish. This project aims to both entertain and educate. It ​​illustrates the harmony between interactivity and art in the digital realm. In addition, the project offers a glimpse into the wonders of oceanic life, arousing the awareness of protecting marine life.

Images:

via GIPHY

Spitting Bubbles & Glowing

via GIPHY

Hunting fish

via GIPHY

 

Part2

1) Process: Design and Composition

I simplified the sea snake into a cute and simple version like a cartoon character, featuring a chubby body. As it moves quickly, it stretches its body smoothly, and it owns a big head and a small tail. The lovely creature’s body will keep getting bigger and smaller as if it is breathing. The combination of blue and purple as well as suitable transparency contribute to its fancy appearance.

In the earlier versions, the creature moves automatically, and the trace features Perlin Noise.

Version6

via GIPHY

However, in order to add more interactions, I decided to let users control the creature’s movements. (More detailed information about coding will be introduced in the following part of Technical.)

Version8

via GIPHY

Besides the main body of the creature, I also added other interactive elements such as spitting bubbles, glowing, and hunting fish. (Images can be found in the part for the audience)

 

2) Process: Technical 

Displaying the body

In order to create its body, first I tried to adjust the transparency of the background, displaying the trace of one single circle which represents the long body.

Version1

via GIPHY

Version4

via GIPHY 

 

However, I find that traces of other elements also remain on the sketch. To tackle this problem,  I set up arrays for the x and y positions for each circle, and each of them follows the steps of the previous ones. 

Version5

via GIPHY

Version12 (Final)

via GIPHY 

 

The size of its body changes with frame count, visualizing the lively action of breathing. In terms of the sea snake’s color, the map() function is used to create a transition from purple to blue.

for (let i = num - 1; i > 0; i--) {
    xa[i] = xa[i - 1];
    ya[i] = ya[i - 1];
  }


  xa[0] = x1; // Set the first element
  ya[0] = y1; // Set the first element


  for (let i = 0; i < num; i++) {
    color1 = map(sin(frameCount * 0.1), -1, 1, 100, i * 4);
    fill(color1, 100, 150, 180);
    noStroke();
    circleSize = map(sin(frameCount * 0.08), -1, 1, 20, 35);
    //circleSize=30
    creatureSize[0] = circleSize;
    creatureSize[i + 1] = creatureSize[i] - 0.5;
    circle(xa[i], ya[i], creatureSize[i]);

 

Movements

Instead of letting it move automatically, I tried to control it with arrows on the keyboard.

*dirX/Ycontrolsl its acceleration

if (keyIsPressed) {
    flag = true;
    // if key is pressed, increase the acceleration.
    if (keyCode == UP_ARROW) {
      dirY = -1;
    }
    if (keyCode == DOWN_ARROW) {
      dirY = 1;
    }
    if (keyCode == LEFT_ARROW) {
      dirX = -1;
    }
    if (keyCode == RIGHT_ARROW) {
      dirX = 1;
    }


    ySpd += 0.1 * dirY;
    xSpd += 0.1 * dirX;
  } else {
    if (abs(xSpd) >= 0.5) {
      xSpd -= 0.5 * dirX;
    }
    if (abs(ySpd) >= 0.5) {
      ySpd -= 0.5 * dirY;
    }
  }


  x1 += xSpd;
  y1 += ySpd;


  if (x1 <= 0 || x1 >= width) {
    xSpd *= -1;
  }
  if (y1 <= 0 || y1 >= height) {
    ySpd *= -1;
  }
  // console.log(xSpd,ySpd,dirX,dirY);

 

Background

Besides the creature, I also decorated the background. The length of lines changes according to the distance from the creature. (I got the inspiration from the previous lecture about for loop)

  for (let x = a / 2; x < width; x = x + a) {
    for (let y = a / 2; y < height; y = y + a) {
      push();
      translate(x, y);
      let d = dist(xa[0], ya[0], x, y);
      let rectSize = map(d, 0, width * 1.5, 0.3 * a, 2 * a);
      angle = map(d, 0, width * 1.5, 0, 2 * PI);
      let thickness = map(d, 0, width * 1.5, 5, 20);
      rotate(angle);
      stroke(0, 76, 153, 50);
      strokeWeight(thickness);
      line(0, 0, 0, rectSize);
      pop();
    }
  }

 

Color of fish

I struggled with the different colors of fish. Due to the use of function for separate fish, the failing results were situations of color changing with frame count and all fish’s colors were the same. Finally, I used the array embedded in another array to realize the ultimate outcome. However, I could have simplified it by using colorMode(HSB) rather than RGB, so there could be only one layer of array.

 

3) Reflection and Future Development

Conclusions and Critical Reflections:

In summary, the journey of creating projectA has been a valuable learning experience, filled with iterations, challenges, and insights. The project evolved significantly from the initial project proposal to its current version. One of the striking improvements was transitioning from automatic movements to user-controlled interactions. Allowing users to guide the sea snake’s movements through keyboard arrows added a layer of engagement and interactivity that was well-received by the audience.

Successes and Challenges:

Success: The project’s strengths lie in its successful visualization of the sea snake’s appearance and animation.  The user interaction and control was a notable and successful change, enhancing the project’s engagement factor. 

Challenges: Challenges, such as handling the speed of the creature and different colors of fish, provided valuable learning experiences. The solution to colors of fish could be improved in the future in terms of optimizing code for efficiency.

Feedback and Future Exploration:

1. Enriching the Ocean Environment:

To create a more immersive ocean environment, the project would incorporate additional elements like seaweed and waves. These additions will connect the sea snake more closely with its habitat, enhancing the overall visual experience and making the underwater world come to life.

2. Cartoony Fish:

In response to feedback suggesting a harmonized appearance, the fish in the project could be transformed into a more cartoony style. This change will ensure that the fish complement the sea snake’s cute appearance, creating a cohesive visual narrative.

3. Creature Growth Dynamics:

A key development focus would be enabling the sea snake to grow in size after it consumes fish. This dynamic growth will further engage users in the sketch and add an interactive element to the project, allowing users to witness the impact of their actions.