소개

Processing의 어플리케이션으로부터 실행할 때는, 서버를 마음대로 세워 주고, p5.js 공식에서는 Web상에서 스케치가 걸리므로, 이 에러가 나오는 사람은, 로컬로 실행하고 싶은 변태 정도 밖에 있을지도 모릅니다 하지만 그 대책을 쓰고 싶습니다.
나는이 오류가 나와 시간을 녹였기 때문에 여러분은 이런 방식으로 시간을 녹이지 마십시오.

CORS 오류

CORS 오류는 p5.js를 로컬로 실행하고 이미지를 읽을 때 나오는 오류입니다.
브라우저의 보안 대책으로서 짜넣어지고 있는 것으로, 안전을 위해서는 어쩔 수 없는 것.
브라우저의 보안 자체를 끄고 오류를 방지하는 방법 도 있습니다만, 별로 추천할 수 있는 방법은 아닌 것 같아요.
역시 로컬로 서버를 세우는 것이 제일인 것 같습니다.

p5.js 공식 Wiki에서

여기를 보면 한발입니다.
Local server · processing/p5.js Wiki
하지만 영어이므로 일단 설명 넣습니다.

Chrome Extension 넣기

가장 간단한 것은 이것입니다. 이것을 사용합시다. 환경 설정에 시간이 걸릴 필요가 없습니다.

첫째, Web Server for Chrome 에 액세스 하 고 재밌게 설치.
그 후, 기동하면 이런 화면이 나옵니다.


이 CHOOSE FOLDER를 선택하고 p5.js의 스케치가 있는 폴더를 선택합니다.
스케치가 여러 개 있는 경우에는 해당 폴더를 포함하는 계층 구조의 폴더를 선택해도 괜찮습니다.

그런 다음 웹 서버가 STARTED인지 확인한 다음 웹 서버 URL http://127.0.0.1:8888 등을 작성한 곳을 클릭하십시오.
그러면 로컬 서버가 시작되고 스케치를 볼 수 있습니다.

기타 방법

Python SimpleHTTPServer를 사용하는 방법이나 Node http-server를 사용하는 방법이 Wiki에는 쓰여 있습니다만, 솔직히 Chrome Extension이 너무 즐겁게 시험할 생각이 없어졌으므로, 그쪽을 사용하고 싶은 분은 Wiki를 읽어 주세요.

결론

재미 p5.js 생활을!