#processingjs

[candacethatcher]

Archive Scan XLVIII, 2025

36” x 48”

Acrylic on canvas

Candace Thatcher

[processzine-org]

🟡 Ezra Processing Playing about with Processing 4 — exploring how Ezra (The Interpreter) might visually "respond". Glitching between confusion and comprehension, this one’s a nod to the Processing droid in Loki.

Emulating a Processing droid, built in Processing, for Process Zine. Signal? Noise? Expression lives somewhere in between.

👁️ Deaf-coded interface cues. 🤖 Interpreter in training.

[verayannina]

Suspended four chord waveform visualised in 3D

[verayannina]

The major triad waveform visualised using code.

[verayannina]

Screenshot of the hummy project

[dustrial-inc]

View this post on Instagram

Assimilate #processingjs #javascript #motion #ctrl #css #visuals #messingaround #visualarts #edit https://www.instagram.com/p/BxEKQDaHsfW/?igshid=jc7rdl7z3era

[devlemon-blog]

Funções em JavaScript

Funções são uma excelente forma de fazer reuso de código. Isso é importante porque se você estiver fazendo um projeto ele pode se tornar grande e complexo. Pense como se você estivesse fazendo uma peça de lego, você estaria fazendo a peça com locais de encaixe, certo? Imagine agora que você tem de fazer 2000 peças de lego, agora fica mais difícil.Para resolver isso, você pode simplesmente colocar o código da peça de lego dentro de uma função, com isso você pode fazer uma repetição até dois mil dessa função e problema resolvido. 😃

Função sem retorno:

// Toda função precisa de () e {} function olaMundo () { document.write("Olá Mundo"); // Isso escreve "Olá Mundo" na tela. } // Vamos escrever Olá Mundo cinco vezes. for(i = 0; i < 5; i++){ olaMundo(); }

Função com parâmetros e retorno:

// n1 e n2 são parâmetros (variáveis que funcionarão na função). function soma (n1, n2) { return n1 + n2; } var resultado = soma(15, 25); document.write(resultado);

Guardar função em variável:

var ola = function(other){ document.write("Olá " + other); }; ola("Mundo"); ola("Lemon");

Fazendo a peça de lego:

function setup() { createCanvas(1250, 550); } function draw(){ function peca(x, y, r, g, b){ fill(r, g, b); rect(x + 5, y - 20, 50, 75, 5); rect(x + 95, y - 20, 50, 75, 5); rect(x, y, 150, 75, 5); } peca(250, 155, 255, 254, 0); peca(400, 232, 150, 250, 0); peca(400, 155, 200, 250, 0); peca(250, 250, 150, 250, 0); peca(250, 345, 225, 0, 0); peca(250, 250, 150, 250, 0); }

Resultado final da função peça.

[devlemon-blog]

Desenhando com JavaScript

O arquivo abaixo deve ser salvo como index.html 

Na estrutura que está sendo utilizada abaixo, o arquivo p5.js deve estar junto aos outros arquivos do projeto.

Arquivo index.html usado no projeto.

// Arquivo sketch.js function setup() { createCanvas(1250, 550); // Tela da aplicação } function draw(){ // Se o mouse for pressionado, o que estiver no escopo irá ser processado if(mouseIsPressed){ fill(256, 100, 0); // Cor (r, g, b); ellipse(mouseX, mouseY, 50, 50); // ellipse (eixo x, eixo y, largura, altura); } }

Formas Simples:

// elipse: ellipse(30, 90, 50, 50); // retângulo: rect(30, 90, 50, 70);

Faça funções:

Funções são excelentes para trabalhar duro apenas uma vez e depois ficar só no reuso de código.

// Arquivo sketch.js function setup() { createCanvas(1250, 550); } function draw(){ function pincel(x, y) { op = 3; // Tente mudar a variável op (entre 1 e 3). Exemplo: op = 3; switch(op){ case 1: ellipse(x, y, 50, 50); break; case 2: rect(x, y, 50, 50); break; case 3: quad(x, y, 100, 380, 50, 360); break; } } // Se o mouse for pressionado, o que estiver no escopo irá ser processado if(mouseIsPressed){ fill(256, 100, 0); // cor (r, g, b); pincel(mouseX, mouseY); // Reuso de código, agora você pode usar a função em qualquer lugar. } else { pincel(20, 50); } }

Ondulações feitas com quad em JavaScript.