Problema em transferir o arquivo do Github, para o P5,js | Programação

Oi, Bruno. Como vai?

Desculpe pela demora em te retornar.

Vou te ajudar com um tutorial para importar a biblioteca. Vamos lá!

Primeiramente, assim como você já mostrou na foto, você irá clicar em "Code" (preenchido de verde escuro). E depois de clicar em "Code", basta clicar em "Download ZIP". Está demarcado com um retângulo vermelho abaixo. Baixe.

Captura de tela de parte da página redirecionada no link do "p5.collide2D", no GitHub. A seção "Code", em verde, está aberta, pois foi clicada, e a última opção ocupando a tela está marcada com um retângulo vermelho vazio, escrito "Download ZIP".

Depois de baixar o arquivo ZIP, descompacte ele. Se o seu sistema operacional for Windows 10, ele terá a opção no próprio computador para descompactar. Se não for e caso você não saiba descompactar o arquivo em ZIP, aqui há um tutorial do WinZip e aqui há um tutorial do WinRAR. Qualquer um dos programas funciona perfeitamente para esse caso.

Após ter descompactado a pasta, vamos importar a biblioteca para o editor.

Voltando ao editor p5.js, aperte a setinha (sinal "maior que") para o lado.

Captura de tela de parte da página do editor p5.js, onde há um círculo em volta do botão quadricular com um sinal de "maior que" dentro.

Após você clicar, esta parte irá aparecer:

Captura de tela de parte da página do editor p5.js, onde mostra as opções após ter clicado na setinha, ou seja, no sinal "maior que". São mostradas três opções.

Você irá clicar na setinha para baixo, no sinal de um triângulo, ao lado de "Sketch Files".

Captura da mesma tela anterior, mas com um quadrado vermelho vazio em volta da seta para baixo.

Depois de ter clicado na setinha, você irá escolher a última opção, a "Upload file" (a terceira opção, em rosa).

Captura de tela da mesma página, em que a terceira e última opção, "Upload file" está em rosa.

A tela contendo "Upload File" irá aparecer. Na opção dentro do retângulo em branco, é onde você pode clicar para enviar um arquivo. É isso que vamos fazer. Você irá clicar no espaço em branco.

Captura de tela da opção "Upload file", em que há um espaço em branco para clicar ou arrastar um arquivo.

Na pasta descompactada, vamos escolher o arquivo "p5.collide2d".

Captura de tela dentro da pasta descompactada, em que o arquivo "p5.collide2d" está selecionado.

Ele irá ficar desta forma:

Captura de tela do editor p5.js, onde está contido a seção "Upload File", com o arquivo "p5.collide2d" carregado.

A biblioteca foi importada! Mas, antes de tudo, faremos algumas coisas.

Fechando a opção de upload depois de ter importado a biblioteca, você irá clicar na opção "index.html".

Captura de tela do editor p5.js, onde "index.html" está selecionado e sendo apontado por uma seta vermelha.

Observe a linha 13. Pule uma linha após ela. Você irá copiar essa mesma linha para a linha debaixo.

Captura de tela do editor p5.js, onde há parte do código "index.html", com a linha 13 em foco.

Ficará assim:

Captura de tela do editor p5.js, em que a linha 13 foi copiada e colada para a linha 14.

Agora, você irá escrever "p5.collide2d.js" no lugar de "sketch.js", na linha 14. Assim:

Captura de tela do editor p5.js, em que na linha 14 consta "p5.collide2d.js" no lugar de "sketch.js

Tudo feito! Agora basta prosseguir normalmente.

Se as dúvidas persistirem, estou disponível.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.