sketch
var terrainSpeed = 0.001;
var terrainDetail = 0.05;
var birds = [];
var stars = [];
function setup() {
createCanvas(600,400);
frameRate(10);
for (var i=0; i < 10; i++){
var bX = random(width);
var bY = random(height/8,height/5);
birds[i] = makeBird(bX, bY);
}
for (var j=0; j < 30; j++){
var x = random(width);
var y = random(height*3/4);
stars[j] = makeStars(x,y);
}
}
function gradient(x,y,wid,hei,c1,c2){
noFill();
for (var i = y; i < y+hei; i++){
var inter = map(i,y,y+hei,0,1);
var col = lerpColor(c1,c2,inter);
stroke(col);
line(x,i,x+wid,i);
}
}
function gradientLine(x,y,len,c1,c2){
for (var i = y; i < (y+len); i+=12){
var interv = map(i,y,y+len,0,1);
var colM = lerpColor(c1,c2,interv);
stroke(colM);
line(x,i,x,i+12);
}
}
function updateAndDisplayStars(){
for (var s = 0; s < stars.length; s++){
stars[s].move();
stars[s].drawS();
}
}
function makeStars(sX,sY){
var star = {x:sX,
y:sY,
speed: random(0,1),
move: moveStar,
drawS: drawStars}
return star;
}
function drawStars(){
stroke(200);
point(this.x,this.y);
}
function moveStar(){
this.x += this.speed;
}
function removeStars(){
var keepStars = [];
for (var i=0; i < stars.length; i++){
if ((0 < stars[i].x < width) & (0 < stars[i].y < height)){
keepStars.push(stars[i]);
}
}
stars = keepStars;
}
function addStars(){
if (stars.length < 30){
var stX = random(width);
var stY = random(height/2);
stars.push(makeStars(stX,stY));
}
}
function makeBird(birdX,birdY){
var bird = {x:birdX,
y:birdY,
speedX: random(5,15),
speedY: random(-10,5),
spanX: random(5,10),
spanY: random(2,5),
stroke: 0,
fly: birdFly,
drawB: drawBird}
return bird;
}
function birdFly(){
this.x += this.speedX;
this.y += this.speedY;
}
function drawBird(){
stroke(0);
this.stroke = map(this.spanX,5,10,1,3);
strokeWeight(this.stroke);
line(this.x-2,this.y,this.x+2,this.y);
line(this.x,this.y,this.x-3,this.y-5);
line(this.x,this.y,this.x+3,this.y-5);
line(this.x-3, this.y-5,this.x-3-this.spanX,this.y-5-this.spanY);
line(this.x+3, this.y-5,this.x+3+this.spanX,this.y-5-this.spanY);
}
function updateAndDrawBirds(){
for (var i = 0; i < birds.length; i++){
birds[i].fly();
birds[i].drawB();
}
}
function removeBirds(){
var keepBirds = [];
for (var i=0; i < birds.length; i++){
if ((0 < birds[i].x < width) & (0 < birds[i].y < height)){
keepBirds.push(birds[i]);
}
}
birds = keepBirds;
}
function addBirds(){
var prob = 0.3;
if (prob>random(0,1)){
birds.push(makeBird(10,height/4));
}
}
function draw() {
stroke(255);
strokeWeight(3);
var bgColor2 = color(200, 219, 216);
var bgColor1 = color(99,112,145);
gradient(0,0,width,height,bgColor1,bgColor2);
updateAndDisplayStars();
removeStars();
addStars();
var mCol1 = color(250,238,222);
var mCol2 = color(31,43,98);
var wCol1 = color(35,45,101);
var wCol2 = color(97,126,180);
for (var x = 0; x < width; x++) {
var t1 = (x * terrainDetail/5) + (millis() * terrainSpeed/2);
var t2 = (x * terrainDetail/10) + (millis() * terrainSpeed*4);
var y1 = map(noise(t1), 0,1, 0, height*2/3);
var y2 = map(noise(t2), 0,1, height*3/4, height*4/5);
gradientLine(x,y1,height-y1,mCol2, mCol1);
gradientLine(x,y2,height-y2,wCol1, wCol2);
}
updateAndDrawBirds();
removeBirds();
addBirds();
}
For this project I wanted to create the view of looking at the mountains and river passing by under the sky with stars.
I explored the use of gradient in rendering the mountain and water waves, but because iterating through every single pixel is slowing down the movement and making the animation extremely slow and incoherent. So I decided to render every 12 pixels of each vertical line with the same color to reduce the load on the algorithm.
I made the birds and stars into objects that can be easily controlled with different attributes.
[Note: this post was edited by RBD on Nov 5, 9:25am to work around some WordPress problems. Please do not take off any late points. I’ll post a reply on Piazza as well.]