Month: November 2022

 //Angela Yang 
 //Section C

 var myFerris;
 var mySeat = [];
 var angle = 0;
 var cloudx=200
 var cloudy=50
 var clouddx = 1;
 var cloudx2 = 100;
 var cloudy2 = 200;
 var clouddx2 = 0.3;


function setup(){
 createCanvas(480, 480);
 angleMode(DEGREES);
 var bc = color(random(0, 255), random(0, 255), random(0, 255));
 myFerris = makeFerris(240+180, 230, 0.3, 330);
 for(var i = 0; i<6; i++){
      var bc = color(random(0, 255), random(0, 255), random(0, 255));
      mySeat[i] = makeSeat(200, 200, 20, bc, i);

 }

}

function updateFerris(){
  this.angle += this.angleSpeed;

}

function ferrisDraw(){
  push();
  noFill();
  strokeWeight(4);
  ellipse(this.x, this.y, this.r, this.r);
  pop();
  push();
  stroke(255);
  strokeWeight(8);
  line(this.x, this.y, this.x-80, height);
  line(this.x, this.y, this.x+80, height);
  pop();

  push();
  translate(this.x, this.y);
  for(var i = 0; i<6; i++){
    push();
    rotate(i*60 + this.angle);
    stroke(255);
    strokeWeight(3);
    line(0, 0, this.r/2, 0);
    pop();

  }

  pop();
}

function makeFerris(wx, wy, as, wr){
  var wheel = {x:wx, y:wy, angleSpeed:as, r:wr, angle:0,
               update: updateFerris,
               draw: ferrisDraw};

  return wheel;
}

function updateSeat(){
  this.x = myFerris.x + myFerris.r/2*cos(this.index*60 + myFerris.angle);
  this.y = myFerris.y + myFerris.r/2*sin(this.index*60 + myFerris.angle);

}

function seatDraw(){
  push();
  stroke(255);
  strokeWeight(2);
  line(this.x, this.y, this.x, this.y+10);
  pop();
  push();
  stroke(255);
  fill(this.c);
  rect(this.x-10, this.y+10, 25, 25);
  pop();



}

function makeSeat(bx, by, br, bc, seatIndex){
  var basket = {x:bx, y:by, r:br, c:bc, index:seatIndex,
               update: updateSeat,
               draw: seatDraw};

  return basket;
}

function draw(){
  background(240,145,110);

  //Ground
  push();
  fill(87,71,70);
  rect(0, 350, width, 130);
  noStroke();
  fill(60,40,20,255);
  rect(0, 350, width, 30);
  pop();

  //Trees
  push();
  noStroke();
  fill(30,63,79);
  triangle(80, 240, 0, 350, 160, 350);
  fill(43,96,119);
  triangle(330, 235, 245, 350, 450, 350);
  fill(61,118,127);
  triangle(240, 235, 220, 360, 350, 360);
  fill(84,149,132);
  triangle(400, 250, 280, 360, 530, 360);
  fill(100,200,200);
  triangle(150, 150, 50, 380, 280, 380);
  pop();


  //Clouds
  push();
  noStroke();
  fill(255);
  ellipse(cloudx, cloudy, 80, 40);
  ellipse(cloudx+20, cloudy+20, 90, 30);
  ellipse(cloudx-35, cloudy+20, 80, 45);

  cloudx+=clouddx;

  if(cloudx-80>=width){
    cloudx = -120;
  }

  ellipse(cloudx2, cloudy2, 90, 30);
  ellipse(cloudx2+30, cloudy2+20, 70, 25);
  ellipse(cloudx2-20, cloudy2+20, 80, 30);

  cloudx2+=clouddx2;

  if(cloudx2-80>=width){
    cloudx2 = -120;
  }

  pop();

  //Lake
  push();
  noStroke();
  fill(150);
  ellipse(0, 530, width+500, 280);
  fill(235, 239, 229);
  ellipse(0, 530, width+400, 250);
  pop(); 

  myFerris.draw();
  myFerris.update();
  for(var i = 0; i<6; i++){
      mySeat[i].draw();
      mySeat[i].update();
  }


}

// Emily Franco
// efranco
// Section C
// Project 11 



//CHANGING FEATURES
//verticle coordinates 
var hill = [];
var noiseParam = 0; 
//hill frequency
var noiseStep = 0.02; 

var tree;
var forest = []; 
var sky = [];

//state of person walking
var state = 0;

function moon(){
    var oMoon = 30;
    var dim = 100;
    noStroke();
    fill(252,250,252,230);
    circle(300,90,dim);
    //halo
    for(var i=0; i<3; i++){
        oMoon -= 5*i;
        dim +=30;
        fill(252,250,252,oMoon);
        circle(300,90,dim);
    }
}

//constructor for stars
function makeStar(){
    var star = {x:random(width),y:random(height),size:random(0.25,2), 
                opacity:random(100,255),
                drawFunction: drawStar};
    return star;
}

function drawStar(){
    stroke(252,250,252,this.opacity);
    strokeWeight(this.size);
    point(this.x,this.y);
}

function stepTree(){
    this.x++;
}

function drawTree(){
    noStroke();
    var side;
    var triangleY;
    var branchLen;
    
    fill(this.color);
    rect(this.x,0,this.w,height);
    //branches
    switch(this.side){
        case 0:
        triangle(this.x,this.triangleY,this.x-this.branchLen,this.triangleY-6,this.x,this.triangleY+10);
        break;
        case 1: 
        triangle(this.x+this.w,this.triangleY,this.x+this.w+this.branchLen,this.triangleY-6,this.x+this.w,this.triangleY+10);
        break;
    }  
}

