Category: Section C

Project

/*Sharon Yang
Section C
junginny
Project-10
*/

var snowman = [];


function setup() {
    createCanvas(640, 240); 
    
    // create initial snowmen
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        snowman[i] = makeSnowman(rx);
    }
    frameRate(10);
}


function draw() {
    background(105, 58, 29);
    
    displayGround();
    updateAndDisplaySnowman();
    removeSnowmanThatHaveSlippedOutOfView();
    addNewSnowmanWithSomeRandomProbability(); 
}


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


function removeSnowmanThatHaveSlippedOutOfView(){
    var snowmanToKeep = [];
    for (var i = 0; i < snowman.length; i++){
        if (snowman[i].x + 50> 0) {
            snowmanToKeep.push(snowman[i]);
        }
    }
    snowman = snowmanToKeep; // the snowmen that are out of the view are removed
}


function addNewSnowmanWithSomeRandomProbability() {
    // With the probability of 0.5%, add a new snowman to the end
    var newSnowmanLikelihood = 0.005; 
    if (random(0,1) < newSnowmanLikelihood) {
        snowman.push(makeSnowman(width));
    }
}


//Update position of snowman every frame
function snowMove() {
    this.x += this.speed;
}
    

// draw the snowmen
function snowDisplay() {
    var centerB = 25 * this.size;
    var centerU = 15 * this.size;
    var bhatW = 35 * this.size;
    var thatW = bhatW * 3 / 4;
    var eyeW = centerU / 2;
    var noseW = eyeW;
    noStroke();
    fill(255);
    push();
    translate(this.x, height - 40);
    ellipse(this.x, - centerB, centerB * 2, centerB * 2);
    ellipse(this.x, -(2 * centerB) - centerU, centerU * 2, centerU * 2);
    fill(0);
    ellipse(this.x - eyeW, -(2*centerB)-centerU-(3*this.size),5*this.size,5*this.size);
    ellipse(this.x + eyeW, -(2*centerB)-centerU-(3*this.size),5*this.size,5*this.size);
    fill(255,0,0);
    triangle(this.x,-(2*centerB)-centerU,this.x+noseW,-(2*centerB)-centerU+2*this.size,this.x,-(2*centerB)-centerU+5*this.size);
    fill(0);    
    rect(this.x - (thatW / 2),-(2*centerB) - 2*(5*centerU/6), thatW, - 20 * this.size);
    rect(this.x - (bhatW / 2),-(2*centerB) - 2*(5*centerU/6), bhatW, - 5 * this.size);
    pop();
}

//function for making snowman
function makeSnowman(birthLocationX) {
    var snowman = {x: birthLocationX,
                speed: -1.0,
                move: snowMove,
                display: snowDisplay,
                size: round(random(1,2))}
    return snowman;
}

//the ground is displayed
function displayGround(){
    fill(121, 186, 209);
    rect(0, 0, width, height - 50);
}

For this project, I started with the template code, which I changed to make different objects. I played around with making the snowmen. I really understood how arrays in functions are used for greater efficiency. The following is the sketch for the project.

sketch

// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project 10 - generative landscape


var startingTrees = 10;
var trees = [];
var fog = [];
var fireflies = [];
var birds = [];
var frameC = 1;

function setup() {
    createCanvas(480, 300);
    for (var i = 0; i < startingTrees; i++) {
    	var newTree = makeTree(random(width));
    	// this little chunk of code minimizes the chances of trees overlapping each other
    	for (var j = 0; j < trees.length; j++) {
    		while (((newTree.x > trees[j].x) & (newTree.x < trees[j].x + (trees[j].proximity * 30))) ||
    				((newTree.x + (newTree.proximity * 30) > trees[j].x) && 
    				(newTree.x + (newTree.proximity * 30) < trees[j].x + (trees[j].proximity * 30)))) {
    					newTree = makeTree(random(width));
    		}
    	}
    	trees.push(newTree);
    }
    // generating all the fog clouds and fireflies to start
    for (var i = 0; i < 5; i++) {
    	var newCloud = makeCloud(random(width));
    	fog.push(newCloud);
    }
    for (var i = 0; i < 20; i++) {
    	var newFly = makeFirefly(random(width));
    	fireflies.push(newFly);
    }
}

