Month: November 2018

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project 10
*/


//array to store craters
var crater = [];
//starting x position of rocket
var rocketX = 540;
//starting y position of rocket
var rocketY = 100;
//starting rocket speed
var rs = 8;
//rocket is not on screen
showRocket = false;
//faulty rocket
var faulty = false;

//creates initial craters with no overlap
function setCrater() {
    //craters that do not overlap are infrequent, so loop
    //runs many times to ensure more craters are drawn
    for (var j = 0; j < 100; j++) {  

        //create a random position
        var pos = {x: random(width), y: random(height * 0.55, height)};
        //assume there is no overlap
        var overlap = false;

        //check new position against all old positions
        //if distance between old and new position is greater than the 
        //maximum size of the crater, assume overlap
        for (var i = 0; i < crater.length; i++) {
            var old = crater[i];
            var d = dist(pos.x, pos.y, old.x, old.y)
            if (d < 180) overlap = true;
        }

        //push position into array if there is no overlap
        if (!overlap) {
            crater.push(pos);
        }
        //make a crater for each position in the array
        for (var w = 0; w < crater.length; w++) {
            crater[w] = makeCrater(crater[w].x, crater[w].y);
        }
    }   
}

function setup() {
    createCanvas(480, 400);
    frameRate(20);

    //create stars with random positions and size
    for (var i = 0; i < STARPOINTS; i++) {
        pX.push(random(0, width));
        pY.push(random(0, height / 2));
        pS.push(random(0.2, 2))
    }

    setCrater();
}


function draw() {
    background(0);
    drawStars();
    //if rocket is prompted, 
    //draw it and move it across screen
    if (showRocket == true) {
        makeRocket(rocketX);
        rocketX -= rs;
    }

    //resets rocket position once it has travelled across screen
    if (rocketX <= -60) {
        showRocket = false;
        faulty = false;
        rocketX = 540;
        rocketY = random(0, height * 0.45);
        rs = random(5, 20);

    }

    //draw terrain
    drawMoon();
    //move craters
    updateCrater();
    removeCrater();
    //add craters and rockets
    addStuff();
}

/////////////ROCKET////////////////
function drawRocket() {
    //flame position
    var fireX = this.x + 25;
    //size of flame
    var fire = 15;

    noStroke();

    //flame
    fill("orange");
    ellipse (fireX, this.y, fire, fire);
    triangle(fireX + 2, this.y + fire / 2, fireX + 2, this.y - fire / 2, 
              fireX + 20, this.y);

    //fins
    fill("red");
    arc(this.x + 10, this.y, 60, 60, HALF_PI, 3 * HALF_PI, CHORD);
    rect(this.x - 10, this.y - 10, 30, 20);

    //body
    fill("blue");
    arc(this.x, this.y, 120, 30, PI / 4, PI * 1.58, CHORD);

    //window
    fill("lightblue");
    strokeWeight(4);
    stroke("darkblue");
    ellipse(this.x - 30, this.y, 15, 15);
}

function makeRocket(rx) {
    //give some rockets a concerningly faulty motion
    if (faulty == true) rocketY += random(-5, 5);

    //create object
     var rocket = {x: rx, y: rocketY, display: drawRocket, speed: rs};
     rocket.display();
}

///////////////STARS////////////////

//number of stars
var STARPOINTS = 300;

//arrays for position and stroke
var pX = [];
var pY = [];
var pS = [];

function drawStars() {
    //draw 300 stars
    for (var i = 0; i < STARPOINTS; i++) {
        // make 'em TWINKLE
        stroke(random(100, 255));
        strokeWeight(pS[i]);
        point(pX[i], pY[i], 10, 10);
    }
}

////////////MOON//////////////////////
function drawMoon() {

    //blue stroke for faint glow
    var w = 5;
    strokeWeight(w);
    stroke("darkblue");

    //draw moon terrain and have it move across screen
    fill(233, 238, 240);
    beginShape();
    for (var x = 0; x < width + w; x++) {
        var t = x * 0.005 + millis() * 0.0001;
        var y = map(noise(t), 0,1, height/3, height * 0.55);
        while (y >= height * 0.6) y = map(noise(t), 0,1, height/3, height * 0.55);
        vertex(x, y)
    }
    vertex(width + w, height + w);
    vertex(-w, height + w);
    endShape();
}

//////////CRATERS///////////////////////////

//draw craters and move them across screen
function updateCrater() {
    for (var i = 0; i < crater.length; i++) {
        crater[i].move();
        crater[i].display();
    }
}

//keep craters that are still on screen and 
//remove the rest from the array
function removeCrater() {
    var keepCrater = [];
    for (var i = 0; i < crater.length; i++) {
        if (crater[i].x + crater[i].w > 0) {
            keepCrater.push(crater[i]);
        }
    }
    crater = keepCrater;
}

//periodically adds elements to screen
function addStuff() {

    //creates new craters and adds them to array
    //every 100 frame counts to prevent overlap
    if (frameCount % 100 == 0) {
        crater.push(makeCrater(width + 90, random(height / 2, height)));
    }

    //infrequently creates a rocket if there is not already one on screen
    var spotRocket = 0.1;
    var faultyRocket = 0.3;
    if (spotRocket > random(0, 1) & showRocket == false) {
        showRocket = true;
        //occasionally creates a faulty rocket
        if (faultyRocket > random(0, 1)) faulty = true;
    }

}

//move craters across screen
function moveCrater() {
    this.x += this.speed;
}

