Month: November 2018

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 10 Generative Landscape

var terrainSpeed = 0.0005;
var terrainDetail = 0.01;
var terrainD1 = 0.0005;
var terrainS1 = 0.0002;

var fish1 = "https://i.imgur.com/pw06Fwc.png";
var fish = [];
var fishy1;

function preload() {
	fishy1 = loadImage(fish1);
}

function setup() {
    createCanvas(480, 300);
    //create an initial collection of fish
    for (var i=0; i<10; i++) {
    	var rx = random(width*5);
    	fish[i] = makeFish(rx);
    }
    
    frameRate(10);
}
 
function draw() {
    background(255);
    //sun
    noStroke();
    fill(252,163,41);
    ellipse(80, 60, 70, 70);

    //mountain
    noFill(0); 
    stroke(135,120,108)
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t),0,1,20,height)-height/4;
                
        vertex(x, height);
        vertex(x, y); 
    }
    endShape();
    fill(135,120,108,100);
    noStroke();
    
    //water-top
    beginShape(); 

    stroke(119,209,249,150);
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainD1) + (millis() * terrainS1); 
        var y1 = map(noise(t1),0,1,20,height);
        vertex(x1, height);
        vertex(x1,y1);
    }
    endShape();

    //water-bottom
	beginShape(); 

    stroke(119,209,259);
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainD1) + (millis() * terrainS1); 
        var y1 = map(noise(t1),0,1,28,height);
        vertex(x1, height);
        vertex(x1,y1);
    }
    endShape();

    //fish
    push();
    translate(0.1 * width, 0.1 * height); 
    scale(0.8);

    scale(0.2,0.2);
    
    updateAndDisplayFish();
    addNewFishWithProbability();

}

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


function addNewFishWithProbability() {
	var newFishLikelihood = 0.05;
	if (random(1) < newFishLikelihood) {
		fish.push(makeFish(-300));
	}
}

function fishMove() {
	this.x += this.speed*(1/this.size);
}

function fishDisplay() {
	push();
	scale(this.size, this.size);
	translate(this.x*(1/this.size), this.y*(1/this.size));

	image(fishy1,0,0);
	pop();
}


function makeFish(birthLocationX) {

    var fishy = {x: birthLocationX,
    		size: random(0.3, 0.6),
    		y: random(0.8*height*(1/0.2), height*(1/0.2)),
            speed: random(1,5),
            move: fishMove,
            display: fishDisplay};
    return fishy;
}

I started out thinking to do a project on natural landscape with mountain, water and grassland. But as I dived into the project, I found the overall scene rather dull and lifeless so I decided to focus on the underwater scene with fish instead.

Landscape

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-10-Landscape

var cacti = [];
var cactusClip;
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var tumbleweed = [];

function preload() {
    cactusClip = loadImage("https://i.imgur.com/f4O5OGj.png?1");
}


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

}


function draw() {

    background(212, 248, 251);  

    ////////// Mountains //////////
    stroke(129, 161, 164);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        line(x, y, x, height);
    }
    endShape();

    /////// sun beam ////////
    
    beginShape(); 
    for (var x = 0; x < width; x++) {
        fill(221, 204, 112); 
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    endShape();
    noFill();
    
    rect(0, 0, width - 1, height - 1);


    //// cactus //////
    
    displayHorizon();

    updateAndDisplayCacti();
    removeCactiThatHaveSlippedOutOfView();
    addNewCactiWithSomeRandomProbability(); 

    //// tumble weed ///////
   for (var k = 0; k < tumbleweed.length; k++){
        tumbleweed[k].draw();
        tumbleweed[k].move();
   }
    addNewTumbleWeedWithSomeRandomProbability();
   
}


function updateAndDisplayCacti(){
    // Update the cacti positions and display them
    for (var i = 0; i < cacti.length; i++){
        cacti[i].move();
        cacti[i].display();
    }
}


function removeCactiThatHaveSlippedOutOfView(){
    var cactiToKeep = [];
    for (var i = 0; i < cacti.length; i++){
        if (cacti[i].x + cacti[i].breadth > 0) {
            cactiToKeep.push(cacti[i]);
        }
    }
    cacti = cactiToKeep; // remember the cacti that stay
}


function addNewCactiWithSomeRandomProbability() {
    // With a very tiny probability, add a new cacti to the end
    var newBuildingLikelihood = 0.03; 
    if (random(0,1) < newBuildingLikelihood) {
        cacti.push(makeCactus(width));
    }
}


// method to update position of cactus every frame
function cactusMove() {
    this.x += this.speed;
}
    

// draw the cactus
function cactusDisplay() {
    var cHeight = this.cactusHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - this.cactusPlacement);
    image(cactusClip, 0, -cHeight);
    pop();
}


function makeCactus(birthLocationX) { // cactus object
    var cct = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                cactusHeight: round(random(0, 175)),
                move: cactusMove,
                cactusPlacement: round(random(0,70)),
                display: cactusDisplay}
    return cct;
}




function makeTumbleWeed() { // random colors
    var tbwd = {x: width,
                y: -height + 100,
                move: moveTumbleWeed,
                draw: drawTumbleWeed,
                color: [random(50, 180), random(50, 165), random(20, 55)],
                }
    return tbwd;
    }

// draw tumbleweed
function drawTumbleWeed(){
    stroke(this.color);
    strokeWeight(4);
    noFill();
    ellipse(this.x, height - this.y - 60, 30, 30,);
    ellipse(this.x + 5, height - this.y - 62, 20, 20);
    ellipse(this.x + 2, height - this.y - 57, 5, 5);
    ellipse(this.x - 4, height - this.y - 61, 15, 15);
    ellipse(this.x -1, height - this.y - 60, 20, 20);
}

function moveTumbleWeed(){ //tumble weed moves more quickle than cacti
    this.x -= 10;
    this.y = random(10);
}


function addNewTumbleWeedWithSomeRandomProbability() {
    // tumble weeds are alot less likely than cacti
    var newTumbleWeedLikelihood = 0.007; 
    if (random(0,1) < newTumbleWeedLikelihood) {
        tumbleweed.push(makeTumbleWeed(width));
    }
}


function displayHorizon(){
    stroke(162, 126, 78);
    fill(201, 160, 106);
    rect(0, height - 75, width, height - 75);
}

I enjoyed doing this project because it allowed me to make my own landscape, where as in the past we have always been given a template for them. I struggled a bit to enter in new moving objects, and took me awhile to understand all the commands and what each function was doing. Some things, like the sunlight beam, happened by accident because I was messing with different variables but I’m very happy with how it turned out. If I were to do this again I would probably want to add more details to the sky, or figure out how to make more complicated generated landscapes besides the mountain like line that we were offered with. Overall I’m happy with how it came out.