Category: SectionE

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 11 Generative Landscape
 */

// tallest mountains
var tallMtnDetail = 0.005; // detail in mountains
var tallMtnSpeed = 0.0001; // speed of mountains

// medium mountains
var medMtnDetail = 0.0075;
var medMtnSpeed = 0.0002; 

// beach 
var beachDetail = 0.003;
var beachSpeed = 0.0004;

// array for ripples
var ripples = [];

var yellow, pink; 

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

    // boundaries for ripples
    var top = height * 5/8 + 10;
    var bottom = height - 10;

    // first ripples 
    for (var i = 0; i < 10; i++) {
        var rippleX = random(width);
        var rippleY = random(top, bottom);
        ripples[i] = makeRipples(rippleX, rippleY);
    }

    // gradient for the water
    yellow = color(255, 219, 140);
    pink = color(247, 132, 124);
 }

function draw() {
    noStroke();
    background(255, 156, 161);
    makeSun(); // setting sun
    makeTallMtn(); // tallest mountains
    makeMedMtn(); // middle mountains
    //makeWater();
    gradientWater();

    // ripple functions
    updateRipple();
    removeRipple();
    addRipple(); 

    makeBeach();

}
//----------------- FUNCTIONS BELOW THIS LINE -----------------------------

// SETTING SUN
function makeSun() {
    // sun rays
    noStroke();
    fill(255, 161, 135);
    ellipse(width/2, height * 3/8, 275, 275);

    // sun
    stroke(255);
    strokeWeight(1);
    fill(247, 217, 82);
    ellipse(width/2, height * 3/8, 175, 175);
    
}

