Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Spin-off of "Project: Build-a-House"
ID	4594035949338624
Created	7 years ago, 1527836918671
Updated	7 years ago, 1528085769432
Code	/Created by mechatrilobite (2018-06-01) 2018-06-04 update: After completing the lessons on clean code, I've done some cleaning-up. Hopefully it's easier to understand now! This scene is based on the famous thatched-roof temple and priest's farmhouse in Ogimachi Village, Shirakawa-go, Japan. Here is the official website for the village: http://ml.shirakawa-go.org/en/guide/26/ I'd also like to credit Granttwin's Brick Wall project (https://www.khanacademy.org/computer-programming/brick-wall/6528659609288704), which inspired the code for the siding of the farmhouse. / //backdrop { //sky background(107, 170, 242); var sky1 = color(219, 236, 254); //colors for the gradient var sky2 = color(107, 170, 242); for (var skyG=0; skyG<600; skyG+=1) { //draws a series of diagonal lines that progressive change from light blue (sky1) to dark blue (sky 2) strokeWeight(2); stroke(lerpColor(sky1, sky2, skyG/600)); line(-250+skyG, 0, skyG, 158); } var cirrus = function(cX,cY,len,ht) { //draws basic unit for cirrus clouds; the postion, width (len) and height (ht) can be adjusted noStroke(); fill(255, 255, 255, 20); //about 92% transparent white beginShape(); vertex(cX+3, cY+26); bezierVertex(cX-0.05len, cY+0.07ht, cX+0.05len, cY+0.02ht, cX+0.09len, cY+0.06ht); bezierVertex(cX+0.13len, cY-0.01ht, cX+0.19len, cY-0.04ht, cX+0.2len, cY+0.09ht); bezierVertex(cX+0.27len, cY-0.1ht, cX+0.35len, cY+0.07ht, cX+0.32len, cY+0.23ht); bezierVertex(cX+0.46len, cY+0.39ht, cX+0.62len, cY+0.52ht, cX+0.79len, cY+0.67ht); bezierVertex(cX+0.59len, cY+0.56ht, cX+0.54len, cY+0.51ht, cX+0.31len, cY+0.3ht); bezierVertex(cX+0.4len, cY+0.47ht, cX+0.7len, cY+0.71ht, cX+0.9len, cY+0.84ht); bezierVertex(cX+0.73len, cY+0.76ht, cX+0.48len, cY+0.57ht, cX+0.26len, cY+0.35ht); bezierVertex(cX+0.43len, cY+0.66ht, cX+0.82len, cY+0.88ht, cX+len, cY+ht); //len bezierVertex(cX+0.83len, cY+0.93ht, cX+0.29len, cY+0.61ht, cX+3, cY+26); endShape(); //mechatrilobite-2018 }; var cirrusCloud = function(xPos,yPos,cLen,cHt) { //draws multiple cirrus cloud units in a set formation. Six of the units are drawn smaller, for a more natural look cirrus(xPos, yPos, cLen, cHt); //larger units cirrus(xPos-7, yPos-15, cLen, cHt); cirrus(xPos+34, yPos-8, cLen, cHt); cirrus(xPos+67, yPos-19, cLen, cHt); cirrus(xPos+93, yPos-31, cLen, cHt); //mechatrilobite-2018 cirrus(xPos-24, yPos+9, cLen, cHt); cirrus(xPos-31, yPos-6, cLen, cHt); cirrus(xPos+10, yPos+2, cLen, cHt); cirrus(xPos+43, yPos-10, cLen, cHt); cirrus(xPos+70, yPos-22, cLen, cHt); cirrus(xPos-28, yPos+13, cLen-69, cHt-49); //smaller units cirrus(xPos-24, yPos-2, cLen-69, cHt-49); cirrus(xPos+156, yPos-31, cLen-69, cHt-49); cirrus(xPos-52, yPos+22, cLen-69, cHt-49); cirrus(xPos-47, yPos+7, cLen-69, cHt-49); cirrus(xPos+132, yPos-22, cLen-69, cHt-49); }; cirrusCloud(195, -5, 171, 122); cirrusCloud(10, 18, 214, 122); cirrusCloud(222, 64, 228, 122); //distant hills strokeWeight(1); fill(70, 114, 97); beginShape(); //hill outline vertex(159, 259); vertex(158, 116); bezierVertex(255, 104, 312, 145 ,400, 158); vertex(400, 259); vertex(159, 259); endShape(); for (var hl1Gap=0; hl1Gap<39; hl1Gap+=1) { for (var hl1=0; hl1<18; hl1+=1) { //generates speckles (the exact position is slightly randomized) to give an impression of a forest; the colors are restricted to shades of green. colG caps at 256 instead of 255 because of how floor() works. var colR = floor(random(80, 150)); var colG = floor(random(128, 256)); var colB = floor(random(1, 150)); var hlDist = random(1.5, 3.3); //randomizes distance between speckles fill(colR, colG, colB, 40); ellipse(186+(hlDist+0.4hl1Gap)hl1, 117+hlDisthl1Gap, 3, 3); } } fill(0, 0, 0, 30); quad(170, 117, 182, 114, 326, 215, 189, 170); //closer hills noStroke(); fill(41, 75, 47); beginShape(); //hill outline vertex(0, 81); vertex(62, 109); bezierVertex(176, 94, 184, 123, 215, 153); vertex(237, 260); vertex(0, 260); vertex(0, 81); endShape(); for (var hl2Gap=0; hl2Gap<23; hl2Gap+=1) { for (var hl2=0; hl2<11; hl2+=0.5) { //similar to the loop at line 71; colors can include yellows and reds colR = floor(random(100, 256)); colG = floor(random(128, 256)); colB = floor(random(1, 100)); hlDist = random(1.2, 3.0); fill(colR, colG, colB, 80); ellipse(-9+(hlDist+0.4hl2Gap)hl2, 85+1.2hlDisthl2Gap, 2, 3); } } for (var hl3Gap=0; hl3Gap<20; hl3Gap+=1) { for (var hl3=0; hl3<30; hl3+=1) { //similar to the above loop; colors are even brighter colR = floor(random(100, 256)); colG = floor(random(128, 256)); colB = floor(random(1, 100)); hlDist = random(1.3, 3.5); fill(colR, colG, colB, 50); ellipse(64+(hlDist+0.17hl3Gap)hl3, 108+hlDisthl3Gap, 2, 2); } { //mechaTrilobite-2018 } } //distant hills - shading fill(0, 0, 0, 40); //shadows triangle(60, 108, 86, 106, 160, 160); triangle(0, 100, 65, 160, 0, 160); fill(186, 209, 96, 20); beginShape(); vertex(63, 108); bezierVertex(164, 96, 184, 119, 214, 152); vertex(219, 174); vertex(197, 171); vertex(193, 151); bezierVertex(178, 133, 149, 98, 63, 108); endShape(); fill(255, 242, 204, 30); //highlights beginShape(); vertex(0, 82); bezierVertex(59, 100, 122, 146, 142, 156); vertex(144, 168); bezierVertex(98, 133, 44, 108, 0, 82); endShape(); /* Created by mechatrilobite 2018-06-01 / //background forest var distForest1 = function(bX, bY, col) { //draws a simple jagged shape to represent distant trees; position and color are adjustable fill(col); beginShape(); vertex(bX, bY+156); vertex(bX+7, bY+124); vertex(bX+12, bY+156); vertex(bX+19, bY+130); vertex(bX+22, bY+156); vertex(bX+26, bY+136); vertex(bX+29, bY+158); vertex(bX+33, bY+133); vertex(bX+38, bY+160); vertex(bX+41, bY+140); vertex(bX+45, bY+159); vertex(bX+51, bY+130); vertex(bX+55, bY+161); vertex(bX+62, bY+133); vertex(bX+67, bY+160); vertex(bX+71, bY+140); vertex(bX+74, bY+151); vertex(bX+77, bY+142); vertex(bX+85, bY+164); vertex(bX+91, bY+134); vertex(bX+97, bY+163); vertex(bX+101, bY+145); vertex(bX+109, bY+160); vertex(bX+116, bY+132); vertex(bX+120, bY+156); vertex(bX+128, bY+136); vertex(bX+135, bY+155); vertex(bX+138, bY+139); vertex(bX+145, bY+156); vertex(bX+149, bY+138); vertex(bX+160, bY+159); vertex(bX+162, bY+143); vertex(bX+168, bY+165); vertex(bX+174, bY+141); vertex(bX+181, bY+168); vertex(bX+186, bY+137); vertex(bX+191, bY+170); vertex(bX+195, bY+146); vertex(bX+199, bY+171); vertex(bX+202, bY+142); vertex(bX+206, bY+170); vertex(bX+211, bY+143); vertex(bX+216, bY+171); vertex(bX+348, bY+221); vertex(bX+400, bY+232); vertex(bX+400, bY+260); vertex(bX, bY+260); vertex(bX, bY+232); vertex(bX, bY+156); endShape(); }; var distForest2 = function(bX2, bY2, col2) { //variation on distForest1 fill(col2); beginShape(); vertex(bX2, bY2+148); vertex(bX2+8, bY2+126); vertex(bX2+14, bY2+152); vertex(bX2+20, bY2+130); vertex(bX2+28, bY2+160); vertex(bX2+36, bY2+134); vertex(bX2+41, bY2+150); vertex(bX2+49, bY2+131); vertex(bX2+58, bY2+166); vertex(bX2+67, bY2+138); vertex(bX2+72, bY2+164); vertex(bX2+80, bY2+142); vertex(bX2+88, bY2+165); vertex(bX2+94, bY2+136); vertex(bX2+103, bY2+169); vertex(bX2+108, bY2+146); vertex(bX2+113, bY2+164); vertex(bX2+120, bY2+140); vertex(bX2+129, bY2+168); vertex(bX2+133, bY2+148); vertex(bX2+142, bY2+171); vertex(bX2+148, bY2+144); vertex(bX2+156, bY2+171); vertex(bX2+161, bY2+155); vertex(bX2+169, bY2+177); vertex(bX2+173, bY2+163); vertex(bX2+181, bY2+185); vertex(bX2+187, bY2+165); vertex(bX2+195, bY2+190); vertex(bX2+200, bY2+166); vertex(bX2+208, bY2+193); vertex(bX2+210, bY2+176); vertex(bX2+218, bY2+195); vertex(bX2+338, bY2+230); vertex(bX2+400, bY2+230); vertex(bX2+400, bY2+260); vertex(bX2, bY2+260); vertex(bX2, bY2+148); endShape(); //mechaTrilobite-2018 }; distForest1(0,0,color(156,120,48)); distForest1(-2 ,2, color(51, 102, 0)); distForest2(0, 0, color(33, 74, 30, 200)); distForest2(-1, 17, color(25, 47, 38, 128)); distForest2(-6, 25, color(25, 47, 38, 128)); //pine trees var pineBase = function(x, y, w, h, col) { //basic outline for pine trees; position, width, height, and color are adjustable noStroke(); fill(col); beginShape(); vertex(x, y); bezierVertex(x-0.44w, y+0.02h, x-0.53w, y-0.13h, x-0.47w, y-0.26h); //mechaTrilobite2018Jun vertex(x-0.38w, y-0.2h); bezierVertex(x-0.47w, y-0.27h, x-0.44w, y-0.33h, x-0.41w, y-0.40h); vertex(x-0.31w, y-0.34h); bezierVertex(x-0.38w, y-0.45h, x-0.38w, y-0.5h, x-0.28w, y-0.58h); vertex(x-0.25w, y-0.52h); bezierVertex(x-0.22w, y-0.6h, x-0.19w, y-0.65h, x-0.16w, y-0.72h); vertex(x-0.09w, y-0.66h); bezierVertex(x-0.09w, y-0.73h, x-0.09w, y-0.8h, x-0.03w, y-0.88h); vertex(x, y-0.82h); bezierVertex(x+0.06w, y-0.88h, x+0.09w, y-0.94h, x+0.09w, y-h); bezierVertex(x+0.16w, y-0.93h, x+0.13w, y-0.9h, x+0.16w, y-0.78h); vertex(x+0.22w, y-0.82h); bezierVertex(x+0.25w, y-0.76h, x+0.28w, y-0.73h, x+0.28w, y-0.67h); vertex(x+0.31w, y-0.73h); bezierVertex(x+0.38w, y-0.64h, x+0.41w, y-0.56h, x+0.38w, y-0.48h); vertex(x+0.47w, y-0.51h); bezierVertex(x+0.44w, y-0.45h, x+0.47w, y-0.4h, x+0.41w, y-0.34h); vertex(x+0.5w, y-0.39h); bezierVertex(x+0.47w, y-0.24h, x+0.63w, y+0.02h, x, y); endShape(); }; var pineDraw = function(x, y, w, h, col) { //draws shaded pine trees. pineBase units in different colors, transparencies, and sizes are used for shading. The color of the bottom-most pineBase unit can be changed to create a slightly different look for each tree. pineBase(x, y, w, h, col); pineBase(x, y-0.05h, w0.81, h0.84, color(58,116,0,100)); pineBase(x+0.03w, y+0.01h, w0.69, h0.72, color(51,102,0)); pineBase(x+0.16w, y-0.01h, w0.63, h0.64, color(102,153,0,100)); pineBase(x+0.16w, y, w0.34, h0.43, color(102,153,0)); pineBase(x-0.25w, y-0.18h, w0.16, h0.33, color(36,57,15,100)); pineBase(x-0.25w, y-0.02h, w0.16, h0.33, color(21,33,9,100)); pineBase(x-0.16w, y-0.01h, w0.16, h0.33, color(21,33,9,100)); pineBase(x-0.03w, y,w0.16, h0.33, color(21,33,9,100)); pineBase(x-0.34w, y-0.06h, w0.16, h0.33, color(21,33,9,100)); pineBase(x+0.31w, y-0.03h, w0.16, h0.33, color(21,33,9,100)); pineBase(x+0.19w, y,w0.16, h0.33, color(21,33,9,100)); pineBase(x+0.13w, y+0.01h, w0.22, h0.7, color(21,33,9,100)); pineBase(x-0.03w, y+0.01h, w0.22, h0.59, color(21,33,9,100)); pineBase(x-0.16w, y, w0.16, h0.58, color(21,33,9,100)); fill(21, 33, 9, 150); //dark strip at the base beginShape(); vertex(x-0.47w, y-0.11h); bezierVertex(x-0.25w, y+0.01h, x+0.16w, y+0.02h, x+0.41w, y-0.06h); bezierVertex(x+0.31w, y+0.03h, x-0.38w, y+0.07h, x-0.47w, y-0.11h); endShape(); }; var pineDrawInverse = function(x, y, w, h, col) { //flipped version of pineDraw, with the shading changed accordingly pineBase(x, y, w, h, col); pineBase(x,y-0.05h, w0.81, h0.84, color(58,116,0,100)); pineBase(x-0.03w, y+0.01h, w0.69, h0.72, color(51,102,0)); pineBase(x-0.16w, y-0.01h, w0.63, h0.64, color(102,153,0,100)); pineBase(x-0.16w, y, w0.34, h0.43, color(102,153,0)); pineBase(x+0.25w, y-0.18h, w0.16, h0.33, color(36,57,15,100)); pineBase(x+0.25w, y-0.02h, w0.16, h0.33, color(21,33,9,100)); pineBase(x+0.16w, y-0.01h, w0.16, h0.33, color(21,33,9,100)); pineBase(x+0.03w, y, w0.16, h0.33, color(21,33,9,100)); //mechaTrilobite-2O18 pineBase(x+0.34w, y-0.06h, w0.16, h0.33, color(21,33,9,100)); pineBase(x-0.31w, y-0.03h, w0.16,h0.33, color(21,33,9,100)); pineBase(x-0.19w, y, w0.16, h0.33, color(21,33,9,100)); pineBase(x-0.13w, y+0.01h, w0.22, h0.7, color(21,33,9,100)); pineBase(x+0.03w, y+0.01h, w0.22, h0.59, color(21,33,9,100)); pineBase(x+0.16w, y, w0.16, h0.58, color(21,33,9,100)); fill(21, 33, 9, 150); beginShape(); vertex(x-0.47w, y-0.11h); bezierVertex(x-0.25w, y+0.01h, x+0.16w, y+0.02h, x+0.41w, y-0.06h); bezierVertex(x+0.31w, y+0.03h, x-0.38w, y+0.07h, x-0.47w, y-0.11h); endShape(); }; pineBase(10, 240, 32, 88, color(26, 36, 20)); pineBase(38, 240, 28, 80, color(26, 36, 20)); pineBase(25, 242, 32, 100,color(30, 41, 23)); pineBase(375, 250, 25, 78,color(34, 56, 46)); pineBase(355, 250, -28, 88,color(30, 51, 42)); pineBase(170, 240, 32, 88,color(37, 56, 24)); pineBase(150, 240, 32, 92,color(37, 56, 24)); pineBase(135, 240, 32, 100,color(37, 56, 24)); } //temple { //temple roof (base shape) fill(75, 61, 47); beginShape(); vertex(25, 210); vertex(58, 178); vertex(97, 133); bezierVertex(100, 130, 108, 130, 111, 133); vertex(150, 178); vertex(183, 210); vertex(25, 210); endShape(); //temple walls fill(255, 255, 235); quad(34, 223, 174, 223, 174, 210, 34, 210); fill(50, 25, 0); quad(34, 222, 174, 222, 174, 248, 34, 248); stroke(72, 41, 10); for(var t2=34; t2<174; t2+=3) { //draws a series of vertical, medium brown lines line(t2, 222, t2, 247); } stroke(50, 25, 0); for(var t3=224; t3<248; t3+=7) { //draws a series of horizontal, dark brown lines line(34,t3,174,t3); { //mechatri1obite-2018 } } fill(69, 56, 43); for (var t4=34; t4<174; t4+=35) { //draws vertical posts and shadows noStroke(); rect(t4, 210, 4, 38); stroke(0, 0, 0, 80); strokeWeight(2); line(t4+4, 210, t4+4, 247); } noStroke(); rect(34, 222, 140, 4); //horizontal beam fill(20, 20, 20, 200); //roof shadows rect(34 ,210, 140, 5); //thatched roof var thCol1 = color(105, 86, 67, 180); //colors for gradient var thCol2 = color(162, 136, 110, 180); var thY = 126; //y-position of each line of thatch for(var thMax=1; thMax<25; thMax+=1) { //thMax progressively increases the maximum number of iterations for the nested loop below, in order to create a right triangle for(var thX=1; thX<thMax; thX+=1) { var endAngle; //varies the angle of the arcs for a more natural look if (thX%3 === 1 \| thY%4 === 1) { endAngle = 15; } else if (thX%5 === 1 \| thY%3 === 1) { endAngle = 45; } else { endAngle = 30; } //changes color gradually from dark to light var thColVar = lerpColor(thCol1, thCol2, thX/(thMax+10)); fill(thColVar); //draws two arcs to create an isosceles triangle arc(104-thX3.4, thY, 6, 12, 0-endAngle, 90+endAngle); arc(103+thX3.4, thY, 6, 12, 90-endAngle, 180+endAngle); } thY+=3.5; //shifts the row position down at the end of each thMax loop } fill(75, 61, 47, 70); //roof shading quad(26, 208, 55, 181, 153, 181, 183, 208); triangle(24, 208, 33, 211, 100, 133); triangle(185, 208, 174, 211, 113, 138); fill(162, 136, 110, 120); quad(94, 143, 104, 130, 114, 143, 104, 134); //roof detail strokeWeight(1); //triangular panel stroke(99, 72, 65); fill(62, 31, 0); triangle(66, 180, 104, 136, 142, 180); noStroke(); fill(103, 53, 39); triangle(71, 178, 104, 140, 137, 178); fill(81, 42, 31); triangle(75, 176, 104, 143, 133, 176); fill(62, 31, 0); quad(93, 156, 104, 143, 115, 156, 104, 150); fill(255, 255, 235); //white decorations quad(83, 167, 89, 160, 90, 160, 90, 167); quad(125, 167, 119, 160, 118, 160, 118, 167); quad(93, 160, 115, 160, 115, 167, 93, 167); for (var t1=0; t1<4; t1+=1){ //draws repeating bell-shaped element arc(83+14t1, 174, 12, 4, 180, 360); arc(83+14t1, 173, 8, 6, 180, 360); if (t1===1\|t1===2){ //draws two rows in the middle only arc(83+14t1,160,10,4,180,360); arc(83+14t1,159,7,5,180,360); } } fill(81, 42, 31); quad(99, 160, 109, 160, 109, 166, 99, 166); quad(93, 166, 93, 164, 99, 163, 99, 166); quad(115, 166, 115, 164, 109, 163, 109, 166); fill(116, 85, 76); //apex decorative element arc(104, 143, 9, 15, 45, 135); strokeWeight(2); stroke(116, 85, 76); arc(102, 151, 3, 3, -20, 200); arc(106, 151, 3, 3, -20, 200); stroke(89, 45, 33); line(104, 143, 104, 148); noFill(); strokeWeight(1); stroke(255, 255, 235); //off-white dots and lines point(88, 170); point(91, 170); point(102, 170); point(105, 170); point(116, 170); point(119, 170); point(100, 165); point(104, 165); point(108, 165); stroke(0, 0, 0, 80); //shadows for triangular panel line(70, 177, 104, 137); line(104, 137, 140, 177); //grass and pine copse for (var gX1=62; gX1<120; gX1+=1) { //draws grass at the base of the temple var gDist = floor(random(-3,4)); //modifies the height and slant of the grass blades noFill(); strokeWeight(1); stroke(24, 48, 30); line(gX1, 250, gX1+gDist, 243+gDist); } pineDraw(161, 240, 35, 110, color(47, 51, 6)); pineDrawInverse(136, 250, -16, 61, color(38, 41, 5)); pineDraw(142, 252, 20, 60, color(38, 41, 5)); pineDraw(112, 253, 14, 42, color(47, 51, 6)); pineDrawInverse(126, 256, -20, 52, color(47, 51, 6)); pineDrawInverse(45, 254, -30, 90, color(39, 46, 30)); pineDraw(5, 254, 30, 106, color(39, 43, 40)); pineDraw(23, 261, 35, 115, color(41, 61, 21)); pineDraw(63, 253, 17, 52, color(50, 51, 33)); } //farmhouse { //main house noStroke(); fill(62, 37, 10); quad(144, 244, 182, 220, 182, 260, 144, 260); //side structures quad(378, 244, 340, 220, 340, 260, 378, 260); triangle(160,230,262,98,364,230); //main fill(204, 153, 0, 20); //vertical siding for side structures quad(149, 260, 154, 260, 154, 238, 149, 241); quad(378, 260, 373, 260, 373, 241, 378, 244); fill(131, 202, 2, 10); quad(154, 260, 159, 260, 159, 235,154, 238); quad(368, 260, 364, 260, 364, 234,368, 238); quad(364, 260, 359, 260, 359, 231, 364, 234); strokeWeight(1); //lines for siding stroke(57, 30, 1); line(149, 259, 149, 241); line(154, 259, 154, 238); line(160, 259, 160, 235); line(372, 259, 372, 241); line(369, 259, 369, 238); line(363, 259, 363, 234); fill(0, 0, 0, 50); //shadows rect(158, 234, 10, 26); rect(355, 234, 10, 26); //created by MechaTrilobite fill(70, 48, 30); //porch rect(164, 230, 196, 30); for (var h1=1; h1<22; h1+=1) { //colors horizontal siding in subtly varying colors. Inspired by Granttwin's Brick Wall project! noStroke(); if (h1%3 === 1) { fill(204, 153, 0, 20); quad(160+4.6h1, 230-6h1, 160+4.6(h1+1), 230-6(h1+1), 363-4.6(h1+1), 230-6(h1+1), 363-4.6h1, 230-6h1); } else if (h1%4 === 2) { fill(131, 202, 2, 10); quad(160+4.6h1, 230-6h1, 160+4.6(h1+1), 230-6(h1+1), 363-4.6(h1+1), 230-6(h1+1), 363-4.6h1, 230-6h1); } //mechatrilobite-2018 stroke(57, 30, 1); line(160+4.6h1,230-6h1,362-4.6h1,230-6h1); } var windows = function(x, y) { strokeWeight(1); noStroke(); fill(255, 251, 219); rect(x, y, 11, 20); for (var h2=1; h2<4; h2+=1) { //draws 4x1 window panels stroke(179, 141, 102); line(x, y+5h2, x+11, y+5h2); } stroke(64, 64, 64); //outline noFill(); rect(x, y, 11, 20); }; { //mechatrilobite2018-June-01 } windows(251, 131); windows(262, 131); windows(228, 159); windows(251, 159); windows(262, 159); windows(285, 159); windows(212, 188); windows(223, 188); windows(251, 188); windows(262, 188); windows(290, 188); windows(301, 188); noStroke(); //awnings fill(47, 33, 15); rect(237, 125, 50, 6); rect(216, 153, 92, 6); rect(193, 182, 138, 6); rect(165, 212, 193, 3); rect(160, 223, 198, 3); quad(142, 242, 165, 228, 168, 231, 145, 245); quad(380, 242, 359, 228, 356, 231, 377, 245); var h3 = 179; //railing while(h3+3 < 347) { rect(h3, 212, 3, 18); h3 += 18; } strokeWeight(1); for(var h4=0; h4<196; h4+=4) { stroke(42,35,28,60); if(h4%3 === 1) { //ensures slight color variations fill(153, 89, 53, 20); } else if(h4%6 === 2) { fill(78, 86, 128, 10); } else { noFill(); } rect(164+h4, 242, 4, 17); } //porch siding fill(43, 30, 13); //darker strip under porch roof rect(164, 242, 196, 8); stroke(75, 61, 47); //highlights for roofs of side structures line(143, 242, 165, 228); line(380, 242, 358, 228); for(var h5=0; h5<196; h5+=16) { if(h5!==16 && h5!==64) { noStroke(); //draws timber posts (leaving out two spots) fill(53, 38, 17); rect(164+h5, 242, 4, 17); } } fill(0, 0, 0, 80); rect(232, 131, 59, 6); //shading (windows) rect(211, 159, 102, 6); rect(188, 188, 147, 6); rect(165, 215, 193, 2); quad(145, 246, 168, 232, 168, 231, 145, 245); //shading (sides) quad(377, 246, 356, 232, 356, 231, 377, 245); quad(164, 243, 360, 243, 360, 247, 164, 247); //shading (porch) noFill(); stroke(252, 196, 75, 40); //highlights on awnings line(216, 153, 308, 153); line(193, 182, 331, 182); line(165, 212, 348, 212); //main roof noStroke(); fill(122, 100, 78); beginShape(); //lighter-colored strip vertex(151, 227); bezierVertex(149, 226, 148, 225, 149, 222); vertex(252, 85); bezierVertex(259, 80, 265, 80, 272, 85); vertex(375, 222); bezierVertex(376, 225, 375, 226, 373, 227); vertex(268, 90); vertex(257, 90); vertex(151, 227); endShape(); fill(47, 33, 15); beginShape(); //sides of main roof vertex(151, 227); vertex(255, 89); vertex(269, 89); vertex(373, 227); vertex(361, 231); vertex(262, 99); vertex(163, 231); vertex(151, 227); endShape(); fill(0, 0, 0, 80); beginShape(); //shadow vertex(161, 227); vertex(262, 99); vertex(361, 227); vertex(359, 231); vertex(262, 104); vertex(164, 231); vertex(152, 227); endShape(); for (var thR=1; thR<25; thR+=1) { //similar to temple roof; varies the angle of each arc var endAngle2; if (thR%3 === 1) { endAngle2 = 5; } else if (thR%5 === 1) { endAngle2 = 45; } else { endAngle2 = 30; //mechaTrilobite-2018 } fill(112, 92, 72, 200); //inner (darker) thatch arc(261-thR4.5, 82+thR5.9, 6, 12, 55+endAngle2, 300-endAngle2); arc(261+thR4.5, 82+thR5.9, 6, 12, -60-endAngle2, 65+endAngle2); fill(202, 189, 174, 100); //outer (lighter) thatch arc(254-thR4.3, 82+thR5.6, 8, 12, 0-endAngle2, 90+endAngle2); arc(268+thR4.3, 82+thR5.6, 8, 12, 90-endAngle2, 180+endAngle2); } //thatch arc(262, 87, 15, 10, 180, 360); //extra thatch for roof apex fill(112, 92, 72, 200); arc(262, 89, 7, 15, 100, 270); arc(266, 91, 5, 12, 80, 270); //porch roof fill(75, 61, 47); quad(164, 230, 360, 230, 362, 240, 162, 240); fill(59, 40, 25); quad(161, 244, 363, 244, 363, 240, 161, 240); //ground fill(28, 55, 35); rect(0, 260, 400, 10); //trees pineDrawInverse(382, 261, -17, 55, color(27, 38, 34)); pineDraw(396, 266, 32, 120, color(36, 51, 46)); } //reflection { var houseReflect = get(0, 0, 400, 260); //captures as an image pushMatrix(); translate(0, 260); scale(1, -1); //reflects the image image(houseReflect, -1, 1, 400, -201); filter(BLUR, 1); popMatrix(); image(houseReflect, 0, 0); //blur affects the whole canvas, so this line 'pastes' the original sharp image on top noStroke(); fill(0, 0, 0, 60); //tints the water slightly rect(0, 270, 400, 130); } //rice field { //grass field around the paddy fill(126, 160, 18); beginShape(); vertex(0, 311); vertex(0, 270); vertex(400, 270); vertex(400, 396); vertex(261, 290); vertex(18, 290); vertex(0, 311); endShape(); //grass for (var grY=0; grY<25; grY+=1) { //same as thMax above; draws elements in a right triangle shape for (var grX=0; grX<grY; grX+=1) { //adds some speckling to the bottom right; colors are restricted to medium green and yellow colR = floor(random(80, 200)); colG = floor(random(128, 220)); colB = floor(random(50, 120)); hlDist = random(1.7, 3.5); //randomizes distance between speckles fill(colR, colG, colB, 100); ellipse(399-(hlDist+0.06grY)grX, 389-1.3hlDistgrY, 2, 3); } } for (var gX2=143; gX2<385; gX2+=1) { //draws grass just under the farmhouse gDist = floor(random(-3, 4)); noFill(); strokeWeight(1); stroke(24, 48, 30); line(gX2, 265, gX2+gDist, 258+gDist); //mechatrilobite-2018 } for (var gX3=0; gX3<401; gX3+=1) { //first of three grass layers to transition between the dark green and light green ground at x = 270. gDist = floor(random(-3, 4)); noFill(); strokeWeight(1); stroke(34, 77, 27); line(gX3, 272, gX3+gDist, 262+gDist); } for (var gX4=0; gX4<401; gX4+=1) { //second grass layer gDist = random(-2, 3); stroke(126, 160, 18, 100); line(gX4, 274, gX4+gDist, 267+gDist); } for (var gX5=0; gX5<401; gX5+=2) { //third grass layer gDist = random(-2, 3); stroke(138, 166, 35); line(gX5, 278, gX5+gDist, 269+gDist); } //paddy edges for (var gpX1=1; gpX1<29; gpX1+=2) { var gpDist = random(-1, 1); //if we imagine the line of grass to follow the hypotenuse of a right triangle, with width 18 pixels and height 21 pixels, the hypotenuse is about 28 pixels long. 18/28 simplifies to 9/14, and 21/28 simplifies to 3/4. stroke(100, 126, 32); line(18-(9/14)gpX1, 290+(3/4)gpX1, 18-(9/14)gpX1+gpDist, 281+(3/4)gpX1+gpDist); stroke(52, 54, 43,200); //reflection in the water line(18-(9/14)gpX1, 290+(3/4)gpX1, 18-(9/14)gpX1+gpDist, 299+(3/4)gpX1-gpDist); } //left for (var gpX2=17; gpX2<262; gpX2+=0.8) { gpDist = random(-2, 2); stroke(100, 126, 32); line(gpX2, 291, gpX2+gpDist, 285+gpDist); stroke(52, 54, 43, 200); //reflection in the water line(gpX2, 291, gpX2+gpDist, 299-gpDist); } //center for (var gpX3=1; gpX3<176; gpX3+=2) { gpDist = random(-2, 2); //this time, the grass line forms the hypotenuse of a right triangle with sides 106 and 139 pixels, so the hypotenuse has a length of about 175 pixels. stroke(100, 126, 32); line(261+(139/175)gpX3, 290+(106/175)gpX3, 261+(139/175)gpX3+gpDist, 281+(106/175)gpX3+gpDist); stroke(52, 54, 43, 200); //reflection in the water line(261+(139/175)gpX3, 290+(106/175)gpX3, 261+(139/175)gpX3+gpDist, 299+(106/175)gpX3-gpDist); } //right var rice1 = function(x, y, inv) { //rice style 1; inv allows the image to be inverted for the water reflection noFill(); line(x, y, x-2, y-7inv); //bottom piece of a bent leaf blade line(x-2, y-7inv, x-5, y-5inv); //top piece line(x, y, x-1, y-12inv); line(x, y, x, y-16inv); line(x, y, x+1, y-8inv); line(x, y-8, x+2, y-13inv); line(x, y, x+2, y-10inv); line(x+2, y-10inv, x+3,y-6inv); line(x, y, x+2, y-6inv); }; //rice plants var rice2 = function(x, y, inv) { noFill(); //rice style 2 line(x, y, x-2, y-3inv); line(x-2, y-3inv, x-3, y-1inv); line(x, y, x-2, y-6inv); line(x, y, x-2, y-11inv); line(x, y, x, y-15inv); //Mechatrilobite-2018 line(x, y, x+1, y-13inv); line(x, y, x+2, y-12inv); line(x, y, x+3, y-6inv); line(x, y, x+3, y-3inv); line(x+3, y-3inv, x+4, y-2inv); }; var rice3 = function(x, y, inv) { noFill(); //rice style 3 line(x, y, x-2, y-3inv); line(x, y, x-2, y-6inv); line(x-2, y-6inv, x-4, y-6inv); line(x, y, x-1, y-7inv); line(x-1, y-7inv, x, y-13inv); line(x, y, x, y-15inv); line(x, y, x+2, y-10inv); line(x+2, y-10inv, x+3, y-7inv); line(x, y, x+2, y-6inv); line(x+2, y-6inv, x+3, y-3inv); }; var drawRice = function(x, y) { //randomly selects a rice plant style var selectRice = floor(random(1, 4)); if (selectRice === 1) { stroke(83, 130, 53); //main plant rice1(x, y, 1); stroke(35, 43, 31, 200); //reflection rice1(x, y+1, -1); } else if (selectRice === 2) { stroke(83, 130, 53); rice3(x, y, 1); stroke(35, 43, 31, 200); rice2(x, y+1, -1); } else { stroke(83, 130, 53); rice3(x, y, 1); stroke(35, 43, 31, 200); rice3(x, y+1,-1); //mechatrilobite-2018 } }; //randomizer for(var rfGap=0; rfGap<40; rfGap+=6) { for(var rfRow=0; rfRow<5; rfRow+=1){ //sets out rice plants in a trapezoid shape if(rfRow === 0){ drawRice(138+(24+rfGap)rfRow, 300+3.5rfGap); //draws only one column of plants in the center } else { //mirrors left and right columns around the center line drawRice(138+(24+rfGap)rfRow, 300+3.5rfGap); drawRice(138-(24+rfGap)rfRow, 300+3.5rfGap); } } } //rice rows } /default code background(219, 255, 255); fill(174, 180, 214); triangle(200, 28, 350, 150, 50, 150); fill(255, 255, 255); rect(60, 150, 280, 207); fill(120, 80, 19); rect(180, 280, 40, 77);/
Folds	9,341,344,495,498,694,697,709,712,866
Fork	true
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOLGhciUCAw
Votes	320
Spin-Offs	5
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"5322961523310592","title":"Project: Build-a-House","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	mechatrilobite
Author Name	mechatrilobite
Author ID	kaid_311370091145325053980717
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739364369820
Updated	8 months ago, 1744828948450
Source Deleted	unknown