Month: October 2018

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 10

var terrainSpeed1 = 0.00009; //background mountain speed
var terrainDetail1 = 0.006; //background mountain detail

var terrainSpeed2 = 0.00025; //foreground mountain speed
var terrainDetail2 = 0.005; //foreground mountain detail

var terrainSpeed3 = 0.00025; //foreground plane speed
var terrainDetail3 = 0.0015; //foreground plane detail

var img;
var gFrameCount = 0; 

function preload() {
    img = loadImage("https://i.imgur.com/mO1FDPJ.png"); //preload image
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw() {
//sky
    colorMode(HSB);
    var s = 55; // saturation 55
    var b = 100; //brightness 100

    gFrameCount = gFrameCount + 1;
    if (gFrameCount > 600) {
        gFrameCount = 0;
    } //add frame count, restart after 600

    if (gFrameCount > 300) {
        var s = map(gFrameCount, 300, 600, 85, 55);
        var b = map(gFrameCount, 300, 600, 25, 100);
        var m = map(gFrameCount, 300, 600, 25, 65);
    } else {
        var s = map(gFrameCount, 0, 300, 55, 85);
        var b = map(gFrameCount, 0, 300, 100, 25);
        var m = map(gFrameCount, 0, 300, 65, 25);        
    } //changes sky background + mountains to night
    background(214, s, b); 

//sun & moon
    var centerx = width / 2; 
    var centery = 170;
    var radius = 120;
    var d = 45 + random(-2, 2); //makes sun and moon more fun
    var rAngle = map(frameCount, 0, 600, 0, 360) + 45; //
    
    noStroke();
    line(centerx, centery, centerx + x, centery - y); //rotating line w circles at end

    var sX = cos(radians(rAngle)) * radius;
    var sY = sin(radians(rAngle)) * radius;

    ellipseMode(CENTER);
    fill('yellow');
    ellipse(centerx + sX, centery - sY, d, d); //sun

    var mX = cos(radians(-rAngle)) * radius; //neagtive to go in opposite of sun
    var mY = sin(radians(-rAngle)) * radius;

    fill('white');
    ellipse(centerx + mX, centery - mY, d, d); //moon

//background-mountain
    noStroke(); 
    fill(32, 60, m - 5);
    beginShape(); 
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0, 1, height / 12, height / 3);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();

//foreground-mountain
    fill(32, 45, m); 
    beginShape(); 
    vertex(0, height);
    for (var z = 0; z < width; z++) {
        var f = (z * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(f), 0, 1, height / 12, height / 2);
        vertex(z, y); 
    }
    vertex(width, height);
    endShape();

//foreground-plane
    fill(32, 30, m + 20); 
    beginShape(); 
    vertex(0, height);
    for (var z = 0; z < width; z++) {
        var p = (z * terrainDetail3) + (millis() * terrainSpeed3);
        var y = map(noise(p), 0, 1, height / 2, height * .75);
        vertex(z, y); 
    }
    vertex(width, height);
    endShape();
 
//foreground-train
    fill(10); 
    beginShape(); // clockwise

    vertex(0, 480);
    vertex(0, 0);
    vertex(480, 0);
    vertex(480, 480);

    var a = 20;
    var b = 40;
    var c = 60

    beginContour(); // counter clockwise
    vertex(b, a); //left-up
    bezierVertex(a, a, a, a, a, b);
    vertex(a, height - b - c); //left-down
    bezierVertex(a, height - a - c, a, height - a - c, b, height - a - c);
    vertex(width - b, height - a - c); //right-down
    bezierVertex(width - a, height - a - c, width - a, height - a - c, width - a, height - b - c);
    vertex(width - a, b); //right up
    bezierVertex(width - a, a, width - a, a, width - b, a);  

    endContour();
    endShape(CLOSE);

    rect(0, 115, width, 5);
    rect(0, 210, width, 5);
    rect(0, 305, width, 5);
    
    noFill(); 
    colorMode(RGB, 225);
    stroke(139, 186, 213, 130);
    strokeWeight(10);
    
    line(60, 100, 120, 40); //"window glares"
    line(62, 73, 93, 42);
    line(95, 95, 130, 59);

    line(426, 322, 387, 361); //"window glares"
    line(443, 328, 390, 381);
    line(451, 344, 412, 382);

//foreground cowboy
    image(img, -90, 140, img.width * .25, img.height * .25);
}

I generated a landscape that both travels through space and time. The cowboy is watching the desert pass by from the train, as well as the day change to night and back.

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Section A
Project-10
*/

var trees = [];
// noise variables
var terrainSpeed1 = 0.0005;
var terrainDetail1 = 0.002;
var terrainSpeed2 = 0.0003;
var terrainDetail2 = 0.004;
var terrainSpeed3 = 0.0001;
var terrainDetail3 = 0.006;

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

function draw() {
    background('#E0F7FA');
    // draw sun
    fill('gold');
    noStroke();
    ellipse(100, 100, 100, 100);
    // draw clouds
    fill(255);
    ellipse(340, 80, 50, 50);
    ellipse(360, 90, 60, 60);
    ellipse(380, 70, 75, 75);
    ellipse(400, 80, 50, 50);

    ellipse(220, 200, 50, 50);
    ellipse(250, 210, 60, 60);
    ellipse(260, 190, 75, 75);
    ellipse(280, 200, 50, 50);

    drawHills();
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 
}

