Month: November 2016

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.]

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

//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.