function draw() {
	// moon and horizon line
	background(76, 93, 99);
	noStroke();
	fill(43, 61, 56);
	rect(0, 100, width, 200)
	fill(255, 253, 237);
	ellipse(width / 2, 0, 70, 70);
	// drawing all my objects each frame
	for (var i = 0; i < birds.length; i++) {
		birds[i].draw();
		birds[i].move();
	}
	for (var i = 0; i < trees.length; i++) {
		trees[i].draw();
		trees[i].move();
	}
	for (var i = 0; i < fireflies.length; i++) {
		fireflies[i].draw();
		fireflies[i].move();
	}
	for (var i = 0; i < fog.length; i++) {
		fog[i].draw();
		fog[i].move();
	}
	// occasionally adding new objects
	// making them dependent on frameC affects the distance apart they will be from each other
	if ((frameC % 30 == 0) & (random(1) < .5)) {
		newTree = makeTree(width);
		trees.push(newTree);
	}
	if ((frameC % 100 == 0) & (random(1) < .5)) {
		newCloud = makeCloud(width);
		fog.push(newCloud);
	}
	if ((frameC % 5 == 0) & (random(1) < .5)) {
		newFly = makeFirefly(width);
		fireflies.push(newFly);
	}
	// want the birds flying by to be kind of rare
	if (random(1) < .008) {
		newBird = makeBird();
		birds.push(newBird);
	}
	frameC++;
	// removing elements that have passed (so list doesnt get too long)
	removeOldTrees();
	removeOldClouds();
	removeOldFlies();
}

// most code below here is straightforward

// each element has its own object and unique properties

function makeTree(startingPt) {
	var tree = {
		x: startingPt,
		proximity: random(1/3, 1),
		draw: drawTree,
		move: moveTree
	}
	return tree;
}

function makeCloud(startingPt) {
	var cloud = {
		x: startingPt,
		visibility: random(1),
		cloudW: random(80, 300),
		elevation: random(50),
		draw: drawCloud,
		move: moveCloud,
	}
	return cloud;
}

function makeFirefly(startingPt) {
	var firefly = {
		x: startingPt,
		y: random(height),
		velX: random(-2, 1.5),
		velY: random(-2, 2),
		sizeF: random(10),
		draw: drawFirefly,
		move: moveFirefly
	}
	return firefly;
}

function makeBird() {
	var bird = {
		x: width,
		y: random(80),
		draw: drawBird,
		move: moveBird,
	}
	return bird;
}

function drawBird() {
	fill(0);
	triangle(this.x, this.y, this.x + 20, this.y - 10, this.x + 20, this.y + 10);
}

function moveBird() {
	this.x -= 5;
}

function drawFirefly() {
	fill(226, 220, 145, 60);
	ellipse(this.x, this.y, this.sizeF * 1.5, this.sizeF * 1.5);
	fill(226, 220, 145);
	ellipse(this.x, this.y, this.sizeF, this.sizeF);
}

function moveFirefly() {
	this.x -= 1.5;
	this.x += this.velX;
	this.y += this.velY;
}

function drawCloud() {
	fill(255, this.visibility * 100);
	rect(this.x, height - this.cloudW / 2 - this.elevation, this.cloudW, this.cloudW / 2);
}

function moveCloud() {
	this.x -= .5;
}

function drawTree() {
	fill(10 + 70 * this.proximity, 30, 55);
	rect(this.x, 0, 30 * this.proximity, height * this.proximity);
}

function moveTree() {
	this.x -= 1;
}


// these 'remove' functions work by looping through the objects
// and getting rid of whats offscreen
function removeOldTrees() {
	for (var i = 0; i < trees.length; i++) {
		if (trees[i].x + 30 * trees[i].proximity < 0) {
			trees.splice(i, 1);
		}
	}
}