// TALLEST MOUNTAINS
function makeTallMtn() {
    fill(252, 119, 165);
    strokeWeight(1);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * tallMtnDetail) + (millis() * tallMtnSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

// MEDIUM MOUTAINS
function makeMedMtn() {
    fill(230, 99, 160);
    strokeWeight(1);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * medMtnDetail) + (millis() * medMtnSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 3, height / 8 * 5);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

// OCEAN
function gradientWater() {
    noFill();
    for (var y = height * 5/8; y < height; y++) {
        var inter = map(y, height * 5/8, height, 0, 1);
        var c = lerpColor(yellow, pink, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

// BEACH
function makeBeach() {
    fill(252, 195, 182);
    strokeWeight(1);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * beachDetail) + (millis() * beachSpeed);
        var y = map(noise(t), 0, 1, height * 7/8, height * 19/20);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

//----------------- RIPPLE OBJ & FUNCTIONS BELOW THIS LINE -----------------------------

// RIPPLE OBJECT
function makeRipples(xPos, yPos) {
    var makeRipple = {x: xPos,
                      y: yPos,
                      // longer ripples are in the front, shorter ones in the back
                      length: map(yPos, height * 5/8, height, 5, 75),
                      // thinner ripples in the back, thicker ones in the front
                      weight: map(yPos, height * 5/8, height, 1, 4),
                      // faster ripples in the front, slower ripples in the back
                      speed: map(yPos, height * 5/8, height, 1, 4),
                      move: moveRipple,
                      draw: drawRipple}
    return makeRipple; 
}

// MOVING THE RIPPLE
function moveRipple() {
    // x position changes by speed
    this.x += this.speed; 
    // if the ripple leaves the frame, reset x position
    // to the left side of the frame
    if (this.x > width + this.length) {
        this.x === -this.length;
    }
}

// ADDING RIPPLES
// using a tiny probability, add ripples
function addRipple() {
    if (random(0, 1) < 0.075) {
        ripples.push(makeRipples(-75, random(height * 5/8, height)));
    }
}

// REMOVING RIPPLES
function removeRipple() {
    // an array for ripples to keep
    var keepRipples = [];
    for (var i = 0; i < ripples.length; i++) {
        if (ripples[i].x < width) {
            keepRipples.push(ripples[i]);
        }
    }
    ripples = keepRipples;
}

// UPDATE AND DISPLAY RIPPLE
function updateRipple() {
    for (var i = 0; i < ripples.length; i++) {
        ripples[i].move();
        ripples[i].draw();
    }
}

// DRAWING THE RIPPLE
function drawRipple() {
    strokeWeight(this.weight);
    stroke(255);
    line(this.x, this.y, this.x + this.length, this.y);
}

For my landscape, I was inspired the 80s vaporwave illustration style and color. I created a sunset scene and had fun with showing depth through details. For instance, the sizes and speeds of the mountains and ripples are all dependent on the “distance” they would be away from the viewer (the farther something is, the slower and smaller it is).

I’m using a grace day for this project 🙂

sketch

//alcai@andrew.cmu.edu
//alice cai
//section E
//week 11 assignment A

//terrain variables
var terrainSpeed = -0.0003;
var terrainDetail = 0.005;
var terrainSpeed2 = -0.0004;
var terrainDetail2 = 0.007;


//lantern variables
var List = [];
var moving = -5;
var end = -20;

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

    //call # of lanterns
    for (var j = 0; j < 20; j++) {
        var px = random(width);
        var py = random(height / 3);
        List[j] = makeLant(px, py);
    }

    //define gradient colors
    yello=color(255, 187, 0);
    orang=color(250, 133, 0);

}

function draw() {
    background(100, 50, 122);
    //call moon
    moon();
    //draw dessert mountains
    mount();
   //water
    fill(10, 12, 71);
    rect(0, height/3 * 2, width, height);
    //render lanterns
    lantRender();

}

//draw a mooon
function moon(){
    noStroke();
    fill(255, 237, 186, 30);
    ellipse(width/2, height/3, 200,200);
    fill(255, 237, 186);
    ellipse(width/2, height/3, 150,150);

    
}

function mount(){
    //two mountain ranges
    noStroke();
    beginShape();
    fill(122, 55, 80);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

    noStroke();
    beginShape();
    fill(53, 40, 105);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t1 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t1), 0, 1, 250, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

}

//make lantern with variable parameters, return object lant
function makeLant(px,py) {
    var lant = {x: px, 
                y: py,
                width: random(0,50),
                thic: random(20,30),
                speed: moving,
                update: lantUpdate,
                draw: lantDraw}

    return lant;
}

//draw lantern
function lantDraw() {
    noFill();
    noStroke();       
    //random size adds flickering 
    var size = this.thic + random(0,5);
    var thic =  this.width;
    push();
    translate(this.x, this.y * 3);
    //gradient line
    for (var i = 0; i < size; i++) {
        var inter = map(i, 0, size, 0, 1);
        var c = lerpColor(orang, yello, inter);
        stroke(c);
        strokeWeight(thic);
        line(0, i, 20, i);
      }
    pop();
}

//move the lanters and have them start over when they hit the end
function lantUpdate() {
    //speed of moving but with random to make wind/random travel speed effect
    this.x += this.speed + random(-5,5);
    if (this.x <= end) {
        this.x += width - end;
    }
}

//render lantern, add to list array
function lantRender() {
    for (var i = 0; i < List.length; i++) {
        List[i].update();
        List[i].draw();
    }

}

This project took inspiration from the Disney movie Tangled, specifically from the final, super romantic scene of the lantern lighting. I wanted to recreate this scene with the warm colors and floating lanterns. The randomized sizes created flickering and the size varation created depth to the lanters that lit up the sky. The lanterns float across the screen like they are in the sky.  

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.

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Section-E
//Project-11-Generative-Landscape 
var runningTree = [];

function setup() {
    createCanvas(480, 480); 
        //placing trees on first canvas frame
        for (var i = 0; i < 10; i++){
        var rx = random(width);
        runningTree[i] = runningTreeObject(rx);
    }
    frameRate(8);
}
function draw() {
    background(18, 36, 64); 
    fill(255, 240, 186);
    ellipse(100, 200, 100, 100)
    fill(18, 36, 64); 
    ellipse(120, 190, 80, 80)
    fill(74, 74, 7);
    //back horizon line
    rect(0, 400, width, 200);
    //adding functions to move trees across canvas
    updateRunTree();
    removeTree();
    addingTrees(); 
    //front horizon line
    fill(51, 54, 1);
    rect(0, 420, width, 200);
}
//updating tree movement
function updateRunTree(){
    for (var i = 0; i < runningTree.length; i++){
        runningTree[i].move();
        runningTree[i].display();
    }
}
//deleting trees after leaving canvas
function removeTree(){
    var keepTreeLoop = [];
    for (var i = 0; i < runningTree.length; i++){
        if (runningTree[i].x + runningTree[i].widthTree > 0) {
            keepTreeLoop.push(runningTree[i]);
        }
    }
    runningTree = keepTreeLoop;
}
//adding new trees
function addingTrees() {
    var randomTreeAdding = 0.1; 
    if (random(0,1) < randomTreeAdding) {
        runningTree.push(runningTreeObject(width));
    }
}
//moving the tree everytime it is redrawn
    function movingTree() {
    this.x += this.speed;
}
// draw the building and some windows
function Tree() {
    var minHeightOfTree = 60;
    var treeHeight = this.heightOfTree * minHeightOfTree; 
    noStroke(); 
    push();
    //moving bases to the bottom horizon line 
    translate(this.x, 420);
    //tree stumps
    fill(this.wood); 
    rect(0, -treeHeight, this.widthTree, treeHeight);
    //greenery of the tree
    //variations of green called from the tree object
    fill(this.colors);
    ellipse(random(10,20), -treeHeight + random(10,15), treeHeight, treeHeight);
    //for loop made to show motion of trees in the grass
    //10 opaque variations of the dust from running trees
    for (var i = 0; i < 10; i++) {
        fill(20,0,0,30);
        noStroke();
        //random location not made in object as it redraws
        ellipse(random(10, 50), random(10,50), this.scaleOfGreens, this.scaleOfGreens);
    }
    pop();
}
function runningTreeObject(startX) {
    var object = {x: startX,
        widthTree: 20,
        speed: -5.0,
        //multiply to randomize height of tree
        heightOfTree: round(random(1, 20)),
        //size of tree bush
        scaleOfGreens: round(random(100,300)),
        move: movingTree,
        display: Tree,
        //varied green color
        colors: randomColor(),
        //varied wood color
        wood: randomWoodColor()
        }
    return object;
}
//color of leaves
function randomColor() {
    return [Math.floor(random(0)), Math.floor(random(30,100)), Math.floor(random(10,20))]
}
//varied color of wood
function randomWoodColor() {
    return [Math.floor(random(20,50)), Math.floor(random(0,20)), Math.floor(random(0))]
}

With this project, I wanted to generate a landscape that would give dynamic motion to actual elements in the landscape. I decided to give movement to the trees as if they were running on the ground. I added varied opaque clouds that show trailing dirt clouds. I placed made the background night time with a moon to depict the trees running in the night.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-11-Landscape*/

var terrainSpeed = 0.0001;
var terrainDetail = 0.005;
var houses = [];
var tY = 130;

function setup() {
    createCanvas(400, 300);
    frameRate(10);
    // initial collection of houses
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        houses[i] = makehouse(rx);
    }
}

function draw() {
    background(219, 110, 163);
    snowyTerrain();
    snow();
    house();

    // Happy November text moving upwards
    fill(196, 71, 132);
    textSize(12);
    textFont('Helvetica');
    text('Happy November', 150, tY);
    tY -= 0.05;

    // moon
    fill(255, 238, 194);
    ellipse(330, 40, 40, 40);
}

function snow() {
    for (var i = 0; i < 50; i++) {
        ellipse(random(0, width), random(0, height), 1, 1);
    }
}

function snowyTerrain() {
    noStroke();
    fill(252, 230, 240);
    beginShape();
    for (var x = 0; x < width + 1; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height * 0.5, height * 0.8);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function house() {
    push();
    translate(0.1 * width, 0.1 * height);
    scale(0.8);

    stroke(0);
    noFill();

    updateAndDisplayhouses();
    removehousesThatHaveSlippedOutOfView();
    addNewhousesWithSomeRandomProbability();
    pop();
}

// houses' positions are updated and displayed
function updateAndDisplayhouses(){
    for (var i = 0; i < houses.length; i++) {
        houses[i].move();
        houses[i].display();
    }
}

// houses outside of the canvas are removed
function removehousesThatHaveSlippedOutOfView() {
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i++){
        if (houses[i].x + houses[i].breadth + 70 > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep;
}

// new house is added at the end with small probability
function addNewhousesWithSomeRandomProbability() {
    var newhouseLikelihood = 0.01;
    if (random(0, .5) < newhouseLikelihood) {
        houses.push(makehouse(width + 70));
    }
}


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


// draw the houses
function houseDisplay() {
    var floorHeight = 15;
    var bHeight = this.nFloors * floorHeight;

    // house block
    fill(145, 55, 26);
    noStroke();
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight + 20, this.breadth, bHeight);

    // roof
    fill(61, 27, 18);
    triangle(-10, -bHeight + 20, this.breadth/2, -bHeight * 2, this.breadth + 10, -bHeight + 20)

    // snow on the roof
    stroke(255);
    strokeWeight(6);
    strokeJoin(ROUND);
    fill(255);
    triangle(0, -bHeight, this.breadth/2, -bHeight * 2, this.breadth, -bHeight)

    //window that flickers
    strokeWeight(0.5);
    stroke(0);
    fill("yellow")
    noStroke();
    var wL = this.nFloors * 6 // variable to determine location
    var wW = random(25, 27); //variable to determine width and height
    rect(wL, -bHeight + wL * 2, wW, wW - 10);

    // windowsill
    stroke(0);
    line(wL + wW / 2, -bHeight + wL * 2, wL + wW / 2, -bHeight + wL * 2 + wW - 10);
    line(wL, -bHeight + wL * 2 + wW / 2 - 5, wL + wW, -bHeight + wL * 2 + wW / 2 - 5);
    pop();
}


function makehouse(birthLocationX) {
    var hs = {x: birthLocationX,
                breadth: 70,
                speed: -4,
                nFloors: round(random(2,5)),
                move: houseMove,
                display: houseDisplay}
    return hs;
}

I wanted to create a scene that represented the Christmas season, which I like a lot. I made the terrains become snowy hills, and added colors that made the scenery seem pleasant. It was fun to play around with different factors of my drawings, especially to control different things in a way they depend on other elements. For instance, I made my window and windowsills randomly move together to create an effect of the yellow light flickering from each house. It was also fun to add snow on the roofs using rounded joining corners. If I were to continue to work on this, I would want to do something more interesting with the text movement.