Boats and Waves

sketch

// John Legelis
// Section D

var boat = []

function setup() {
    createCanvas(480, 480);
    background(0);

}

function draw() {

    background(135, 206, 250)

    //Land terrain
    var land = 0.003;
    var landS = 0.00005;
    stroke("green");
    beginShape(); 
    for (i = 0; i < width; i++) {
        var h = (millis() * landS) + (i * land);
        var y = map(noise(h), 0, 1, 100, 0);
        line(i, y, i, height);
    }
    endShape();

    // Rear wave
    var back = 0.0051;
    var backS = 0.0002;
    stroke(0,142,170);
    beginShape(); 
    for (i = 0; i < width; i++) {
        var h = (millis() * backS) + (i * back);
        var y = map(noise(h), 0, 1, 200, 0);
        line(i, y, i, height);
    }
    endShape();

    //probablity that determines if boat is drawn
    if (random() < 0.03){
        boat.push(makeBoat())
    }
    //Draw and move the boat if made
    for (var h = 0; h < boat.length; h++){
        boat[h].draw()
        boat[h].move() 
    }


    //middle wave terrain
    var mid = 0.0054;
    var midS = 0.0004;
    stroke(0,153,183);
    beginShape(); 
    for (j = 0; j < width; j++) {
        var h = (millis() * midS) + (j * mid);
        var y = map(noise(h), 0, 1, 300, 200);
        line(j, y, j, height);
    }
    endShape();

    //foreground wave
    var fore = 0.006;
    var foreS = 0.0007;
    stroke(0,172,206);
    beginShape(); 
    for (j = 0; j < width; j++) {
        var h = (millis() * foreS) + (j * fore);
        var y = map(noise(h), 0, 1, height, 300);
        line(j, y, j, height);
    }
    endShape();


}

//object containig boat
function makeBoat(){
    var bo = {x:480, y: 230, move: moveBoat, draw: drawBoat}
    return bo
}

//what boat looks like
function drawBoat(){
    var randsailH = random(30,50)
    noStroke()
    fill("brown")
    rect(this.x, this.y, 60,20)
    fill("white")
    triangle(this.x + 10, this.y, this.x + 35, this.y - randsailH, this.x + 25, this.y)
    triangle(this.x + 40, this.y, this.x + 65, this.y - randsailH, this.x + 55, this.y)
    }

// Move that boat
function moveBoat(){
    this.x = this.x - 4 
}

This week’s sketch was a rather large undertaking as it involved using objects on our own for the first time. It took quite some time to be able to properly implement an object without having my hand held through the lab but I eventually succeeded. I stumbled upon the random sail movement by accident but I loved the effect of billowing sails in the wind.

Project-10

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project 10: Generative Landscape

var buildings = [];
var terrainSpeed = 0.0003;
var terrainSpeed2 = 0.0002;
var terrainSpeed3 = 0.0001;
var terrainDetail = 0.003;
var terrainDetail2 = 0.005;
var terrainDetail3 = 0.006;

function setup() {
    createCanvas(480, 450);

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}
 
function draw() {
    background(255);
    terrain3();
    terrain2();
    terrain();
    building();
}

// blue terrain in front
function terrain() {
    push();
    var R = random(5, 40);
    var G = random(5, 40);
    fill(R, G, 80);
    stroke(255);
    strokeWeight(6);
    beginShape(); 
    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); 
    }
    endShape();
    pop();
}

// purple terrain in middle
function terrain2() {
    push();
    var R = random(40, 60);
    var G = random(0, 30);
    fill(R, G, 80);
    stroke(255);
    strokeWeight(3);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0, 2, 0, height);
        vertex(x, y); 
    }
    endShape();
    pop();
}

// pink terrain in back
function terrain3() {
    push();
    var G = random(0, 40);
    var B = random(90, 100);
    fill(120, G, B);
    stroke(255);
    strokeWeight(1);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed3);
        var y = map(noise(t), 0, 3, 0, height);
        vertex(x, y); 
    }
    endShape();
    pop();
}
    
