Para que é usado o p5 JS?

O p5.js é uma biblioteca JavaScript para codificação criativa, com foco em tornar a codificação acessível e inclusiva para artistas, designers, educadores, iniciantes e qualquer outra pessoa. p5.js é gratuito e de código aberto

Introdução ao p5.js

Este tutorial ajudará você na configuração de um projeto p5.js e na criação de seu primeiro esboço. A maneira mais fácil de começar é usando o editor p5.js.

Se desejar trabalhar na versão desktop do p5.js, primeiro vá até instruções de download. E baixe a versão completa do p5.js.

Agora, para rodar o p5.js no Node.js, você pode seguir os passos abaixo:

1. Instalar o Node.js e o npm: Se você ainda não tem o Node.js instalado em seu sistema, visite o site oficial do Node.js (https://nodejs.org/) e baixe a versão adequada para o seu sistema operacional. O npm (Node Package Manager) é instalado automaticamente junto com o Node.js.

2. Criar um projeto Node.js: Crie uma pasta para o seu projeto e navegue até ela no terminal.

3. Inicializar um projeto Node.js: Abra o terminal na pasta do seu projeto e execute o seguinte comando para criar um arquivo package.json:

 npm init -y

Isso criará um arquivo package.json com as configurações padrão.

4. Instalar o p5.js: Você pode instalar o p5.js como uma dependência do seu projeto usando o npm. Execute o seguinte comando:

 npm install p5

5. Criar seu script p5.js: Crie um arquivo JavaScript para o seu código p5.js na mesma pasta do seu projeto. Por exemplo, você pode criar um arquivo chamado sketch.js e adicionar seu código p5.js nele.

Aqui está um exemplo simples de um arquivo sketch.js usando p5.js. Este exemplo cria um fundo colorido e desenha um círculo que segue o cursor do mouse:

 function setup() {
   // Cria um canvas de 400x400 pixels
   createCanvas(400, 400);
 }

 function draw() {
   // Define a cor de fundo para um tom de azul
   background(0, 0, 255);

   // Define a cor de preenchimento do círculo para vermelho
   fill(255, 0, 0);

   // Desenha um círculo no local do cursor do mouse
   ellipse(mouseX, mouseY, 50, 50);
 }

O arquivo sketch.js deve ser incorporado em um arquivo HTML para que o p5.js seja executado em um navegador da web. Aqui está um exemplo de como você pode criar um arquivo HTML simples para incluir o seu sketch.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo p5.js</title>
</head>
<body>
    <!-- Inclua a biblioteca p5.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

    <!-- Inclua o seu arquivo sketch.js -->
    <script src="sketch.js"></script>
</body>
</html>

Neste exemplo, o arquivo sketch.js está sendo incluído após a biblioteca p5.js. Certifique-se de que o arquivo sketch.js esteja na mesma pasta que o arquivo HTML ou ajuste o caminho do src no elemento <script> de acordo com a localização do seu arquivo sketch.js.

6. Configurar o servidor web: Para executar seu código p5.js, você pode usar um servidor web simples. O Node.js tem um pacote chamado http-server que pode ser usado para isso. Instale-o globalmente, se ainda não estiver instalado, usando o seguinte comando:

 npm install -g http-server

7. Iniciar o servidor web: No terminal, navegue até a pasta do seu projeto e execute o seguinte comando para iniciar o servidor web:

 http-server

Isso iniciará o servidor na porta padrão 8080.

8. Acessar seu projeto no navegador: Abra um navegador da web e acesse http://localhost:8080. Você deverá ver seu sketch p5.js em execução.

Este exemplo cria um fundo colorido e desenha um círculo que segue o cursor do mouse.

Lembre-se de que, ao trabalhar com p5.js no Node.js, você não poderá usar as funções de manipulação de tela do navegador, como createCanvas(), pois o Node.js não tem um DOM. Você pode usar p5.js para gerar gráficos ou manipular dados, mas não poderá criar uma interface gráfica de usuário (GUI) diretamente no Node.js.

Certifique-se de que seu código p5.js esteja no arquivo sketch.js ou no arquivo que você criar, e o servidor web servirá esse arquivo no navegador para você ver a saída do p5.js.