To begin working on my project I started off with a plan of what creatures I want to include in my underwater simulation. I decided on four creatures that belong to relatively different species: Starfish, Seahorses, Jellyfish, and Octopi.
My approach was to begin first by sketching out the shapes on the p5js canvas using the beginShape() and endShape() functions. I started off with the starfish which I sketched initially using polar coordinates of a circle. I introduced an inner radius, and outer radius, then had the ‘cos’ and ‘sin’ waves impact the angles of the coordinates of the curves that are drawn based on the two different radii. Putting all this in a loop that ran for a full circle ’TWO_PI’, and incremented its loops at a rate ‘PI/2.5’ I was able to achieve a star looking shape with 5 points.
for (let angle = 0; angle <= TWO_PI; angle += PI/2.5)
{
let x = centerX + radius * cos(angle);
let y = centerY + radius * sin(angle);
curveVertex(x, y);
let x2 = (centerX) + radius2 * cos(angle + HALF_PI / 2.5);
let y2 = (centerY) + radius2 * sin(angle + HALF_PI / 2.5);
curveVertex(x2, y2);
}
endShape(CLOSE);
}
Moving on from there I began introducing noise to all the elements of the star, from its colors to its coordinates. I then also added the incremented I value at the beginning of the draw function to create the animated effect on the star.
let i = 0;
function draw()
{
i++;
let radius = 200 * noise(i / 300) + 100;
let radius2 = 100 * noise(i / 150) + 50;
let centerX = width / 2;
let centerY = height / 2;
translate(0, -40);
for (let angle = 0; angle <= TWO_PI; angle += 100)
{
background(0, 1);
let noiseStrokeR = noise(angle);
let noiseStrokeG = noise(i / 2);
let noiseStrokeB = noise(angle, i / 2);
stroke(
Math.round(255 * noiseStrokeR + 10),
Math.round(120 * noiseStrokeB + 40),
Math.round(255 * noiseStrokeG),60
);
beginShape();
fill(0,10)
let noiseY = noise(radius / 1000) * 100;
let noiseX = 20 - noise(angle, i / 2000) * 200;
for (let angle = 0; angle <= TWO_PI; angle += PI/2.5)
{
let x = centerX + radius * cos(angle);
let y = centerY + radius * sin(angle) + (3.5 - noise((angle), i / 15) * 7);
curveVertex(x + noiseX, y + noiseY);
let x2 = (centerX) + radius2 * cos(angle + HALF_PI / 2.5);
let y2 = (centerY) + radius2 * sin(angle + HALF_PI / 2.5);
curveVertex(x2 + noiseX, y2 + noiseY);
}
endShape(CLOSE);
}
}
For the trails left behind the star I worked with the alpha value of the stroke, and of the background that is drawn constantly through the draw() function.
Once I was somewhat satisfied with the look of the star I added it to a class so that I’d be able to introduce it at randomized amounts and positions on the canvas moving forward.
One thing I am also still working on as a development on the starFish class is introducing elements of motion to the object, so far I have added velocity, similar to how we’ve been doing so far with the movers, however I am yet to introduce an anti collision function to prevent my starfish from colliding.
class StarFish {
constructor(x, y, dimensions, velocity) {
this.i = 0;
this.centerX = x;
this.centerY = y;
this.radius = dimensions;
this.radius2 = dimensions / 2;
this.velocity = velocity;
}
update(starFishes) {
this.i++;
this.radius = 200 * noise(this.i / 300) + 100;
this.radius2 = 100 * noise(this.i / 150) + 50;
this.centerX += this.velocity.x;
this.centerY += this.velocity.y;
Another thing I want to develop on this class is have the movement appear a lot more organic, and perhaps have the stars rotate and not remain stable in angle to bring them to life. When noise was the only element effecting their animation they looked quite organic but they only seemed to vibrate in one position, that is why I felt the need to include motion, which, while allowing the star to move it seemed to give it a more unrealistic feel.
I believe that these issues could be resolved by adding forces working with acceleration and velocity at extremely low rates to mimic the movement of starfish.
My plan is to continue developing this class and then hopefully introducing its elements to the classes of the different creatures.
With the other three creatures, I have a plan on how I will execute them, in terms of sketching them, but so far, I only have the seahorse drawn using the beginShape() function. I have some concerns regarding how the seahorse is gonna come out, as well as the other creatures, mainly because I am not sure how much noise and to which parts of the drawing exactly could I include it. However, this of course will only be figured out with trial and error and trying different methods of approach just like I did with the starfish.
One other element I am hoping to be able to achieve but I am still unsure of how to execute is having the creatures morph or transform into one another. I don’t really have a plan of how to execute that but I am still looking into it.
During this process, I faced two main difficulties, first with the SVG file, which unfortunately I could not get no matter that different sketches I tried it with. I am not sure of whether the issue is in my methodology or my sketches themselves.
The second difficulty was in terms of the trail and the overall look of the star, I was hoping to draw it as a series of lines but I ended up with one continuous line. The reason I thought a series of line stemming from the center would work better is because I imagined a more organic look to appear through introducing noise to every single line. I wasn’t able to achieve that, unfortunately, however, I think what I have so far, for the star, looks relatively good.