var NPOINTS = 100;
var starX = [];
var starY = [];
var sandX = [];
var sandY = [];
var birdX = 270
var birdY = 160
var low = 300
var high = 120
var a = width / 2;
var b = width / 2;
var c = width / 2;
function setup() {
createCanvas(480, 480);
//assigns new coordinate for each sand grain
for (var i = 0; i < NPOINTS; i++) {
sandX.push(random(0, 480));
sandY.push(random(380, 480));
};
}
function draw() {
//sky gradient
var col1 = color(47, 107, 177)
var col2 = color(180, 197, 227)
//rearranges values so that each line of sky has a different color
for (var i = 0; i < height / 3 * 2; i++){
var gradient = map (i, 0, height / 3 * 2, 0, 1);
var newC = lerpColor(col1, col2, gradient);
stroke(newC);
line(0, i, width, i);
}
//bird's beak
push();
noStroke();
fill(244, 198, 68);
triangle(birdX + 8, birdY - 2, birdX + 8, birdY + 6, birdX + 17, birdY + 2);
pop();
//bird's head
push();
noStroke();
fill(0);
ellipse(birdX, birdY, 22, 20);
pop();
//bird's eye
push();
fill(255);
strokeWeight(2);
line(birdX + 1, birdY - 2, birdX + 4, birdY - 2);
pop();
//bird's back
push();
noStroke();
fill(0);
arc(birdX - 23, birdY + 2, 45, 30, 0, PI);
pop();
//sea
noStroke();
fill(123, 159, 189);
rect(0, height / 3 * 2, width, height);
//sand
fill(211, 195, 182);
arc(width / 2, height, width * 4, height / 7 * 3, PI, TWO_PI);
//bird's wing
noStroke();
fill(0);
quad(birdX - 30, birdY + 10, birdX - 35, birdY - 15, birdX - 21, birdY - 15, birdX - 5, birdY + 10);
//moves bird according to mouse
if (mouseY < 300 & mouseY > 120) {
birdY = mouseY;
} else if (mouseY < 120) {
birdY = high;
} else if (mouseY > 300) {
birdY = low;
};
//makes sand move
for (var i = 0; i < sandX.length; i++) {
stroke(0);
point(sandX[i], sandY[i]);
sandX[i] = sandX[i] - 1;
if (sandX[i] < 0) {
sandX[i] = width;
};
};
}
For this project, I wanted to create a beach because I grew up living on an island. I initially wanted to create trees but ran out of time so I used sand as a way to represent a changing landscape.