hyt-Project-10: Generative Landscape

hyt-10-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-10-Generative-Landscape

var frames = [];
var framesIndex = 0;
var dino = [];

var terrainSpeed = 0.001;
var terrainDetail = 0.005;

var SkySpeed = 0.0003;
var SkyDetail = 0.01;

var t; // terrain in for loop
var y; // terrain y coordinate



function preload() {
    var filenames = [];
    filenames[0] = "https://i.imgur.com/nNc7b23.png";
    filenames[1] = "https://i.imgur.com/XMA7PM4.png";
    filenames[2] = "https://i.imgur.com/kN7pKft.png";
    filenames[3] = "https://i.imgur.com/0BpdBta.png";
    filenames[4] = "https://i.imgur.com/FZ6hBbP.png";
    for (var i = 0; i < filenames.length; i++) {
        frames[i] = loadImage(filenames[i]); 
    }
}

function setup() {
    createCanvas(480, 300); 
    frameRate(10);

    for (var i = 0; i < 5; i++) {
        var rx = random(width);
        dino[i] = makeDinosaur(rx);
    }
}    


function makeStar() {
    stroke(200, 0, 0);
    strokeWeight(8);
    var starx = random(0, width);
    var stary = random(0, height);
    line(starx, stary, starx + 7, stary + 7);
}

// function makeStar2() {
//     stroke(200, 0, 0);
//     strokeWeight(8);
//     var starx2 = random(0, width);
//     var stary2 = random(0, height);
//     line(starx2, stary2, starx2 + 7, stary2 + 7);
// }

// background desert
    
// foreground - terrain that changes color
function makeTerrain() {
    noFill();
    noStroke();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        t = (x * terrainDetail) + (millis() * terrainSpeed);
        y = map(noise(t), 0, 1, 150, height);
        vertex(x, y); 
        stroke(200-frameCount*0.5, 141, 103);
        line(x, y, x, height);
    }
    endShape();
}

// background - make sky 
function makeSky() {
    noFill();
    noStroke();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        t = (x * SkyDetail) + (millis() * SkySpeed);
        y = map(noise(t), 0, 1, 0, 200);
        vertex(x, y); 
        stroke(219, 239, 240, 200, 200); // sky color
        line(x, 0, x, y);
    }
    endShape();
}



// making an object - dinosaur
function makeDinosaur(birthPos) { 
    var dino = {x: birthPos, 
                speed: 1,
                display: displayDinosaur,
                move: moveDinosaur
                }
    return dino;
}

// create dinosaur movement by using frames[]
function displayDinosaur() {
    push();
    scale(0.5);
    //makeDinosaur();
    framesIndex = frameCount % 4; // frameIndex keeps track with the framecount
    image(frames[framesIndex], t, y + 100);
    pop();
}

// give dinosaur speed
function moveDinosaur() {
    this.x += this.speed;
}

function AddNewDinosaur() { 
// With a very tiny probability, add new dinosaur to the end
    var newDinoLikelihood = 0.7; 
    if (random(0,1) < newDinoLikelihood) {
        dino.push(makeDinosaur(width));
    }
}

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

// call function
function draw() {
    background(236, 163, 130, 200);
    makeTerrain();
    makeSky();
    makeStar();
    makeStar();
    UpdateAndDisplayDinosaur();
        AddNewDinosaur();
        displayDinosaur();
}

For this project, I had a concept of creating animation-like short clip of running away, and therefore I captured a GIF from found source and broken into five different images, and then created the foreground and background using the noise() function, and the different dimensions have a changing gradient and opacity based off of the frameCount. Unfortunately the results were not as good as I expected, and I struggled a bit to figure out the objects’ properties and creating the constant movement. Below is a sketch that I have, and I hope to make some other alterations more as I delve more into the concepts.