I want to create textile patterns inspired by traditional Chinese symbols
sketch
//Michael Li
//Section C
var radi = 30
function setup() {
createCanvas(755, 630);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
background (220);
}
function draw() {
background(30, 28, 27);
var color = 0; //set variable color
//create a line with the for loop
for (var x = 0; x <= width+80; x += 4.2*radi){
color += 1; // increment color by 1
if (color % 2 == 1){ // test color
stroke(255, 204, 51); //bright yellow
} else {
stroke(182, 156, 129); //grey
}
//create a grid
for(var y = 0; y<= height+80; y += 4.2*radi){
color += 1;
//test for color
if (color % 2 == 1){
stroke(255, 204, 51); //bright yellow
} else {
stroke(182, 156, 129); //grey
}
//two if statements in each for loop creates the alternating color pattern
pattern1(x, y); // call to draw function pattern 1
print(color.toString());
}
}
//draw a grid of pattern two
//reposition x and y initial position
for (var x = 63; x <= width + 80; x += 4.2*radi){
for(var y = 0; y <= height + 80; y += 4.2*radi){
pattern2(x, y); //draw pattern 2
}
}
noLoop();//draw once
}
var flip1 = 1; //set varibales for flip
var flip2 = 1;
function pattern1(x, y){
strokeWeight(2);
noFill();
//only stroke no fill
push();
translate(x, y); // translate object to input x and y
//top and bottom semi circle
arc(0, 0, radi*2, radi*2, PI+radians(7), 0-radians(7));
arc(0, 0, radi*2, radi*2, 0+radians(7), PI-radians(7));
//middle long line
line(0-radi/1.3, 0, 0+radi/1.3, 0);
var xSpaing = 3.5;//set a uniformed spacing
//draw the same line 4 time
for (var i = 0; i<= 4; i += 1){
//test which loop number it is to flip the drawing
if (i == 1 || i == 3){
flip1 = -flip1; //on first and third loop, flip the x position
} else if (i == 2){
flip2 = -flip2; //on the second loop, flip the y position
}
line(0-flip1*radi/1.1, 0-(flip2*6),
0-flip1*radi/1.5, 0-(flip2*6)); // horizontal short
line(0+(flip1*xSpaing), 0+(flip2*radi/1.1),
0+(flip1*xSpaing), 0+(flip2*radi/1.3)); //verticle short 1
line(0+(flip1*xSpaing), 0+(flip2*radi/1.8),
0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // verticle short 2, closer to middle
line(0+(flip1*20), 0+(flip2*radi/2.5),
0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // horizontal longer, at 4 corners
}
//middle line top and bottom
line(0+radi/2.2, 0+6, 0-radi/2.2, 0+6); //bottom middle
line(0+radi/2.2, 0-6, 0-radi/2.2, 0-6); //top middle
//four small arcs
arc(0, 0, radi*1.6, radi*1.6, radians(30), radians(63));
arc(0, 0, radi*1.6, radi*1.6, radians(85+30), radians(85+63));
arc(0, 0, radi*1.6, radi*1.6, radians(180+30), radians(180+63));
arc(0, 0, radi*1.6, radi*1.6, radians(265+30), radians(265+63));
pop();
push();
translate(x, y); //translate to input x and y
rotate(radians(45)); // rotate around x, y by 45 degrees
rectMode(CENTER); //draw rect around origin
//draw rectangle to frame the pattern
rect(0, 0, radi*3, radi*3);
//draw 4 times
for(var i = 0; i<=4; i +=1){
//test for which loop increment
if (i == 1 || i == 3){ //first and third flip the x position
flip1 = -flip1;
} else if (i == 2){ //second loop flip the y position
flip2 = -flip2;
}
//draw 3 small squares by the corner of the big square
//repeat for each corner using the for loop
rect(flip1*1.5*radi, flip2*1.5*radi, radi, radi);
rect(flip1*1.34*radi, flip2*1.34*radi, radi/4, radi/4);
rect(flip1*0.9*radi, flip2*1.34*radi, radi/4, radi/4);
rect(flip1*1.34*radi, flip2*0.9*radi, radi/4, radi/4);
}
pop()
}
//second pattern, new arguments g and h
function pattern2 (g, h){
push();
translate(g, h); // translate origin to g, h
rotate(radians(45)); //rotate around origin by 45 degrees
rectMode(CENTER); // set rectMode
strokeWeight(2);
stroke(255, 204, 51, 100); // grey line color
fill(182, 156, 129, 100); // lower transparency
rect (1.5*radi, 1.5*radi, radi*1.8, radi*1.8); // medium size square
pop();
push();
translate(g, h);
stroke(182, 156, 129);
rectMode(CENTER);
rect(0, 2.1*radi, radi/3, radi/3); // small square inside
line(0, 0, 0, height); //verticle lines
pop();
}