function removeOldClouds() {
	for (var i = 0; i < fog.length; i++) {
		if (fog[i].x + fog[i].cloudW < 0) {
			fog.splice(i, 1);
		}
	}
}

function removeOldFlies() {
	for (var i = 0; i < fireflies.length; i++) {
		if ((fireflies[i].x + fireflies[i].sizeF / 2 < 0) ||
			(fireflies[i].y + fireflies[i].sizeF / 2 < 0) ||
			(fireflies[i].y + fireflies[i].sizeF / 2 > height)) {
			fireflies.splice(i, 1);
		}
	}
}

This project was really fun! I’m in the Halloween/fall mood so I wanted to do something kind of dark and decided to go with a forest landscape.

The trees look simple but were probably the most complex part of the project. I wanted to give a feeling of depth so the further trees are smaller and darker in color. However, this made it look really bad when the trees were first initially generated because some would overlap and look really weird so I tried my best to avoid that in setup. The  fireflies were pretty easy to do but I think they might be my favorite part of the project because they’re just nice to look at.

sketch

/*
Alexandra Kaplan
Section C
aekaplan@andrew.cmu.edu
Project - 10
*/

var planets = [];
var stars = [];
var ex = 500;
var ey = 500;

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of planets
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        if (planets.length < 5){
            planets[i] = makePlanet(rx);
        }
    }
    for(var j = 0; j < 200; j++){
        var sx = random(width);
        stars[j] = makeStar(sx);
    }
    frameRate(20);
}

function draw() {
    background(10,30,120);

    updateAndDisplayStars();
    removestars();
    addNewstars();

    updateAndDisplayplanets();
    removeplanets();
    addNewplanets();
    
    drawShootingStar();
    var newShootingStarLikelihood = 0.01; 
    if (random(0, 1) < newShootingStarLikelihood){
    	if(ex > width || ey > height){
    	   createshootingStar();
    	}
    }	
}
function drawShootingStar(){
	fill('khaki');
	strokeWeight(0);
	var dx = 5;
	var dy = 10;
	ellipse(ex + dx, ey + dy, 10);
	ex += dx;
	ey += dy;
}

function createshootingStar(){
	ex = random(0, width);
	ey = 0;
 }

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

function removeplanets(){
    // If a Planet has dropped off the left edge,
    // remove it from the array
    var planetsToKeep = [];
    for (var i = 0; i < planets.length; i++){
        if (planets[i].x + 50 + planets[i].breadth > 0){
            planetsToKeep.push(planets[i]);
        }
    }
    planets = planetsToKeep; // remember the surviving planets
}

function addNewplanets() {
    // With a very tiny probability, add a new Planet to the end.
    var newPlanetLikelihood = 0.6; 
    if (random(0, 1) < newPlanetLikelihood){
        if (planets.length < 5){
            planets.push(makePlanet(width + 40));
        }
    }
}

// method to update position of Planet every frame
function PlanetMove() {
    this.x += this.speed;
}
   
// draw the Planet
function PlanetDisplay() {
    var pwidth = this.wid;
    fill(this.col); 
    strokeWeight(0); 
    ellipse(this.x, this.y, pwidth);
    stroke(this.strkCol);
    strokeWeight(this.strk);
    line(this.x - (this.wid / this.srtklength) , this.y, this.x + (this.wid / this.srtklength), this.y); 
}


function makePlanet(birthLocationX) {
    var plnt = {x: birthLocationX,
    	        y: random(0, height),
                breadth: 10,
                speed: random(-5,-1),
                wid: random(20, 75),
                move: PlanetMove,
                display: PlanetDisplay,
                col:color(random(50, 100), random(50, 150), random(100, 255)),
                strk: random(0, 5),
                strkCol: color(random(50, 100), random(50, 150), random(100, 255)),
                srtklength: random(1,2),
                }
    return plnt;
}

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

