qxcodefup/p5

Repositório de atividades do P5

Primeiros códigos

• @primeiros códigos com p5

Conceitos Seleção

• @redgreen
• @bandeiras
• Máquina de @escrever
• @mosaico
• @prisioneiro
• @dvd
• @ratinho
• @distancia
• @granulado
• @limitar
• @prisao
• @timer

Repetição

• @floresta
• @escada
• @cortina
• @tabuleiro

Mini Projetos

• @coracoes
• @digitacao

Mouse e Teclado

• @clique
• @campo
• @proximo
• @swap
• @letras

p5's Issues

03. RedGreen

d.mkv.mp4

Intro

Vamos construir várias linhas, cada uma no seu lugar.

Guide

• Esteja atendo às variáveis. Utilize-as ao invés de colocar os valores diretamente.
• Você vai tentar fazer uma linha da borda esquerda para borda direita.
• Gere aleatoriamente o y de partida e o y de chegada.
• Se ambos os valores estiverem do meio para cima, faça a linha utilizando algum tom de vermelho.
• Se ambos os valores estiverem do meio para baixo, faça a linha utilizando algum tom de verde.

Draft

let larg = 600, prof = 300;
function setup() {
  createCanvas(larg, prof);
}

function draw() {
  let ya = random(prof);
  let yb = random(prof);
  // se ambos acima do meio, faça linha de vermelhor
  // se ambos abaixo do meio, faça a linha de verde
}

01. Quadradinhos

b.mkv.mp4

Intro

Ação, pintar a tela usando com quadradinhos como se fosse uma máquina de escrever.

Guide

• Utilize as variáveis x e y para controlar a posição do quadrado.
• Retire o comando de background do draw para não apagar a tela em cada frame.
• No draw, incremente o x e utilize um if para retornar ao ponto inicial se por acaso ele sair da tela pela direita.

Draft

let x = 0;
let y = 0;
let tam = 10;
let larg = 500;
let prof = 300;
function setup() {
  createCanvas(larg, prof);
  background(0);
  noStroke();
  fill(0, 255, 255);
}
function draw() {

}

Solve

LINK

02. Mosaico

c.mkv.mp4

Intro

Vamos partir do código 01 e pintar nossos quadradinhos.

Guide

• Complete a parte de fazer o rect andar com o código que você fez no exercício 01.
• Inicialize as variáveis r, g, e b todas com valor 100.
• Em cada quadro, utilize a função random para alterar em até 10 unidades para mais ou para menos os valores de r, g e b.

Draft

let x = 0, y = 0, tam = 10;
let larg = 500, prof = 300;
//crie suas variaveis r, g, e b

function setup() {
  createCanvas(larg, prof);
  background(0);
  noStroke();
}

function draw() {
  //alterar os valores de r, b, b
  fill(r, g, b);
  rect(x, y, tam);
  //fazer o rect andar
}

Solve

LINK

Vídeos

DVD

video.mp4

04. Quadrantes

2023-03-30_09-23-45.mkv.mp4

Intro

Vamos treinar if e else

Guide

• Parta do código de rascunho.
• Faça linhas divisórias na tela dividindo os 4 quadrantes.
• Evite usar números diretamente no código, coloque os números nas variáveis e utilize as variáveis.
• Utilize o random para gerar aleatoriamente uma posição para bolinha na tela.
• Faça if para verificar onde a bolinha foi gerada e modifique a cor dela antes da pintura.
• Tente simplificar os if elses para ter o mínimo de código repetido.

Draft

let larg = 780, prof = 440;
function setup() {
  createCanvas(larg, prof);
  background(220);
}

function draw() {
  let x = random(larg);
  let y = random(prof);
  //desenhe as linhas divisórias
  
  //faça os ifs para trocar de cor
  //dependendo de onde a bolinha cair
  circle(x, y, 10);
}