P5JS Editor

P5JS Web Editor

O que é o P5JS?

P5.js é uma biblioteca JavaScript gratuita e de código aberto que permite criar arte interativa, jogos, animações e visualizações de dados. É uma ferramenta para aprender a programar e se expressar de forma criativa na web.

Para que serve o p5js?

Biblioteca para aprender a programar e expressar criativamente na web.

O que é Java Script?

JavaScript (JS) é uma linguagem de programação que permite criar páginas da web interativas. É uma das tecnologias fundamentais da World Wide Web e é usada para desenvolver aplicações para dispositivos móveis.

Códigos de programação em P5

Como usar o P5

Clicar em login e escolher Login With Google, em seguida inserir seu e-mail do @escola.

Criando desenhos no P5.JS com códigos de programação:

Copie e cole os seguintes códigos no P5.JS e descubra qual figura geométrica ele constrói. Salve seu arquivo com um nome.

Mande um e-mail para seu professor pelo seu e-mail do @escola! clic aqui

Projeto 1 - Quadrado

function setup() {

createCanvas(400, 400); // Cria uma tela de 400x400 pixels

}

function draw() {

background(220); // Define o fundo como cinza claro

// Desenha um quadrado

fill(100, 150, 200); // Define a cor de preenchimento (azul claro)

rect(150, 150, 100, 100); // Desenha um retângulo (x, y, largura, altura) que neste caso é um quadrado

}

Projeto 2 - Círculo

function setup() {

createCanvas(400, 400); // Cria uma tela de 400x400 pixels

}

function draw() {

background(220); // Define o fundo como cinza claro

// Desenha um círculo (elipse com largura e altura iguais)

fill(255, 0, 100); // Define a cor de preenchimento (rosa)

ellipse(200, 200, 150, 150); // Desenha uma elipse no centro (200, 200) com diâmetro de 150 pixels

}

Projeto 3 - estrela

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

fill(255, 204, 0); // Cor amarela para a estrela

noStroke();

star(width / 2, height / 2, 50, 100, 5); // Desenha a estrela no centro

}

function star(x, y, radius1, radius2, npoints) {

let angle = TWO_PI / npoints;

let halfAngle = angle / 2.0;

beginShape();

for (let a = 0; a < TWO_PI; a += angle) {

let sx = x + cos(a) * radius2;

let sy = y + sin(a) * radius2;

vertex(sx, sy);

sx = x + cos(a + halfAngle) * radius1;

sy = y + sin(a + halfAngle) * radius1;

vertex(sx, sy);

}

endShape(CLOSE);

}

Projeto 4 - Rosto

let olhoEsquerdoX, olhoEsquerdoY;

let olhoDireitoX, olhoDireitoY;

function setup() {

createCanvas(400, 400);

angleMode(DEGREES);

// Posições iniciais dos olhos

olhoEsquerdoX = width / 2 - 40;

olhoEsquerdoY = height / 2 - 50;

olhoDireitoX = width / 2 + 40;

olhoDireitoY = height / 2 - 50;

}

function draw() {

background(220);

// Cores femininas suaves

let pele = color(255, 230, 210); // Tom de pele mais claro

let preto = color(0);

let branco = color(255);

let rosaClaro = color(255, 200, 220); // Rosa claro para lábios

// Rosto feminino (formato um pouco mais arredondado)

fill(pele);

ellipse(width / 2, height / 2 - 10, 200, 230); // Centro Y ligeiramente mais alto

// Olhos (agora com variáveis para posição)

fill(branco);

ellipse(olhoEsquerdoX, olhoEsquerdoY, 40, 40); // Olho esquerdo

ellipse(olhoDireitoX, olhoDireitoY, 40, 40); // Olho direito

// Pupilas que seguem o mouse

let distanciaEsquerda = dist(olhoEsquerdoX, olhoEsquerdoY, mouseX, mouseY);

let anguloEsquerda = atan2(mouseY - olhoEsquerdoY, mouseX - olhoEsquerdoX);

let pupilasEsquerdaX = olhoEsquerdoX + cos(anguloEsquerda) * constrain(distanciaEsquerda, 0, 10);

let pupilasEsquerdaY = olhoEsquerdoY + sin(anguloEsquerda) * constrain(distanciaEsquerda, 0, 10);

let distanciaDireita = dist(olhoDireitoX, olhoDireitoY, mouseX, mouseY);

let anguloDireita = atan2(mouseY - olhoDireitoY, mouseX - olhoDireitoX);

let pupilasDireitaX = olhoDireitoX + cos(anguloDireita) * constrain(distanciaDireita, 0, 10);

let pupilasDireitaY = olhoDireitoY + sin(anguloDireita) * constrain(distanciaDireita, 0, 10);

fill(preto);

ellipse(pupilasEsquerdaX, pupilasEsquerdaY, 15, 15); // Pupila esquerda seguindo o mouse

ellipse(pupilasDireitaX, pupilasDireitaY, 15, 15); // Pupila direita seguindo o mouse

// Sobrancelhas (arqueadas para uma aparência feminina)

stroke(preto);

noFill();

arc(width / 2 - 40, height / 2 - 70, 50, 30, 180, 0); // Sobrancelha esquerda

arc(width / 2 + 40, height / 2 - 70, 50, 30, 180, 0); // Sobrancelha direita

noStroke();

// Nariz (mais delicado)

fill(pele);

triangle(width / 2 - 10, height / 2 - 10, width / 2 + 10, height / 2 - 10, width / 2, height / 2 + 15);

// Boca (lábios mais definidos e rosados)

fill(rosaClaro);

arc(width / 2, height / 2 + 45, 60, 35, 0, 180); // Lábio inferior

line(width / 2 - 30, height / 2 + 45, width / 2 + 30, height / 2 + 45);

// Lábio superior (ligeiramente curvado)

arc(width / 2, height / 2 + 35, 50, 20, 180, 0);

// Orelhas (ligeiramente menores e mais delicadas)

fill(pele);

ellipse(width / 2 - 85, height / 2 - 15, 25, 40); // Orelha esquerda

ellipse(width / 2 + 85, height / 2 - 15, 25, 40); // Orelha direita

}

projeto 5 - rosto feminino que os olhos sigam o ponteiro do mouse