It’s an example of how to consume data from a JSON API using text and even 3D.
I had a hard time putting the text () command together with the 3D “box”, because it gave a strange font error, so I ended up creating a graphic and separated the 3D from the normal canvas, so I was able to merge the text + that 3D box with the image.
My Program:
https://editor.p5js.org/willianxz/full/DLk9uXnJx
Tentei mas não carrega.
Sorry my friends, I forgot to mention that you should use an extension called CORS if you use the chrome browser.
This is a browser issue indeed.
Só tenho mobile. Tentei com isto mais o link “maneira” não funciona.
I don’t think I can fix this problem since I don’t have access to the server from which the API is being used nor the kk code editor itself
Anyone who wants to see will have to install this same CORS extension.
Estou de bom humor hoje, então tentei no PC do vizinho com extensão. Mas não carregou. Deve ser outra coisa.
Bem estranho, aqui funciona quando uso a extensão CORS usando o navegador Google Chrome e deixo ativada.
Existe um problema de CORS, pelo programa estar usando uma API externa que provem os dados/imagem, mas usando a extenção do CORS é para funcionar kk
Esse problema é muito chato, por que precisa de acesso ao servidor da API para resolve-lo, algo fora de meu controle, esse código representa um consumo de dado vindo de uma API externa, por isso é importante.
Tentei abrir no android Firefox que aceita instalar extensão CORS, mas também deu nada.
Tente usar o Google Chrome com uma extenção CORS ativada, me mande um print, assim posso ver como e o que ta acontecendo ai.
Sem estar ativado a extenção CORS definitivamente não irá funcionar, mesmo em anonimato
No Mobile também não sei se vai funfa, projetei usando Windows kkkkkkk
Rapaz, vou tentar mais uma vez, mas não sei se meu vizinho deixa. (Ele é ciumento)
Ele não tava, mas ela sim e deixou entrar.(Você ainda vai me arranjar problemas).
Reinstalei extensão que tem opções que tambem tentei, mais nada.
Sim, me esqueci, o print. Mas não tem nada. Só aquela tela preta me prometendo que vou entrar no Digimundo. Vá esperando.
Abra o console, apertando F12, deve aparecer algum erro. Se o erro for:
Event {isTrusted: true, constructor: Object}p5.js says: It looks like there was a problem loading your image. Try checking if the file path [https://digimon.shadowsmith.com/img/koromon.jpg] is correct, hosting the image online, or running a local server.[Local server · processing/p5.js Wiki · GitHub]
É por causa do CORS, que de alguma forma não ativou, ai é bom rever se a extensão CORS está mesmo ativada, por que as vezes você instala ela e por padrão vem desativada.
Se for outro erro, ai preciso saber qual é, por que só tenho esse Pc para testar X-X
@GoToLoop
Ajuda aí rapaz, não tenho mais coragem de ir pra meu vizinho não.
É pra aparecer dessa forma após um tempinho de espera:
A cada tempo, vai trocando o digimon, aparecendo as suas características, vindas da API 
Tá bom, ele chegou e criei coragem.
Abaixo o erro do qual você falou, se repetindo.
Clicando no link da imagem, ela abre.
Re-instalei duas vezes a extensão e está ativada sim.
Tentei também este teste, que mostrou bloqueio. Não me pergunte porque.
Existe algo no seu navegador que não está aceitando CORS, por isso bloqueia e da o erro que citei. Não testei com outros navegadores, tente instalar o navegador Google Chrome e use a extensão “Allow CORS: Access-Control-Allow-Origin”, deixe-a ativada e então entre na página do meu programa:
https://editor.p5js.org/willianxz/full/DLk9uXnJx
O bom de você está vendo esse problema é que você já vai reconhecer quando tiver alguma dificuldade com o uso de API, por que isso ocorre por conta do servidor que fornece os dados de API, muitas vezes nós desenvolvedores precisamos implementar um sistema que faz o consumo de dados de API, onde muitas vezes é uma API externa não produzida por nós… por isso te digo que vale a pena você correr atras disso, de ter um navegador com extensão de CORS instalado para testar seus próprios programas quando você for fazer algo do tipo.
Segundo a referencia do P5.JS isso ocorre pelo seguinte motivo:
“O caminho para a imagem deve ser relativo ao arquivo HTML vinculado ao seu esboço. O carregamento de uma imagem de um URL ou de outro local remoto pode estar bloqueado devido à segurança interna do seu navegador.”
Em conjunto com isso, o servidor da API deve fornecer uma permissão de GET para todos, mas o que ocorre é que algumas APIS não emitem o cabeçalho, resultando nisso… onde nós temos que usar uma extensão de CORS para implementar nosso código e ver funcionar. Até hoje não entendi o motivo de se ter esses impedimentos, mas tenho certeza que é por causa da segurança da informação…o problema é que dificulta pra nós kk
