title: Javascript loadImage not loading image
body: <p>I'm forking Louis Hoebregts's brilliant <a href="https://codepen.io/Mamboleoo/pen/GRJKoBw" rel="nofollow noreferrer">Flowing Image on code pen</a>, &amp; attempting to get to modify it for my own art.</p>
  <p>UPDATE: as suggested by commentators, I looked at the Chrome Dev console, it complains:</p>
  <pre><code>Fetch API cannot load file:///C:/Users/Sam/Downloads/flowing-imagehow-to/flowing-imagehow-to/dist/rowling-dark-bg.jpg. URL scheme &quot;file&quot; is not supported.
  </code></pre>
  <p>I tried removing dashes from the image file name but to no avail.</p>
  <p>If I use a web URL that complains</p>
  <pre><code>Access to fetch at 'https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  </code></pre>
  <p>but I want a relative file path anyway, I want to load an image locally.  Any help pointing me to what I need to do appreciated.</p>
  <p>JAVASCRIPT:</p>
  <pre><code>let img;
  const detail = 6;
  let particles = [];
  let grid = [];
  let particleImage;
  let ctx;
  function preload() {
    img = loadImage('**https://pottertour.co.uk/blog/images/rowling/rowling-dark-bg.jpg**');
  }
  
  class Particle {
    constructor (x, y) {
      this.x = x || random(width);
      this.y = y || random(height);
      this.prevX = this.x;
      this.speed = 0;
      this.v = random(0, 0.7);
    }
    
    update (speed) {
      if (grid.length) {
        this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97;
      }
      this.x += (1 - this.speed) * 3 + this.v;
      
      if (this.x &gt; width) {
        this.x = 0;
      }
    }
    
    draw () {
      image(particleImage, this.x, this.y);
    }
  }
  
  /* ====== STEP 1 ====== */
  function step1 () {
    clear();
    noLoop();
    image(img, 0, 0, width, height);
    noFill();
    stroke(120);
    strokeWeight(1);
    strokeCap(SQUARE);
    ctx.globalAlpha = 1;
    for (let y = 0; y &lt; height; y+=detail) {
      for (let x = 0; x &lt; width; x+=detail) {
        rect(x + 0.5, y + 0.5, detail, detail);
      }
    }
  }
  ...
  function setup () {
    const canvas = createCanvas(100,100);
    ctx = canvas.drawingContext;
    
    pixelDensity(1);
    
    particleImage = createGraphics(8, 8);
    particleImage.fill(255);
    particleImage.noStroke();
    particleImage.circle(4, 4, 4);
    
    windowResized();
    document.querySelector('#step').addEventListener('input', () =&gt; {
      if (window['goToStep' + step.value]) {
        window['goToStep' + step.value]();
      }
      draw();
    });
  }
  
  function windowResized () {
    const imgRatio = img.width/img.height;
    if (windowWidth/windowHeight &gt; imgRatio) {
      resizeCanvas(floor(windowHeight * imgRatio), floor(windowHeight));
    } else {
      resizeCanvas(floor(windowWidth), floor(windowWidth / imgRatio));
    }
    noiseSeed(random(100));
    if (window['goToStep' + step.value]) {
      window['goToStep' + step.value]();
    }
    draw();
  }
  
  const texts = document.querySelectorAll('section p');
  function draw () {
    window['step' + step.value]();
    
    texts.forEach(text =&gt; text.style.display = 'none');
    texts[step.value - 1].style.display = 'block';
  }
  </code></pre>
  <p>I tried downloading my fork and running it on my computer, under the assumption maybe Codepen doesn't like externally hosted image files, but it didn't work.</p>
  <p>I think the problem is in the Javascript above.  Probably in the setup function?  Is there something there which is fussy about the dimensions of images that the thing loads?  How would I fix that?</p>
  <p>I do apologise, my Javascript is knowledge is presently cow headed, I just hack, Javascript is a holiday from App development for me.</p>
  <p>HTML:</p>
  <pre><code>&lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;6&quot; step=&quot;1&quot; id=&quot;step&quot; value=&quot;1&quot;&gt;
  &lt;section&gt;
    &lt;p&gt;Draw an image and divide it into a grid&lt;/p&gt;
    &lt;p&gt;Get the brightness of every cell&lt;/p&gt;
    &lt;p&gt;Draw particles moving from left to right&lt;/p&gt;
    &lt;p&gt;Update each particle's speed based on the brightness of its position&lt;/p&gt;
    &lt;p&gt;Fade each particle based on its speed&lt;/p&gt;
    &lt;p&gt;Do not clear your scene on each frame, to let the particles fade out&lt;/p&gt;
  &lt;/section&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>body {
    margin: 0;
    overflow: hidden;
    display: flex;
    height: 100vh;
    background: black;
  }
  canvas {
    margin: auto;
    touch-action: none;
  }
  
  @mixin track {
    box-sizing: border-box;
    height: 6px;
      background: #fff;
    -webkit-appearance: none;
    appearance: none;
  }
  
  @mixin thumb {
    box-sizing: border-box;
      width: 30px;
    height: 30px;
      border-radius: 50%;
      background: #fff;
    border: 2px solid black;
    -webkit-appearance: none;
    appearance: none;
    cursor: grab;
  }
  
  input {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 80%;
    height: 34px;
    max-width: 400px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    &amp;:active {
      cursor: grabbing;
    }
    &amp;::-webkit-slider-runnable-track {@include track }
      &amp;::-moz-range-track { @include track }
      &amp;::-ms-track { @include track }
    
    &amp;::-webkit-slider-thumb {margin-top: -12px;@include thumb}
      &amp;::-moz-range-thumb { @include thumb }
    &amp;::-ms-thumb {margin-top:0px;@include thumb}
  }
  
  section {
    box-sizing: border-box;
    font-size: 30px;
    color: white;
    position: fixed;
    left: 0;
    top: 20px;
    width: 100%;
    text-align: center;
    padding: 10px 10%;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black;
    background: rgba(0, 0, 0, 0.7);
    p {
      margin: 0;
    }
    @media (max-width: 500px) {
      font-size: 24px;
    }
  }
  </code></pre>