function building() { 
    push();
    translate(0.1 * width, 0.1 * height); 
    scale(0.8);
    displayHorizon();
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    pop();
}


function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}

function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; 
}

function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}

function buildingMove() {
    this.x += this.speed;
}
    
// draw alien buildings with changing colors 
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    var B = random(100, 255);
    var R = random(100, 255);
    fill(R, 255, B); 
    stroke(0); 
    strokeWeight(2);

    push();
    translate(this.x, height - 40);
    ellipse(0, -bHeight + 20, this.breadth, bHeight * 2);

    // draw windows
    stroke(0); 
    strokeWeight(2);
    fill(0);
    for (var i = 0; i < this.nFloors; i++) {
        rect(-5, -15 - (i * floorHeight + 10), 10, 10);
    }
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: round(random(30, 80)),
                speed: -2,
                nFloors: round(random(3, 7)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function displayHorizon(){
    noStroke();
    fill(0, 43, 7);
    rect(-200, height - 150, width + 300, height - 150); 
}

I tried creating an alien world generative landscape. The sky portion of the landscape has three terrains varying in color and speed, looking somewhat like clouds. The buildings vary in size and color, looking almost like cacti. This project was rather challenging, but I would definitely experiment more with generative landscapes in the near future and try creating more elaborate ones.

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 10 Generative Landscape

var terrainSpeed = 0.0005;
var terrainDetail = 0.01;
var terrainD1 = 0.0005;
var terrainS1 = 0.0002;

var fish1 = "https://i.imgur.com/pw06Fwc.png";
var fish = [];
var fishy1;

function preload() {
	fishy1 = loadImage(fish1);
}

function setup() {
    createCanvas(480, 300);
    //create an initial collection of fish
    for (var i=0; i<10; i++) {
    	var rx = random(width*5);
    	fish[i] = makeFish(rx);
    }
    
    frameRate(10);
}
 
function draw() {
    background(255);
    //sun
    noStroke();
    fill(252,163,41);
    ellipse(80, 60, 70, 70);

    //mountain
    noFill(0); 
    stroke(135,120,108)
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t),0,1,20,height)-height/4;
                
        vertex(x, height);
        vertex(x, y); 
    }
    endShape();
    fill(135,120,108,100);
    noStroke();
    
    //water-top
    beginShape(); 

    stroke(119,209,249,150);
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainD1) + (millis() * terrainS1); 
        var y1 = map(noise(t1),0,1,20,height);
        vertex(x1, height);
        vertex(x1,y1);
    }
    endShape();

    //water-bottom
	beginShape(); 

    stroke(119,209,259);
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainD1) + (millis() * terrainS1); 
        var y1 = map(noise(t1),0,1,28,height);
        vertex(x1, height);
        vertex(x1,y1);
    }
    endShape();

    //fish
    push();
    translate(0.1 * width, 0.1 * height); 
    scale(0.8);

    scale(0.2,0.2);
    
    updateAndDisplayFish();
    addNewFishWithProbability();

}

function updateAndDisplayFish() {
	for (var i = 0; i < fish.length; i++) {
		fish[i].move();
		fish[i].display();
	}
}


function addNewFishWithProbability() {
	var newFishLikelihood = 0.05;
	if (random(1) < newFishLikelihood) {
		fish.push(makeFish(-300));
	}
}

function fishMove() {
	this.x += this.speed*(1/this.size);
}

function fishDisplay() {
	push();
	scale(this.size, this.size);
	translate(this.x*(1/this.size), this.y*(1/this.size));

	image(fishy1,0,0);
	pop();
}


function makeFish(birthLocationX) {

    var fishy = {x: birthLocationX,
    		size: random(0.3, 0.6),
    		y: random(0.8*height*(1/0.2), height*(1/0.2)),
            speed: random(1,5),
            move: fishMove,
            display: fishDisplay};
    return fishy;
}

I started out thinking to do a project on natural landscape with mountain, water and grassland. But as I dived into the project, I found the overall scene rather dull and lifeless so I decided to focus on the underwater scene with fish instead.

Landscape

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-10-Landscape

