Project: Generative Landscape

luca generative landscape

//lucacao
//sectionD
//Project11

var boat = [];//array to store boat number
var speed = 1;


function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(5);

    for (var i = 0; i < 10;i++){
        bx = random(width);//boat x position
    }
}

function draw() {
    background(220);
    sea(); 
    sky();
    moon();

    for(var i = 0; i < 5; i++){
        drawBoat();
        boat++;
        print(boat);
    }
}

function sea() {
    fill(0, 64, 108);
    rect(0,240,480,240);
}

function sky(){
    fill(0, 37, 62);
    rect(0,0,480,240);

    for (var i = 0; i < 100;i++){
        var starx = random(0,480);
        var stary = random(0,240);
        fill(255,255,255);
        ellipse(starx,stary,3,3);
        starx += speed;
        
    }
    // noLoop();
}

function moon(){
    fill(252, 202, 70);
    ellipse(350,80,100,100);
}

function drawBoat(){
    var blength = random(50,100);
    var bheight = random(20,30);
    var bx = random(0,480);
    var by = random(240,480);

    this.bx += this.speed;

    fill(0);
    rect(bx,by,blength,bheight);
    rect(bx+20,by-10,blength/2,bheight/2);
    triangle(bx+blength,by+bheight,bx+blength,by,
        bx+blength+30,by-10);
    
}

For my landscape, I wanted to depict a scene with boats and stars moving at night. In my thumbnail sketch, I divided the canvas into halves, with a sky which is the top half, and the sea at the bottom half. I thought it would be more visually interesting with objects moving on all areas of the canvas. During this project, I faced difficulty trying to animate my objects, but I solved the problem by creating multiple functions which helped me clarify my code structure and tackle specific problems. The randomness in my code exists in the size and position of the boat.