Month: October 2019

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-10

var trees = [];
var frames;

function preload() {
    //background  gradient
    backgroundImage = loadImage("https://i.imgur.com/L0VpcqE.jpg")

    //frames for person animation
    frames = [];
    frames[0] = loadImage("http://i.imgur.com/svA3cqA.png");
    frames[1] = loadImage("http://i.imgur.com/jV3FsVQ.png");
    frames[2] = loadImage("http://i.imgur.com/IgQDmRK.png");
    frames[3] = loadImage("http://i.imgur.com/kmVGuo9.png");
    frames[4] = loadImage("http://i.imgur.com/jcMNeGq.png");
    frames[5] = loadImage("http://i.imgur.com/ttJGwkt.png");
    frames[6] = loadImage("http://i.imgur.com/9tL5TRr.png");
    frames[7] = loadImage("http://i.imgur.com/IYn7mIB.png");
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of trees
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
    frameRate(10);
}

function draw() {
    image(backgroundImage, 0, 0, width * 2, height);
    mountain();
    mountain2();

    //ground
    fill(210,218,255);
    rect(-1, height-50, width + 1 , 50)

    updateAndDisplayTrees();
    removeTrees();
    addNewTrees(); 

    //person on ground
    push();
    scale(.35, .35);
    image(frames[frameCount % 8], width * 2.75, height * 2.33); 
    pop();
}

//upper mountain
function mountain() {
    var speed = 0.0005;
    var terrain = 0.01;
    stroke(70,119,187);

    for (var x = 0; x < width; x += 1) {
        var t = (x * terrain) + (millis() * speed);
        var y = map(noise(t), 0, 1, 0 + 100, height / 2 + 100);
        line(x, y, x, height); 
    }

    //person on mountain
    push();
    scale(.10, .10);
    image(frames[frameCount % 8], width * 9.85, y * 10 - 100); 
    pop();
}

//lower mountain
function mountain2() {
    var speed = 0.0003;
    var terrain = 0.005;
    stroke(50,99,167);

    for (var x = 0; x < width; x += 1) {
        var t = (x * terrain) + (millis() * speed);
        var y = map(noise(t), 0, 1, height / 2 + 150, height / 4 + 150);
        line(x, y, x, height); 
    }

    //person on mountain
    push();
    scale(.25, .25);
    image(frames[frameCount % 8], width * 3.9, y * 4 - 110); 
    pop();
}

function updateAndDisplayTrees(){
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function removeTrees(){
    // Copy all the trees we want to keep into a new array.
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].treeWidth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the surviving trees
}

function addNewTrees() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.05; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

// method to update position of tree every frame
function treeMove() {
    this.x += this.speed;
}
    
// draw the tree
function treeDisplay() {

    //tree leaves
    fill(22,138,130); 
    noStroke(); 
    push();
    translate(this.x, height - 60);
    triangle(0, -this.treeHeight, 0 - this.treeWidth / 2, 0, 0 + this.treeWidth / 2, 0)
    pop();

    //tree trunk
    fill(40,59,107);
    push();
    translate(this.x, height - 60);
    rect(- 2.5, 0, 5, 10);
    pop();
}

function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
                treeWidth: random(20,30),
                speed: -5.0,
                treeHeight: random(30,60),
                move: treeMove,
                display: treeDisplay}
    return tr;
}

For this project I spent some time messing around with different colors and mountain heights in order to get a look that I liked.  I couldn’t get the sky to gradient in a way that I thought looked good so I used an image to create the gradient. The trees are at random heights and come at random intervals.  The hardest part was to get the racing people on the right to run along the mountains rather than at a consistent y-value. I had the people decrease in size in order to give a sense of depth, but it was difficult to control the movements of the people once they were scaled down.  Overall, I am pretty happy with this project.