{"id":1226,"date":"2025-03-27T13:54:27","date_gmt":"2025-03-27T16:54:27","guid":{"rendered":"https:\/\/www.galirows.com.br\/meublog\/?p=1226"},"modified":"2025-04-09T11:07:28","modified_gmt":"2025-04-09T14:07:28","slug":"artegenerativa-desenhando-quadrados","status":"publish","type":"post","link":"http:\/\/www.galirows.com.br\/meublog\/blog\/artegenerativa-desenhando-quadrados\/","title":{"rendered":"Arte Generativa: desenhando quadrados"},"content":{"rendered":"\n

O c\u00f3digo a seguir explora diferentes maneiras de desenhar um quadrado usando a linguagem Processing, cada uma com suas pr\u00f3prias caracter\u00edsticas e m\u00e9todos. Cada abordagem \u00e9 encapsulada em uma fun\u00e7\u00e3o separada para maior clareza.<\/p>\n\n\n\n

void setup() {\n  size(300, 300);\n  background(220);\n}\n\nvoid draw() {\n  rect(50, 50, 100, 100);\n  desenharQuadradoLinhas(150, 150, 100);\n  desenharQuadradoVertices(50, 150, 100);\n  desenharQuadradoCentro(200, 100, 100);\n  desQP(200, 150, 50); desQP(150, 200, 50); desQP(150, 150, 50);\n}\n\n\/\/ 2. Usando line() para desenhar com quatro linhas\nvoid desenharQuadradoLinhas(int x, int y, int lado) {\n  line(x, y, x + lado, y);\n  line(x + lado, y, x + lado, y + lado);\n  line(x + lado, y + lado, x, y + lado);\n  line(x, y + lado, x, y);\n}\n\n\/\/ 3. Usando beginShape() e endShape() com v\u00e9rtices\nvoid desenharQuadradoVertices(int x, int y, int lado) {\n  beginShape();\n  vertex(x, y);\n  vertex(x + lado, y);\n  vertex(x + lado, y + lado);\n  vertex(x, y + lado);\n  endShape(CLOSE);\n}\n\n\/\/ 4. Usando rectMode(CENTER) para desenhar centralizado\nvoid desenharQuadradoCentro(int x, int y, int lado) {\n  rectMode(CENTER);\n  rect(x, y, lado, lado);\n  rectMode(CORNER); \/\/ Restaura o modo padr\u00e3o\n}\n\n\/\/ 5. Usando um la\u00e7o para desenhar com pontos\nvoid desQP(int x, int y, int lado) {\n  strokeWeight(2); \/\/ Aumenta a espessura da linha para visualizar os pontos\n  for (int i = 0; i < lado; i++) {\n    point(x + i, y);\n    point(x + lado, y + i);\n    point(x + lado - i, y + lado);\n    point(x, y + lado - i);\n  }\n  strokeWeight(1); \/\/ Restaura a espessura padr\u00e3o\n}<\/code><\/pre>\n\n\n\n
Inicialmente se utilizou a fun\u00e7\u00e3o rect()<\/code> do Processing para desenhar um quadrado diretamente.<\/p>\n\n\n\n
A fun\u00e7\u00e3o desenharQuadradoLinhas() desenha o quadrado usando quatro linhas separadas.<\/p>\n\n\n\n
A fun\u00e7\u00e3o desenharQuadradoVertices() utiliza beginShape() e endShape() para desenhar o quadrado definindo seus v\u00e9rtices.<\/p>\n\n\n\n
Por fim, a fun\u00e7\u00e3o desQP() desenha o quadrado usando uma s\u00e9rie de pontos. Veja que essa fun\u00e7\u00e3o ficou com o nome fora do padr\u00e3o para ficar melhor ajustada a “largura” do c\u00f3digo.<\/p>\n\n\n\n
O resultado do c\u00f3digo \u00e9 mostrado a seguir. A tela eu chamei de “Quadrado 7 + 1 + 1” como um brincadeira pelo n\u00famero de quadrados da figura.<\/p>\n\n\n
\n
\"\"
Tela: Quadrado 7 + 1 + 1<\/figcaption><\/figure>\n<\/div>\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
O c\u00f3digo a seguir explora diferentes maneiras de desenhar um quadrado usando a linguagem Processing, cada uma com suas pr\u00f3prias caracter\u00edsticas e m\u00e9todos. Cada abordagem \u00e9 encapsulada em uma fun\u00e7\u00e3o separada para maior clareza. Inicialmente se utilizou a fun\u00e7\u00e3o rect() do Processing para desenhar um quadrado diretamente. A fun\u00e7\u00e3o desenharQuadradoLinhas() desenha o quadrado usando quatro linhas separadas. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[109],"tags":[290],"class_list":["post-1226","post","type-post","status-publish","format-standard","hentry","category-programacao","tag-arte-generativa"],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/posts\/1226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/comments?post=1226"}],"version-history":[{"count":3,"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/posts\/1226\/revisions"}],"predecessor-version":[{"id":1231,"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/posts\/1226\/revisions\/1231"}],"wp:attachment":[{"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/media?parent=1226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/categories?post=1226"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.galirows.com.br\/meublog\/wp-json\/wp\/v2\/tags?post=1226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}