function drawHills() {
    // blue hills
    beginShape(); 
    stroke('#3949AB');
    for (var q = 0; q < width; q++) {
        var t = (q * terrainDetail3) + (millis() * terrainSpeed3);
        var y = map(noise(t), 0,1, 25, height)
        line(q, y, q, height); 
    }
    endShape();
    // pink hills
    beginShape(); 
    stroke('#E91E63');
    for (var a = 0; a < width; a++) {
        var t = (a * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, height / 2, height)
        line(a, y, a, height); 
    }
    endShape();

    // yellow hills
    beginShape(); 
    stroke('#FFEB3B');
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, 2 * height / 3, height)
        line(x, y, x, height); 
    }
    endShape();
}

function updateAndDisplayTrees() {
    // update the trees' positions and display them
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function removeTreesThatHaveSlippedOutOfView() {
    // if a tree has dropped off the left edge remove it from the array
    // copy all the trees we want to keep into a new array
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}

function addNewTreesWithSomeRandomProbability() {
    // add a new tree to the end, 20% chance
    var newTreeLikelihood = 0.2; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

// draw the tree
function treeDisplay() {
    if (this.colors < 0.5) {
        var fillColor = 255;
        var strokeColor = 0;
    } else {
        fillColor = 0;
        strokeColor = 255;
    }
    fill(fillColor);
    noStroke();
    ellipseMode(CENTER);
    ellipse(this.x, height - this.trunkHeight, this.treeSize, this.treeSize);
    stroke(strokeColor);
    strokeWeight(3);
    line(this.x, height - this.trunkHeight - 5, this.x, height);
    line(this.x, height - this.trunkHeight + 5, this.x - 7, height - this.trunkHeight - 2);
    line(this.x, height - this.trunkHeight + 10, this.x + 7, height - this.trunkHeight + 3);
}

function makeTree(birthLocationX) {
    var tree = {
        trunkHeight: random(40, 80),
        treeSize: random(30, 50),
        colors: random(0, 1),
        x: birthLocationX,
        sizes: 50,
        breadth: 50,
        speed: -20.0,
        move: treeMove,
        display: treeDisplay
    }
    return tree;
}

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

For this project, I just wanted to make a fun landscape and then have a lot of contrasting colors, which is why I made the trees randomize to be black with white or white with black. I had a lot of trouble at the beginning figuring out how to get the trees to stay on the page, and then later, move. I also struggled with getting the hills to be different heights, but when I figured it out it was a pretty simple change. I think that overall though I ended up learning a lot more about objects, and I’m happy with how it turned out.

judyli: Landscape Project 10

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-10
*/

var terrainSpeed = 0.0005;
var terrainDetail = 0.002;
var terrainDetail1 = 0.00125;
var terrainDetail2 = 0.001;
var terrainDetail3 = 0.0005;
var yaxis = 1;
var c;
var c1;
var c2;
var star = [];

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    c2 = color(179, 77, 37);
    c1 = color(64, 40, 74);
    c = color(247, 222, 85);

    star.push(drawStar());
}

function wave1() {
	beginShape();
	stroke(26, 20, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 5, 0, height / 4);
        line(x, y + (height / 2), x, height); 
    }
    endShape();
}

function wave2() {
	beginShape();
	stroke(26, 40, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 4, 0, height / 2);
        line(x, y + 15 + (height / 2), x, height); 
    }
    endShape();
}

function wave3() {
	beginShape();
	stroke(26, 60, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3.5, 0, height);
        line(x, y + 25 + (height / 2), x, height); 
    }
    endShape();
}

function wave4() {
	beginShape();
	stroke(26, 70, 95);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 3, 0, height);
        line(x, y + 50 + (height / 2), x, height); 
    }
    endShape();
}

 
function draw() {
    background("white");
    nStar();
    nPosition();
    nArray();
    setGradient(0, 0, width, height / 3, c1, c2, yaxis);
    setGradient(0, height / 3, width, 2 * (height / 3), c2, c, yaxis);

    fill(247, 222, 125);
    ellipse(width / 2, 25 + (height / 2), 50, 50);

    push();
    strokeWeight(1.5);
    stroke(255, 255, 255, 100);
    ellipse(width - 50, 50, 50, 50);
    fill(247, 222, 200);
    ellipse(width - 50, 50, 49, 49);
    pop(); 

    for (var i = 0; i < star.length; i++) {
        star[i].display();
    }

    push();
    wave1();
    wave2();
    wave3();
    wave4();
    noFill();
    rect(0, 0, width, height);
    pop();
}

function nStar() {
    if (random(0, 250) < 50) {
        star.push(drawStar());
    }
}

function nPosition() {
    for (var i = 0; i < star.length; i++) {
        star[i].move();
    }
}

function nArray() {
    var ogStar = [];
    for (var i = 0; i < star.length; i++) {
        if (star[i].x > 0) {
            ogStar.push(star[i]);
        }
    }
    star = ogStar;
}

function moveStar() {
    this.x -= this.speed;
}

function seeStar() {
    stroke(255, 255, 255, 250);
    strokeWeight(random(1, 5));
    point(this.x, this.y);
}

function drawStar() {
    var star = {x: width,
        pdist: 100,
        speed: 5,
        starsize: round(random(0, 5)),
        y: round(random(0, height / 4)),
        move: moveStar,
        display: seeStar
        }
    return star;
}

function setGradient(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yaxis) {  // Top to bottom gradient
	    for (var i = y; i <= y+h; i++) {
		    var inter = map(i, y, y+h, 0, 1);
		    var c = lerpColor(c1, c2, inter);
		    stroke(c);
		    line(x, i, x + w, i);
		}
	}
}

For this project, I wanted to mimic the moment of a sunset on the horizons of an ocean. I used four waves to create a different movement between the others. I also included stars slowly throughout to capture the day to night lapse. And to make it a little fun on the part of the sun, the stroke weights were in a random order so that it captures the movement of the disappearing sun. I had a lot of fun with this project, but I struggled a bit in the beginning with the details of the wave. But I think that the templates on the course page helped a lot with my other objects.