xxxxxxxxxx
498
let clouds = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
let buildings = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
function setup() {
createLoop({
duration: 3.8,
gif: true
});
createCanvas(640, 640);
skyOffset = 0;
frameRate(20);
for (i = 0; i < 12; i++) {
clouds[i] = random(0, 2500);
buildings[i] = random(300, 450);
}
/* the sections of this loop are split into three main parts:
1. scrolling background ( which is made up of the sky and city)
2. stationary environment
3. animated elements in environments ( cat, girl, etc)
*/
// here are all the colors used
}
// the sky is made by panning a very wide image to simulate movement
function sky(offset) {
fill(133, 216, 246);
startx = -1500;
length = 2500;
rect(startx + offset, 0, length, 640);
//mountain line
fill(85,162,207);
rect(0, 420, 640, 200);
for (i = 0; i < 12; i++) {
noStroke();
fill(255, 130);
cloudx = clouds[i];
cloudy = 200;
cloudlength = 120;
rect(cloudx + startx + offset / 2, cloudy, cloudlength, 60, 50);
buildingx = i * 420;
buildingy = buildings[i];
fill(66,106,118);
rect(buildingx + startx + offset * 5, buildingy, 80, 200);
for (windowx = 0 ; window < 5 ; window++){
//for (windowy = 0 ; window < 5 ; window++){
noStroke();
fill(255);
rect(buildingx + startx + offset / 2, 200, 100, 100);
//rect((buildingx + 10 )* windowx + startx + offset*2, buildingy + 10 * windowy, 5, 5 );
//}
}
}
}
function filterGrid(){
for (row = 0; row <100 ; row ++){
for (col = 0; col <100; col ++){
stroke(255, 40, 0, 120);
strokeWeight(0.1);
noFill();
rect(row*8, col*8, 8, 8);
}
}
}
function staticRoom() {
//colors
let browns = [color(134,106,69),
color(98,71,41),
color(105,57,21),
color(48,30,20)];
let reds = [color(230,108,33),
color(186,88,41),
color(252,104,30),
color(243,157,62),
color(215,126,56)
];
//walls
fill(105,57,21);
rect(0, 0, 640, 117);
rect(0, 0, 246, 138);
rect(0, 0, 210, 155);
rect(0, 0, 178, 180);
rect(0, 0, 160, 200);
rect(0, 0, 140, 230);
rect(0, 0, 120, 253);
rect(0, 0, 110, 640);
rect(0, 470, 640, 200);
rect(530, 0, 110, 640);
rect(640 - 246, 0, 246, 138);
rect(640 - 210, 0, 210, 155);
rect(640 - 178, 0, 178, 180);
rect(640 - 160, 0, 160, 200);
rect(640 - 140, 0, 140, 230);
rect(640 - 120, 0, 120, 253);
// shelf decorations
//books
push();
fill(0);
rect(40, 10, 20, 50);
fill(50);
rect(60, 10, 20, 50 );
fill(0);
rect(80, 20, 8, 50);
fill(102,99,68);
rect(88, 8, 15, 60);
rect(102, 45, 30, 30, 20);
fill(88,60,46);
rect(130, 12, 80, 60);
pop();
//plant
fill(108,121,103);
rect(27, 100, 15, 15, 2, 20, 20, 20);
rect(47, 100, 15, 15, 20, 2, 20, 20);
rect(42, 105, 5, 20);
//plant pot
fill(207,50,49);
rect(30, 120, 30, 50, 40, 40);
rect(70, 130, 40, 30, 10, 10);
//rect(40, )
//shelves
fill(browns[3]);
rect(20, 60, 600, 25);
rect(20, 160, 110, 25);
rect(500, 130, 130, 25);
push();
fill(51,29,24, 60);
rect(20, 80, 600, 15);
rect(20, 180, 110, 15);
rect(500, 150, 130, 15);
//clock and picture frames
push();
strokeWeight(5);
stroke(53,37,21);
fill(browns[0]);
rect(560, 230, 60, 60, 130);
rect(40, 300, 35, 60, 20);
rect(20, 200, 75, 60, 20);
pop();
//window arch
stroke(134,106,69);
strokeWeight(20);
noFill();
rect(110, 117, 420, 600, 200);
strokeWeight(10);
rect(140, 157, 360, 570, 200);
//desk lamp
fill(reds[1]);
noStroke();
rect(70, 440, 80, 60, 120);
push();
//lamp stand
lampElbowx = 140;
lampElbowy = 350;
translate(lampElbowx, lampElbowy);
rotate(PI/1.7);
rect(0, 0, 100, 10);
rotate(PI/-1.4);
rect(0, -5, 100, 10);
rect(-10, -10, 20, 20, 130);
//lamp head
rect(100, -10, 30, 30, 60, 60);
rect(90, 0, 50, 40, 60, 60, 5, 5);
fill(255, 40);
rect(90, 40, 50, 180 );
pop();
//desk
push();
fill(51,29,24, 80);
rectMode(CENTER)
rect(320, 600, 560, 200);
pop();
fill(browns[3]);
stroke(53,37,21);
push();
shearX(PI / 6.0);
rect(150, 500, 30, 190);
pop();
push();
shearX(PI / -6.0);
rect(470, 480, 30, 190);
pop();
rectMode(CENTER);
rect(320, 520, 560, 50);
rect(320, 520, 200, 40);
rect(320, 520, 20, 20, 30);
rectMode(CORNER);
//paper on desk
fill(209,199,164);
noStroke();
rect(300, 470, 100, 20, 10, 10, 2, 2);
}
//active elements
function cat() {
noStroke();
push();
//fill(255, 255, 255);
translate(120, 420);
//swaying tail
push();
fill(198,179,139);
translate(0, 20);
catFrequency = 0.5;
catMove = (sin((millis()/200)*catFrequency) )/5;
rotate(catMove);
rect(0, 0, 20, 80, 40);
pop();
//static body but x-value gets bigger and smaller to simulate breathing
fill(209,199,164);
breathe = map(catMove, -PI, PI, 0, 70);
rect(0, -breathe + 15, 90, 60 + breathe, 120);
//head, eyes follow pencil
pop();
catHeadx = 210;
catHeady = 440;
push();
translate(catHeadx, catHeady);
rotate(PI/3);
rectMode(CENTER);
fill(198,179,139);
rect(0, 0, 80, 80, 60, 60, 60, 10);
rotate(PI/-7);
rect(0, 0, 80, 80, 10, 60, 60, 60);
fill(104,86,58);
fill(209,199,164);
rotate(PI/7);
push();
rotate(PI/-6);
fill(104,86,58);
rect(-10, 10, 5, 20, 5);
rotate(-HALF_PI - PI/8);
rect(10, 10, 5, 20, 5);
rect(0, 5, 5, 5, 3);
pop();
//cat paws
rotate(-PI/3);
fill(192,170,129);
rect(30, 40, 40, 30, 30);
fill(209,199,164);
rect(0, 40, 40, 30, 30);
pop();
}
function girl() {
//girl
let girlColors = []
//static body
girlx = 450;
girly = 500;
push();
translate(girlx, girly);
rotate(PI/8);
rectMode(CENTER);
fill(87,87,63);
rect(50, 20, 120, 260, 50, 30, 10, 10);
pop();
push();
translate(girlx, girly);
rectMode(CENTER);
fill(73,55,41);
rect(-15, 130, 190, 50, 170, 10);
pop();
//static upper arm
push();
topArmx = 440;
topArmy = 460;
translate(topArmx, topArmy);
rotate(PI/-6.5);
rectMode(CENTER);
fill(87,87,63);
rect(0, 0, 130, 40, 80);
pop();
//swaying forearm
push();
swayArmx = 415; //elbow location
swayArmy = 490;
translate(swayArmx, swayArmy);
//needs to rotate at elbow
//rotation calculations for arm
armFrequency = 0.5;
armMove = (sin((millis()/200)*armFrequency) )/5;
rotate(armMove + PI/3);
//arm rect and wrist x offset
wristx = 120;
fill(87,87,63);
rect(-wristx, 0, wristx, 40, 80);
//wrist and hand have their own slight rotation
translate(-wristx + 15, 0);
//use this when you finish hand function
handPencil(-25, 10, armMove);
rotate(armMove );
//rect(0, 0, -60, 50);
pop();
push();
translate(swayArmx, swayArmy);
rotate(armMove + PI/3);
noStroke();
fill(134,116,78);
rect(-95, -5, 20, 50, 15, 15, 20, 20);
pop();
//swaying hand with pencil
//desk chair
push();
chairx = 490;
chairy = 450;
translate(chairx, chairy);
rotate(PI / 11);
fill(48,30,20);
rect(50, 100, 20, 150);
rect(0, 0, 120, 130, 40);
pop();
headx = 495;
heady = 340;
head(headx, heady);
}
function fanandCurtain() {
//rise level fast then slow
//wave??
}
function shadows(){
}
function handPencil(wristx, wristy, rotation){
//wrist x is right of wrist
//pink and ring finger separate
noStroke();
translate(wristx, wristy);
fill(218,172,97);
rotate(rotation);
rect(-42, 5, 50, 30, 5, 5, 5, 25);
rotate(PI/6);
;
push();
rotate(PI/-3.5);
rect(13, -25, 17, 40, 40, 40);
pop();
push();
fill(51,37,26);
rotate(PI/-4);
rect(-53, -15, 80, 7);
pop()
rect(-45, -10, 50, 17, 10, 10, 10, 10);
rect(0, -20, 48, 48, 60, 60);
}
function head(cx, cy){
push();
noStroke();
translate(cx, cy);
fill(218,172,97);
headFrequency = 0.05;
headMove = (sin((millis()/200)*armFrequency) )/7;
rotate(headMove );
rectMode(CENTER);
rect(0, 0, 110, 110, 150);
rect( -40, 20, 70, 60, 8, 10, 10, 30);
//hair
fill(41,25,10);
rect(-10, -40, 70, 50, 10, 15, 50, 90);
fill(104,86,58);
rect(-30 , -5, 20, 5, 10);
rect(-60, 25, 10, 3, 10);
push();
rotate(-headMove);
rectMode(CORNER);
fill(134,116,78);
rect(-25, 50, 50, 30, 40, 40);
fill(0);
rect(0, -60, 70, 200, 10, 30, 100, 100);
pop();
//headphones
fill(243,157,62);
rect(10, -35, 20, 70, 20);
rect(10, 10, 50, 50, 40, 40);
pop();
}
skyOffset = 0;
function draw() {
sky(skyOffset);
skyOffset = (skyOffset + 1) % 1500;
staticRoom();
cat();
girl();
fill(128,0,128, 5);
rect(0, 0, 640, 640);
//filterGrid();
//grain filter
}