How to make a loading icon with an svg file p5.js (Access to Image at '' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access

p5.js Beginners
1

idk how to load the svg file. When i try i get a “Access to Image at ‘’ from origin ‘null’ has been blocked by CORS policy: Invalid response. Origin ‘null’ is therefore not allowed access.”
If svg filetypes aren’t supported can someone at least tell me where I can convert the file into a gif or sequence of png’s (and use that to make a loading icon)?
Here is the svg loader im trying to use.

var img;
var loadicon;
var loading = true;

function doneLoading(){
 loading = false;
}

function setup(){
 var cnv = createCanvas(windowWidth, windowHeight);
 cnv.style('display', 'block');
 cnv.class('cnv');
 noStroke();

 //have to use link to load image not a local file
 img = loadImage('https://raw.githubusercontent.com/petercpark/Mindless-Rubik-s-Cube-Solution/master/rubikscube.png', doneLoading);
 loadicon = loadImage('loading.svg');
}

function draw(){
 if(loading){
 image(loadicon, width/2, height/2);
 }

 else {
 //stuff that i run
 }
}
1 Like
2

How are you running this code? What url are you using to access your sketch?

1 Like
3
  1. Forum.Processing.org/two/discussion/18851/load-an-svg-to-a-p5-sketch
  2. Forum.Processing.org/two/discussion/19708/load-svg-file
  3. Forum.Processing.org/two/discussion/21747/p5-js-svg-image-array-loading-problem-please-help
  4. Forum.Processing.org/two/discussion/23839/access-shape-classes-of-svg-on-p5-canvas-with-css
  5. Forum.Processing.org/two/discussion/24698/change-the-colour-of-an-svg-and-draw-onto-canvas
2 Likes
4

Please fix your title. The title is to summarize your problem. You write a description in the body of your message.

Your loading logic is backwards. It should be false when init and set to true when doneLoading() is called.

Kf

1 Like
5

If you are using chrome try using firefox.

1 Like
6 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
    <title>Mindless.</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
    
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <style> body {padding: 0; margin: 0;} </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>

  </body>
</html>
7

does it work in firefox?

8

Yes it does but I wanted it to also run in Chrome so I changed the svg into a gif somehow and put it on a Github repository and used the link of the gif image from Github to host the image file and load it into my site.