A parte de editar a imagem pelo pixel provavelmente foi a que mais me diverti (mas também resmunguei bastante). Fiz uma sequência de "filtros" onde só alterei a figura geométrica que substituiria o formato do pixel: círculo, triângulo, uma linha oblíqua, etc.

//Glitch Colagem TCC Pixelada Triangulo - 27/05/2026, 16:53

PImage figura;
int ponto = 16;
int x;
int y;
int posicao;
int nome;

void setup() {
size(667,1000);
figura = loadImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZVHd0kxUiDgfK4ZZfGc_TE6FNpKvGy8Wpm4rsbrNWO0n2FjZP-nxfVDXITv_XWXYDzl8x_eZ-z-ObmpRGdTs7DPk-miGSGw11EJcmLSzDHLsuZR1wObJaXJ5t46ZDXQmnQsnxY1Ruf8IAJpi3M094rh232oxOwGg-STGAHoAuVXI4ADcXNo7fT00w5g/s16000/Colagem%205%20(IA-2).png");
background(255);
noStroke();
frameRate(500);
background(255);
}

void draw() {
loadPixels();
posicao = x+y*figura.width;
float vermelho = red(figura.pixels[posicao]);
float verde = green(figura.pixels[posicao]);
float azul = blue(figura.pixels[posicao]);
fill(vermelho,verde,azul);
triangle(x+5,y+5,x+10,y+10,x+15,y+5);
x=x+10;
if (x>width){
x=0;
y=y+10;
}
if (y==height){
save("PrintColagemTCC1.png");
noLoop();
}
}

//Glitch Colagem TCC Pixelada Bolinha - 27/05/2026, 16:53

PImage figura;
int ponto = 16;
int x;
int y;
int posicao;
int nome;

void setup() {
size(667,1000);
figura = loadImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZVHd0kxUiDgfK4ZZfGc_TE6FNpKvGy8Wpm4rsbrNWO0n2FjZP-nxfVDXITv_XWXYDzl8x_eZ-z-ObmpRGdTs7DPk-miGSGw11EJcmLSzDHLsuZR1wObJaXJ5t46ZDXQmnQsnxY1Ruf8IAJpi3M094rh232oxOwGg-STGAHoAuVXI4ADcXNo7fT00w5g/s16000/Colagem%205%20(IA-2).png");
background(255);
noStroke();
frameRate(500);
background(255);
}

void draw() {
loadPixels();
posicao = x+y*figura.width;
float vermelho = red(figura.pixels[posicao]);
float verde = green(figura.pixels[posicao]);
float azul = blue(figura.pixels[posicao]);
fill(vermelho,verde,azul);
ellipse(x,y,ponto,ponto);
x=x+10;
if (x>width){
x=0;
y=y+10;
}
if (y==height){
save("PrintColagemTCC3.png");
noLoop();
}
}

//Glitch Colagem TCC Pixelada Linha Obliquia - 27/05/2026, 17:39

PImage figura;
int ponto = 16;
int x;
int y;
int posicao;
int nome;

void setup() {
size(667,1000);
figura = loadImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZVHd0kxUiDgfK4ZZfGc_TE6FNpKvGy8Wpm4rsbrNWO0n2FjZP-nxfVDXITv_XWXYDzl8x_eZ-z-ObmpRGdTs7DPk-miGSGw11EJcmLSzDHLsuZR1wObJaXJ5t46ZDXQmnQsnxY1Ruf8IAJpi3M094rh232oxOwGg-STGAHoAuVXI4ADcXNo7fT00w5g/s16000/Colagem%205%20(IA-2).png");
background(255);
noStroke();
frameRate(500);
background(255);
}

void draw() {
loadPixels();
posicao = x+y*figura.width;
line (x,y,x+5,y+5);
strokeWeight(1);
stroke (red(figura.pixels[posicao]), green(figura.pixels[posicao]), blue(figura.pixels[posicao]));
x=x+10;
if (x>width){
x=0;
y=y+10;
}
if (y==height){
save("PrintColagemTCC5.png");
noLoop();
}
}
Como o que a Marina disse estava certo, tive que fazer do jeito que a Marina disse: fiz um código respectivo para cada bolinha, o que quase triplicou o tamanho do meu código em 1 hora e 23 minutos de trabalho. Com o tempo, passei a usar menos indicativos do que era cada coisa, pois fui me habituando com a linguagem do Processing, mas segui usando isso nos títulos para ter um controle das datas que criei e do período de ajustes entre um trabalho e outro.
//Tabuleiro de Go Que Muda de Cor Individualmente - 20/05/2026, 17:52

