I decided to make a mountain landscape with birds flying over. In the front is a field then there are two mountain ranges with a setting sun behind. The hardest part for me was working with the objects and understanding the example code so that I could apply it for myself.
landscapeDownload
var mtnDetail = 0.005; // detail in tall mountain
var mtnSpeed = 0.0001; // speed of mountains
var mtnDetail2 = 0.007; //detail of short mountain
var birds = []
function setup() {
createCanvas(480, 400);
for (var i = 0; i < 5; i ++){
var rx = random(width);
var ry = random(10, 50)
birds[i] = makeBird(rx, ry);
}
frameRate(15);
}
function draw() {
background(153, 153, 204);
sun();
makeMtns();
field();
updateBird();
removeBird();
addBird();
}
function makeMtns() {
fill(138, 118, 139);
stroke(133, 114, 137);
strokeWeight(1);
beginShape();
vertex(0, height);
for (var x = 0; x < width; x++) {
var t = (x * mtnDetail) + (millis() * mtnSpeed);
var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
vertex(x, y);
}
vertex(width, height);
endShape();
//second mountain
beginShape();
fill(175, 143, 178);
vertex(0, height);
for (var x = 0; x < width; x++) {
var t2 = (x * mtnDetail2) + (millis() * mtnSpeed);
var y = map(noise(t2), 0, 1, 100, 300);
vertex(x, y);
}
vertex(width, height);
endShape();
}
function field(){
stroke(118, 139, 121);
fill(122, 145, 132);
rect(0, 300, width, 100);
}
function sun(){
// sun ray inner
noStroke();
fill(229, 187, 161, 60);
ellipse(240, 150, 225, 225);
//sun ray outer
fill(229, 187, 161, 60);
ellipse(240, 150, 300, 300);
// sun
stroke(198, 115, 76);
strokeWeight(1);
fill(184, 106, 70 );
ellipse(240, 150, 175, 175);
}
//bird object
function updateBird(){
for (var i = 0; i < birds.length; i ++){
birds[i].move();
birds[i].display();
}
}
function removeBird(){
var keepBirds=[];
for (var i = 0; i < birds.length; i++) {
if (birds[i].x < width) {
keepBirds.push(birds[i]);
}
}
birds = keepBirds;
}
function addBird(){
//little probability
var newBirdLikelihood = 0.007;
if (random(0,1) < newBirdLikelihood) {
birds.push(makeBird(15, 15));
}
}
function moveBird(){
this.x += this.speed;
}
function displayBird(){
fill(0);
stroke(0);
push();
translate(this.x, height-300);
//top wing
triangle(0, 0, 5, 0, -2, -7);
//bottom wing
triangle(0, 0, 5, 0, 2, 7);
pop();
}
function makeBird(birthLocationX, birthLocationY){
var bird = {x: birthLocationX,
y:birthLocationY,
speed:random(3, 7),
move: moveBird,
display: displayBird};
return bird;
}