//tree constructor
function makeTrees(tx,tw,treeColor){
    var tree = {x: tx, w:tw, color:treeColor, side:floor(random(2)), 
                triangleY:random(height-100), branchLen:random(10,55),
                drawFunction:drawTree, stepFunction: stepTree};

    return tree;
}

//center if person is center of face circle
function person(x, y,state){
    //LEGS
    //state 1
    if(state==0){
        strokeWeight(2);
        stroke(248,232,212);
        line(x-6,y+58,x-8,y+68);
        line(x+4,y+58,x+4,y+68);
        stroke(0);
        line(x-8,y+68,x-9,y+81);
        line(x+4,y+68,x+7,y+81);
        //shadow
        noStroke();
        fill(0,0,0,90);
        rect(x-10,y+81,30,5);
    }
    //state 2
    if(state==1){
        strokeWeight(2);
        stroke(248,232,212);
        line(x-3,y+58,x-8,y+67);
        line(x+5,y+58,x+6,y+68);
        stroke(0);
        line(x-8,y+67,x-6,y+81);
        line(x+6,y+68,x+9,y+81);
        //shadow
        noStroke();
        fill(0,0,0,90);
        rect(x-12,y+81,35,5);
    }
    //state 3
    if(state==2){
        strokeWeight(2);
        stroke(248,232,212);
        line(x-3,y+58,x-6,y+69);
        line(x,y+58,x,y+68);
        stroke(0);
        line(x-6,y+69,x+3,y+81);
        line(x,y+68,x,y+81);
        //shadow
        noStroke();
        fill(0,0,0,90);
        rect(x-5,y+81,15,5);
    }
    noStroke();
    //BODY
    //hair in back
    fill(43,28,28);
    rect(x-10,y,17.5,29.8);

    //head
    fill(248,232,212);
    circle(x,y,20);
    //neck
    rect(x-1,y+10,2,5);
    //hair
    fill(56,38,33);
    arc(x,y,20,20,radians(180),radians(0),CHORD);
    rect(x+4.6,y,5.4,29.9);
    //eye
    ellipse(x-6,y+2,1,2);
    //dress
    fill(33,30,45);
    beginShape();
    vertex(x-6.5,y+15);
    vertex(x-15,y+59);
    vertex(x+15,y+59);
    vertex(x+6.5,y+15);
    endShape(CLOSE);
}

function moveHill(){
    //hill.shift();

    //add new coordinate to hill arry
    n = noise(noiseParam); 
    val = map(n,0,1,height-100,height);
    hill.pop();
    hill.unshift(val);
    noiseParam = noiseParam + noiseStep;

}
function defineHill(){
    var n;
    var val;
    for(var i=0; i<(width/5)+1; i++){
        n = noise(noiseParam);
        //map noise output to height of canvas
        val = map(n,0,1,height-100,height);
        hill.unshift(val);
        //increment to change curve
        noiseParam = noiseParam + noiseStep;
    }
}

function setup(){
    createCanvas(400, 400);
    frameRate(5);

    //STARS 
    for(var i=0; i<200; i++){
        sky[i] = makeStar();
    }

    //TREES
    for(var i=0; i<=18;i++){
          //furthest back
        if(i<=4){
            c = color(50,36,81);
        }
        //middle
        if(i>4 & i<=10){
            c = color(35,29,71);
        }
        if(i>10){
            c = color(25,18,66);
        }
        //front
        tree = makeTrees(random(width),random(5,15),c);
        forest.push(tree);
    }

    //HILL
    defineHill();
    
}

function draw(){
    background(69,55,89);
    var drawSetBack = floor(random(30));
    //------BACKGROUND--------
    moon();
    for(var i=0; i<sky.length-1; i++){
        //make stars twinkle
        if(i%5==0){
            sky[i].size = random(0.25,3.5);
        }
        var str = sky[i];
        str.drawFunction();
    }
    //back hills
    fill(49, 34, 66);
    noStroke();
    beginShape();
    curveVertex(400,235);
    curveVertex(400,235);
    curveVertex(316,283);
    curveVertex(232,285);
    curveVertex(194,400);
    curveVertex(400,400);
    endShape(CLOSE);

    fill(62, 47, 79);
    noStroke();
    beginShape();
    curveVertex(0,245);
    curveVertex(0,245);
    curveVertex(35,204);
    curveVertex(87,273);
    curveVertex(192,258);
    curveVertex(272,320);
    curveVertex(400,400);
    curveVertex(0,400);
    endShape(CLOSE);

    //------MIDGROUND--------
    //find index of most right tree
    var currentX=0; 
    var xHigh=0;

    for(var i=0; i<=forest.length-1;i++){
        currentX = forest[i].x;
        if(currentX>xHigh){
            xHigh=currentX;
            furthestTree = i;
        }
    }

    //move last tree to start of canvas
    if(forest[furthestTree].x > width){
        forest[furthestTree].x = 0-forest[furthestTree].w;
    }

    for(var i=0; i<=forest.length-1;i++){
        var t = forest[i];
        t.drawFunction();
        t.stepFunction();
    }

    //------FOREGROUND--------
    //draw hill
    for(var i=0; i<(width/5);i++){
        fill(125, 104, 135);
        beginShape();
        vertex(i*5,hill[i]);
        vertex(i*5,height);
        vertex((i+1)*5,height);
        vertex((i+1)*5,hill[i+1]);
        endShape(CLOSE);
    }
    moveHill();

    //move person according to hill value
    person(260,hill[53]-79,state%3);
    state++;
}