var cacti = [];
var cactusClip;
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var tumbleweed = [];

function preload() {
    cactusClip = loadImage("https://i.imgur.com/f4O5OGj.png?1");
}


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

}


function draw() {

    background(212, 248, 251);  

    ////////// Mountains //////////
    stroke(129, 161, 164);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        line(x, y, x, height);
    }
    endShape();

    /////// sun beam ////////
    
    beginShape(); 
    for (var x = 0; x < width; x++) {
        fill(221, 204, 112); 
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    endShape();
    noFill();
    
    rect(0, 0, width - 1, height - 1);


    //// cactus //////
    
    displayHorizon();

    updateAndDisplayCacti();
    removeCactiThatHaveSlippedOutOfView();
    addNewCactiWithSomeRandomProbability(); 

    //// tumble weed ///////
   for (var k = 0; k < tumbleweed.length; k++){
        tumbleweed[k].draw();
        tumbleweed[k].move();
   }
    addNewTumbleWeedWithSomeRandomProbability();
   
}


function updateAndDisplayCacti(){
    // Update the cacti positions and display them
    for (var i = 0; i < cacti.length; i++){
        cacti[i].move();
        cacti[i].display();
    }
}


function removeCactiThatHaveSlippedOutOfView(){
    var cactiToKeep = [];
    for (var i = 0; i < cacti.length; i++){
        if (cacti[i].x + cacti[i].breadth > 0) {
            cactiToKeep.push(cacti[i]);
        }
    }
    cacti = cactiToKeep; // remember the cacti that stay
}


function addNewCactiWithSomeRandomProbability() {
    // With a very tiny probability, add a new cacti to the end
    var newBuildingLikelihood = 0.03; 
    if (random(0,1) < newBuildingLikelihood) {
        cacti.push(makeCactus(width));
    }
}


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

// draw the cactus
function cactusDisplay() {
    var cHeight = this.cactusHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - this.cactusPlacement);
    image(cactusClip, 0, -cHeight);
    pop();
}


function makeCactus(birthLocationX) { // cactus object
    var cct = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                cactusHeight: round(random(0, 175)),
                move: cactusMove,
                cactusPlacement: round(random(0,70)),
                display: cactusDisplay}
    return cct;
}




function makeTumbleWeed() { // random colors
    var tbwd = {x: width,
                y: -height + 100,
                move: moveTumbleWeed,
                draw: drawTumbleWeed,
                color: [random(50, 180), random(50, 165), random(20, 55)],
                }
    return tbwd;
    }

// draw tumbleweed
function drawTumbleWeed(){
    stroke(this.color);
    strokeWeight(4);
    noFill();
    ellipse(this.x, height - this.y - 60, 30, 30,);
    ellipse(this.x + 5, height - this.y - 62, 20, 20);
    ellipse(this.x + 2, height - this.y - 57, 5, 5);
    ellipse(this.x - 4, height - this.y - 61, 15, 15);
    ellipse(this.x -1, height - this.y - 60, 20, 20);
}

function moveTumbleWeed(){ //tumble weed moves more quickle than cacti
    this.x -= 10;
    this.y = random(10);
}


function addNewTumbleWeedWithSomeRandomProbability() {
    // tumble weeds are alot less likely than cacti
    var newTumbleWeedLikelihood = 0.007; 
    if (random(0,1) < newTumbleWeedLikelihood) {
        tumbleweed.push(makeTumbleWeed(width));
    }
}


function displayHorizon(){
    stroke(162, 126, 78);
    fill(201, 160, 106);
    rect(0, height - 75, width, height - 75);
}

I enjoyed doing this project because it allowed me to make my own landscape, where as in the past we have always been given a template for them. I struggled a bit to enter in new moving objects, and took me awhile to understand all the commands and what each function was doing. Some things, like the sunlight beam, happened by accident because I was messing with different variables but I’m very happy with how it turned out. If I were to do this again I would probably want to add more details to the sky, or figure out how to make more complicated generated landscapes besides the mountain like line that we were offered with. Overall I’m happy with how it came out.