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