function removestars(){
    // If a star has dropped off the left edge,
    // remove it from the array
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep; // remember the surviving stars
}

function addNewstars() {
    // With a very tiny probability, add a new star to the end.
    var newStarsLikelihood = 0.5; 
    if (random(0,1) < newStarsLikelihood) {
        stars.push(makeStar(width + 40));
    }
}

// method to update position of stars every frame
function StarMove() {
    this.x += this.speed;
}
   
// draw the star
function StarsDisplay() {
    var swidth = this.wid;
    fill(this.col); 
    strokeWeight(0); 
    ellipse(this.x, this.y, swidth);  
}


function makeStar(birthLocationX) {
    var st = {x: birthLocationX,
    	        y: random(0, height),
                breadth: 10,
                speed: -.5,
                wid: random(1, 5),
                move: StarMove,
                display: StarsDisplay,
                col:color('palegoldenrod'),
            }
    return st;
}

When thinking about a generative landscape, my mind went straight to space, with planets and stars passing by.

                                                    Image of the original sketch

I started off by referring to the bulding base code and changing it to planets of various sizes. I then added strokes of different random weights and lengths to be the planet’s rings. The stars behind the planets were made in a similar way, but with more of them. I then added some shooting stars for fun. I think it turned out pretty well.

sketch

// Sophie Chen
// Section C
// sophiec@andrew.cmu.edu
// generative landscape

var terrainSpeed = 0.0004;
var terrainDetail = 0.005;
var clouds = [];

function setup() {
    createCanvas(480, 250);
      // create an initial clouds
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        clouds[i] = makeClouds(rx);
    }
    
}

function draw() {
    background(150, 200, 200, 10);
    sun();
    terrain();
    terrain2();
    terrain3();
    terrain4();
    terrain5();
    

    updateClouds();
    removeClouds();
    addRandomClouds(); 

}

function sun(){
    noStroke();
    fill(255, 160, 110);
    ellipse(350, 230, 220, 220);

}
function updateClouds(){
    // Update the cloud positions
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


function removeClouds(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}


function addRandomClouds() {
    // half half probability of new cloud
    var newCloudLikelihood = 0.005; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(width));
    }
}


// move cloud positions
function cloudMove() {
    this.x += this.speed;
}
    

// draw clouds
function cloudDisplay() {
    var bHeight = this.x; 
    fill(255, 255, 255); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    ellipse(0, 0, this.diam, this.diam);
    ellipse(0 - 20, 0 + 5, this.diam / 1.3, this.diam / 1.3);
    ellipse(0 + 15, 0, this.diam, this.diam);

    pop();
}

function makeClouds(birthLocationX) {
    var cloud = {x: birthLocationX,
    	        y: random(0, height / 2),
    	        diam: random(30, 60),
                breadth: 50,
                speed: -1.0,
                move: cloudMove,
                display: cloudDisplay}
    return cloud;
}

// noise terrains

function terrain(){
    noFill(); 
    stroke(0); 
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t - 0.05), 0, 1, 0, height);
        vertex(x, y); 
    }
    endShape();   
}

function terrain2(){
    noFill(); 
    stroke(0);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t - 0.1), 0, 1, 0, height);
        vertex(x, y + 5); 
    }
    endShape();
}

function terrain3(){
    noFill(); 
    stroke(0);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t - 0.15), 0, 1, 0, height);
        vertex(x, y + 10); 
    }
    endShape();
}

function terrain4(){
    noFill(); 
    stroke(0);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t - 0.2), 0, 1, 0, height);
        vertex(x, y + 15); 
    }
    endShape();
}

function terrain5(){
    noFill();
    stroke(0);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t - .25), 0, 1, 0, height);
        vertex(x, y + 20); 
    }
    endShape();
}

I’m glad that I got to play more with noise in this project. I tried to create a mix of 2d and 3d to create more contrast and depth since everything is going in the same direction. My favorite part is the interaction between the terrain and the sun, overall I think it turned out better than I expected.