ablackbu-Project-10-Generative Landscape

sketch

var terrainSpeed = 0.0008;
var terrainDetail = 0.008;
var fiX = 450;
var fi2X = 500;
var fi3X = 475;
var scooba;
var scoobaX = 450


function preload() {
    scooba = loadImage('https://i.imgur.com/8HhJZHY.png')
}

function setup() {
    createCanvas(400, 200);

}
 
function draw() {
    background(70,200,250);
    //draw terrain
    terrain();
    //draw sub
    sub();
    //draw fish
    fish();
    //sand
    fill(226,226,176)
    rect(0,height-20,width,20)
    //scooba diver
    scoobaD();
    



}

function terrain() {
    noFill(); 
    beginShape(); 
    stroke(40,120,40)
    strokeWeight(2)
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
        
        

        //terrain
        push();
        fill(40,120,40);
        ellipse(x,y+25,20,20); //thick black hill
        ellipse(x,y+55,10,10); //thin black hill

        stroke(20,80,18);
        strokeWeight(1);
        if(x%2){
            line(x,y,x,y+200) //white lines
        }
        pop();

        
    }
    endShape();
}


function sub() {
        //sub
    push();
    rotate(random(-.01,.01));
    strokeWeight(0);
    fill('yellow');
    
    rect(170,100,70,35,15); //body
    rect(185,89,30,30,5); //top
    rect(150,107,15,20,3); //tail
    rect(162,112,10,10); //connector
    rect(190,85,5,10); //airtube
    ellipse(225,117.5,43,35); //nose


    fill(200);
    //windows
    ellipse(188,115,12,12);
    ellipse(205,115,12,12);
    ellipse(223,115,12,12);

    fill(100);
    //inside windows
    ellipse(188,115,9,9);
    ellipse(205,115,9,9);
    ellipse(223,115,9,9);
    pop();
}

function fish() {

    var fiS = 3.5;
    var fi2S = 2;
    var fi3S = 3;

    strokeWeight(0);
    fill(0);
    //fish1
    ellipse(fiX,50,25,10);
    triangle(fiX+10,50,fiX+16,45,fiX+16,55);
    fiX = fiX-fiS;
    if(fiX < 0){
        fiX = 450;
    }
    //fish2
    ellipse(fi2X,60,25,10);
    triangle(fi2X+10,60,fi2X+16,55,fi2X+16,65);
    fi2X = fi2X-fi2S;
    if(fi2X < 0){
        fi2X = 500;
    }
    //fish3
    ellipse(fi3X,70,25,10);
    triangle(fi3X+10,70,fi3X+16,65,fi3X+16,75);
    fi3X = fi3X-fi3S;
    if(fi3X < 0){
        fi3X = 475;
    }
}  

function scoobaD(){
    var scoobaS = 3.5;
    push();
    scale(.6);
    translate(50,10);
    image(scooba,scoobaX,0);
    //move scooba across screen
    scoobaX = scoobaX - scoobaS;
    if(scoobaX < -150){
        scoobaX = 550;
    }
    pop();
} 
    

For this project I wanted to play off of the Beatles’ song “Yellow Submarine.” I used some code from the example to generate the landscape which I then manipulated to create details in the underwater mountains. The sub in the middle is rotating a tenth of a degree every frame to create a turbulent look. fish and a scuba diver go past at randomly generated speeds.

What I learned while doing this project is that making separate functions for each part and then calling them in the draw function is a great way to change code and manipulate it.