Month: November 2020

var clouds = [];
var bikeImage = [];
var bike = [];
var terrainCurve = 0.01;
var terrainSpeed = 0.001;


function preload(){
    var filenames =[];
    filenames[0] = "https://i.imgur.com/DSPjyoM.png";
    filenames[1] = "https://i.imgur.com/kGGBLDh.png";
    filenames[2] = "https://i.imgur.com/v9RMtPT.png";
    filenames[3] = "https://i.imgur.com/ZUC5xZ2.png";
    for(var i = 0; i < filenames.length; i++){
      bikeImage.push(loadImage(filenames[i]));
    }
}

function setup() {
    createCanvas(480,480); 
    //clouds 
    for (var i = 0; i < 9; i++){
        var ccloud = random(width);
        clouds[i] = drawCloud(ccloud);
    }
    frameRate(11);
    imageMode(CENTER);
    //bike
    var b = makeCharacter(240, 350);
    bike.push(b);
}

function draw() {
    sky(0, 0, width, height);
    DisplayClouds();
    removeClouds();
    newClouds();
    ground();
    for (var i = 0; i < bike.length; i++) { 
        var bb = bike[i];
        bb.stepFunction();
        bb.drawFunction();
    }
}

function sky(x, y, w, h) { 
    //sky
    var Blue;
    var Pink;    
    Blue = color(114, 193,215);
    Pink = color(253, 209, 164);
    for (var i = y; i <= y + h; i++) {
        var ssky = map(i, y, y + h, 0, 1.1);
        var cco = lerpColor(Blue, Pink, ssky);
        stroke(cco);
        line(x, i, x + w, i);
    }
    //mountains
    beginShape();
    stroke(1, 33,92);
    strokeWeight(200);
    for (var x = 0; x < width; x++){
        var tt = (x * terrainCurve) + (millis() * terrainSpeed);
        var mm = map(noise(tt), 0,1, 110, 255);
        vertex(x, mm + 180); 
    }
    endShape();
}

this.display = function() {
    strokeWeight(this.border);
    stroke(240);
    fill(240);
    ellipse(this.x, this.y,  this.display,  this.display);
}

function ground(){
    beginShape(); 
    noStroke();
    fill(18,12,46);
    rect(0,400,width,80);
    endShape();
}

function cloudDisplay(){
    noStroke(); 
    var floorH = 21;
    var cloudH = this.nFloors * floorH; 
    fill(250,50); 
    push();
    translate(this.x, height - 95);
    ellipse(95, -cloudH, this.breadth, cloudH / 2);
    pop();
    push();
    fill(250,80)
    translate(this.x, height - 220);
    ellipse(95, - cloudH, this.breadth/1.5, cloudH);
    pop();
}

function DisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}

function cloudMove(){
    this.x += this.speed;
}

function removeClouds(){
    var cKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cKeep.push(clouds[i]);
        }
    }
    clouds = cKeep;
}

function newClouds(){ 
//random probability
    var newP = 0.01; 
    if (random(0,0.4) < newP) {
        clouds.push(drawCloud(width));
    }
}
    


function drawCloud(xx) {
    var cha = {x: xx,
                breadth: random(95, height),
                speed: -random(1,4),
                nFloors: round(random(4,8)),
                move: cloudMove,
                display: cloudDisplay}
    return cha;
}

function makeCharacter(cx, cy) {
    ccha = {x: cx, y: cy,
         imageNumber: 0,
         stepFunction: characterStep,
         drawFunction: characterDraw
        }
    return ccha;
}
function characterStep() {
    this.imageNumber++;
    if (this.imageNumber == 4) {
        this.imageNumber = 0;
    }
}
function characterDraw() {
    image(bikeImage[this.imageNumber], this.x, this.y,120,120);
}

var x = 0;
var backgroundValue = [];
var noiseParam = 0;
var noiseStep = 0.1;


function setup() {
    createCanvas(480, 400);
    frameRate(15);
    var ilength = (width/5) + 1
    for (i = 0; i < ilength; i++) {
    	var n = noise(noiseParam);
    	var value = map(n, 0, 1, 0, height);
    	backgroundValue.push(value);
    	noiseParam += noiseStep
    } 
}

function draw() {
	var size = random(50, 150);
	background(166, 238, 255);
	stroke(160, 160, 255);
	strokeWeight(10);
	backgroundValue.shift();
	var x2 = 0;
	var ilength = (width/5) + 1
	var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    backgroundValue.push(value);
    noiseParam += noiseStep
    for (i = 0; i < ilength; i++) {
		beginShape();
		curveVertex(x2, backgroundValue[i]);
		curveVertex(x2, backgroundValue[i]);
		curveVertex(x2, height);
		curveVertex(x2 + 5, backgroundValue[i + 1]);
		curveVertex(x2 + 5, backgroundValue[i + 1]);
		endShape(CLOSE);
		x2 += 5
	}
	noStroke();
	fill(color(random(255), random(255), random(255)));
    coral(x, size);
    x += 1
    if (x > 480) {
        x = 0;
    }
}

function coral(x, size) {
    beginShape();
    curveVertex(x, 400);
    curveVertex(x, 400);
    curveVertex(x + 5, size*3);
    curveVertex(x - 20, size*2);
    curveVertex(x + 5, size*2 - 5);
    curveVertex(x - 10, size);
    curveVertex(x, size + 5);
    curveVertex(x + 10, size*2 - 20);
    curveVertex(x + 20, size*3);
    curveVertex(x + 20, size*4);
    curveVertex(x + 70, size);
    curveVertex(x + 80, size*2);
    curveVertex(x + 50, 400);
    curveVertex(x + 50, 400);
    endShape(CLOSE);
}