0% acharam este documento útil (0 voto)

0 visualizações3 páginas

De Processing Para JavaScript Com p5

O documento apresenta uma introdução ao p5.js, destacando seu ambiente de desenvolvimento e a estrutura básica de código com as funções setup() e draw(). Ele também aborda conceitos de variáveis em JavaScript, incluindo let e const, além de funções nomeadas e arrow functions, escopo de bloco, closures e objetos literais. O conteúdo visa facilitar a transição de Processing para JavaScript, enfatizando as diferenças e características do novo ambiente.

Enviado por

vevev312

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

0 visualizações3 páginas

De Processing Para JavaScript Com p5

Enviado por

vevev312

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

De Processing para JavaScript com p5.

1. O Ambiente: [Link] Web Editor

Para nossas aulas, utilizaremos o [Link] Web Editor.

A Estrutura Base
Assim como no Processing, o [Link] utiliza duas funções principais:

● setup(): Executada uma única vez no início. É onde definimos o tamanho do canvas e
configurações iniciais.
● draw(): Executada em um loop contínuo (geralmente 60 vezes por segundo). É aqui que
a mágica da animação acontece.

O Console
Diferente do Java, onde erros aparecem de forma rígida, no JS usamos muito o Console para
"espiar" o que está acontecendo dentro do código.

[Link]("Olá, mundo! O código chegou aqui.");

2. Variáveis: let, const e a Tipagem Dinâmica

No Processing (Java), você precisava declarar o tipo da variável: int x = 10;. No JavaScript, o
tipo é definido pelo valor que você atribui a ela.

let vs const
● let: Use para variáveis que terão seu valor alterado (ex: posição de uma bolinha).
● const: Use para valores constantes, que não mudam após a criação (ex: a cor do fundo
ou a largura do canvas). Dica: Tente usar const por padrão e mude para let apenas se
precisar.

Tipagem Dinâmica e typeof

No JS, uma variável pode começar como um número e virar um texto (embora não seja
recomendado abusar disso). Podemos usar o operador typeof para checar o tipo atual.
let informacao = 100;
[Link](typeof informacao); // "number"

informacao = "Belo Horizonte";
[Link](typeof informacao); // "string"

3. Funções: Nomeadas e Arrow Functions

O JavaScript moderno nos dá várias formas de escrever funções. Vamos conhecer as
principais:

Função Nomeada (Estilo tradicional)

function somar(a, b) {
return a + b;
}

Arrow Functions (Funções de Seta)

Esta é a forma mais moderna e concisa, muito usada em JS. Ela é excelente para funções
curtas.

const dobrar = x => x * 2;

// Se tiver mais de um parâmetro, usamos parênteses:
const multiplicar = (a, b) => a * b;

4. Escopo de Bloco e Closures

O "escopo" determina onde uma variável é visível. No JS moderno, o let e o const respeitam os
blocos (o que estiver entre { }).

let global = "Eu apareço em todo lugar";

function testeEscopo() {
let local = "Eu só apareço aqui dentro";
if (true) {
let ultraLocal = "Só existo dentro deste IF";
}
// [Link](ultraLocal); // Erro! ultraLocal não existe aqui.
}

5. Objetos Literais
Essa é uma das partes mais poderosas do JS. No Processing, você criaria uma Class para
agrupar x e y. No JS, podemos criar um Objeto Literal instantaneamente:

const jogador = {
x: 200,
y: 300,
cor: 'blue',
tamanho: 50
};

// Acessamos as propriedades usando o ponto:
[Link](jogador.x); // 200

De Processing Para JavaScript Com p5

Enviado por

De Processing Para JavaScript Com p5

Enviado por

De Processing para JavaScript com p5.

1. O Ambiente: [Link] Web Editor

[Link]("Olá, mundo! O código chegou aqui.");

2. Variáveis: let, const e a Tipagem Dinâmica

Tipagem Dinâmica e typeof

3. Funções: Nomeadas e Arrow Functions

Função Nomeada (Estilo tradicional)

Arrow Functions (Funções de Seta)

const dobrar = x => x * 2;​

4. Escopo de Bloco e Closures

let global = "Eu apareço em todo lugar";​

Você também pode gostar

const dobrar = x => x * 2;

let global = "Eu apareço em todo lugar";