//draws craters
function drawCrater() {
    noStroke();
    //shadow
    fill(this.color - 30);
    ellipse(this.x, this.y - 10, this.w, this.h);
    //crater
    fill(this.color);
    ellipse(this.x, this.y, this.w, this.h);
    stroke(240);
    noFill();

    //outline
    strokeWeight(this.stroke);
    ellipse(this.x, this.y - 5, this.w - 3, this.h + 8);

}

function makeCrater(cx, cy) {
    //maps width, color and stroke so craters appear
    //smaller when they are "farther" away
    var breadth = map(cy, height / 2, height, 55, 180);
    var col = map(cy, height / 2, height, 220, 80);
    var s = map(cy, height / 2, height, 7, 10);

    var crater = {x: cx, y: cy, w: breadth, h: breadth / 4,
                  color: col,  
                  speed: -2.2, 
                  stroke: s,
                  move: moveCrater, 
                  display: drawCrater};
    return crater;

}

This was the most I’ve ever been confused on a project! So many functions! I feel like this is the first time I actually started to understand how functions and objects relate to each other. I was also pleasantly surprised by how some of the elements turned out, like the perspective of the craters and the twinkliness of the stars. I originally wanted the whole thing to be rotating on the axis, but oh man it did not work.

sketch

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 19: Generative Landscape
*/

var sailboats = [];

function setup() {
    createCanvas(480, 480);
    noStroke();
    background('blue');

    for(var i = 0; i < 3; i ++) {
    	var rndmX = random(width);
    	sailboats[i] = drawSailboats(rndmX);
    }
    
    frameRate(50);
}

function draw() {
    // Background color changes according to hour time bracket
    // Draw sun and moon according to hour time bracket
	if (hour() >= 0 & hour() <= 8) {
		fill(210, 195, 135);
		rect(0, 0, width, height);
		strokeWeight(15);
		fill(240, 100, 70);
		fill(225, 145, 90);
		ellipse(390, 90, 135);
	} else if (hour() > 8 & hour() <= 16) {
		fill(190, 230, 250);
		rect(0, 0, width, height);
		stroke(255, 231, 101, 80);
        strokeWeight(15);
		fill(230, 210, 120);
		ellipse(390, 90, 135);
	} else if (hour() > 16 & hour() <= 24) {
		fill(10, 50, 70);
		rect(0, 0, width, height);
		strokeWeight(15);
		fill(205, 205, 200);
		fill(225, 225, 210);
		ellipse(390, 90, 135);	
	}	

	// Calls function to draw waves
	waves1();
	waves2();

	updateandDisplaySailboats();
	addSailboats();
}

// Draws wave layer 1 via Perlin Noise
function waves1() {
	noStroke();
    var wavesSpeed = 0.0002;
    var wavesDetail = 0.0004;
    push();
    beginShape();
    fill(0, 100, 140);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var w = (x * wavesDetail) + (millis() * wavesSpeed);
        var y = map(noise(w), 0, 1.2, height /2 + 70, height);
        vertex(x, y);
    }
    vertex(x, height);
    vertex(0, height);
    vertex(0, y); 
    endShape();
    pop();
}

// Draws wave layer 2 via Perlin Noise
function waves2() {
	noStroke();
	wavesSpeed = 0.0004;
    wavesDetail = 0.0008;
    push();
    beginShape();
    fill(80, 135, 155);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var w = (x * wavesDetail) + (millis() * wavesSpeed);
        var y = map(noise(w), 0, 1, height / 1.5 + 50, height);
        vertex(x, y);
    }
    vertex(x, height);
    vertex(0, height);
    vertex(0, y); 
    endShape();
    pop();
} 

// Updates and displays the position of sailboats
function updateandDisplaySailboats() {
	for(var i = 0; i < sailboats.length; i++) {
		sailboats[i].move();
		sailboats[i].display();
	}
}

// Adds a new sailboat to the canvas according to a marginal probability
function addSailboats() {
    var sailboatProbability = 0.008;
    if (random(0, 1) < sailboatProbability) {
    	sailboats.push(drawSailboats(width));
    }
}

// Updates the position of the sailboat with every frame
function moveSailboats() {
	this.x += this.speed;
}

// Draws the sailboats
function displaySailboats() {
    noStroke();
	push();
	translate(0, 220);
	
	fill(190, 115, 75);
    rect(width / 2 + this.x - 5, height / 2 - 100, 5, 100);

	fill(230, 225, 225);
    quad(width / 2 + this.x - 60, height / 2 - 30, 
    	width / 2 + this.x + 50, height / 2 - 30, 
    	width / 2 + this.x + 30, height / 2,
    	width / 2 + this.x - 40, height / 2);

	fill(230, 85, 60);
	triangle(width / 2 + this.x, height / 2 - 60, 
		width / 2 + this.x, height / 2 - 150, 
		width / 2 + this.x - 60, height / 2 - 40);
	
	fill(225, 120, 110);
    triangle(width / 2 + this.x, height / 2 - 60, 
		width / 2 + this.x, height / 2 - 150, 
		width / 2 + this.x + 40, height / 2 - 60);
	pop(); 
} 

function drawSailboats(birthLocationX, birthLocationY) {
	var boat = {x: birthLocationX,
	    speed: -1,
	    r: random(0.1, 0.3),
	    move: moveSailboats,
	    display: displaySailboats,
	    }
	return boat;
}

For this week’s assignment, I decided to depict some boats sailing across the water. When I was a kid, I would sit by the pier and watch junk boats and ferries glide across the harbour, so this scene really resonated with me. This project was a little challenging for me, but I challenged myself to experiment with Perlin noise, and create a landscape that changes over time (beyond the immediate shifting waves and number of boats). If I had more time, I would try to space the boats out a bit more, so that they don’t overlap, and also add clouds.