Victoria Reiter – Project 10 – Landscape

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project 10 - Generative Landscape
*/

// array that holds flower objects
var flowers = [];
var terrainSpeed = 0.0005;
var terrainSpeed2 = 0.00015;
var terrainDetail = 0.005;
var image0;
var image1;
var image2;


function preload() {
    image0 = loadImage("https://i.imgur.com/qqE2J0x.png?1");
    image1 = loadImage("https://i.imgur.com/4xXEj18.png");
    image2 = loadImage("https://i.imgur.com/j45lLa7.png");
}

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


function draw() {
    // loads image as background
    image(image2, 0, 0, width * 2, height * 2);
    // start mountains
    push();
    noStroke();
    //purpl-ish color
    fill(51, 0, 51); 
    beginShape(); 
    for (var mx = 0; mx < width; mx++) {
        var t = (mx * terrainDetail) + (millis() * terrainSpeed2);
        var my = map(noise(t), 0,1, height / 10, height - 90);
        vertex(mx, my); 
    }
    // includes bottom corners of canvas to fill in the color of the shape
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop();
    //end mountains

    // begin grass
    push();
    noStroke();
    fill("green"); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height - height / 4, height - 80);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
    pop()
    //end grass


    // drawing flowers
    updateAndDisplayflowers();
    removeflowersThatHaveSlippedOutOfView();
    addNewflowersWithSomeRandomProbability(); 

    // V flying on a turtle (eh why not?)
    flyingV(mouseX, mouseY);
}

// draws me flying on a turtle hehehe
function flyingV(x, y) {
    imageMode(CENTER);
    image(image1, x, y, 100, 80);
    image(image0, x - 15, y - 20, 200, 250);
}

// makes flowers appear on the grassy area
function updateAndDisplayflowers() {
    for (var i = 0; i < flowers.length; i++){
        flowers[i].move();
        flowers[i].display();
    }
}

    // If the flowers drop off the left edge, remove them from the array
function removeflowersThatHaveSlippedOutOfView(){
    var flowersToKeep = [];
    for (var i = 0; i < flowers.length; i++){
        if (flowers[i].x + flowers[i].breadth > 0) {
            flowersToKeep.push(flowers[i]);
        }
    }
    flowers = flowersToKeep; // remember the surviving flowers
}

function addNewflowersWithSomeRandomProbability() {
    // with a small probability add a new flower to the end.
    var newFlowersLikelihood = 0.8; 
    if (random(0, 1) < newFlowersLikelihood) {
        flowers.push(makeFlowers(width));
    }
}

// method to update position of flowers every frame
function flowersMove() {
    this.x += this.speed;
}
    
// draw the flowers baseed on my design from the wallpaper project!
function flowersDisplay() {
    push();
    translate(this.x, this.y);
    scale(.25);
    flowerStem(0, 0);
    flowerPetals(0, 0);
    stem(0, 0);
    leaves(15, -15);
    pop();
}

function makeFlowers(birthLocationX) {
    var flwr = {x: birthLocationX,
                y: random(height - 80, height),
                breadth: 50,
                speed: -8.0,
                nFloors: round(random(2,8)),
                move: flowersMove,
                display: flowersDisplay}
    return flwr;
}

// function to draw the stem
function stem(x, y) {
   strokeWeight(7);
    stroke(0, 155, 0);
    line(x, y, x + 85, y - 35);
}

// function to draw the leaves
function leaves(x, y) {
    noStroke();
    // leaf color
    fill(0, 190, 0);
    // actual leaves
    ellipse(x, y - 1, 24, 10);
    ellipse(x + 25, y + 9, 24, 10);
    ellipse(x + 21, y - 10, 24, 10);
    strokeWeight(2);
    // leaf vein color
    stroke(100, 230, 100);
    // each leaf also has a little line to represent its veins
    line(x - 12, y - 1, x + 12, y - 1);
    line(x + 13, y + 9, x + 37, y + 9);
    line(x + 9, y - 10, x + 33, y - 10);
}

