Concept: For this project, my inspiration came from an image I found on an Instagram account. Initially, I attempted to create a vertical wave effect and incorporate snow, but it didn’t achieve the desired visual result. As a result, I decided to shift my focus towards designing the sand and the waves, which evoked memories of my childhood spent at the beach. While I initially tried to create bird-like shapes, I ultimately chose to keep the design more abstract, allowing for interpretation by the user.
https://www.instagram.com/ag.lr.88/
Code Snippet: I take pride in the code that generates the sand grains because I achieved pleasing results by fine-tuning the parameters. I’m also pleased with how I implemented the wave motion, giving it a slower and smoother appearance, in addition to using the concept of Perlin Noise in general.
function Wave() {
this.yPos = 0.001;
this.display = function () {
fill(118, 170, 206);
// Drawing a polygon out of the wave points
beginShape();
strokeWeight(13);
stroke(255);
let xPos = 0;
// Iterate over horizontal pixels
for (let x = 0; x <= width; x += 10) {
// Calculate a y value according to noise and map it
let y = map(noise(xPos, this.yPos), 0, 0.8, 200, 380);
// Set the vertex
vertex(x, y);
// Increment x dimension for noise
xPos += 0.05;
}
// Increment y dimension for noise
this.yPos += 0.002;
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
};
}
// Create sand grains using a loop
for (let x = 0; x < width; x += grainSize) {
for (let y = 0; y < height; y += grainSize) {
let grainColor = color(random(235, 245), random(220, 230), random(180, 190)); // Light sand grain color
texture.fill(grainColor);
texture.noStroke();
let grainSizeX = random(grainSize * 1, grainSize * 3); // Adjust the X grain size
let grainSizeY = random(grainSize * 1, grainSize * 2); // Adjust the Y grain size
texture.ellipse(x + random(-grainSize / 4, grainSize / 4), y + random(-grainSize / 4, grainSize / 4), grainSizeX, grainSizeY);
}
}
return texture;
}
Reflection:This project marked my first time using code snippets from online examples in P5.js. I enjoyed working with these examples and modifying them to match my creative vision. However, some of the functions and P5.js features used in these examples were unfamiliar and a bit complex for my current level of expertise. I spent a considerable amount of time exploring my own ideas from scratch, sometimes overlooking the new properties introduced in the examples. This experience highlighted the importance of experimenting with P5.js properties independently before incorporating more advanced techniques that may surpass my current skill level.
References: