Project 10 – Generative Landscape – James Katungyi

james-generativelandscape

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-10

//2d varying terrain
//draw terrain with ground and trees, sky and sun and moon
//move terrain from left to right - OMITTED THIS STEP
//insert walking man? - OMIT THIS STEP
//when sun sets, sky color is dark blue, moon moves from left to right
//when sun rises, sky color is light blue

var trees = [];
//divide time into two - night and day; different sky color for each
var dayTime;
var timer = 0; //declare a timer variable for day and night variation

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

function draw() {
    var skyColor = color(0, 191, 255);//deep blue sky
    background(skyColor);
    if (dayTime = false){
        skyColor = color(0, 51, 102);//midnight blue
    } else {
    }

    println(dayTime);
    timer++;//increment timer per frame
    
    terrainDisplay();
    dayOrNight();
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
}
//alternate between night and day across the canvas
//cycle twice across the canvas
//first time for day
//second time for night
function dayOrNight(){
    if (timer > 1279){
        timer = 0;
    }
    //daytime
    if ((timer > 0) & (timer < 640)){
        dayTime = true;
        //draw sun
        noStroke();
        fill(253, 184, 19); //yellow orange sun
        //derive y value from circle equation
        //(x-a)2 - (y-b)2 = r2;
        var yTimerLoc = (356 - sqrt(sq(356) - sq(timer - 320)));
        //sun
        ellipse(timer, yTimerLoc, 75, 75);
        // print(yLoc);
    }
    //nightime
    if (timer > 640){
        dayTime = false;
        //draw moon
        noStroke();
        fill(192, 192, 240); //blue moon
        //follow sun path with y from the circle equation
        //(x-a)2 - (y-b)2 = r2;
        //moon
        ellipse(timer, yTimerLoc, 40, 40);
    }
}

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

function removeTreesThatHaveSlippedOutOfView(){
    //FROM ASSIGNMENT NOTES - kept for revision purposes
    // If a tree has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find trees
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just 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 > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the surviving trees
}

function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.007; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

function treeMove() {
    this.x += this.speed;  
}

function treeDisplay() {
    var treeHeight = 50;
    push();
    translate(this.x, this.y);
    //trunk
    stroke(98, 78, 44);//tree bark color
    strokeWeight(10);
    line(0, treeHeight, 0, -treeHeight);
    //foliage
    noStroke();
    fill(154, 255, 47);//green yellow tree foliage
    ellipseMode(CENTER);
    ellipse(0, -treeHeight, treeHeight * 2, treeHeight * 1.5);
    pop();
}

function makeTree(xTreeLoc) {
    var tree = {x: xTreeLoc,
                y: 300,
                speed: -1,
                move: treeMove,
                display: treeDisplay}
    return tree;
}

//thick strokes in the terrain for depth gradient
function terrainDisplay(){
    strokeWeight(20);
    for (var i = 0; i < 6; i++){
        var g = (158 - (i * 5));
        var yLoc = (height - (20 * i));
        stroke(77, g, 58);
        line(0, yLoc, width, yLoc);
    }
}

I wanted day and night to be part of the landscape. The trees were to be of different height, growing from different locations; the horizon was to be rugged and the foliage was to be more varied. I started out with a big plan, then got bogged down in the details  – the syntax. There are lessons there too, I guess. And perhaps this is not the place for photo-realism.

Owen Fox Project 10

landscape

//Owen Fox
//olf@andrew.cmu.edu
//Section C
//Project 10

//initialize movement variable
var a = 0;

function setup() {
    createCanvas(600,400);
    background(255);
    //fill canvas with green turtle squares of varying shades of green
    for (var x = 0; x < width; x += 4) {
        for (var y = 0; y < height; y += 4) {
        var c = color(random(50),random(255),random(50));
        turtlePixel(x,y,c);
        }
    }

    frameRate(48);
}

function draw() {
   //draw new turtle squares in sweeping diagonals across the canvas
    for(var y1 = 0; y1 < height; y1 += 4) {
        var c1 = color(random(50),random(255),random(50));
        turtlePixel(a * 4,y1,c1);
        a = a + 1;
        //resets animation when a is too large
        if(a * 4 > width) {
        a = 0;
        }
    }

}

function turtlePixel(x,y,c) {
var turtle = makeTurtle(x,y);
turtle.setWeight(4);
turtle.setColor(c);
turtle.penDown();
turtle.forward(4);
turtle.right(90);
turtle.forward(4);
turtle.right(90);
turtle.forward(4);
turtle.right(90);
turtle.forward(4);
turtle.penUp();

}

function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

originally my idea was like this:

20161104_233413

where random party people, pets and decorations would be generated, but that was too hard and I gave up.

I decided to make something vaguely pointillist instead, because I figured that would simplify the coding process.

heres my brainstorm that’s closer to the finished product:

20161104_233446

Project 10 – Sofia Syjuco

sketch

//Sofia Syjuco
//section A
//smsyjuco@andrew.cmu.edu
// Assignment - 10-c

var boats = [];// create an array to store the boats


function setup(){
    createCanvas(600,400,100);// create a canvas
    background(230);// set the background color

    for (var i = 0;i<5;i++){ // for loop to populate the array with boats
        var fb = random(2*width);
        boats[i] = makeBoat(fb);
    }
    frameRate(10);// frame rate at 10 fps
}

function draw(){
    noStroke(); // no strokes around shapes

    //bottom layer of ocean
    push();
    fill(100,150,255,80);
    rect(0,200,600,150);
    pop();

    callMoveAndDisplayBoats();// call the function to update boats on screen
    addNewBoat();// add new boats
    clearBoat();// clear boats when they pass the left edge of the screen

    push();
    //top layer of ocean
    fill(50,150,255,90);
    rect(0,300,600,100);
    pop();

}

function makeBoat(startLocationX){// main boat function, stores all the important information
    var boat = {x: startLocationX,
                display: boatDisplay,
                move: boatMove,
                speed: -1.0 * random(0.75,2),
                sailColorR: round(random(0,255)),
                sailColorG: round(random(0,255)),
                sailColorB: round(random(0,255)),
                boatHeight: 50,
                boatWidth: 100,
    }
    return boat;
}
function boatDisplay(){// this function displays the boat, holds the code to draw it basically
    push();
    arc(this.x,290,this.boatWidth,this.boatHeight,0,PI,CHORD);
    fill(this.sailColorR,this.sailColorG, this.sailColorB);
    triangle(this.x-50,220,this.x-50,280,this.x+40,280);
    pop();
}
function boatMove(){// keeps boats moving by adding the "speed" to the x value each time
    this.x += this.speed;
}
function addNewBoat(){// adds new boats to the array depending on a probability of 0.001
    var newBoatChance = 0.001;
    if (random(0,1)< newBoatChance){
        boats.push(makeBoat(width));
    }
}
function clearBoat(){// clear boats away once they pass screen edge
    var boatsToKeep = [];// by constantly putting acceptable boats into a new array of "to keep" boats
    for (var i = 0; i<boats.length; i++){// check with each loop
        if (boats[i].x > 0){// if the boat x is greater than screen edge
            boatsToKeep.push(boats[i]); // put it in the "too keep" pile, basically
        }
    }
    boats = boatsToKeep; // assign the boats to keep to boats
}
function callMoveAndDisplayBoats(){ // this function contains the instructions to move and display boats
    for (var i = 0;i<boats.length;i++){
        boats[i].move();
        boats[i].display();
    }
}

img_9401

When I saw the prompt was generative landscape, I really wanted to make something to do with ships. I thought it could be interesting to vary the type of hulls and sails and such, but time constraints narrowed my process down to something else: making a regatta. I liked the idea of still having random boats, with sails different colors, but instead of making that the main random aspect of the piece, the speed of the boats was the focus. So that watching them pass becomes more of an activity, and less a passive perusal of what colors are currently on the screen.

ShanWang-Project10-GenerativeLandscape

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-10-Project

var terrainSpeed = 0.001;
var terrainDetail = 0.05;

var birds = [];
var stars = [];

function setup() {
    createCanvas(600,400);
    frameRate(10);

    //create initial set of birds
    for (var i=0; i < 10; i++){
        var bX = random(width);
        var bY = random(height/8,height/5);
        birds[i] = makeBird(bX, bY);
    }

    //create initial set of stars
    for (var j=0; j < 30; j++){
        var x = random(width);
        var y = random(height*3/4);
        stars[j] = makeStars(x,y);
    }

}

//draw gradient background
function gradient(x,y,wid,hei,c1,c2){
    noFill();
    for (var i = y; i < y+hei; i++){
        var inter = map(i,y,y+hei,0,1);
        var col = lerpColor(c1,c2,inter);
        stroke(col);
        line(x,i,x+wid,i);
    }

}

function gradientLine(x,y,len,c1,c2){
    for (var i = y; i < (y+len); i+=12){
        var interv = map(i,y,y+len,0,1);
        var colM = lerpColor(c1,c2,interv);
        stroke(colM);
        line(x,i,x,i+12);
    }
}

// move and draw the stars
function updateAndDisplayStars(){
    for (var s = 0; s < stars.length; s++){
        stars[s].move();
        stars[s].drawS();
    }
}

function makeStars(sX,sY){
    var star = {x:sX,
                y:sY,
                speed: random(0,1),
                move: moveStar,
                drawS: drawStars}
    return star;
}


//draw every star at its current position
function drawStars(){
    stroke(200);
    point(this.x,this.y);
}

//move the star at a low speed
function moveStar(){
    this.x += this.speed;
}

//only keep the stars that are still in the canvas, update the array
function removeStars(){
    var keepStars = [];
    for (var i=0; i < stars.length; i++){
        if ((0 < stars[i].x < width) & (0 < stars[i].y < height)){
            keepStars.push(stars[i]);
        }
    }
    stars = keepStars;
}


//add stars if the number of array is less than 30
function addStars(){
    if (stars.length < 30){
        var stX = random(width);
        var stY = random(height/2);
        stars.push(makeStars(stX,stY));
    }
}

function makeBird(birdX,birdY){
    var bird = {x:birdX,
                y:birdY,
                speedX: random(5,15),
                speedY: random(-10,5),
                spanX: random(5,10),
                spanY: random(2,5),
                stroke: 0,
                fly: birdFly,
                drawB: drawBird}
    return bird;
}

//move the bird on both x and y direction
function birdFly(){
    this.x += this.speedX;
    this.y += this.speedY;
}

//draw the bird, the stroke weight is based on the size of the wing
function drawBird(){
    stroke(0);
    this.stroke = map(this.spanX,5,10,1,3);
    strokeWeight(this.stroke);
    line(this.x-2,this.y,this.x+2,this.y);
    line(this.x,this.y,this.x-3,this.y-5);
    line(this.x,this.y,this.x+3,this.y-5);
    line(this.x-3, this.y-5,this.x-3-this.spanX,this.y-5-this.spanY);
    line(this.x+3, this.y-5,this.x+3+this.spanX,this.y-5-this.spanY);
}

//call the functions that move and draw each bird
function updateAndDrawBirds(){
    for (var i = 0; i < birds.length; i++){
        birds[i].fly();
        birds[i].drawB();
    }
}

//only keep birds that are still on the canvas, update array accordingly
function removeBirds(){
    var keepBirds = [];
    for (var i=0; i < birds.length; i++){
        if ((0 < birds[i].x < width) & (0 < birds[i].y < height)){
            keepBirds.push(birds[i]);
        }
    }
    birds = keepBirds;
}

//randomly add birds at a low probability
function addBirds(){
    var prob = 0.3;
    if (prob>random(0,1)){
        birds.push(makeBird(10,height/4));
    }
}


function draw() {
    stroke(255);
    strokeWeight(3);
    //draw background gradient
    var bgColor2 = color(200, 219, 216);
    var bgColor1 = color(99,112,145);
    gradient(0,0,width,height,bgColor1,bgColor2);

    //display star groups
    updateAndDisplayStars();
    removeStars();
    addStars();

    //set mountain colors
    var mCol1 = color(250,238,222);
    var mCol2 = color(31,43,98);

    //set terrain colors
    var wCol1 = color(35,45,101);
    var wCol2 = color(97,126,180);

    //draw mountain and waves with different variation of Perlin noise
    for (var x = 0; x < width; x++) {
        var t1 = (x * terrainDetail/5) + (millis() * terrainSpeed/2);
        var t2 = (x * terrainDetail/10) + (millis() * terrainSpeed*4);
        var y1 = map(noise(t1), 0,1, 0, height*2/3);
        var y2 = map(noise(t2), 0,1, height*3/4, height*4/5);
        //draw gradient mountain
        gradientLine(x,y1,height-y1,mCol2, mCol1);
        //draw gradient water waves
        gradientLine(x,y2,height-y2,wCol1, wCol2);
    }

    //display birds group
    updateAndDrawBirds();
    removeBirds();
    addBirds();
}

For this project I wanted to create the view of looking at the mountains and river passing by under the sky with stars.

I explored the use of gradient in rendering the mountain and water waves, but because iterating through every single pixel is slowing down the movement and making the animation extremely slow and incoherent. So I decided to render every 12 pixels of each vertical line with the same color to reduce the load on the algorithm.

I made the birds and stars into objects that can be easily controlled with different attributes.

[Note: this post was edited by RBD on Nov 5, 9:25am to work around some WordPress problems. Please do not take off any late points. I’ll post a reply on Piazza as well.]

Project 10 – Alison Hoffman

For this project I was trying to create a underwater landscape. I was rather scared to work with objects, so I kept concept rather simple in order to focus on really learning to work with objects. I definitely feel more comfortable working with objects after this project, actually I think its makes simple animation like this a lot easier.

sketch

var redFishies = [];
var yelFishies = [];
var tSpeed = 0.0001;
var tDetail = 0.003;


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of fish
    for (var i = 0; i < 10; i++){
        redFishies[i] = makeRedFish(random(width),random(height-100));
        yelFishies[i] = makeYelFish(random(width),random(height-100));
    }
    frameRate(12);
}


function draw() {
    var cB = 20;
    x = map(cB,0,height,255,0);
    background(100,173,193);
   
    updateAndDisplayRedFish();
    removeRedFish();
    addNewRedFish();

    updateAndDisplayYelFish();
    removeYelFish();
    addNewYelFish(); 

    //dark purple
    noStroke();
    beginShape(); 
    fill(56,30,81);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 0,1,300, height+50);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);
    //light purple
    noStroke();
    beginShape(); 
    fill(98,79,119);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 1,0,320, height);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);

}

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


function removeRedFish(){
    var redFishToKeep = [];
    for (var i = 0; i < redFishies.length; i++){
        if (redFishies[i].x + redFishies[i].bodySize > 0) {
            redFishToKeep.push(redFishies[i]);
        }
    }
    redFishies = redFishToKeep; // only keeps fish on screen
}


function addNewRedFish() {
    // adds new red fish with randomization
    var newRedFishLikelihood = 0.02; 
    if (random(0,1) < newRedFishLikelihood) {
        redFishies.push(makeRedFish(width,random(2,height-100)));
    }
}


// updates postion of red fish
function redfishSwim() {
    this.x += this.speed;
}
    

// draw the building and some windows
function redfishDisplay() {
    fill(this.colorR,this.colorG,0); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    ellipse(0, 0, this.bodySize, this.bodyWidth);
    triangle(this.bodyWidth+9,-10,
             this.bodyWidth+9,10,
             this.bodyWidth-3,0)
    pop();
}


function makeRedFish(LocationX,LocationY) {
    var redfish = {x: LocationX,
                y: LocationY,
                bodyWidth: random(12,25),
                bodySize: random(40,80),
                speed: random(-3.0,-1.0),
                colorR: random(130,240),
                colorG: random(20,80),
                move: redfishSwim,
                display: redfishDisplay}
    return redfish;
}


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


function removeYelFish(){
    var yelFishToKeep = [];
    for (var i = 0; i < yelFishies.length; i++){
        if (yelFishies[i].x + yelFishies[i].bodySize > 0) {
            yelFishToKeep.push(yelFishies[i]);
        }
    }
    yelFishies = yelFishToKeep; // only keeps yellow fish on screen
}


function addNewYelFish() {
    // adds new yellow fish with randomization
    var newYelFishLikelihood = 0.02; 
    if (random(0,1) < newYelFishLikelihood) {
        yelFishies.push(makeYelFish(width,random(2,height-100)));
    }
}


// updates postion of yel fish
function yelfishSwim() {
    this.x += this.speed;
}
    

// draw the building and some windows
function yelfishDisplay() {
    fill(220,this.colorG,0); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    ellipse(0, 0, this.bodySize, this.bodyWidth);
    triangle(this.bodyWidth+9,-10,
             this.bodyWidth+9,10,
             this.bodyWidth-3,0)
    pop();
}


function makeYelFish(LocationX,LocationY) {
    var yelfish = {x: LocationX,
                y: LocationY,
                bodyWidth: random(12,25),
                bodySize: random(40,60),
                speed: random(-3.0,-1.0),
                colorG: random(190,255),
                move: yelfishSwim,
                display: yelfishDisplay}
    return yelfish;
}

 

 

 

 

sketch

Project 10-sehenry

dragon-sketch

spirited-away-gif

sketch

//Seth Henry

//Tuesdays at 10:30

//sehenry@andrew.cmu.edu

//Project 10: Generative Landscape

//Global Variables 


var terrainSpeed = 0.0005;
var terrainDetail = 0.0005;
var clouds = []
var sizeD = 30
var dragonHead;
var stars = []
var star;
var Star;


function preload() {
    dragonHead = loadImage("http://i.imgur.com/vAqmPf5.png"); //loads image of spirited away dragon
}

function setup() {
    createCanvas(600, 400);
    frameRate(10);
    for(i=0;i<100;i++){ //puts a load of random stars in the sky
        stars.push(new Star(random(600),random(250)))
    } 
}

function Star(positionX,positionY){ //Position for stars
    this.x=positionX
    this.y=positionY
    this.draw = function(){
    stroke(255)
    point(this.x,this.y)
    }
}

function draw() {
    background(25,25,112);
    stroke(255)
 for(i=0;i<stars.length;i++){ //Draws stars through many times
        stars[i].draw();
    }
    push();
    noStroke();
    fill('khaki')
    ellipse(width/2, 30, 40,40)
    pop();
    push();
    noStroke();
    fill('midnightblue')
    ellipse(290,28,40,40)
    pop();

 for(i=0;i<20;i++){ //supposed to be scales coming off the dragon
    fill(255)
    rect(random(width),random(400),20,.5)
}
    updateAndDisplayClouds()
    removeClouds();
    addRandomClouds();
    noFill(); 
    beginShape(); //draw dragon body shape
    stroke(255)
    for (var x = 20; x < width-90; x++) {
        strokeCap(ROUND);
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, mouseY);
        vertex(x, y);
        vertex(x,y-10) 
       }
    endShape();


    image(dragonHead, width-100, y-40, 70,70); //Dragon head attached to the dragon body
}





function updateAndDisplayClouds(){ //
    // Update the cloud's positions, and display them.
    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; // remember the surviving clouds
}
function addRandomClouds() {
   //Add a random cloud with probability 
    var newCloudLikelihood = 0.23; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(width));
    }
}
function cloudMove() {
    this.x += this.speed; //the cloud speed
}
function cloudDisplay() { //height of cloud
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(150); 
    stroke(0); 
  push();
    noStroke();
    ellipseMode(CENTER)
    translate(this.x, height - 40);
    ellipse(20, -bHeight+40, this.breadth, bHeight);
    ellipse(40, -bHeight+20, this.breadth, bHeight);
    ellipse(60, -bHeight+40, this.breadth, bHeight);
    stroke(200); 
  pop();
}


function makeClouds(beginLocationX) { //function for making the clouds
    var cld = {x: beginLocationX,
                breadth: 60,
                speed: -3.0,
                nFloors: round(random(1,4)),
                move: cloudMove,
                display: cloudDisplay}
    return cld;
}





As I was thinking about what I could do this project on, I realized that I could use the noise line that is used in the plant the flags project as an object or representation of a dragons body. I would just have to upload an image of a dragon head to make it look realistic. As I was thinking about how the project was going to look like, I kept remembering the movie, Spirited Away and how Haku kind of moved like a wavy line. I decided to use the movie as an inspiration. I tried to add rectangles going by to represent the scales coming off of the dragon but I had a hard time focusing the scales around the body so I just left them as wind strokes.

Project 10 Lydia Jin

sketch

//Lydia Jin
//Section B
//jialuj@andrew.cmu.edu
//Project 10
var stars = [];
var BacSpd;
var newCloudProbability;

function setup() {
  createCanvas(600, 400);
  //initialize variables
  BacSpd = 0.0003; //background mountain speed
  StarProb = 6; //set star appear probability to 6%

  //preset 20 stars when launch
  for (var i = 0; i < 20; i++) {
    stars[i] = new Star(random(width));
  }

}


//-----------------------------------------
function draw() {
  noStroke();

  //Create gradient color for the background
  topColor = color(48, 58, 48);
  botColor = color(162, 98, 85);

  //gradient color steps
  var gradientSteps = height;

  for (var i = 0; i <= gradientSteps; i++) { //for each gradient strip
      fill(lerpColor(topColor, botColor, i/height)); //fill color inerpolation
      rect(0, (i/height * height) - (1/height * height), width, 1/height * height); //use the color draw boxes
    }

  //Generate random mountain landscape by using noise
  //The moving speed is controlled by BacSpeed and noise level
  for (var j = 0; j < width; j++) {
    var t = height - 0.70 * height * noise(j * 0.005 + millis() * BacSpd);
    stroke('black');
    line(j, height, j, t);  
  }


  
  //add a new star to canvas in the chance of 6%
  if (StarProb > random(0,100)) {
    stars.push(new Star(width));
  }


  for (var i = 0; i < stars.length; i++) {
    stars[i].move(); //update star array
    stars[i].display(); 

    if (stars[i].x < 0) { //if star goes out of boundary, remove it
      stars.splice(i, 1);
    }    
  }
}

//generate stars
function Star(xx){
  
  this.x = xx;
  this.y = random(1, 130); //set vertical range for starts 
  this.speed = (-1.5); //set speed       

  this.move = function() {
  	  this.x += this.speed;
  }

  this.display = function() {

	  push();
	  stroke('yellow');
	  point(this.x, this.y);
	  pop();
  }

}


1342909403

I used the terrain template to create this project. I wanted to create a night view of mountains and stars. I used random function to generate random numbers of stars that appear at random times. Then, because I want to make a contrast between the mountains and night sky, I used lerp color to create a gradient colored sky that looks like a gloomy day right after sunshine and when stars first appear. The product is a moving image that looks like the scenery you would see if you are driving in rural areas at night. The theme is quiet and calming.

Sihand – project 10 – Generative Landscape

Pandora

This project was inspired by the landscape of the planet Pandora created by director James Cameron in the blockbuster Avatar.

sketch-pandora

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Project Week 10: generative landscape


var buds = [];
var terrainSpeed = 0.0001;
var terrainDetail = 0.007;


function setup() {
    createCanvas(600, 300); 
    
    // create the initial buds
    for (var i = 0; i < 10; i++){
        var budx = random(width);
        buds[i] = makeBuds(budx);
    }
    frameRate(50);
}


function draw() {
    background(0); 

    updateAndDisplayBuds();
    removeBudsThatHaveSlippedOutOfView();
    addNewBudsWithSomeRandomProbability(); 
    updateHalo();	
}

function updateHalo() {
    //update the halo's position
	for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height/2);
        fill(90, 240, 248, 40);//upper halo
        ellipse(x, y, 2, 80);
        fill(37, 142, 242, 40);//lower halo
        ellipse(x, y+50, 2, 90);
    }
}

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


function removeBudsThatHaveSlippedOutOfView(){
    var budsToKeep = [];
    for (var i = 0; i < buds.length; i++){
        if (buds[i].x + buds[i].budWidth/2 > 0) {
            budsToKeep.push(buds[i]);
        }
    }
    buds = budsToKeep;
}


function addNewBudsWithSomeRandomProbability() {
    var newBudLikelihood = 0.03; 
    if (random(0,1) < newBudLikelihood) {
        buds.push(makeBuds(width));
    }
}

    
function budsMove() {
	this.x += this.speed;
}

function budsDisplay(birthLocationX) {
	fill(this.color);
	noStroke();
	
    //draw the flower
	push();
	translate(this.x, height);
	//draw the stem
    rect(0, -this.stemHeight-5, this.stemWidth, this.stemHeight+5);
	ellipseMode(CENTER);
	//draw the petals
    ellipse(0, -this.stemHeight-this.budHeight/2, this.budWidth, this.budHeight);
	ellipse(10, -this.stemHeight-this.budHeight/2, this.budWidth, this.budHeight);
	ellipse(-5, -this.stemHeight-this.budHeight/2-5, this.budWidth, this.budHeight-5);
	ellipse(15, -this.stemHeight-this.budHeight/2-5, this.budWidth, this.budHeight-5);
	ellipse(this.stemWidth/2, -this.stemHeight-this.budHeight/2-5, this.budWidth+5, this.budHeight+5);
	pop();
}

function makeBuds(birthLocationX) {
	var bds = {x:birthLocationX, 
			   speed: -1.5,
			   color: color(random(150, 200), random(180), 255,
			   	            random(100, 155)), //produce a blue-purple-ish color
			   stemHeight: random(10, height/2),
			   stemWidth: random(8, 10),
			   budHeight: random(40, 60),
			   budWidth: random(15, 25),
			   move: budsMove,
			   display: budsDisplay}
	return bds;
}

Here’s a preliminary sketch of the color choices. I did not end up doing the green leafy plants.

Pandora sketch
Pandora sketch

Here’s an image from the movie of which my project is a doodle-y representation.

Pandora landscape still from the movie Avatar
Pandora landscape still from the movie Avatar

Mirage (Charlie Mo)

sketch

//Charlie MO
//cdmo@andrew.cmu.edu
//Section B

var terrainSpeed = 0.0001;
var terrainSpeed2 = 0.0003;
var terrainDetail = 0.002;

function setup() {
    createCanvas(1000, 1000);
    frameRate(10);
}
 
function draw() {
    background(137, 255, 196);
    
    //mountains
    noStroke();
    fill(255)
    ellipse(700,300,170,170)

    fill(175, 38, 38,30)
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 600, 440);
        vertex(x, y); 
 
        stroke(175, 38, 38,100)
        line(x,y,0,-50) //the line create peaks when connected to the vertex
       
    }
    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, 600, 700);
        vertex(x, y); 
        stroke(186, 27, 27,100)
        line(x+300,y-100,1000,200)

        stroke(186, 27, 27,200)
        line(x+100,y,1000,400)

    }
    endShape();

    //clouds and sea foam
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, 400, 500);
        fill(255,255,255,150)
        noStroke();
        vertex(x+100, y); 
    
    }
    endShape();

    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 300, 170);
        fill(255,255,255,150)
        noStroke();
        vertex(x+700, y); 
      
    }
    endShape();


    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 300, 170);
        fill(255,255,255,150)
        noStroke();
        vertex(x+100, y-100); 
    }

    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 600, 800);
        fill(255,255,255,150)
        noStroke();
        vertex(x, y); 
	}

    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 700, 800);
        fill(255,255,255,150)
        noStroke();
        vertex(x+200, y+100); 
    
    }
    endShape();

}

Shannon Case Project 10

For this project I chose to generate a landscape of grass that is supposed to look like it is blowing in the wind. I was inspired when I was laying in the park and looking at the nature around me.

sketch

var grass = [];


function setup() {
    createCanvas(640, 240); 
  
    // create an initial collection of grass
    for (var i = 0; i < 100; i++){
        var rx = random(width);
        grass[i] = makeGrass(rx);
    }

    frameRate(10);
}


function draw() {
    background("#badddc");
    updateAndDisplayGrass();
    removeGrassThatHaveSlippedOutOfView();
    addNewGrassWithSomeRandomProbability(); 
}


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


function removeGrassThatHaveSlippedOutOfView(){
    var GrassToKeep = [];
    for (var i = 0; i < grass.length; i++){
        if (grass[i].x + grass[i].breadth > 0) {
            GrassToKeep.push(grass[i]);
        }
    }
    grass = GrassToKeep; // remember the surviving grass
}


function addNewGrassWithSomeRandomProbability() {
    // With a very tiny probability, add a new grass to the end.
    var newGrassLikelihood = 0.17; 
    if (random(0,1) < newGrassLikelihood) {
        grass.push(makeGrass(width));
    }
}


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

//draw some grass
function grassDisplay() {
    var GrassHeight = 20;
    var bHeight = this.nGrass * GrassHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill('green');
    noStroke();
    triangle(0, -bHeight + random(20), this.breadth, bHeight, this.breadth/2, bHeight/2);
    fill("#48703d");
    triangle(0, -bHeight, this.breadth+random(10,20), bHeight, this.breadth/2, bHeight/2);
    pop();
}


function makeGrass(birthLocationX) {
    var Grass = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nGrass: round(random(2,8)),
                move: grassMove,
                display: grassDisplay}
    return Grass;
}