var topSw1=14;//for house roof, x axis
var topSw2=5;//for house's left wall, x axis
var topSw3=23;//for house's right wall, x axis
var topSw=30;//for houseRoof's weight
var topSh1=0;//for house roof, y axis
var topSh2=5;//for house's left and right wall, y axis
var topSh=25;//for houseRoof's height
var numofRow1=15;//for defining numbers of loop
var numofCol1=20;
var locFx=14;//for flower's x axis
var locFy=20;//for flower's y axis
var locYc=30;//flower's height in between
var locXc=1.25;//flower's weight
var flowerW=11;//flower's petal's size
function setup() {
createCanvas(480, 455);
}
function draw() {
scale(1.3);
background(255);
var r1=230;
var b1=138;
var g1=92;
for (var row1=0; row1<numofRow1;row1++){
for (var col1=0; col1<numofCol1;col1++){
noStroke();
r1=r1+0.2;//for gradiant color
b1=b1+0.3;
g1=g1+0.3;
fill(r1,b1,g1);
if (row1%2!=0){//for setting the condition
topSw1=30;//shifting between rows constantly
}else{
topSw1=15;
}
var x1=topSw1+col1*topSw;
var y1=topSh1+row1*topSh-10;//based on calculation for eight points
var x2=topSw1+col1*topSw+15;
var y2=topSh1+row1*topSh;
var x3=topSw1+col1*topSw;
var y3=topSh1+row1*topSh+10;
var x4=topSw1+col1*topSw-15;
var y4=topSh1+row1*topSh;
quad(x1,y1,x2,y2,x3,y3,x4,y4)
}
}
var r2=225;//color variable for the walls
var b2=205;
var g2=203;
var r3=240;
var b3=240;
var g3=240;
for (var row2=0; row2<numofRow1;row2++){
for (var col2=0; col2<numofCol1;col2++){
noStroke();
r2=r2+0.2;//changing varaibles for the color
b2=b2+0.1;
g2=g2+0.1;
fill(r2,b2,g2);
if (row2%2!=0){//for changing positions
topSw2=20.5;
topSw3=39;
}else{
topSw2=5;
topSh2=5;
topSw3=23;
}
var x11=topSw2+col2*topSw-5;//for setting up the eight points
var y11=topSh2+row2*topSh-5;
var x21=topSw2+col2*topSw+10;
var y21=topSh2+row2*topSh+5;
var x31=topSw2+col2*topSw+10;
var y31=topSh2+row2*topSh+20;
var x41=topSw2+col2*topSw-5;
var y41=topSh2+row2*topSh+10;
quad(x11,y11,x21,y21,x31,y31,x41,y41);
r3=r3-0.2;//for the second side wall
b3=b3-0.1;
g3=g3-0.1;
fill(r3,b3,g3);
var x12=topSw3+col2*topSw-9;//for setting up the eight points
var y12=topSh2+row2*topSh+4;
var x22=topSw3+col2*topSw+7;
var y22=topSh2+row2*topSh-6;
var x32=topSw3+col2*topSw+11;
var y32=topSh2+row2*topSh+8;
var x42=topSw3+col2*topSw-8;
var y42=topSh2+row2*topSh+20;
if (col2==numofCol1-1){
x32=topSw3+col2*topSw+7;
y32=topSh2+row2*topSh+10;
}
quad(x12,y12,x22,y22,x32,y32,x42,y42);
}
}
var r4=187;
var g4=116;
var b4=52;
//green flower, flower roots, and door
for (var row3=0; row3<numofRow1;row3++){
for (var col3=0; col3<numofCol1;col3++){
noStroke();
fill(96,185,165);
if (row3%2!=0){
locFx=26;
}else{
locFx=10;
}
var e1=locFx+locYc*col3;
var e2=locFy*locXc*row3;
angleMode(DEGREES);//change radians to degree
arc(e1, e2, flowerW, flowerW, -50, 10, PIE);
arc(e1, e2, flowerW, flowerW, 35, 90, PIE);
arc(e1, e2, flowerW, flowerW, 110, 155, PIE);
arc(e1, e2, flowerW, flowerW, 175, 220, PIE);
strokeWeight(1);
stroke(87,148,83);
noFill();
curve(e1+30,e2+35,e1, e2, e1+7, e2, e1+15, e2+20);//the flower roots
noStroke();
//door and door handle
r4+=0.2;
g4+=0.2;
b4+=0.2;
fill(r4,g4,b4);
if (row3%2!=0){
topSw2=20.5;
topSw3=39;
}else{
topSw2=5;
topSh2=5;
topSw3=23;
}
var x1=topSw2+col3*topSw;
var y1=topSh2+row3*topSh+4;
var x2=topSw2+col3*topSw+5;
var y2=topSh2+row3*topSh+8;
var x3=topSw2+col3*topSw+5;
var y3=topSh2+row3*topSh+18;
var x4=topSw2+col3*topSw-1;
var y4=topSh2+row3*topSh+13;
quad(x1,y1,x2,y2,x3,y3,x4,y4);
fill(255);
ellipse(x1+3,y1+8,3,3);
}
}
}
For this project, my inspiration came from the two-dimensional way of expressing three-dimensional object. The whole pattern is meant to be a set of houses with a plant living on top of it. The only problem I met was that I ignored the dimension I suppose to use for the project and used a much larger dimension. The actual pattern I created is larger than what I have now. Overall, I am happy about learning for loop, it makes my concept to another level.