function setup() {

createCanvas(400, 400);
background(0,0,250);
}

function draw() {
//En la funcion DRAW es donde declaro los ciclos FOR que me ayudaran dibujar mis
figuras en varias posiciones, sin tener que poner una por una lo cual nos llevaria
mucho tiempo.
for (let i = 0; i < 200; i += 100) {
for (let j=0; j < 240; j += 80){
//En esta parte estoy usando beginShape para crear mi primera figura, por lo
tanto uso VERTEX.
fill(255,0,0);
beginShape();
vertex(0+i,20+j);
vertex(20+i,0+j);
vertex(40+i,0+j);
vertex(60+i,20+j);
vertex(60+i,40+j);
vertex(40+i,20+j);
vertex(20+i,20+j);
vertex(0+i,40+j);
endShape(CLOSE);
//Mi segunda figura que es un cuadrado de color verde.
stroke(30);
fill(0,255,0);
beginShape();
vertex(60+i,0+j);
vertex(100+i,0+j);
vertex(100+i,40+j);
vertex(60+i,40+j);
endShape(CLOSE);

}
}
//Otro ciclo que me genera las figuras que declaro dentro.
for (let i = 0; i < 200; i +=100) {
for (let j=0; j < 240; j +=80) {
//Estas figuras son las mismas del anterior FOR solo que en otra seccion, cabe
resaltar que decidi dividir mi CANVAS en 4 partes, donde pondria un diseño en cada
una.
fill(0,255,0);
beginShape();
vertex(200+i,220+j);
vertex(220+i,200+j);
vertex(240+i,200+j);
vertex(260+i,220+j);
vertex(260+i,240+j);
vertex(240+i,220+j);
vertex(220+i,220+j);
vertex(200+i,240+j);
endShape(CLOSE);

//Los cuadrados de color rojo

stroke(30);
fill(255,0,0);
beginShape();
vertex(260+i,200+j);
 vertex(300+i,200+j);
vertex(300+i,240+j);
vertex(260+i,240+j);
endShape(CLOSE);
}
}

//Los valores de "i" y "j" inician en 0 para que de esa forma en la primera
vuelta no afecten a los valores de mis figuras, osea de los VERTEX, y cuando
temrinan el primer ciclo se le suman un valor que ayudara a seguir dibujando las
figuras hasta un limite.
for (let i = 0; i < 200; i += 100) {
for (let j=0; j < 160; j += 80){
fill(255,0,0);
beginShape();
vertex(40+i,60+j);
vertex(60+i,40+j);
vertex(80+i,40+j);
vertex(100+i,60+j);
vertex(100+i,80+j);
vertex(80+i,60+j);
vertex(60+i,60+j);
vertex(40+i,80+j);
endShape(CLOSE);
stroke(30);
fill(0,255,0);
beginShape();
vertex(0+i,40+j);
vertex(40+i,40+j);
vertex(40+i,80+j);
vertex(0+i,80+j);
endShape(CLOSE);

}
}
for (let i = 0; i < 200; i +=100) {
for (let j=0; j < 160; j +=80) {
fill(0,255,0);
beginShape();
vertex(240+i,260+j);
vertex(260+i,240+j);
vertex(280+i,240+j);
vertex(300+i,260+j);
vertex(300+i,280+j);
vertex(280+i,260+j);
vertex(260+i,260+j);
vertex(240+i,280+j);
endShape(CLOSE);

stroke(30);
fill(255,0,0);
beginShape();
vertex(200+i,240+j);
vertex(240+i,240+j);
vertex(240+i,280+j);
vertex(200+i,280+j);
endShape(CLOSE);
 }
}

//En este ciclo decidi cambiar la forma en las que hacia el ciclo, en esta
ocacion el valor de "i" y "j" no son 0, ya que en el circulo que bibujo inician en
los valores que estableci anteriormente
for (let i = 220; i < 660; i +=80) {
for (let j= 20; j < 240; j +=80) {
fill(20,255,100);
ellipse(i,j,40,40);
}
}

for (let i=0; i <180; i +=80){

for (let j=0; j<180; j+=80){
fill(150,150,150);
ellipse(20+i,220+j,40,40);
for (let a=0; a<160; a +=80){
fill(200,100,100);
beginShape();
vertex(40+a,220+j);
vertex(60+a,200+j);
vertex(80+a,220+j);
vertex(60+a,240+j);
endShape(CLOSE);
//Aunque no lo volvi a usar ya que, para mi parecer era mas complicado de
realizar
}
}
}
//A partir de aqui, establesco el ciclo FOR que mas facil se me hizo, ya que los
valores de "i" y "j" inician en 0 y se le suman 80 y 80.
for (let i=0; i <120; i +=80){
for (let j=0; j<120; j+=80){
//Para los circulos tienen un valor inicial que se va aumentando con cada ciclo
fill(150,150,150);
ellipse(60+i,260+j,40,40);
//Este ciclo lo use para poder cambiar los valores de rombo que declaro en la
siguiente parte
for (let a=0; a<240; a +=80){
fill(200,100,100);
beginShape();
vertex(0+a,260+j);
vertex(20+a,240+j);
vertex(40+a,260+j);
vertex(20+a,280+j);
endShape(CLOSE);

}
}
}

for (let i=0; i <120; i +=80){

for (let j=0; j<180; j+=80){

fill(200,100,100);
beginShape();
 vertex(240+i,20+j);
vertex(260+i,0+j);
vertex(280+i,20+j);
vertex(260+i,40+j);
endShape(CLOSE);
}
}

for (let i=0; i <120; i +=80){

for (let j=0; j<120; j+=80){
fill(150,150,150);
ellipse(260+i,60+j,40,40);
for (let a=0; a<240; a +=80){
fill(150,150,150);
beginShape();
vertex(200+a,60+j);
vertex(220+a,40+j);
vertex(240+a,60+j);
vertex(220+a,80+j);
endShape(CLOSE);

}
}
}

}
//Notas
//Use 2 o 3 tipos ciclos FOR cuando pudieron ser menos, pero queria demostrar que
no solo hay una manera de realizar los patrones, conforme avanzaba con la tarea iba
aprendiendo mas sobre su uso hasta encontrar una manera mas eficiente o facil de
realizarlos.