Month: November 2019

sketch

In this project, I was able to create a generative landscape with customized features. I really enjoyed sceneries that has a complete reflection on a water surface, and decided to create an animation with a mountain and its reflection on the lake. I added a fun component of ducks swimming around to create a fun element.

//Charmaine Qiu
//Section E
//charmaiq@andrew.cmu.edu
//Project 11

//set the speed and detail for terrain
var terrainSpeed = 0.0005;
var terrainDetail = 0.008;
//create empty array for ducks on screen
var ducks = [];

function setup() {
    createCanvas(480, 200);
    frameRate(10);
    //set the number of ducks that appears in the beginning randomly on  screen
    for (var i = 0; i <3; i++){
        var rx = random(width);
        ducks[i] = makeDuck(rx);
    }
}

function draw() {
    //set background visuals
    //the sky
    background('#95dddd');
    //the river
    fill('#419696')
    noStroke();
    rect(0, height / 2, width, height);
    //the sun and its reflection
    fill('red');
    ellipse(width - 60, 10, 60, 60);
    fill('#6e1616');
    ellipse(width - 60, height - 10, 60, 60);
    //draw mountain and ripple function
    mountains();
    ripples();

    //draw the ducks
    push();
    translate(0.1 * width, 0.1 * height);
    scale(0.8);

    updateAndDisplayDucks();
    removeDucksThatHaveSlippedOutOfView();
    addNewDucksWithSomeRandomProbability();
    pop();
}

function mountains(){
    //create the mountain
    fill('#e1a952');
    noStroke();
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height / 2);
        vertex(x, y);
    }
    vertex(width, height/2);
    vertex(0, height/2)
    endShape();
    //create the reflection
    fill('#dd5a62');
    beginShape();
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        //inverse the y component to flip the mountain upside-down
        var y = map(noise(t), 0,1, height, height / 2);
        vertex(x, y);
    }
    vertex(width, height/2);
    vertex(0, height/2)
    endShape();
}

function ripples(){
    //create the ripples
    frameRate(7);
    stroke(255);
    //set individual random values for x and y coordinates of ripples
    rX = random(width / 2 - 50, width / 2 + 50);
    rY = random(height / 2 + 10, height);
    rX2 = random(width / 2 - 50, width / 2 + 50);
    rY2 = random(height / 2 + 10, height);
    rX3 = random(width / 2 - 50, width / 2 + 50);
    rY3 = random(height / 2 + 10, height);
    //set individual random values for width and weight of ripples
    rWidth = random(5, 20);
    rWeight = random(1, 4);
    rWidth2 = random(5, 20);
    rWeight2 = random(1, 4);
    rWidth3 = random(5, 20);
    rWeight3 = random(1, 4);
    //draw out the lines of ripples
    strokeWeight(rWeight);
    line(rX, rY, rX + rWidth, rY);
    strokeWeight(rWeight2);
    line(rX2, rY2, rX2 + rWidth2, rY2);
    strokeWeight(rWeight3);
    line(rX3, rY3, rX3 + rWidth3, rY3);


}

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


function removeDucksThatHaveSlippedOutOfView(){
    // copy all the ducks that's kept into a new array.
    var ducksToKeep = [];
    for (var i = 0; i < ducks.length; i++){
        if (ducks[i].x + ducks[i].breadth > 0) {
            ducksToKeep.push(ducks[i]);
        }
    }
    ducks = ducksToKeep; //remember the surviving ducks
}


function addNewDucksWithSomeRandomProbability() {
    // With a very tiny probability, add a new duck to the end.
    var newDuckLikelihood = 0.007;
    if (random(0,1) < newDuckLikelihood) {
        ducks.push(makeDuck(width));
    }
}


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

function duckDisplay() {
    // draw the ducks
    var headHeight = 20;
    fill(255);
    noStroke();
    push();
    //translate duck to lower part of canvas
    translate(this.x, height - 40);
    ellipse(0, -headHeight, this.breadth, headHeight);
    fill(0);
    ellipse(0, -headHeight, 5, 5);
    fill("#70547c");
    arc(10, -10, 30, 30, 0, PI);
    fill("#f8e184");
    arc(10, -10, 10, 10, 0, PI);
    fill("green");
    arc(-10, -20, 10, 10, 0, PI);
    pop();
}

//the function to create the duck object
function makeDuck(birthLocationX) {
    var mdk = {x: birthLocationX,
                breadth: 20,
                speed: -1.0,
                move: duckMove,
                display: duckDisplay}
    return mdk;
}

sketch

// Zee Salman
//fawziyas@andrew.cmu.edu
//Project-11
//section E

var trees = []
var terrain = 0.005;
var midTerrain = 0.016;
var lowTerrain = 0.020;
var terrainSpeed = 0.0004;
var rate = 0.007; 

function setup() {
    createCanvas(400, 400);
    frameRate(300);  
    }
function draw() {
    //background 
    fill(163,221,255);
    rect(0,0,width,height);
    
    //sun 
    noStroke();
    fill(255,228,26);  
    ellipse(width-60, 70, 80, 80);
    
    //mountain 
    mountains(); 
    addT();
    removeT();
    newT();
    ground(); 
}


function removeT(){
    //takes away trees
    var treesKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesKeep.push(trees[i]);
        }
    } 
    trees = treesKeep;
}



function addT(){
    // x coordinate 
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function newT() {
    // new tree on screen
    if (random(0,1) < rate) {
        trees.push(drawT(width));
    }
}


function treesMove() {
    this.x += this.speed;
}
    
//show trees
function treesDisplay() {
    
    //bottom
    strokeWeight(8);
    stroke(120, 79, 25);
    line(this.x, 350, this.x, 420);

    //top
    noStroke();
    fill(48,67,7);
    triangle(this.x - 30, 360, this.x + 30, 360, this.x, 300);
}


function drawT(px) {
    var bx = {x: px,
                breadth: 20,
                speed: -1.0,
                move: treesMove,
                display: treesDisplay}
    return bx;
}

function ground() {
    noStroke(); 
    fill("grey");
    rect(0, height-25, width, height/5);
}

function mountains() {
    //creates mountains 
    beginShape(); 
    stroke(43, 99,41);
    for (var x = 0; x < width; x++) {
        var q = (x * terrain) + (millis() * terrainSpeed);
        var m = map(noise(q), 0, .95, 300, 3);
        line(x, m, x, height); 
    }
    endShape();

   
    
    beginShape(); 
    stroke(76, 160, 73);
    for (var x = 0; x < width; x++) {
        var q = (x * midTerrain) + (millis() * terrainSpeed);
        var m = map(noise(q), 0, .75, 250, 200);
        line(x, m, x, height); 
    }
    endShape();

    
    beginShape(); 
    stroke(120, 205, 117);
    for (var x = 0; x < width; x++) {
        var q = (x * lowTerrain) + (millis() * terrainSpeed);
        var m = map(noise(q), 0, 3, 300, 250);
        line(x, m, x, height); 
    }
    endShape();
}

I was very interested in this project because it would never be the same when the landscape would pass by. It reminds me of when I go on a road trip and stick my head out the car window. The scenes change all the time. That is where I got my inspiration from to do this project.