ikrsek-SectionC-Project-10-“When Pigs Fly”

“When Pigs Fly”

sketch

//Isadora Krsek
//Ikrsek@andrew.cmu.edu
//Section C
//Project 10: Landscape
//"When Pigs Fly"

var morningStars = [];
var terrainZoom = 0.0099;
var waterZoom = 0.0005;
var terrainSpeed = 0.0004;
var mistZoom = 0.004;

var pigsThatFly = []; // An array to store the images
var pigX;  // The last X location of the character
var pigY;  // The last Y location of the character
var targetX;     // The X goal, from the user's click
var targetY;     // The Y goal, from the user's click
var track = (0); //to keep track fo index in array "pigsThatFly"
var theX; //the current x location of character
var theY; //the current y location of character
 

function preload(){
    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    var filenames = [];
    filenames[0] = "https://i.imgur.com/yHI2wXX.png";
    filenames[1] = "https://i.imgur.com/yHI2wXX.png"
    filenames[2] = "https://i.imgur.com/Z5T1eCI.png";
    filenames[3] = "https://i.imgur.com/xPr6ucE.png";
    filenames[4] = "https://i.imgur.com/knjfg9E.png";
    filenames[5] = "https://i.imgur.com/uh2mgbF.png";
    filenames[6] = "https://i.imgur.com/k76ZBzT.png";
    filenames[7] = "https://i.imgur.com/nfG9mkZ.png";
    filenames[8] = "https://i.imgur.com/UXGbXhS.png";
    filenames[9] = "https://i.imgur.com/UXGbXhS.png";
    filenames[10] = "https://i.imgur.com/yHI2wXX.png";
    
    // PUT CODE HERE TO LOAD THE IMAGES INTO THE frames ARRAY,
    for(var z=0; z < filenames.length; z++) {
    pigsThatFly.push(loadImage(filenames[z]));
    }
}

function setup() {
    createCanvas(640, 240);
    imageMode(CENTER);
    frameRate(35);//natural rate 
  
    // Initialize the character and target positions. 
    pigX = width / 2; 
    pigY = height / 2; 
    targetX = pigX;
    targetY = pigY;
   
    //# which allows for new star to appear
    StarProb = 20; 

  //morningStars inital amount 
    for (var i = 0; i < 22; i++) {
      morningStars[i] = new Star(random(width));
    }  
}


function draw() {
    background(255);
    noStroke();
    
    gradientBack();
    drawStars();
    drawMount();
    drawWater();
    drawPig();
}


function drawStars(){
        //when random # is smaller than probability then new start occurs  
  if (StarProb > random(0,100)) {
    morningStars.push(new Star(width));
  }

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

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

function drawMount(){
    //first mountain
    push();
    fill(0, 180);
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainZoom) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
}

function drawWater(){
  //water
    //water main
    push();
    fill(173,216,255,100); 

    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * waterZoom) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x+.2, y+70); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
    //water layers
    fill(173,216,255,115); 
    beginShape(); 
    for (var a = 0;  a < width; a++) {
        var b = (a * waterZoom) + (millis() * terrainSpeed);
        var c = map(noise(b), 0,1, height/2, height*3/4);
        vertex(a+.2, c+75); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
        beginShape(); 
    for (var d = 0;  d < width; d++) {
        var e = (d * waterZoom) + (millis() * terrainSpeed);
        var f = map(noise(e), 0,1, height/2, height*3/4);
        vertex(d+.2, f+80); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
    
    
    

}

function drawPig(){
      // PUT CODE HERE TO MOVE THE CHARACTER TOWARDS THE TARGET
    var dx = targetX - pigX;
    var dy = targetY - pigY;
    var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
    //control how character moves toward target 
    theX = lerp(pigX,targetX,.15);
    theY = lerp(pigY,targetY,.15);
    //keep looping through the images continuously/seamlessly 
    if (track >= pigsThatFly.length){
      track = 0; 
    }
    
    // PUT CODE HERE TO DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES.
    // WHEN YOU GET THAT WORKING, FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT. 
   //if the current x location is smaller than the last x location, it will be walking left 
    if (theX < pigX){
      push();
      scale(-1,1);//flip image 
      image(pigsThatFly[track],theX*-1,theY); //you multiply the X-coordinate by -1 so it walks in the right direction 
      pop();
    }
    //otherwise if it's larger, it will be walking right
    else if (theX >= pigX){
      push();
      image(pigsThatFly[track],theX,theY);
      pop();
    }
    
    //re-fresh values of pigX & pigY (which keep track of last place of character)
    pigX = theX;
    pigY = theY;
    
    //cycle through the walking images 
    track = track + 1
    
    
}

function gradientBack(){
  //Create gradient color for the background
    topGrad = color(117, 118, 195); //top gradient 
    bottomGrad = color(250, 207, 194); //bottom gradient 

    //gradient color steps
    var gradientSteps = (height);
    var gradientSteps2 = (30);

    for (var i = 0; i <= gradientSteps; i++) { //for each gradient strip
      fill(lerpColor(topGrad, bottomGrad, i/height)); //fill color inerpolation
      rect(0, (i/height * height) - (1/height * height), width, 1/height * height); //use the color draw boxes
    }
    
    //other gradient 
    /*
    for (var q = 0; q <= gradientSteps2; q++) { //for each gradient strip
      var sizeHeight = ((1/height * height)/2);
      noStroke();
      fill(lerpColor(topGrad2, bottomGrad2, q/gradientSteps2),80); //fill color inerpolation
      rect(0, (q/height * height) - sizeHeight +195, width, sizeHeight); //use the color draw boxes
      
      fill(lerpColor(topGrad3, topGrad2, q/gradientSteps2),80);
      rect(0, (q/height * height) - sizeHeight+164, width, sizeHeight);
    }  
    */
}

function mousePressed() {
    targetX = mouseX;
    targetY = mouseY;
}

//generate morningStars
function Star(xLocation){
  var randoOpa = random(80,180); //have the brightness of stars vary 
  var randoSize = random(.5,2); //have star size vary 
  
  this.x = xLocation;//controlled above by random width 
  this.y = random(1, 180); //range for stars to appear
  this.speed = (-1.5); //speed       

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

  this.display = function() {
	//draw the stars here 
	  fill(255,255,255,randoOpa);
	  ellipse(this.x, this.y,randoSize,randoSize);
  }
}

This time around I wanted to do something a little more fun than usual. I had some trouble deciding on what I wanted to do, but eventually decided to just do a pig flying across the water in the early early morning (early enough when you can still see stars). The reason why is because I was inspired by the phrase “when pigs fly”, but not in the traditional sense of the phrase. I was more interested in where pigs would go and what they would do when they fly – why would pigs fly? So I ended up deciding a pig would take the time to go on an early morning flight, beneath the glow of the stars at dawn.
I wanted to do something humorous and beautiful and this is the result.

Also, fun fact:
If you click on the screen, the pig will move to your mouse location.

Here is a picture of the original sketch.