// function to draw the stems branching to the petals
function flowerStem(x, y) {
    strokeWeight(4);
    stroke(0, 190, 0);
    // actual stem
    line(x + 56, y - 27, x + 46, y - 43);
    // each stem also has a little bulb
    ellipse(x + 46, y - 43, 7, 7);
    line(x + 55, y - 18, x + 72, y + 2);
    ellipse(x + 72, y + 2, 8);
    line(x + 70, y - 33, x + 78, y - 60);
    ellipse(x + 78, y - 60, 8);
    line(x + 79, y - 28, x + 100, y - 3);
    ellipse(x + 100, y - 3, 10);
    line(x + 85, y - 35, x + 105, y - 57);
    ellipse(x + 105, y - 57, 11);
}

// function to draw flower petals
function flowerPetals(x, y) {
    noStroke();
    // main petal color
    fill(255, 125, 165);
    // petal 1
    ellipse(x + 43, y - 55, 23);
    //petal 2
    ellipse(x + 75, y + 12, 25);
    //petal 3
    ellipse(x + 74, y - 70, 20);
    // petal 4
    ellipse(x + 104, y + 10, 21);
    // petal 5
    ellipse(x + 108, y - 70, 27);
    fill(255, 65, 105);
    // sub-petal 1
    ellipse(x + 39, y - 45, 13);
    ellipse(x + 52, y - 55, 11);
    // sub-petal 2
    ellipse(x + 67, y + 6, 13);
    ellipse(x + 81, y + 4, 10);
    ellipse(x + 64, y + 15, 11);
    // sub-petal 3
    ellipse(x + 70, y - 61, 16);
    // sub-petal 4
    ellipse(x + 100, y + 5, 12);
    ellipse(x + 112, y + 8, 9);
    // sub-petal 5
    ellipse(x + 97, y - 63, 14);
    ellipse(x + 109, y - 58, 10);
    ellipse(x + 119, y - 64, 13);
    // detail color in petals
    fill(185, 0, 25);
    // sub-sub-petal 1
    ellipse(x + 32, y - 50, 9);
    ellipse(x + 48, y - 50, 8);
    // sub-sub-petal 2
    ellipse(x + 64, y + 2, 8);
    ellipse(x + 74, y + 4, 10);
    ellipse(x + 60, y + 9, 8);
    //sub-sub-petal 3
    ellipse(x + 78, y - 65, 13);
    ellipse(x + 62, y - 67, 8);
    // sub-sub-petal 4
    ellipse(x + 92, y + 9, 8);
    ellipse(x + 108, y + 5, 9);
    // sub-sub-petal 5
    ellipse(x + 102, y - 60, 9);
    ellipse(x + 90, y - 65, 10);
    // other detail color in petals
    fill(255, 205, 205);
    // many sub petals 1
    ellipse(x + 40, y - 67, 11);
    ellipse(x + 52, y - 60, 8);
    // many sub petals 2
    ellipse(x + 64, y + 16, 8);
    ellipse(x + 77, y + 9, 10);
    ellipse(x + 67, y + 23, 7);
    // many sub petals 3
    ellipse(x + 78, y - 79, 10);
    ellipse(x + 66, y - 71, 8);
    // many sub-petals 4
    ellipse(x + 94, y + 18, 12);
    ellipse(x + 114, y + 14, 9);
    // many sub-petals 5
    ellipse(x + 103, y - 69, 9);
    ellipse(x + 90, y - 64, 8);
    ellipse(x + 121, y - 74, 10);
}

In this project I decided to represent a sort of dream-sequence. I am riding on a turtle’s back…..for whatever reason, flying through a trippy dream-scape. I incorporated my flower design from the wallpaper project because I really like it, it represents some sentimental value, and for these reasons seems quite fitting in a personal dream-world. I love the mountains so flying through the mountains would be a dream of mine.

I had a lot of other plans for things I wanted to include in this project, and I spent a bunch of hours trying to figure it all out and work things out, but I just hit obstacle after obstacle when I couldn’t find where I was committing errors, and had to abandon some of my plans.

Ultimately, I like the concept of the project. The implementation itself I just found really difficult and still don’t really understand how all the mechanics work for creating a generative landscape.
I made me riding on a turtle though. So that’s pretty rad.