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.

Leave a Reply