int branco = 255;
int preto = 0;

void setup() { //Início das coisas que não se mexem
background (255);
size (500, 500);
stroke (0);
strokeWeight(1);
line(width/2, 0, 250, 500);
line(0, height/2, 500, 250);
line (width/4, 0, 125, 500);
line (0, height/4, 500, 125);
line (width/2+width/4, 0, 375, 500);
line (0, height/2+height/4, 500, 375);
}

void draw() {
fill (branco);
ellipse(width/2, height/4, 10, 10);
ellipse (width/4, height/2, 10, 10);
ellipse (width/2, height/2+height/4, 10, 10);
ellipse (width/2+width/4, height/2, 10, 10);
fill (preto);
ellipse (width/2, height/2, 10, 10);
ellipse (width/4, height/4, 10, 10);
ellipse (width/4, height/4+height/2, 10, 10);
ellipse (width/2+width/4, height/4, 10, 10);
ellipse (width/2+width/4, height/4+height/2, 10, 10);
if (mousePressed == true) {
if (mouseX>245 && mouseX<255 && mouseY>120 && mouseY<130) {
fill(preto);
} else {
fill(branco);
}
ellipse(width/2, height/4, 10, 10);
}
if (mousePressed == true) {
if (mouseX>120 && mouseX<130 && mouseY>245 && mouseY<255) {
fill(preto);
} else {
fill(branco);
}
ellipse(width/4, height/2, 10, 10);
}
if (mousePressed == true) {
if (mouseX>245 && mouseX<255 && mouseY>370 && mouseY<380) {
fill(preto);
} else {
fill(branco);
}
ellipse(width/2, height/2+height/4, 10, 10);
}
if (mousePressed == true) {
if (mouseX>370 && mouseX<380 && mouseY>245 && mouseY<255) {
fill(preto);
} else {
fill(branco);
}
ellipse(width/2+width/4, height/2, 10, 10);
}
if (mousePressed == true) {
if (mouseX>245 && mouseX<255 && mouseY>245 && mouseY<255) {
fill(branco);
} else {
fill(preto);
}
ellipse(width/2, height/2, 10, 10);
}
if (mousePressed == true) {
if (mouseX>120 && mouseX<130 && mouseY>120 && mouseY<130) {
fill(branco);
} else {
fill(preto);
}
ellipse(width/4, height/4, 10, 10);
}
if (mousePressed == true) {
if (mouseX>120 && mouseX<130 && mouseY>370 && mouseY<380) {
fill(branco);
} else {
fill(preto);
}
ellipse(width/4, height/4+height/2, 10, 10);
}
if (mousePressed == true) {
if (mouseX>370 && mouseX<380 && mouseY>120 && mouseY<130) {
fill(branco);
} else {
fill(preto);
}
ellipse(width/2+width/4, height/4, 10, 10);
}
if (mousePressed == true) {
if (mouseX>370 && mouseX<380 && mouseY>370 && mouseY<380) {
fill(branco);
} else {
fill(preto);
}
ellipse(width/2+width/4, height/4+height/2, 10, 10);
}
}
Como tudo que eu faço eu quero complicar (a Marina e o Pedro concordam), decidi que queria mudar a cor das bolinhas do tabuleiro de go ao clicar no mouse. Marina disse que eu precisaria fazer um por um caso quisesse fazer isso individualmente, mas como sou totalmente descrente e gosto de tirar a prova real de tudo, eu fui e concluí que precisava fazer exatamente o que a Marina me disse.
//Tabuleiro de Go Que Muda de Cor Coletivamente - 20/05/2026, 16:29

int branco = 255;
int preto = 0;

void setup(){
background (255);
size (500,500);
stroke (0);
strokeWeight(1);
line(width/2,0,250,500);
line(0,height/2,500,250);
line (width/4,0,125,500);
line (0,height/4,500,125);
line (width/2+width/4,0,375,500);
line (0,height/2+height/4,500,375);
}

void draw(){
fill (branco);
ellipse(width/2,height/4,10,10);
ellipse (width/4,height/2,10,10);
ellipse (width/2,height/2+height/4,10,10);
ellipse (width/2+width/4,height/2,10,10);
fill (preto);
ellipse (width/2,height/2,10,10);
ellipse (width/4,height/4,10,10);
ellipse (width/4,height/4+height/2,10,10);
ellipse (width/2+width/4,height/4,10,10);
ellipse (width/2+width/4,height/4+height/2,10,10);
}

