var aSlider;
var frames = [];//stores crow images
function preload(){
//crow cycle images uploaded to imgur
var crowCycles = [];
crowCycles[0] = "https://i.imgur.com/kFSBiWN.png"
crowCycles[1] = "https://i.imgur.com/WLXwnwq.png"
crowCycles[2] = "https://i.imgur.com/PGafnLp.png"
crowCycles[3] = "https://i.imgur.com/kFSBiWN.png"
crowCycles[4] = "https://i.imgur.com/WLXwnwq.png"
crowCycles[5] = "https://i.imgur.com/PGafnLp.png"
crowCycles[6] = "https://i.imgur.com/kFSBiWN.png"
crowCycles[7] = "https://i.imgur.com/PrhO9gc.png"
crowCycles[8] = "https://i.imgur.com/wIi9Q1O.png"
crowCycles[9] = "https://i.imgur.com/ddJaFA1.png"
crowCycles[10] = "https://i.imgur.com/PrhO9gc.png"
crowCycles[11] = "https://i.imgur.com/wIi9Q1O.png"
crowCycles[12] = "https://i.imgur.com/ddJaFA1.png"
crowCycles[13] = "https://i.imgur.com/PrhO9gc.png"
//load images into the frames array
for (i = 0; i < crowCycles.length; i ++){
frames[i] = loadImage(crowCycles[i]);
}
}
function setup(){
createCanvas(480, 480);
//slider controls the height of the grass
aSlider = createSlider(0, 400, 400, 0);
aSlider.position(200, 440);
frameRate(5);
}
function draw(){
//the sky will change color depending on the seconds
var s = second();
var skyR = map(s, 0, 60, 110, 248);
var skyG = map(s, 0, 60, 210, 105);
var skyB = map(s, 0, 60, 230, 32);
background(skyR, skyG, skyB);
//create the text box + slider-button area
var v = aSlider.value()
fill(255);
rect(0, 400, 479, 79);
line(160, 400, 160, 480);
fill(0);
textSize(15);
text("The time flows differently here.", 10, 410, 150, 75);
//button
fill(206, 78, 58);
ellipse(440, 440, 70);
fill(237, 89, 81);
ellipse(440, 440, 60);
//hills
fill(167, 118, 59);
arc(448, 128, 208, 84, PI, TWO_PI);
fill(211, 164, 98);
arc(384, 240, 416, 264, PI, TWO_PI);
arc(72, 240, 416, 200, PI, TWO_PI);
//farmhouse
fill(111, 16, 29);
rect(152, 144, 176, 96);
fill(38, 0, 2);
triangle(152, 144, 240, 64, 328, 144);
for (var i = 0; i < 4; i ++){
line(152, 168 + (i * 12), 328, 168 + (i *12));
i += 1;
}
line(152, 144 + (24 *3), 328, 144 + (24 *3));
rect(230, 200, 20, 40);
fill(255);
rect(170, 200, 30, 20);
rect(278, 200, 30, 20);
fill(0);
//first window crack
beginShape();
vertex(171, 200);
vertex(180, 210);
vertex(200, 210);
vertex(190, 220);
vertex(171, 205);
endShape();
//second window crack
beginShape();
vertex(278, 220);
vertex(308, 210);
vertex(298, 210);
vertex(290, 203);
vertex(300, 220);
vertex(284, 200);
endShape();
//field
fill(242, 224, 159);
rect(0, 240, 480, 160);
//tree with tire swing
push();
translate(448, 100);
drawBranch(0, 10);
pop();
line(430, 51, 430, 80);
noFill();
ellipse(430, 85, 10);
//the well
fill(138);
rect(364, 100, 25, 25);
line(364, 100, 364, 80);
line(389, 100, 389, 80);
line(377, 90, 377, 80);
line(377, 100, 377, 125);
line(364, 106, 389, 106);
line(364, 115, 389, 115);
fill(80, 40, 50);
beginShape();
vertex(373, 90);
vertex(381, 90);
vertex(379, 95);
vertex(375, 95);
vertex(373, 90);
endShape();
triangle(364, 80, 377, 75, 389, 80);
//grave
fill(138);
rect(72, 125, 12, 15, 15, 15, 2, 2);
//border trees
push();
translate(20, 240);
drawBranch(0, 15);
pop();
push();
translate(120, 240);
drawBranch(0, 15);
pop();
push();
translate(70, 245);
drawBranch(0, 10);
pop();
push();
translate(448, 240);
drawBranch(0, 10);
pop();
push();
translate(468, 240);
drawBranch(0, 15);
pop();
push();
translate(418, 245);
drawBranch(0, 13);
pop();
push();
translate(358, 240);
drawBranch(0, 15);
pop();
//path
fill(187, 113, 59);
rect(230, 240, 20, 160);
//log
fill(112, 68, 38);
rect(50, 246, 40, 27, 10);
ellipse(70, 250, 40, 10);
fill(171, 117, 79);
ellipse(70, 250, 35, 8);
fill(220, 182, 151);
ellipse(70, 250, 25, 6);
fill(112, 68, 38);
ellipse(70, 250, 10, 3);
//fence
fill(112, 68, 38);
rect(0, 260, 30, 140);
rect(450, 260, 30, 140);
rect(0, 300, 480, 30);
//crow animation
image(frames[frameCount % 13],320, 228, 80, 80);
//overgrowth
fill(243, 205, 127);
var val = aSlider.value();
for (i = 0; i < 160; i ++){
rect(i * 10, 400, 10, -val);
i += 1;
}
}
//create trees
function drawBranch(depth, len) {
line(0, 0, 0, -len);
push();
translate(0, -len);
drawTree(depth + 1, len);
pop();
}
function drawTree(depth, len) {
if (depth < 8) {
rotate(radians(-10));
drawBranch(depth, len);
rotate(radians(20));
drawBranch(depth, len);
}
}
//if you push the red button
function mouseInsideRedButton(){
return mouseX > 410 & mouseX < x + 60 && mouseY > 410 && mouseY < 470;
}
function mousePressed(){
if (mouseInsideRedButton){
fill(205, 90, 85);
ellipse(440, 440, 60);
text("Congrats you found the button.", 310, 350, 150, 75);
}
}
For my project I ended up focusing on the feeling of finding an abandoned place (in this case an old barn). You push aside the overgrown weeds and use the odds and ends in that location to construct a story of your own. I drew the little crow myself, and the sky changes with every second in a way that I intended to be a little unsettling.