function setup() {
createCanvas(600, 600);
strokeWeight(0.5);
}
function draw() {
background(247, 140, 142);
//center banana line starting left
for (i = 0; i < 13; i += 1) {
var startX = 25;
var startY = 25;
var bananaX = (startX * i * 2);
var bananaY = (startY * i * 2);
banana(bananaX, bananaY);
banana2(bananaX, bananaY);
}
//banana line below center line, starting left
for (i = 0; i < 7; i += 1) {
var startX3 = 25;
var startY3 = 25;
var bananaX3 = startX3 * i * 2;
var bananaY3 = (startY3 * i * 2) + 200;
banana(bananaX3, bananaY3);
banana2(bananaX3, bananaY3);
}
//2nd banana line below center line, starting left
for (i = 0; i < 5; i += 1) {
var startX4 = 25;
var startY4 = 25;
var bananaX4 = startX4 * i * 2;
var bananaY4 = (startY4 * i * 2) + 400;
banana(bananaX4, bananaY4);
banana2(bananaX4, bananaY4);
}
//banana line above center line, starting left
for (i = 0; i < 7; i += 1) {
var startX5 = 25;
var startY5 = 25;
var bananaX5 = (startX5 * i * 2) + 200;
var bananaY5 = (startY5 * i * 2);
banana(bananaX5, bananaY5);
banana2(bananaX5, bananaY5);
}
//2nd banana line above center line, starting left
for (i = 0; i < 3; i += 1) {
var startX6 = 25;
var startY6 = 25;
var bananaX6 = (startX6 * i * 2) + 400;
var bananaY6 = (startY6 * i * 2);
banana(bananaX6, bananaY6);
banana2(bananaX6, bananaY6);
}
//center banana line starting right
for (i = 0; i < 12; i += 1) {
var startX2 = width - 100;
var startY2 = 25;
var bananaX2 = startX2 - (i * 25 * 2);
var bananaY2 = startY2 * i * 2;
banana(bananaX2, bananaY2);
banana2(bananaX2, bananaY2);
}
//banana line below center line, starting right
for (i = 0; i < 9; i += 1) {
var startX7 = width - 100;
var startY7 = 25;
var bananaX7 = (startX7 - (i * 25 * 2)) + 100;
var bananaY7 = (startY7 * i * 2) + 100;
banana(bananaX7, bananaY7);
banana2(bananaX7, bananaY7);
}
//2nd banana line below center line, starting right
for (i = 0; i < 9; i += 1) {
var startX8 = width - 100;
var startY8 = 25;
var bananaX8 = (startX8 - (i * 25 * 2)) + 200;
var bananaY8 = (startY8 * i * 2) + 200;
banana(bananaX8, bananaY8);
banana2(bananaX8, bananaY8);
}
//banana line above center line, starting right
for (i = 0; i < 11; i += 1) {
var startX9 = width - 100;
var startY9 = 25;
var bananaX9 = (startX9 - (i * 25 * 2)) - 100;
var bananaY9 = (startY9 * i * 2) - 100;
banana(bananaX9, bananaY9);
banana2(bananaX9, bananaY9);
}
//2nd banana line above center line, starting right
for (i = 0; i < 11; i += 1) {
var startXa = width - 100;
var startYa = 25;
var bananaXa = (startXa - (i * 25 * 2)) - 300;
var bananaYa = (startYa * i * 2) - 100;
banana(bananaXa, bananaYa);
banana2(bananaXa, bananaYa);
}
//kiwi loop
for (x = 0; x < 7; x += 1) {
for (y = 0; y < 8; y += 1) {
var indent = 0;
if (y % 2 === 0) {
indent = 100;
} else {
indent = 0;
}
kiwi((x * 200) + indent, y * 100);
}
}
//additional bananas
banana(-50, -50);
banana2(-50, -50);
banana(width - 50, -50);
banana2(width - 50, -50);
}
//banana part 1
function banana(x, y) {
strokeWeight(0.5);
push();
translate(x, y);
beginShape();
fill(247, 190, 0);
strokeWeight(.5);
vertex(30, 20);
bezierVertex(80, 20, 80, 75, 30, 75); //outer curve
bezierVertex(50, 80, 60, 25, 30, 20); //inner curve
endShape();
fill(99, 66, 29);
ellipse(30, 20, 10, 10); //banana tip
noFill();
strokeWeight(1);
stroke(99, 66, 29);
bezier(30, 20, 70, 25, 70, 65, 36, 75);//banana line
pop();
}
//banana part 2
function banana2(x, y) {
push();
translate(x, y);
beginShape();
fill(235, 150, 70);
vertex(30, 20);
bezierVertex(80, 20, 80, 75, 30, 75); //outer curve
bezierVertex(70, 70, 70, 25, 30, 20); //inner curve
endShape();
pop();
}
//kiwi
function kiwi(x, y) {
push();
translate(x, y);
fill(124, 83, 36);
bezier(101 - 100, 25 - 39.5, 71 - 100, 25 - 39.5, 71 - 100, 60 - 39.5, 101 - 100, 54.5 - 39.5); //brown
fill(120, 210, 0);
ellipse(0, 0, 26.5, 29.5); //green
fill(0);
ellipse(0, 0, 17, 14); // black
fill(255, 228, 148);
ellipse(1, 0, 15, 10); //beige
pop();
}
I really enjoyed doing this project because of the simple premise, but how rewarding it was to see the iteration of a simple design. I experimented more than I had in the past with making shapes look three dimensional (using different colors to indicate shadow for the bananas, using bezier to make the partial profile of the kiwi). I also enjoyed finding the colors that matched what I was seeing in my head. I was glad to have had a basic understanding of how modulus works in creating this project.
]]>
var tw=17;
var th=25;
function setup() {
createCanvas(600, 300);
background(218,235,209);
}
function draw() {
//background
for (var z=5; z<600; z=z+25){
for(var b=2; b< 300; b= b+20){
ellipse(z,b,0.1,0.1);
}
}
for (var x=1; x<7; x++){
for (var y=1; y<5; y++){
//pot
if (x%2===1){
fill(234,186,195);
}
else {
fill(166,203,221);
}
stroke(0);
strokeWeight(0.5);
rect(x*tw*5,y*th*2.5,20,23);
line(x*tw*5,y*th*2.5+5,x*tw*5+20,y*th*2.5+5);
//plant
fill(61,133,50);
//middle part
beginShape();
curveVertex(x*tw*5+5,y*th*2.5);
curveVertex(x*tw*5+5,y*th*2.5);
curveVertex(x*tw*5+5,y*th*2.5-9);
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+15,y*th*2.5-9);
curveVertex(x*tw*5+15,y*th*2.5);
curveVertex(x*tw*5+15,y*th*2.5);
endShape();
//left part
beginShape();
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-20);
curveVertex(x*tw*5+7,y*th*2.5-25);
curveVertex(x*tw*5,y*th*2.5-27);
curveVertex(x*tw*5-5,y*th*2.5-20);
curveVertex(x*tw*5,y*th*2.5-15);
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-13);
endShape();
//right part
beginShape();
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-20);
curveVertex(x*tw*5+7,y*th*2.5-25);
curveVertex(x*tw*5,y*th*2.5-27);
curveVertex(x*tw*5-7,y*th*2.5-25);
curveVertex(x*tw*5-5,y*th*2.5-20);
curveVertex(x*tw*5,y*th*2.5-15);
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-13);
endShape();
beginShape();
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+15,y*th*2.5-15);
curveVertex(x*tw*5+20,y*th*2.5-25);
curveVertex(x*tw*5+22,y*th*2.5-30);
curveVertex(x*tw*5+13,y*th*2.5-28);
curveVertex(x*tw*5+10,y*th*2.5-13);
curveVertex(x*tw*5+10,y*th*2.5-13);
endShape();
// dots
noFill();
strokeWeight(1);
ellipse(x*tw*5,y*th*2.5-25,1,1);
ellipse(x*tw*5-2,y*th*2.5-20,1,1);
ellipse(x*tw*5+5,y*th*2.5-17,1,1);
ellipse(x*tw*5+10,y*th*2.5-9,1,1);
ellipse(x*tw*5+7,y*th*2.5-3,1,1);
ellipse(x*tw*5+15,y*th*2.5-7,1,1);
ellipse(x*tw*5+15,y*th*2.5-20,1,1);
ellipse(x*tw*5+20,y*th*2.5-27,1,1);
}
}
noLoop();
}
I created this wallpaper choosing my favorite plant cactus. I first sketched out the cactus I want to draw. After I finished the code for the plants, I decided to add dots to the background and switching the color for the pots to make it a little more interesting.
]]>function setup() {
createCanvas(600, 400);
background(128, 128, 128);
var tw = 60;
var th = 60;
var oy = 25;
var ox = 5;
for (var y = 0; y < 6; y++) {
for (var x = 0; x < 10; x++) {
var py = oy + y * th;
var px = ox + x * tw;
strokeWeight(0);
fill(200, 190, 100)
rect(px, py, 50, 50);
strokeWeight(2);
stroke(255);
line(px, py + 15, px + 80, py + 15);
strokeWeight(4);
stroke(65, 105, 225);
line(px + 35, py, px + 35, py + 80)
noStroke()
fill(128, 0, 0);
ellipse(px + 50, py + 50, 10, 10);
}
}
noLoop();
}
function draw() {
// draw is not called due to noLoop() in setup()
}I was inspired by the famous Burberry Pattern with the rectangle and lines that going both in vertical and horizontal direction.
]]>
function setup() {
createCanvas(500, 500);
}
function draw() {
background(245,245,220);
noStroke()
//The repreating circles
for (var x = 0; x < 10; x++) {
for (var y = 0; y < 10; y++) {
fill(178,34,34);
ellipse(50*x + 25, 50*y + 40, 10, 10);
}
}
//The first set of vertical shapes
for (var a = 0; a < 5; a++) {
for (var b = 0; b < 7; b++) {
fill(0,0,139);
rect(a*100, b*60, 5, 200)
}
}
//The second set of vertical shapes
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 10; j++) {
fill(210,180,140)
rect(i*100+45, j*50, 20, 200)
}
}
//The first set of horizontal shapes
for (var m = 0; m < 5; m++) {
for (var n = 0; n < 15; n++) {
fill(240,230,140)
rect(m*120, n*50, 300, 3)
}
}
//The second set of horizontal shapes
for (var p = 0; p < 5; p++) {
for (var q = 0; q < 15; q++) {
fill(255)
rect(p*120, q*50+20, 300, 12)
}
}
}Speaking of something that I would wear everyday, plaid pattern is one of my favorites. In this project, I played with simple geometries and designed this multicolored plaid pattern. And I added circle shapes to contrast with the rectangles to increase the visual balance.
]]>function setup() {
createCanvas(600, 600);
background(169, 209, 226);
}
function draw() {
// milk boxes
var xPosition = 0;
var yPosition = 0;
translate(0, -50);
fill(255);
for (var y = 1; y < 12; y++) {
for (var x = 0; x < 10; x++) {
if (y % 2 == 0) {
var spaceX = 90;
var spaceY = 60;
//milk face
quad(xPosition + spaceX * x, yPosition + spaceY * y,
xPosition + 50 + spaceX * x, yPosition + spaceY * y,
xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y,
xPosition + spaceX * x, yPosition + 70 + spaceY * y);
//milk side
quad(xPosition + 50 + spaceX * x, yPosition + spaceY * y,
xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y,
xPosition + 50 + 15 + spaceX * x, yPosition + 58 + spaceY * y,
xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y);
//milk middle
quad(xPosition + spaceX * x, yPosition + spaceY * y,
xPosition + 50 + spaceX * x, yPosition + spaceY * y,
xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y,
xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y);
//milk top
quad(xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y,
xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y,
xPosition + 50 + 7 + spaceX * x, yPosition - 22 - 3 + spaceY * y,
xPosition + 10 + spaceX * x, yPosition - 22 - 3 + spaceY * y)
//milk triangle
triangle(xPosition + 50 + spaceX * x, yPosition + spaceY * y,
xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y,
xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y);
//box crease
line(xPosition + 50 + 6 + spaceX * x, yPosition - 22 + spaceY * y,
xPosition + 50 + 7 + spaceX * x, yPosition - 7 + spaceY * y)
//milk eyes
push();
fill(0);
ellipse(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
ellipse(xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
curve(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20,
xPosition + 20 + spaceX * x, yPosition + spaceY * y + 20 + 6,
xPosition + 32 + spaceX * x - 2, yPosition + spaceY * y + 20 + 6,
xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20)
pop();
} else {
var spaceX = 75;
var spaceY = 60;
//milk face
quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y,
xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
//milk side
quad(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y,
xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition + 58 + spaceY * y,
xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
//milk middle
quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y,
xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y);
//milk top
quad(xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y,
xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y,
xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y,
xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y)
//milk triangle
triangle(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y,
xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y);
//box crease
line(xPosition + 50 + 6 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y,
xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 7 + spaceY * y)
//milk eyes
};
};
};
}
For this project I wanted to create a wallpaper full of cute milk boxes with different faces, but I came across a problem trying to create the second face, so it’s not as cute. I’d still drink it.
]]>/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-05
*/
var oy = 0; // orginal y position
var ox = 0; // original x position
var tw = 50; // the width spacing
var th = 50; // the height spacing
function setup() {
createCanvas(585, 600);
background(234, 185, 83);
}
function draw() {
// for all the odd rolls and columns, we will draw flowers
//by calling the x and y position
for (var y = 0; y < 20; y++) {
for (var x = 0; x < 20; x++) {
if((x % 2 == 1) & (y % 2 == 1)){
var py = oy + y * th;
var px = ox + x * tw;
push();
flower(px, py);
pop();
}
// for all the even rolls and columns, we will draw cactus
// by changing the x and y position
if ((x % 2 == 1) & (y % 2 ==1)){
var ly = oy + y * th;
var lx = ox + x * tw;
push();
cactus(lx, ly);
pop();
}
}
}
noLoop();
}
// function that draws the flower with variables x and y
function flower (x,y) {
translate (x, y);
scale(0.5)
for (var i = 0; i < 7; i += 1) {
fill(147, 87,37, 100);
noStroke();
rectMode(CENTER);
ellipse (0, 0, 20, 100);
rotate(radians(45));
}
}
//function that draws cactus and called by variable x and y
function cactus(x, y) {
translate(x,y);
scale(0.5);
noStroke();
//the vertical stem
fill(90,87,36, 140);
ellipse(100, 100, 10, 100);
// the left rectangle bend
push()
noStroke();
translate(85,110);
rotate(radians(30))
rectMode(CORNER);
rect(0,0, 20, 8);
pop();
//the left ellipse or branch
push();
noStroke();
translate(83, 112);
rotate(radians(-50));
ellipse(0,0, 10, 30);
pop();
//the branch on the right side
push();
translate(100,100)
rotate(radians(-120));
ellipseMode(CORNER);
ellipse(0, 0, 10, 50);
pop();
}I wanted to draw minions and bananas, but it was too challenging so I ended up drawing flowers and cactus. I like how I accidentally made my flower transparent, that was cool. Then I basically used assignment B’s method to place my flowers and cactus. This project is a little bit stressful than the other ones. As you can tell I turned this in 5 minutes before it is due.
]]>/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-05 */
function setup() {
createCanvas(600, 600);
background(213, 233, 233);
noLoop();
}
function draw() {
var potatoOX = 70; // original x point of potato
var potatoOY = 80; // original y point of potato
var potatoW = 80; // width of potato
var potatoH = 100; // height of potato
var tw = 90;
var th = 110;
for (var y = 0; y < 5; y++) {
for (var x = 0; x < 6; x++) {
//POTATO
var potatoX = potatoOX + x * tw; // x position of following potatoes
var potatoY = potatoOY + y * th; // y position of following potatoes
//body
strokeWeight(1);
stroke(109, 90, 61);
fill(231, 193, 144);
ellipse(potatoX, potatoY, potatoW, potatoH);
//eyes
strokeWeight(4);
point(potatoX - 25, potatoY - 7);
point(potatoX + 2, potatoY - 7);
//right arm
strokeWeight(1);
beginShape();
curveVertex(potatoX + 2, potatoY + 10);
curveVertex(potatoX + 2, potatoY + 10);
curveVertex(potatoX - 5, potatoY + 11);
curveVertex(potatoX - 10, potatoY + 15);
curveVertex(potatoX - 7, potatoY + 20);
curveVertex(potatoX + 5, potatoY + 20);
curveVertex(potatoX + 5, potatoY + 20);
endShape();
//left arm
beginShape();
curveVertex(potatoX - 5, potatoY + 10);
curveVertex(potatoX - 25, potatoY + 10);
curveVertex(potatoX - 18, potatoY + 11);
curveVertex(potatoX - 13, potatoY + 15);
curveVertex(potatoX - 16, potatoY + 20);
curveVertex(potatoX - 24, potatoY + 20);
curveVertex(potatoX - 24, potatoY + 20);
endShape();
//left foot
beginShape();
curveVertex(potatoX - 20, potatoY + 30);
curveVertex(potatoX - 20, potatoY + 30);
curveVertex(potatoX - 27, potatoY + 31);
curveVertex(potatoX - 32, potatoY + 35);
curveVertex(potatoX - 29, potatoY + 40);
curveVertex(potatoX - 17, potatoY + 40);
curveVertex(potatoX - 17, potatoY + 40);
endShape();
//right foot
beginShape();
curveVertex(potatoX + 10, potatoY + 30);
curveVertex(potatoX + 10, potatoY + 30);
curveVertex(potatoX + 3, potatoY + 31);
curveVertex(potatoX - 2, potatoY + 35);
curveVertex(potatoX + 1, potatoY + 40);
curveVertex(potatoX + 13, potatoY + 40);
curveVertex(potatoX + 13, potatoY + 40);
endShape();
//mouth
fill(246, 232, 226);
ellipse(potatoX - 12, potatoY - 3, 12, 6);
}
}
}
I wanted to recreate one of my stuffed animals. It is so cute. I wish I could have given him a friend in my design, but I ran out of time. Through this project, I familiarized myself more with how to use curveVertex functions to create shapes such as the arms and the legs. Although they are small parts of the character I created, it took a while to get the curves and coordinates right. I can see this design being on phone cases, pencil pouches, stickers, digital backgrounds, etc. Below is a sketch of what I based my wallpaper’s character off of.
/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 5 */
function setup() {
createCanvas(400, 400);
noLoop();
}
function draw() {
background(205, 100, 230);
for (var y = 0; y < 450; y += 50) {
for (var x = 0; x < 450; x += 50)
//fill(100, 230, 240); for some reason I cant get this to change
ellipse(x, y, 50, 50);
}
for (var i = 10; i < 600; i += 15) {
strokeWeight(3);
line(i, 400, i, 0);
}
}
For this project I wanted to think about classic lines and simple shapes, I really like when colors contrast on wallpaper so I tried to stay true to a contrasting and also retro vibe.
]]>// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-05-Wallpaper
var ellipseSize = 8;
var rectSize = 8;
var R = 120;
var G = 50;
function setup() {
createCanvas(392, 500);
noLoop();
}
function draw() {
background(191, 166, 149);
for (var y = height / 2.4; y < height; y+=35) {
for (var x = 20; x < width; x += 50) {
// rectangles
fill (R, G, 50);
noStroke();
rectMode(CENTER);
rect(x, y, rectSize, rectSize);
// circles
fill(230, 212, 200);
stroke(R, 52, 52);
strokeWeight(2);
ellipse(x, y, ellipseSize, ellipseSize);
// lines
stroke(255);
strokeWeight(0.5);
line(x, 0, x, height);
stroke(255);
strokeWeight(0.5);
line(x - 3, 0, x - 3, height);
stroke(255);
strokeWeight(0.5);
line(x + 3, 0, x + 3, height);
ellipseSize += 0.15;
rectSize += 0.3;
R -= 0.7;
G += 0.8;
}
}
}I was looking at the plain, default curtains in my dorm room and was inspired to create this design. I used the original taupe color as the base and tried to make it more interesting by adding geometric shapes (circles and squares) with gradient color changes. I tried to prevent making the design seem too congested so I started the shapes from around mid-height. I stuck with a more, toned down, deep color palette to match with the upcoming fall season. Throughout this process, I thought it was really difficult to create a design that I would actually purchase. Even though my intention was to amp up my plain curtains, I’m unsure whether I would choose this over the original. Perhaps this will be more suitable for another purpose, not curtains.
]]>
To generate the wallpaper, I first drew a pattern on graph paper, labelling the number of points and the connections that would need to be made between them. Then I realized that I would need 3 nested loops to draw this pattern with the most efficiently; outermost loop to iterate through the rows, next loop to iterate through each butterfly, and innermost loop to iterate through each line. I used arrays to store the coordinates of the points. I also wanted butterflies to alternate orientation with their horizontal and vertical neighbors, necessitating two variables to keep track of orientation.
function setup() {
createCanvas(400, 600);
background('grey');
var xdist = 32; //horizontal distance between iteration
var ydist = 24; //vertical distnace between iteration
var xcoord = [16, 16, 8, 0, 4, 8, 8]; //x coordinates for butterfly
var ycoord = [12, 4, -4, 0, -12, -8, -4]; //y coordinates for butterfly
var firstdir = 1; //orientation of the pattern at the beginning of the row
var dir = -1; //determines orientation of butterfly
//strokeWeight(4);
//line(32 + xcoord[1], 24 + dir*ycoord[1], 32 + xcoord[1+1], 24 + dir*ycoord[1+1]);
for(var i = 12; i <= height; i += ydist ){ //one iteration is one row
dir = firstdir; //sets first orientation
for(var j = 16; j <= width; j+= xdist){ //one iteration is one pattern
stroke(127 + dir*127);
for (var k = 0; k < xcoord.length; k++){ //one iteration is two lines, mirrored
line(j + xcoord[k], i + dir*ycoord[k], j + xcoord[k+1], i + dir*ycoord[k+1]);
line(j - xcoord[k], i + dir*ycoord[k], j - xcoord[k+1], i + dir*ycoord[k+1]);
}
//line(j + xcoord[3], i + dir*ycoord[3], j + xcoord[6], i + dir*ycoord[6]); //missing lines whoops
//line(j - xcoord[3], i + dir*ycoord[3], j - xcoord[6], i + dir*ycoord[6]); //missing lines whoops
line(j + xcoord[0], i + dir*ycoord[0], j + xcoord[3], i + dir*ycoord[3]); //missing lines whoops
line(j - xcoord[0], i + dir*ycoord[0], j - xcoord[3], i + dir*ycoord[3]); //missing lines whoops
dir = -dir; //flips direction so pattern alternates
}
firstdir = -firstdir; //flips first orientation so next row alternates
}
noLoop();
}
function draw() {
}