Category: Project-11-Composition

Raymond Pai – Project 11 – Generative Landscapes

I wanted to be a moon rover, so I sketched an illustration of being on the moon. The ground is grey and you slowly move across the moon’s surface.

sketch

///RAYMOND PAI
///SECTION D
///RPAI@ANDREW.CMU.EDU
///PROJECT 11

var stars = [];
var sX = 0;
var sY = 0;
var moonSpeed = 0.00009;
var moonDetail = 0.005;

function setup(){
    createCanvas(480, 300);
    //initialize stars
    for(var i = 0; i < 30; i++){
        sX = random(width);
        sY = random(height);
        stars[i] = makeS(sX, sY);
    }
}

function draw() {
    background(0);
    //draw earth
    noStroke();
    fill(90, 90, 255);
    ellipse(130, 80, 70, 70);
    fill(0, 255, 0);
    rect(130, 80, 30, 20);
    fill(0, 255, 0);
    rect(100, 60, 20, 10);
    //moon ground
    drawMoon();
    //stars
    drawS();
}

function drawS(min, max, moise) {
    noStroke();
    fill(255, 255, 0);
    push();
    translate(this.x, this.y);
    ellipse(10, 10, 5, 5);
    pop();
}

function makeS(stX, stY){
    var makeStar = {x: stX,
                y: stY,
                speed: -3,
                move: moveS,
                draw: drawS}
    return makeStar;
}

function moveS(){
    this.x += this.speed;
    if(this.x <= -5){
        this.x += width;
    }
}

function displayS(){
    for(var i = 0; i < 50; i++){
        stars[i].move();
        stars[i].draw();
    }
}

function drawMoon(min, max, moise) {
    fill(150);
    beginShape();
    //makes ground of the moon surface
    for (var x = 0; x < width; x++) {
        var t = (x * moonDetail) + (millis() * moonSpeed);
        var y = map(noise(t), 0, 1, 0, 400, 400);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

Fanjie Mike Jin — Project 11 — Landscape

sketch

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-11

// global variables declared to hold objects
// array for tree objects
var trees = []

function setup() {
    //color preprared for the gradient effect
    c1 = color(250, 100, 0);
    c2 = color(204, 143, 0);
    createCanvas(480, 480);
    frameRate(100);  
    }
function draw() {
    //draw the gradient background 
    for (var i = 0; i < height; i++) {
        var inter = map(i, 70, 110, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, i, width, i);
    }
    //draw the sun in the background 
    noStroke();
    fill(234, 120, 120, 200);  
    ellipse(100, 60, 90, 90);
    fill(255, 146, 128, 200);  
    ellipse(100, 60, 76, 76);

    mountainBackground(); //mountain 
    land()
    updatetrees();
    removetrees();
    newtrees(); 
}

function updatetrees(){
    // Update the x positions of the trees and display them 
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}
function removetrees(){
    //remove the building from the array once it dropped off the left edge
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    // the exsiting trees will be kept 
    trees = treesToKeep;
}


function newtrees() {
    // add a new tree to the end
    var probability = 0.017; 
    if (random(0,1) < probability) {
        trees.push(drawtrees(width));
    }
}

//update position of tree every frame
function treesMove() {
    this.x += this.speed;
}
    
//display the trees
function treesDisplay() {
    noStroke();
    //leaves
    fill(50, 235, 173);
    triangle(this.x - 15, 350, this.x + 15, 350, this.x, 320);
    triangle(this.x - 20, 370, this.x + 20, 370, this.x, 330);
    triangle(this.x - 30, 400, this.x + 30, 400, this.x, 350);
    //trunk
    stroke(194, 245, 228);
    line(this.x, 350, this.x, 420);
}


function drawtrees(px) {
    var dt = {x: px,
    //trees obeject properties 
                breadth: 30,
                speed: -1.0,
                move: treesMove,
                display: treesDisplay}
    return dt;
}

function mountainBackground() {
    //makes mountains in the back
    terrain = 0.009;
    terrain2 = 0.014;
    terrainSpeed = 0.0003;
    //use noise function to draw random background contour of the furthest mountains 

    stroke(30, 148, 143,200);
    beginShape(); 
    //make slowly rolling hills
    for (var j = 0; j < width; j++) {
        var t = (j * terrain) + (millis() * terrainSpeed);
        var y2 = map(noise(t), 0, 1, 200, 10);
        line(j, y2, j, height); 
    }
    endShape();

    //use noise function to draw random background contour of the closer mountains 
    stroke(65, 158, 155);
    beginShape(); 
    for (var j = 0; j < width; j++) {
        var t = (j * terrain2) + (millis() * terrainSpeed);
        var y2 = map(noise(t), 0, 1, 400, 10);
        line(j, y2, j, height); 
    }
    endShape();
}


function land() {
//makes the land in the foreground appear 
    fill(46, 84, 78);
    rect(0, 420, 480, 130);
}

When I thought about the “generative landscape”, the first idea that prompted my mind is a landscape with mountains and trees. There are two layers of mountains to show the depth of this generative landscape. There are pine trees in the foreground. I have chosen the colors strategically so that the whole composition can be read clearly and aesthetically pleasing.

quick sketch