In this animation, I wanted to create a simple and playful but mysterious atmosphere. I choose to make it only with shades of purple and set the scene in the woods during a full moon.
// 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++;
}