void mouseClicked(){
if(branco == 255){
branco = 0;
} else {
branco = 255;
}
if(preto == 0){
preto = 255;
} else {
preto = 0;
}
}
Comecei brincando com as retas coloridas e o random no que nomeei como Show do Pedro Sampaio, pois lembrei de um vídeo de um cara que teve sua câmera do celular estragada por uma dos inúmeros flashs de luz do show do cantor. Ele era bem limitado e possuía apenas duas linhas.
//Show do Pedro Sampaio - 18/05/2026, 17:01

void setup(){
size(500,500);
background(0);
}
void draw(){
background(255);
strokeWeight(2);
stroke(random(255),random(255),random(255));
line(0,0,random(width),random(height));
line(random(width),random(height),0,0);
}
Mais tarde (3 minutos depois), isso evoluiu para Super Show do Pedro Sampaio, com duas linhas em dois vértices e uma linha em um vértice para piorar a situação e colorir ainda mais o negócio. Sinceramente, não consigo olhar para isso por muito tempo, pois meus olhos doem.

//Super Show do Pedro Sampaio - 18/05/2026, 17:04
void setup(){
size(500,500);
background(0);
}
void draw(){
background(255);
strokeWeight(2);
stroke(random(255),random(255),random(255));
line(0,0,random(width),random(height));
line(random(width),random(height),0,0);
line (500,500,random(width),random(height));
line (random(width),random(height),500,500);
line (0,500,random(width),random(height));
line (500,0,random(width),random(height));
}
Eu diria que o exercício das linhas e bolinhas (que apelidei carinhosamente como "Tabuleiro de Go") foi o mais fácil de reproduzir, já que os cálculos eram bem simples e intuitivos, pois se trava de linhas que era meios e quartos da altura e largura e as bolinhas se localizavam nos vértices dessas duas. Provavelmente foi o código mais tranquilo que fiz na aula e o que menos resmunguei.
//Tabuleiro de Go - 18/05/2026, 16:33
void setup(){
background (255);
size (500,500);
stroke (0);
strokeWeight(1);
line(width/2,0,250,500);
line(0,height/2,500,250);
line (width/4,0,125,500);
line (0,height/4,500,125);
line (width/2+width/4,0,375,500);
line (0,height/2+height/4,500,375);
ellipse(width/2,height/4,10,10);
ellipse (width/4,height/2,10,10);
ellipse (width/2,height/2+height/4,10,10);
ellipse (width/2+width/4,height/2,10,10);
fill(0);
ellipse (width/2,height/2,10,10);
ellipse (width/4,height/4,10,10);
ellipse (width/4,height/4+height/2,10,10);
ellipse (width/2+width/4,height/4,10,10);
ellipse (width/2+width/4,height/4+height/2,10,10);
}
Pensando na interatividade, decidi fazer o cookie (anteriormente feito em um dos trabalhos de pixel art) deixar um rastro com o movimento do mouse. Acabei fazendo um breve ajuste nele (movi o cookie para fora da imagem interativa, pois um deles sempre ficava parado e solitário no canto superior) após esclarecer uma dúvida com a Marina.
//Siga o cookie - 18/05/2026, 16:10
Aprender a programa é difícil até pegar no tranco. É esquisito pensar que sei calcular as coisas, mas não consigo ver a lógica de programação por trás de certos comandos. Meu primeiro trabalho foi algo inacabado: uma caixa semelhante àquelas dos softwares antigos de computador. Assim como o Windows XP, ela foi deixada para trás.
//Caixinha de computador antigo: 11/05/2026 - 17:10
void setup () {
size(800,500); //Tamanho do fundo
noStroke (); //Sem contorno no fundo
background(#ffffff); //Cor do fundo
stroke(#000000); //Linhas superior e lateral
strokeWeight(7); //Tamanha das linhas
line (800,0,0,0); //Linha lateral
line (0,500,0,0); //Linha superior
fill (#000000); //Cor dos retângulos
rect (0,480,800,20); //Retângulo inferior
rect (780,0,20,500); //Retângulo lateral
fill (#efefef); //Cor dos quadrados superiores
noStroke (); //Sem contorno no quadrado
square (754,7,20); //Quadrado Superior - X
square (729,7,20); //Quadrado Superior - Retângulo
square (704,7,20); //Quadrado Superior - Traço
noStroke (); //Sem contorno nas figuras inferiores
square (781,480,14); //Quadrado 1
//triangle (0,0,0,0,0,0,0); //Seta do quadrado 1
square (5,480,14); //Quadrado 2
//triangle (0,0,0,0,0,0,0); //Seta do quadrado 1
}