void setup(){
size(400,400);
noStroke(); //so things don't have outlines. I like the look of solid shapes better.
}
void draw() {
//Note: I use mouseY or mouseX divided by various numbers a lot in this program
//this is to get things to happen at various different speeds but all relative
//to the movement of the mouse.
//Note 2: Every x coordinate has a +mouseX divided by something to make a paralax effect.
background(0+(mouseY/2),0,200-(mouseY/4));
//the background becomes less blue and more red based on vertical mouse position.
//It's /2 to make that transition a little slower.
//the smoke: //the smoke's paralax thing: all x values +mouseX/20
// The smoke consists of long series' of ellipses. as the mouse moves down, they
// ascend, move to the right, and grow in size.
// each ellipse is also started slightly below and to the left of the previous to
// create the impression of a wind direction, and staggered (all those silly +5s).
fill(10,10,10,mouseY/4); //A gray that gets less transparent as the mouse descends.
//this is just ONE pillar.. forloopspls
ellipse(44+mouseX/20+mouseY/4,650-mouseY/2,-30+mouseY/4,-20+mouseY/4);
ellipse(48+mouseX/20+5+mouseY/4,630-mouseY/2,-25+mouseY/3,-15+mouseY/3);
ellipse(52+mouseX/20+mouseY/4,610-mouseY/2,-20+mouseY/4,-10+mouseY/4);
ellipse(56+mouseX/20+5+mouseY/4,590-mouseY/2,-15+mouseY/3,-5+mouseY/3);
ellipse(60+mouseX/20+mouseY/4,570-mouseY/2,-10+mouseY/4,0+mouseY/4);
ellipse(64+mouseX/20+5+mouseY/4,550-mouseY/2,-5+mouseY/3,5+mouseY/3);
ellipse(68+mouseX/20+mouseY/4,530-mouseY/2,0+mouseY/4,10+mouseY/4);
ellipse(72+mouseX/20+5+mouseY/4,510-mouseY/2,5+mouseY/3,15+mouseY/3);
ellipse(76+mouseX/20+mouseY/4,490-mouseY/2,10+mouseY/4,20+mouseY/4);
ellipse(80+mouseX/20+5+mouseY/4,470-mouseY/2,15+mouseY/3,25+mouseY/3);
ellipse(84+mouseX/20+mouseY/4,450-mouseY/2,20+mouseY/4,30+mouseY/4);
ellipse(88+mouseX/20+5+mouseY/4,430-mouseY/2,25+mouseY/3,35+mouseY/3);
ellipse(92+mouseX/20+mouseY/4,410-mouseY/2,30+mouseY/4,40+mouseY/4);
ellipse(96+mouseX/20+5+mouseY/4,390-mouseY/2,35+mouseY/3,45+mouseY/3);
ellipse(100+mouseX/20+mouseY/4,370-mouseY/2,40+mouseY/4,50+mouseY/4);
ellipse(104+mouseX/20+5+mouseY/4,350-mouseY/2,45+mouseY/3,55+mouseY/3);
ellipse(108+mouseX/20+mouseY/4,330-mouseY/2,50+mouseY/4,60+mouseY/4);
ellipse(112+mouseX/20+5+mouseY/4,310-mouseY/2,55+mouseY/3,65+mouseY/3);
//pillar 2:
ellipse(144+mouseX/20+mouseY/4,650-mouseY/2,-30+mouseY/4,-20+mouseY/4);
ellipse(148+mouseX/20+5+mouseY/4,630-mouseY/2,-25+mouseY/3,-15+mouseY/3);
ellipse(152+mouseX/20+mouseY/4,610-mouseY/2,-20+mouseY/4,-10+mouseY/4);
ellipse(156+mouseX/20+5+mouseY/4,590-mouseY/2,-15+mouseY/3,-5+mouseY/3);
ellipse(160+mouseX/20+mouseY/4,570-mouseY/2,-10+mouseY/4,0+mouseY/4);
ellipse(164+mouseX/20+5+mouseY/4,550-mouseY/2,-5+mouseY/3,5+mouseY/3);
ellipse(168+mouseX/20+mouseY/4,530-mouseY/2,0+mouseY/4,10+mouseY/4);
ellipse(172+mouseX/20+5+mouseY/4,510-mouseY/2,5+mouseY/3,15+mouseY/3);
ellipse(176+mouseX/20+mouseY/4,490-mouseY/2,10+mouseY/4,20+mouseY/4);
ellipse(180+mouseX/20+5+mouseY/4,470-mouseY/2,15+mouseY/3,25+mouseY/3);
ellipse(184+mouseX/20+mouseY/4,450-mouseY/2,20+mouseY/4,30+mouseY/4);
ellipse(188+mouseX/20+5+mouseY/4,430-mouseY/2,25+mouseY/3,35+mouseY/3);
ellipse(192+mouseX/20+mouseY/4,410-mouseY/2,30+mouseY/4,40+mouseY/4);
ellipse(196+mouseX/20+5+mouseY/4,390-mouseY/2,35+mouseY/3,45+mouseY/3);
ellipse(200+mouseX/20+mouseY/4,370-mouseY/2,40+mouseY/4,50+mouseY/4);
ellipse(204+mouseX/20+5+mouseY/4,350-mouseY/2,45+mouseY/3,55+mouseY/3);
ellipse(208+mouseX/20+mouseY/4,330-mouseY/2,50+mouseY/4,60+mouseY/4);
ellipse(212+mouseX/20+5+mouseY/4,310-mouseY/2,55+mouseY/3,65+mouseY/3);
//pillar 3:
ellipse(244+mouseX/20+mouseY/4,650-mouseY/2,-30+mouseY/4,-20+mouseY/4);
ellipse(248+mouseX/20+5+mouseY/4,630-mouseY/2,-25+mouseY/3,-15+mouseY/3);
ellipse(252+mouseX/20+mouseY/4,610-mouseY/2,-20+mouseY/4,-10+mouseY/4);
ellipse(256+mouseX/20+5+mouseY/4,590-mouseY/2,-15+mouseY/3,-5+mouseY/3);
ellipse(260+mouseX/20+mouseY/4,570-mouseY/2,-10+mouseY/4,0+mouseY/4);
ellipse(264+mouseX/20+5+mouseY/4,550-mouseY/2,-5+mouseY/3,5+mouseY/3);
ellipse(268+mouseX/20+mouseY/4,530-mouseY/2,0+mouseY/4,10+mouseY/4);
ellipse(272+mouseX/20+5+mouseY/4,510-mouseY/2,5+mouseY/3,15+mouseY/3);
ellipse(276+mouseX/20+mouseY/4,490-mouseY/2,10+mouseY/4,20+mouseY/4);
ellipse(280+mouseX/20+5+mouseY/4,470-mouseY/2,15+mouseY/3,25+mouseY/3);
ellipse(284+mouseX/20+mouseY/4,450-mouseY/2,20+mouseY/4,30+mouseY/4);
ellipse(288+mouseX/20+5+mouseY/4,430-mouseY/2,25+mouseY/3,35+mouseY/3);
ellipse(292+mouseX/20+mouseY/4,410-mouseY/2,30+mouseY/4,40+mouseY/4);
ellipse(296+mouseX/20+5+mouseY/4,390-mouseY/2,35+mouseY/3,45+mouseY/3);
ellipse(300+mouseX/20+mouseY/4,370-mouseY/2,40+mouseY/4,50+mouseY/4);
ellipse(304+mouseX/20+5+mouseY/4,350-mouseY/2,45+mouseY/3,55+mouseY/3);
ellipse(308+mouseX/20+mouseY/4,330-mouseY/2,50+mouseY/4,60+mouseY/4);
ellipse(312+mouseX/20+5+mouseY/4,310-mouseY/2,55+mouseY/3,65+mouseY/3);
//pillar 0 (as in, it's the one off to the left)
ellipse(-66+mouseX/20+mouseY/4,650-mouseY/2,-30+mouseY/4,-20+mouseY/4);
ellipse(-64+mouseX/20+5+mouseY/4,630-mouseY/2,-25+mouseY/3,-15+mouseY/3);
ellipse(-62+mouseX/20+mouseY/4,610-mouseY/2,-20+mouseY/4,-10+mouseY/4);
ellipse(-60+mouseX/20+5+mouseY/4,590-mouseY/2,-15+mouseY/3,-5+mouseY/3);
ellipse(-58+mouseX/20+mouseY/4,570-mouseY/2,-10+mouseY/4,0+mouseY/4);
ellipse(-56+mouseX/20+5+mouseY/4,550-mouseY/2,-5+mouseY/3,5+mouseY/3);
ellipse(-54+mouseX/20+mouseY/4,530-mouseY/2,0+mouseY/4,10+mouseY/4);
ellipse(-52+mouseX/20+5+mouseY/4,510-mouseY/2,5+mouseY/3,15+mouseY/3);
ellipse(-50+mouseX/20+mouseY/4,490-mouseY/2,10+mouseY/4,20+mouseY/4);
ellipse(-48+mouseX/20+5+mouseY/4,470-mouseY/2,15+mouseY/3,25+mouseY/3);
ellipse(-46+mouseX/20+mouseY/4,450-mouseY/2,20+mouseY/4,30+mouseY/4);
ellipse(-44+mouseX/20+5+mouseY/4,430-mouseY/2,25+mouseY/3,35+mouseY/3);
ellipse(-42+mouseX/20+mouseY/4,410-mouseY/2,30+mouseY/4,40+mouseY/4);
ellipse(-40+mouseX/20+5+mouseY/4,390-mouseY/2,35+mouseY/3,45+mouseY/3);
ellipse(-38+mouseX/20+mouseY/4,370-mouseY/2,40+mouseY/4,50+mouseY/4);
ellipse(-36+mouseX/20+5+mouseY/4,350-mouseY/2,45+mouseY/3,55+mouseY/3);
ellipse(-34+mouseX/20+mouseY/4,330-mouseY/2,50+mouseY/4,60+mouseY/4);
ellipse(-32+mouseX/20+5+mouseY/4,310-mouseY/2,55+mouseY/3,65+mouseY/3);
//the fire:
//the fire has a parallax thing of +mouseX/16
fill(255,100,0); //dark orange
//these are the background triangles of fire.
//Their top point (the third point specified) rises based on a fraction of mouseY,
//and "flickers" based on the sin of mouseY
triangle(-60+mouseX/16,400,50+mouseX/16,400,20+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(10+mouseX/16,400,90+mouseX/16,400,50+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(90+mouseX/16,400,160+mouseX/16,400,180+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(190+mouseX/16,400,260+mouseX/16,400,260+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(350+mouseX/16,400,410+mouseX/16,400,290+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(140+mouseX/16,400,160+mouseX/16,400,180+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(350+mouseX/16,400,390+mouseX/16,400,370+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(220+mouseX/16,400,290+mouseX/16,400,260+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(130+mouseX/16,400,170+mouseX/16,400,110+mouseX/16+sin(mouseY)*8,350-mouseY/2);
triangle(70+mouseX/16,400,100+mouseX/16,400,95+mouseX/16+sin(mouseY)*8,350-mouseY/2);
fill(255,200,0);//yellowy orange
//These flames are smaller than the others: the points are closer together and they
//rise slower (mouseY/4 instead of /2).
triangle(-50+mouseX/16,400,40+mouseX/16,400,10+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(20+mouseX/16,400,80+mouseX/16,400,40+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(100+mouseX/16,400,150+mouseX/16,400,170+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(200+mouseX/16,400,250+mouseX/16,400,250+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(400+mouseX/16,400,360+mouseX/16,400,300+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(150+mouseX/16,400,140+mouseX/16,400,170+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(380+mouseX/16,400,360+mouseX/16,400,380+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(230+mouseX/16,400,280+mouseX/16,400,250+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(140+mouseX/16,400,160+mouseX/16,400,100+mouseX/16+sin(mouseY)*8,350-mouseY/4);
triangle(80+mouseX/16,400,90+mouseX/16,400,85+mouseX/16+sin(mouseY)*8,350-mouseY/4);
//the houses:
//the houses have a parralax thingy of +mouseX/12
rectMode(CORNERS); //I have to use corners mode to get the weird shrinking effects
//The houses consist of a few shapes. The roof is two triangles and a rectangle,
//which lower with the mouse, but the bottoms lower faster than the top, so's to
//have the roof "collapse" over the rest of the house.
//The main rectangle of the house just descends with the mouse, and the details collapse
//by having the bottom corner lower slower than the top one.
fill(221-mouseY/2,52-mouseY/2,38-mouseY/2); //Roof color! red, but fades to silhouette by mouse position.
//house0: This is just to imply there's another house offscreen to the left.
triangle(10+mouseX/12,230+(mouseY/3),-50+mouseX/12,190+(mouseY/4),-50+mouseX/12,230+(mouseY/3));
fill(127-mouseY/2,51-mouseY/2,0); // House color! brown, but fades to black.
//house 0's rectangle
rect(-120+mouseX/12,230+(mouseY/3),0+mouseX/12,350); //120 wide
//house 0 needs one window to appear to be a complete house:
fill(0+(mouseY/2),0,200-(mouseY/2)); //window color, the same color as the sky
rect(-40+mouseX/12,250+mouseY/3,-20+mouseX/12,290+mouseY/4);
//house1:
fill(127-mouseY/2,51-mouseY/2,0); // House color! brown, but fades to black.
rect(20+mouseX/12,230+(mouseY/3),140+mouseX/12,350); //120 wide
//details
fill(0+(mouseY/2),0,200-(mouseY/2)); //the same color as the sky
//house1 window's and doors
rect(40+mouseX/12,250+mouseY/3,60+mouseX/12,290+mouseY/4);
rect(100+mouseX/12,250+mouseY/3,120+mouseX/12,290+mouseY/4);
rect(70+mouseX/12,300+mouseY/3,90+mouseX/12,350+mouseY/4);
fill(221-mouseY/2,52-mouseY/2,38-mouseY/2); //roof color
//roof
triangle(10+mouseX/12,230+(mouseY/3),60+mouseX/12,190+(mouseY/4),60+mouseX/12,230+(mouseY/3)); //50 wide, 40 tall (at least to start)
rect(60+mouseX/12,190+(mouseY/4),100+mouseX/12,230+(mouseY/3));
triangle(150+mouseX/12,230+(mouseY/3),100+mouseX/12,190+(mouseY/4),100+mouseX/12,230+(mouseY/3)); //50 wide, 40 tall (at least to start)
//house2:
fill(127-mouseY/2,51-mouseY/2,0); // House color! brown, but fades to black.
rect(160+mouseX/12,230+(mouseY/3),280+mouseX/12,350);
//details
fill(0+(mouseY/2),0,200-(mouseY/2)); //the same color as the sky
//house2 window's and doors
rect(180+mouseX/12,250+mouseY/3,200+mouseX/12,290+mouseY/4);
rect(240+mouseX/12,250+mouseY/3,260+mouseX/12,290+mouseY/4);
rect(210+mouseX/12,300+mouseY/3,230+mouseX/12,350+mouseY/4);
fill(221-mouseY/2,52-mouseY/2,38-mouseY/2); //roof color
//roof
triangle(150+mouseX/12,230+(mouseY/3),200+mouseX/12,190+(mouseY/4),200+mouseX/12,230+(mouseY/3)); //50 wide, 40 tall (at least to start)
rect(200+mouseX/12,190+(mouseY/4),240+mouseX/12,230+(mouseY/3));
triangle(290+mouseX/12,230+(mouseY/3),240+mouseX/12,190+(mouseY/4),240+mouseX/12,230+(mouseY/3)); //50 wide, 40 tall (at least to start)
//house3:
fill(127-mouseY/2,51-mouseY/2,0); // House color! brown, but fades to black.
rect(300+mouseX/12,230+(mouseY/3),400+mouseX/12,350);
//details
fill(0+(mouseY/2),0,200-(mouseY/2)); //the same color as the sky
//house3 window's and doors
rect(320+mouseX/12,250+mouseY/3,340+mouseX/12,290+mouseY/4);
rect(380+mouseX/12,250+mouseY/3,400+mouseX/12,290+mouseY/4);
rect(350+mouseX/12,300+mouseY/3,370+mouseX/12,350+mouseY/4);
fill(221-mouseY/2,52-mouseY/2,38-mouseY/2); //roof color
//roof
triangle(290+mouseX/12,230+(mouseY/3),340+mouseX/12,190+(mouseY/4),340+mouseX/12,230+(mouseY/3)); //50 wide, 40 tall (at least to start)
rect(340+mouseX/12,190+(mouseY/4),380+mouseX/12,230+(mouseY/3));
triangle(430+mouseX/12,230+(mouseY/3),380+mouseX/12,190+(mouseY/4),380+mouseX/12,230+(mouseY/3)); //50 wide, 40 tall (at least to start)
//the lawn: //
//doesn't have to move horizontally because it's one solid color.
fill(115-mouseY/2,255-mouseY,76-mouseY); //the grass starts green, gets kinda brown
//because red darkens slower.
rect(-100+mouseX/10,350,500+mouseX/10,400); //slightly larger than the screen so parallax can happen
//light from the fire: //moves horizontally at +mouseX/12 to match the houses.
fill(255,200,0,100-mouseY/3); //light is orange and translucent, gets
//less and less visible. rects extend as mouse down.
//uses sin so it flickers like the fire.
rect(0+mouseX/12,350,20+mouseX/12,350+(mouseY/5)-sin(mouseY)*3);
rect(140+mouseX/12,350,160+mouseX/12,350+(mouseY/5)-sin(mouseY)*3);
rect(280+mouseX/12,350,300+mouseX/12,350+(mouseY/5)-sin(mouseY)*3);
//the kid:
//the kid moves horizontally the fastest cause he's in the front.
//+mouseX/6
//hand:
//a line for his hand, that gets bigger as the mouse moves down. the end attatched to the body moves faster, which angles the arm down.
stroke(255-mouseY/2,219-mouseY/2,198-mouseY/2); //skin color, darkens.
strokeWeight(4+mouseY/40);
line(300+mouseX/6-mouseY/10,340-mouseY/6,270+mouseX/6-mouseY/10,330-mouseY/10);
//the hand holds a stick, which works pretty much the same way.
stroke(77-mouseY/2,31-mouseY/2,0); //darker brown than houses so you can see it when they overlap.
line(270+mouseX/6-mouseY/10,330-mouseY/10,270+mouseX/6-mouseY/10,300-mouseY/10);
noStroke();
//his little fire:
fill(255,60,0); //darker orange than other fire
//the torch fire works the same as the other fire, but the sin is offset by 5 so it doesn't sync to the back fire.
//the points also scale and move with the arm and torch
triangle(265+mouseX/6-mouseY/10,300-mouseY/10,275+mouseX/6-mouseY/10,300-mouseY/10,260+mouseX/6+(sin(pmouseY-5)*5)-mouseY/10,300-mouseY/6);
triangle(265+mouseX/6-mouseY/10,300-mouseY/10,275+mouseX/6-mouseY/10,300-mouseY/10,270+mouseX/6+(sin(pmouseY-5)*5)-mouseY/10,300-mouseY/6);
//pants:
//a rect that scales up as mouse moves down
fill(41-mouseY/2,29-mouseY/2,114-mouseY/2); //pants color, dark blue, darkens
rect(285+mouseX/6-mouseY/14,390-mouseY/6,315+mouseX/6+mouseY/14,400);
//shirt:
// triangle that scales up as well, slightly more so than the pants because it looks better.
fill(94-mouseY/2,66-mouseY/2,255-mouseY/2); //shirt color, blue, darkens
triangle(280+mouseX/6-mouseY/10,390-mouseY/6,320+mouseX/6+mouseY/10,390-mouseY/6,300+mouseX/6,300-mouseY/3);
//face:
//the centre of the circle is the top point of the body. it scales up as well.
fill(255-mouseY/2,219-mouseY/2,198-mouseY/2); //skin color, darkens.
ellipse(300+mouseX/6,300-mouseY/3,40+mouseY/6,40+mouseY/6);
}
